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

Exercise 3: Adding application logic to the SVG User Interface

 

In this exercise we show how to use the Visual Mobile Designer to create and implement the application logic for the UI we created in the previous excercise. We will use some additional components and methods and finish by running the application in the Sun Java Wireless Toolkit 2.5.2 emulator.

---

Background Information

 

Let's describe the things we will use in this exercice. The first is the SVG ListModel. This interface defines the methods components like the one SVGList uses to get the value of each cell in a list and the calculate the number of cells needed to display it. Logically the model is a vector, indices vary from 0 to ListDataModel.getSize() - 1. Any change to the contents or length of the data model must be reported to all of the SVGListDataListeners. If you are familiar with Swing's JList model, the SVGListModel should be easy to understand.

We also have to understand how the Entry Point component works. The Entry Point component allows us to represent a method in a designed class. The method contains code specified by an action assigned to it, the "Entry Called" pin. This method is very useful when it is is necessary to execute code when switching between application screens, or in our case, to show the SVGButton logic in the Flow view of a Visual Midlet.

---

Steps to Follow

 
Step 1 Creating a Custom SVGList Model.

In this step we are going to create our own implementation of SVGListModel. Our implemention of SVGListModel is an anonymous class inside of the getSvgList method.

1. Use the Navigator (Ctrl+7 if it is not already displayed) to find the getSvgList element under the employeeList component by right-clicking and choosing Got To Source from contextual menu.
2. Inside of the getSVGList method add the folowing code snippet which contains an implementation of the ListModel interface as an anonymous class.

You can use the code completion feature in the IDE to create the code in the screenshot below, or use this code snippet and paste it into the editor. After pasting the code, right-click in the Source view window and choose Fix Imports from the contextual menu.

Step 2: Next and Previous Button Logic

In this step we will add logic for the SVGButtons which are a part of the employeeForm. These buttons should allow application users to browse through employee data. By clicking Next, the user should be able to jump to the next Empoloyee Contact. By pressing the Previous button, the user should see the previous employee record. In this step we are going to use the Entry Point element which we described at the begining of this exercise.

1. Switch to to the Flow view and add two Entry Point components from the Flow category of the Palette. Right-click on the components and rename them to Next and Previous as shown below:



2. Now we have to add a global private integer property index to the Visual MIDlet. Let's switch to the Source view and add the following under the Generated Fields section of code that in a guarded block:



Note: When using the Visual Mobile Designer to create mobile applications a lot of code is generated in guarded blocks that cannot be edited. These guarded blocks are displayed unexpanded with a dark gray background in the source editor.

3. Now we must add logic to update the UI in the employeeForm. The method we use here updates the SVG UI elements in the employeeForm component. In the Source editor at the end of the class add the following method:

   Note: you can use the IDE's code completion feature to reproduce the code in the screenshot below, but you can also use this code snippet and paste it into the editor.



Now we can start adding logic to the nextMethod and previousMethod

4. Switch to the Flow view and right-click on the nextMethod Entry Point and choose the Go To Source option from the contextual menu.
5. In Source editor add the folowing code to the method "nextMethod()". This code displays the next record in the queue of the employee data records. It also invokes the UI to update the information displayed.



6. Repeat the two steps above for the previousMethod to enable the data browsing functionality to work.



Next we need to make sure that the UI will be updated when employeeForm and set global index based on a selection done in in the employee list.

7. Switch to the Flow view and right-click the select button in the employeeList and choose Go To Source from the contextual menu.
8. In the Source editor add the following code to the method getSelect() :

Step 2: Verifying the Next and Previous Button Logic

We are ready to test our application in a Java ME device emulator. We are going to use the Sun Java Wireless Toolkit 2.5.2 DefaultColorEmulator that comes bundled in the NetBeans IDE installer.

1. Press F6 to launch the appliction or press the green "Play" button on the toolbar which will trigger the Run Main Project action.
2. After the project launches in the emulator you can see the list of employees. To change the selected entry use the UP and DOWN keys on the emulator keypad. To make a selection inside the selected components use the LEFT or RIGHT button.

>

---

Summary

In this exercise we learned how to use the Visual Mobile Designer to implement application logic to support the UI we created in the previous excercise. We utilized the Entry Method and learned how to implement a custom SVG ListModel. We finished by testing our application in the Sun Java Wireless Toolkit 2.5.2 DefaultColorPhone emulator.

In the following exercise, we will test the application UI in the emulator with touch-screen capabilities turned on by modifying the properties file in the WTK.

 

Back to top
Next exercise