touch

Creating a Touch Enabled SVG UI for Java ME Devices

This tutorial shows you how to develop rich UI's for Java ME based touch screen devices using SVG UI widgets. The

rapidly growing number of Java ME based touch screen devices like the Samsung Omnia and Instinct, Nokia 5800 Xpress

Music or Blackbery Storm make developing for these devices required reading for any serious mobile application

developer. The application created in this tutorial works on most devices that support the SVG API for J2ME (JSR226)

since Rich SVG UI widgets are also supported by devices without touch screens.

Contents

Tutorial Requirements

Getting the Project Environment Set Up

Creating the UI in the SVG Composer

Using the Visual Mobile Designer to Create the Application Flow

Adding Application Logic to the UI

Testing the Application in A Touch Screen Device Emulator

Summary

Requirements

To complete this tutorial, you need the following software and resources:

Software or Resource Version Required

NetBeans IDE with Java ME Version 6.7 or later

Java Development Kit (JDK) Version 6

Contact Browser Project NetBeans project

SVG UI Snippets NetBeans plugin

To ensure that the Java ME features are enabled, we recommend performing a Custom Installation and unchecking

the Features on Demand component during installation of the IDE.

Getting the Project Environment Set Up

In addition to the required software listed above you should have the following installed on your computer:

The ContactBrowser.zip file should be unzipped into your NetBeans project folder.

The SVG snippets plugin should be downloaded and installed into NetBeans:

In the IDE go to Tools > Plugins. Click the Downloaded tab and click Add Plugins.1.

Navigate to the local folder containing the svg-snippets.nbm file, select the file and click Open.2.

Click Install and the IDE will guide you through the plugin installation. After the plugin is installed, you must

restart the IDE.

After restarting the IDE, go to Tools > Options. Click Miscellaneous in the Options dialog window then click the

SVG tab.

In the SVG Rich Components Snippets section open the Snippets drop down menu and choose J1 HOL SVG

Snippets. Click OK.

Creating a Touch Enabled SVG UI for Java ME Devices - NetBeans ID... http://netbeans.org/kb/68/javame/svgtouch.html?print=yes

1 de 19 10/04/2012 17:46

Creating the UI in the SVG Composer

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. 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.

Background Information

SVG: JSR-226 specifies the API for rendering scalable, two-dimensional vector graphics in XML. Instead of encoding the

contents of each pixel like the GIF and JPG formats, vector graphics contain only the drawing instructions for each pixel.

This gives vector images several advantages:

They are scalable, so the image quality remains the same on displays of different sizes and resolutions. You can

also stretch, flip, or reverse an image without losing quality.

They support scripting and animations, so they are ideal for interactive, data-driven graphics.

They are compact. Vector-based images can be as much as ten times smaller than an identical image in GIF or

JPEG format. This important advantage makes it possible to create graphically rich applications for handheld

devices with limited resources.

They allow users to interact with image content.

They are searchable, allowing users to search for text within the image. For example, users can search a map for

specific street names, or search a list of restaurant menus for their favorite dish.

A full-featured subset of SVG aimed toward mobile devices is called SVG-Tiny and JSR-226 adopts version 1.1 of the

SVG-Tiny profile as the official file format for J2ME vector graphics.

Introduction to SVG widgets and their function.

Creating User Interfaces is made easier using the SVG Composer and SVG Form Rich UI Components in NetBeans.

Overview of the SVG UI snippets available in the SVG Composer palette:

SVG List - Allows developer to create a list of UI elements needed for the UI.

SVG Radio Button - In the SVG snippets we are using this allows user to select gender.

SVG Combo Box - UI component for drop down list menus.

SVG Text - A field where text such as names of people, product ID's, etc can be displayed.

SVG Button - Buttons are used for Next, Previous, OK and other UI functions.


2 de 19 10/04/2012 17:46

SVG Spinner - Enables user to scroll through a variable using Up and Down button.

SVG Slider - Allows user adjust a variable feature. For example, from light to dark, or 0-100%

SVG Label - Lets User Label a text field or other UI component.

This was only a streamlined introduction to the SVG UI Rich Components. For more details, please see the in the

Netbeans Visual Mobile Designer Wiki page.

Steps to Create the SVG UI

To get us started quickly we will begin by opening the prepared ContactBrowser project that we use as a foundation to

create the project.

Open the prepared ContactBrowser Java ME project in NetBeans 6.7 IDE.

Overview of the ContactBrowser project

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.

2.


3 de 19 10/04/2012 17:46

Below is the completed form with the following components added:

2 x Buttons

1 x List

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.


4 de 19 10/04/2012 17:46

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.

4.

Added components

3 x Buttons

4 x Labels

2 x Text Fields

1 x Radio Button

1 x Spinner


5 de 19 10/04/2012 17:46

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.

5.

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


6 de 19 10/04/2012 17:46

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.

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.

1.

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.

2.

The next step is to connect the SVG images to the source code. To connect the SVG UI components to the source3.


