GUI Design with NetBeans Mobility Pack for CDC

Creating user interfaces with NetBeans Mobility Pack 5.5 for CDC is made easier thanks to Project Matisse, the NetBeans GUI Builder. This document shows you how to create a login screen for CDC devices using two of the emulators available for the Mobility Pack for CDC. The Nokia and Sony Ericsson emulators included in their respective SDK's both use the AWT-based JSR-62 standard for Personal Profile 1.0. Device support for AGUI-backed SWING as defined in JSR-209 is still limited, but for this demonstration the Sun Java Wireless Toolkit emulator bundled with the CDC pack is sufficient. It's important to understand that AGUI and Personal Profile have nearly identical capabilities for creating GUI's. The reason for using one or the other depends on which device your application is deployed on.

Requirements

Hardware, software, and operating system requirements are detailed in NetBeans Mobility Pack 5.5 for CDC Release Notes.

For help installing the required software, please check the Mobility Pack 5.5 for CDC Installation Guide.

If you have not previously used the CDC Pack, we recommend reading NetBeans for Mobility Pack for CDC 5.5 Quick Start Guide.

The Sun Java Toolkit for CDC is integrated into NetBeans Mobility Pack for CDC and its emulator supports AGUI. However, to use Personal Profile 1.0 for CDC GUI design you need to download and install either the Sony Ericsson or Nokia SDKs. Information about installing these to work with the Mobility pack for CDC can be found in the Mobility Pack 5.5 for CDC Installation Guide.

Sony Ericsson
- UIQ 3 SDK (login required for download)
- M600 Extension Package for the UIQ 3 SDK Beta 3 (download)
- P990 Extension Package for the UIQ 3 SDK Beta 3 (download)
Nokia
- Nokia Series 80 Platform SDK for Symbian OS, for Java, Personal Profile (download)

Creating a Login Screen with AGUI

In this section we create a simple user interface using the Xlet application component and Advanced Graphic User Interface (AGUI) which was described previously.

Creating the Project

Choose File > New Project (Ctrl-Shift+N) from the main menu. The New Project wizard appears.
Select the CDC Application template from the CDC category and click Next.
Specify the Sun Java Toolkit 1.0 for Connected Device Configuration as the Java Platform for the project. Once you have set the platform, the IDE sets the value for Device to DefaultColorPhone and for Profile to AGUI-1.0. Click Next.

Name your application cdcaguilogin and click Finish to create the project.

Creating the Login Screen

When the project is created JFrame is the component used. Since we are using the AGUI profile we want to use the AGUI Xlet component because of better compatibility between AGUI and Xlets than with JFrame. After changing that we will set Xlet as the Main method.

In the Projects window, right-click the node for the Main file and choose Delete.
Right-click the cdcaguilogin project node and choose New > AGUI Xlet Form.
Name the file LoginScreen and click Finish.
In the Projects window right-click cdcaguilogin and select Properties.
In the Categories window of the Project Properties dialog box select Run.
Click the Browse button. The Browse Main Classes dialog box appears with the LoginScreen file selected. Click the Select Main Class button. Click the OK button to finish.
Use the GUI Builder to build the login screen.

To see a short Flash demo on how to create the login screen, click the image below.

Now we can begin by expanding the Palatte window on the right side.

Drag the JLabel item from the Palete window into the layout manager window. Double-click the Jlabel item and rename it Username.
Drag one more Jlabel item so that it aligns below the Username label we just created. Double-click the Jlabel item and rename it Password.
Drag the JTextField item so that it aligns with the Username field. Double-click the JTextField item and remove the text so that the field is empty.
Drag the JPasswordField item so that it aligns with the Password field.
Drag the JButton item from the Palette window into the layout manager window and align it under the Password field. Double-click the JButton item and rename it Login.
Now choose Build > Build Main Project (or F11) to build the project to make sure everything is working.

Creating an Event Handler for the Login Button

We need to create an event handler for the Login button to function correctly. Here's how we add this functionality to the button.

Right-click the Login button and chose Events > Action > actionPerformed.
The IDE switches to Source view. Replace the sample // TODO add your handling code here: with the following: System.err.println("Login Successful");
Choose Run > Run Main Project (F6) from the main menu to display the login screen in the emulator.
Clicking the emulator's Login button prints the "Login Successful" message in the IDE Output window.

Creating a Login Screen with Personal Profile 1.0 Using Nokia's Series 80 Device Emulator

In this section we create the same user interface as in the first example, but we'll use AWT and Personal Profile 1.0 to build the project instead. Remember that the main difference between the two options is in the underlying technology rather than their capabilities.

Creating the Project

Choose File menu > New Project (Ctrl-Shift+N) from the main menu. The New Project wizard appears.
Choose the CDC Application template from the CDC category and click Next.
In this example we want to specify the Nokia S80 CDC S80_DP2.0_PP_SDK as the Java Platform. Once you have set the platform, the IDE sets the value for Device to S80 CDC S80_DP2.0_SDK and for Profile to PP-1.0. Click Next.
Name your application cdcpplogin and click Finish to create the project.

Note: If you are using the Sony Ericsson UIQ 3 SDK Emulator, the steps in this section of the tutorial work the same as they do for the Nokia S80 SDK and the same options should be chosen. The main difference is that a different emulator appears when the project is run.

Creating the Login Screen

Our first task in this project is to change the layout style to Free Design which is what that the NetBeans GUI Builder uses.

In the Inspector window, Right-click the Frame node and choose Set Layout > Free Design.
Drag the Label item from the AWT section of the Palette window into the Design view of the GUI Builder. Because AWT components do not support in place editing we have to change the Label display text in the Properties window. Change the text property to read Username.
Repeat the above step to create a label for the Password field.
Drag the TextField item so that it aligns next to the Username label we just created. Use the same method described above to edit the value of the text field. This time we want to make the field empty for both the Username and Password TextFields.
After emptying the text fields they are too small, but we can easily correct this problem by dragging the right edge of the fields to a user friendly width of about 2cm.
Drag the Button item from the AWT window into the Design view and align it under the password field. In the Properties window find the label field and use the same method as above to rename the display text to Login.

Creating an Event Handler for the Login Button

We need to create an event handler for the Login button to function correctly. Here's how we add this functionality to the button.

Right-click the Login button and chose Events > Key > KeyPressed
The IDE switches to Source view. Replace the sample // TODO add your handling code here: with the following: System.err.println("Login Successful");
Choose Run > Run Main Project (F6) from the Run menu.
Clicking the emulator's Login button prints the "Login Successful" message in the IDE Output window.