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

Expected Duration: 100 minutes
Contacts: Karol Harezlak Lukas Hasik Brad Schmidt

Introduction | Exercise 0 | Exercise 1 | Exercise 2 | Exercise 3 | Exercise 4 | Summary
Introduction Background Information Steps to Follow Summary ## 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. 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. 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. 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: 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. 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 Switch to the Flow view and right-click on the `nextMethod` Entry Point and choose the Go To Source option from the contextual menu. 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. 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. Switch to the Flow view and right-click the select button in the `employeeList` and choose Go To Source from the contextual menu. 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. Press F6 to launch the appliction or press the green "Play" button on the toolbar which will trigger the Run Main Project action. 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