7 de 19 10/04/2012 17:46

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.

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.

4.

In next step we have to change the default SVG Labels for the buttons and text fields to match the information5.


8 de 19 10/04/2012 17:46

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.

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.

6.

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.

7.


9 de 19 10/04/2012 17:46

Using the Visual Mobile Designer to Create the Application Flow

Now we are ready to create the application flow using the Flow view of Visual Mobile Designer.

Switch from the Screen to the Flow view in the IDE.1.

Connect the components as they are shown below. 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.

2.


10 de 19 10/04/2012 17:46

In the Source view you can see the mechanism that binds the 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.

Running the Application

Before we add the application logic we should test the Contact Browser UI on the emulator.

In the menu choose Run Main Project (F6) and after the 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.

Please note that the UI displays the same way no matter which emulator is bundled in your installation of NetBeans. For

6.5 and non-Windows users of the 6.7 IDE, the Sun Java Wireless Toolkit 2.5.2 is bundled in the IDE. The Windows


11 de 19 10/04/2012 17:46

distribution of 6.7 is bundled with the Java ME SDK 3.0.

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

Adding application logic to the SVG User Interface

Now we can use the Visual Mobile Designer to create the application logic for the UI we created in the previous step. We

will use some additional components and methods and finish by running the application in the Java ME SDK 3.0

emulator.

Background Information

SVG ListModel: This 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.

Entry Point component: 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.


12 de 19 10/04/2012 17:46

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.

1.

Inside of the getSVGList method add the folowing code (highlighted in the red box) which contains an

implementation of the ListModel interface as an anonymous class.

2.

You can use the code completion feature in the IDE to create the code in the screenshot below.

Next and Previous Button Logic

In this step we will add logic for the SVGButtons which are a part of the employeeForm. These buttons allow application

users to browse through employee data. By clicking Next, the user can 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 earlier.

Switch to to the Flow view and add two Entry Point components from the Flow category of the Palette. Right-click1.


13 de 19 10/04/2012 17:46

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 guarded block:

2.

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.

3.


14 de 19 10/04/2012 17:46

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.

4.

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.

5.

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.

6.

Switch to the Flow view and right-click the select button in the employeeList and choose Go To Source from the7.


15 de 19 10/04/2012 17:46

contextual menu.

In the Source editor add the following code to the method getSelect() :8.

Testing the Application in A Touch Screen Device Emulator

We are ready to test our application in a Java ME device emulator. We can use either the Java ME SDK 3.0

DefaultFxTouchPhone1 that comes bundled in the NetBeans 6.7 IDE installer or the Sun Java Wireless Toolkit 2.5.2

that is bundled with non-Windows and earlier distributions of the IDE. In order to launch the application in the Java ME

SDK 3.0 or other touch screen device emulator we need edit the the Project Properties.

Right-click the Project node and choose Properties from the contextual menu. In the Project dialog under Category

choose Platform then select Java Platform Micro Edition SDK 3.0 from the Emulator Platform drop down menu.

1.

For touch screen device emulation select DefaultFxTouchPhone1 from the Device drop down menu as shown below

and click OK.

2.


16 de 19 10/04/2012 17:46

Go to Run > Run Main Project (F6) and the application launches in the emulator. You can verify that touch screen

properties are enabled by placing the mouse pointer over the SVG Components. The mouse cursor will appear as a

cross and can be moved around the screen to navigate the application menus as a user would do with their

fingertip.

3.

In the emulator we can perform some basic UI tests such as using the Previous or Next button to verify that the

UI elements are working properly.

4.


17 de 19 10/04/2012 17:46

Enabling Touch Screen Behavior in the WTK 2.5.2 Emulator

To activate touch screen emulation in the WTK we have to modify the DefaultColorPhone configuration properties file.

The properties file that we need to modify is DefaultColorPhone.properties

Go to the folder WTK_HOME_FOLDER\wtklib\devices\DefaultColorPhone and locate the configuration file

DefaultColorPhone.properties

1.

Troubleshooting Tip: You can find the directory location of the WTK by checking the Project Properties of the SVG

application we created.

Open the DefaultColorPhone.properties using a text editor and change the value of property touch_screen

to "true."

2.

Note: If you are using the Java ME SDK 3.0 it is not necessary to modify the properties file to enable touch screen

emulation.


18 de 19 10/04/2012 17:46

Send Us Your Feedback

After restarting the WTK you can test the application in a touch enabled enviroment.3.

Summary

In this tutorial you learned how to create an SVG-based, touch screen enabled UI for Java ME devices using the NetBeans

IDE.

See Also

Rich SVG UI Components Reference

Rich SVG UI Application

Using SVG Rich UI Components

Reference: Visual Mobile Designer Palette Guide

NetBeans Java ME Applications Learning Trail


19 de 19 10/04/2012 17:46

touch

Technology

svg list

svg widgets

svg images

svg api

svg label

touch enabled svg ui

svg technology

svg composerusing