Lab-5539: Touch your application! - Building slick, touch-enabled UIs for Java ME

Exercise 2: Create an Application UI with SVG Rich Components

 

This exercise provides a streamlined introduction to the SVG UI Rich Components. For more details, please see the in the Netbeans Visual Mobile Designer Wiki page.

In this exercise we are going to build a basic SVG-based application UI. Though the application is quite simple, it will show you how to create a new Java ME application, how to import SVG images from the SVG Composer into a visual MIDlet and how to run the project on a MIDP device emulator.

---

Background Information

 

Introduction to the NetBeans Visual Mobile Designer

 
One of the key features of NetBeans is the mobile application development support provided by the Visual Mobile Designer. This tool enables rapid design and development of mobile applications (MIDlets) by letting users drag-and-drop components into a Screen Designer, where the developer designs the individual UI screens, and the Flow Designer where the developer specifies how the individual screens are connected together by defining the application flow. The Visual Mobile Designer automatically generates compact Java code, which can be further enhanced manually in the source code editor. In NetBeans 6.5 a new feature was introduced that enables developers to create UIs with SVG technology in a way similar to Java SE Swing. To get us started quickly we will begin by opening a prepared ContactBrowser project that we will add to in the following excercises.

---

Steps to Follow

 

Step 1: Open the prepared ContactBrowser Java ME project

1. If NetBeans is not already running, start it.
2. When the IDE has started, select File->Open and then locate and open the ContactBrowser project.

   

3. Overview of the ContactBrowser project

   

 

Step 2: Create an SVG UI using the SVG Composer

In this step we will use the SVG Composer to create an SVG UI by editing SVG images and adding the additional UI Components our application needs.

1. Open the employeeList.svg image in the SVG Composer and drag and drop two SVG Buttons and one SVG List Form Component into the Preview canvas from the palette as shown below. We will rename the buttons later in the exercise.

   Troubleshooting Tip: to align the buttons and other SVG components into the correct positions, click on the component, then click the orange upward pointing arrow as shown below. Sometimes its necessary to click on the arrow twice to make sure the entire component is selected, not just one part.

   

• Below is the completed form with the following components added:
• 2 x Buttons
• 1 x List



2. In the Preview window click the text in the OK button in the upper right and drag it to the left as shown in the screenshot below. This will allow the word "Select" to display correctly on the UI button.



3. Our SVG UI needs an additional SVG File, employeeForm.svg, so again we open the file, and add the buttons, text fields, labels and buttons from the palette onto the image in the SVG composer and rename them to create the UI. When finished, it should look something like the image below.
• Added components
• 3 x Buttons
• 4 x Labels
• 2 x Text Fields
• 1 x Radio Button
• 1 x Spinner







4. In the Preview window click the text of the OK button on the lower left and drag it to the left as shown in the screenshot below. This will allow the word "Previous" to display correctly on the UI button.

Step 3: Creating a MIDlet in Visual Mobile Designer

The SVG Rich UI components framework is split into two parts:

• SVG Snippets are used to build the UI in the SVG Composer or other SVG editor
• Java ME libraries that support the UI functionality

We have already covered the SVG Composer and snippets, so our next step is to look at the runtime libraries in the Visual Mobile Designer which help to merge the SVG images with the application logic in the Java ME source code.

1. To create new a Visual MIDlet select File->New File and then in New File window under Categories choose MIDP and in File Types choose Visual MIDlet. The new file should be part of org.netbeans.lab.ui.svg package.

   
   

   

2. Inside of the newly created MIDlet switch to the Flow view. Find the SVG Components section of the Palette then drag and drop two SVG Form components onto the design canvas of the Flow view and use the right-click contextual menu to rename them employeeForm and employeeList.
   

   

3. The next step is to connect the SVG images to the source code. To connect the SVG UI components to the source code we just drag and drop the employeeList.svg file from the Project window onto the employeeList component and repeat this action for the employeeForm.svg by dragging it onto the employeeForm.
   

   

4. Now we have to change the instance name of the svgButtons to correspond with the actions they perform. Note that this does not change the button UI, we will do that later. To change the instance name of the svgButtons right-click on the button and select Rename from the contextual menu. Type the action name you want for the svgButtons instance in the New Name field of the Rename Instance Name dialog.
   

   Tip: be sure that the new name corresponds to the UI button's function when changing the instance names of UI components.

   

5. In next step we have to change the default SVG Labels for the buttons and text fields to match the information displayed by the ContactBrowser application. To do so switch to the Screen view and display employeeForm. Then select the Label item in the Screen view and edit the text properties for each label and button so that they are like the screenshot below.



6. We also need to change the instance name of the SVG text fields. Right-click the First Name and choose Rename from the contextual menu and change the name to svgTextFieldFirstName. Repeat this step for the Last Name field and rename it svgTextFieldLastName.
7. Now in the drop down menu of the IDE project window, switch from employeeForm to employeeList and rename the buttons as shown in the screenshot below. You can see the changes in the Text field of the Properties window.

Step 4: Creating the application flow

Using the Visual Mobile Designer in NetBeans IDE

In this part we are going to create the application flow using the Flow view of Visual Mobile Designer.

1. Switch from the Screen to the Flow view in the application and connect components as they are shown below.

   Tip: Start by clicking Started on the Mobile Device element and drag the mouse to the employeeList element. Repeat this method to make the other component connections.

Source Code Generated by the Visual Mobile Designer

We now have a fully functional SVG-based UI and application flow that's ready to run on the emulator. Before we do that let's look at the source code generated by the Visual Mobile Designer. To see the source code of an application switch to Source view. As you can see on the screen shot below, some parts of source code are in "guarded" blocks, which means that it is not possible to edit these areas within the source code editor. The guarded blocks of source code are generated by actions taken when using the Visual Mobile Designer's Flow, Screen or Screen Designer view.

Next lets look at the mechanism that binds SVG XML UI Component snippets with Java ME runtime libraries. In the example below you can see how the SVG Button snippets are bound to Java ME objects. The SVG Component is recognized based on the XML snippet ID, in this example, it is button_0.

Step 5: Running the Application

Launching the program on the WTK 2.5.2 device emulator

To test the Contact Browser on the emulator make sure that you have the Sun Java Wireless Toolkit 2.5.2 installed and registered in the IDE. You can check this by opening the Tools > Java Platforms menu and verifying that the WTK is in the Platforms window under the J2ME category in the Java Platform Manager dialog.

In the menu Run Main Project (F6) and after emulator launches you can see and test your UI. We have not implemented the application logic yet, but can verify that the UI displays as expected based on the work done in the Visual Mobile Designer.

1. The Employee List and Employee Form displayed in the Wireless Toolkit DefaultColorPhone emulator.

   
   

   

---

Summary

 

In this exercise you created an SVG UI using SVG UI Rich Components. You learned the fundamental uses for the SVG Composer and the Visual Mobile Designer. You also learned how SVG UI Rich Components work and how to run and verify your design in the application emulator.

In the following exercise we will work more with the source code of the application and create the core functionality of Contact Browser application.

 

Back to top
Next exercise