| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
| <!-- | |
| Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. | |
| --> | |
| <html> | |
| <head> | |
| <title>Creating a Touch Enabled SVG UI for Java ME Devices - NetBeans IDE Tutorial</title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > | |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> | |
| <meta name="Karol Harezlak" content=""> | |
| </head> | |
| <body> | |
| <a name="top"></a> | |
| <h1>Creating a Touch Enabled SVG UI for Java ME Devices</h1> | |
| <p>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 (<a href="http://jcp.org/en/jsr/summary?id=226">JSR226</a>) since Rich SVG UI widgets are also supported by devices without touch screens.</p> | |
| <!--<p class="notes"><b>Note:</b> If you are using NetBeans IDE 6.8, refer to the <a href="../../68/javame/svgtouch.html">Creating a Touch Enabled SVG UI for Java ME Devices in NetBeans IDE 6.8</a> tutorial.</p>--> | |
| <h3>Contents</h3> | |
| <img src="../../../images_www/articles/69/netbeans-stamp-69-70-71.png" class="stamp" alt="Content on this page applies to NetBeans IDE 6.9 or later" title="Content on this page applies to the NetBeans IDE 6.9 or later" > | |
| <ul> | |
| <li><a href="#reqs" title="Tutorial Requirements">Tutorial Requirements</a></li> | |
| <li><a href="#setup" title="Getting the Project Environment Set Up">Getting the Project Environment Set Up</a></li> | |
| <li><a href="#svgcomp" title="Creating the UI in the SVG Composer">Creating the UI in the SVG Composer</a> | |
| <ul> | |
| <li><a href="#backinfo" title="Background Information">Background Information</a></li> | |
| <li><a href="#svgintro" title="Introduction to SVG Widgets and Their Function">Introduction to SVG Widgets and Their Function</a></li> | |
| <li><a href="#svgui" title="Steps to Create the SVG UI">Steps to Create the SVG UI</a></li> | |
| <li><a href="#createmidlet" title="Creating a MIDlet in Visual Mobile Designer">Creating a MIDlet in Visual Mobile Designer</a></li> | |
| </ul></li> | |
| <li><a href="#vmdflow" title="Using the Visual Mobile Designer to Create the Application Flow">Using the Visual Mobile Designer to Create the Application Flow</a></li> | |
| <li><a href="#applogic" title="Adding Application Logic to the UI">Adding Application Logic to the UI</a> | |
| <ul> | |
| <li><a href="#background" title="Background Information">Background Information</a></li> | |
| <li><a href="#creatingsvg" title="Creating a Custom SVGList Model">Creating a Custom SVGList Model</a></li> | |
| <li><a href="#nextprevious" title="Next and Previous Buttons Logic">Next and Previous Buttons Logic</a></li> | |
| </ul></li> | |
| <li><a href="#uitest" title="Testing the Application in A Touch Screen Device Emulator">Testing the Application in A Touch Screen Device Emulator</a></li> | |
| <li><a href="#summary" title="summary">Summary</a></li> | |
| <li><a href="#see-also">See Also</a></li> | |
| </ul> | |
| <h2><a name="reqs"></a>Requirements</h2> | |
| <p><b>To complete this tutorial, you need the following software and resources:</b></p> | |
| <table> | |
| <tbody> | |
| <tr> | |
| <th class="tblheader" scope="col">Software or Resource</th> | |
| <th class="tblheader" scope="col">Version Required</th> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE with Java ME</a></td> | |
| <td class="tbltd1">Version 6.9 or later</td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java Development Kit</a> (JDK)</td> | |
| <td class="tbltd1">Version 6 or 7 </td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/ContactBrowserExample.zip">Contact Browser Example</a></td> | |
| <td class="tbltd1">NetBeans project</td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="https://netbeans.org/projects/www/downloads/download/mobility%252Forg-netbeans-modules-mobility-svg-snippets.nbm">SVG UI Snippets</a></td> | |
| <td class="tbltd1">NetBeans plugin</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <p class="notes">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.</p> | |
| <h2><a name="setup"></a>Getting the Project Environment Set Up</h2> | |
| <p> In addition to the required software listed above you should have the following installed on your computer:</p> | |
| <ul> | |
| <li>The <code>ContactBrowser.zip</code> file should be unzipped into your NetBeans project folder.</li> | |
| <li>The SVG snippets plugin should be downloaded and installed into NetBeans: | |
| <ol> | |
| <li>In the IDE go to Tools > Plugins. Click the Downloaded tab and click Add Plugins.</li> | |
| <li>Navigate to the local folder containing the <tt>svg-snippets.nbm</tt> file, select the file and click Install.</li> | |
| </ol></li> | |
| <li>Click Install and the IDE will guide you through the plugin installation. After the plugin is installed, you must restart the IDE. </li> | |
| <li>After restarting the IDE, go to Tools > Options. Click Miscellaneous in the Options dialog window then click the SVG tab.</li> | |
| <li>In the SVG Rich Components Snippets section open the Snippets drop down menu and choose <strong>J1 HOL SVG Snippets</strong>. Click OK. | |
| <p class="align-center"><a href="../../../images_www/articles/71/mobility/svgtouch/ex0_3.png" rel="lytebox" | |
| title="Options dialog box"> | |
| <img src="../../../images_www/articles/71/mobility/svgtouch/ex0_3-small.png" | |
| alt="Options dialog box" border=1></a></p> | |
| </li> | |
| </ul> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <h2><a name="svgcomp"></a>Creating the UI in the SVG Composer</h2> | |
| <p> 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.</p> | |
| <a name="backinfo"></a> | |
| <h3>Background Information</h3> | |
| <p><strong>SVG:</strong> 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: </p> | |
| <ul> | |
| <li>They are <strong>scalable</strong>, 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.</li> | |
| <li>They support <strong>scripting and animations, </strong>so they are ideal for interactive, data-driven graphics.</li> | |
| <li>They are<strong> compact</strong>. 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. </li> | |
| <li>They allow users to <strong>interact</strong> with image content.</li> | |
| <li>They are <strong>searchable</strong>, 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.</li> | |
| </ul> | |
| <p>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. | |
| </p> | |
| <a name="svgintro"></a> | |
| <h3>Introduction to SVG Widgets and Their Function</h3> | |
| <p>Creating User Interfaces is made easier using the SVG Composer and SVG Form Rich UI Components in NetBeans. </p> | |
| <p>Overview of the SVG UI snippets available in the SVG Composer palette:</p> | |
| <ul> | |
| <li>SVG List - Allows developer to create a list of UI elements needed for the UI.</li> | |
| <li>SVG Radio Button - In the SVG snippets we are using this allows user to select gender.</li> | |
| <li>SVG Combo Box - UI component for drop down list menus. </li> | |
| <li>SVG Text - A field where text such as names of people, product ID's, etc can be displayed. </li> | |
| <li>SVG Button - Buttons are used for Next, Previous, OK and other UI functions.</li> | |
| <li>SVG Spinner - Enables user to scroll through a variable using Up and Down button.</li> | |
| <li>SVG Slider - Allows user adjust a variable feature. For example, from light to dark, or 0-100%</li> | |
| <li>SVG Label - Lets User Label a text field or other UI component.</li> | |
| </ul> | |
| <p class="align-center"> <a href="../../../images_www/articles/71/mobility/svgtouch/ex1_2.png" rel="lytebox" | |
| title="SVG UI snippets available in the SVG Composer palette"> | |
| <img src="../../../images_www/articles/71/mobility/svgtouch/ex1_2-small.png" | |
| alt="SVG UI snippets available in the SVG Composer palette" border=1></a></p> | |
| <p>This was only a streamlined introduction to the SVG UI Rich Components. For more details, please see the in the <a href="http://wiki.netbeans.org/MobilityDesignerRichComponents">Netbeans Visual Mobile Designer Wiki</a> page.</p> | |
| <a name="svgui"></a> | |
| <h3>Steps to Create the SVG UI</h3> | |
| <p> To get us started quickly we will begin by opening the prepared ContactBrowser project that we use as a foundation to create the project. </p> | |
| <ol> | |
| <li>Open the prepared ContactBrowser Java ME project in the NetBeans IDE. | |
| <p>Overview of the ContactBrowser project</p> | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/svgtouch/ex2_2.png"></p></li> | |
| <li>Open the <code>employeeList.svg</code> 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 tutorial. | |
| <p>Below is the completed form with the following components added:</p> | |
| <ul> | |
| <li>2 x Buttons</li> | |
| <li>1 x List</li> | |
| </ul> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_3.png" rel="lytebox" | |
| title="Form with two buttons and a list"> | |
| <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_3-small.png" | |
| alt="Form with two buttons and a list" border=1></a> | |
| </p></li> | |
| <li>In the Preview window click the text in the OK button in the upper left 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. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_4b.png" rel="lytebox" | |
| title="Form with two buttons and a list"> | |
| <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_4b-small.png" | |
| alt="Form with two buttons and a list" border=1></a></p></li> | |
| <li>Our SVG UI needs an additional SVG File, <code>employeeForm.svg</code>, 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. | |
| <ul> | |
| <li>Added components | |
| <ul> | |
| <li>3 x Buttons</li> | |
| <li>4 x Labels</li> | |
| <li>2 x Text Fields</li> | |
| <li>1 x Radio Button</li> | |
| <li>1 x Spinner</li> | |
| </ul></li> | |
| </ul> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_4.png" rel="lytebox" | |
| title="SVG components added"> | |
| <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_4-small.png" | |
| alt="SVG components added" border=1></a> | |
| </p></li> | |
| <li>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. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_4a.png" rel="lytebox" | |
| title="Text in the OK button dragged to the left"> | |
| <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_4a-small.png" | |
| alt="Text in the OK button dragged to the left" border=1></a> | |
| </p></li> | |
| </ol> | |
| <a name="createmidlet"></a> | |
| <h3>Creating a MIDlet in Visual Mobile Designer</h3> | |
| <p>The SVG Rich UI components framework is split into two parts:</p> | |
| <ul> | |
| <li>SVG Snippets are used to build the UI in the SVG Composer or other SVG editor</li> | |
| <li>Java ME libraries that support the UI functionality</li> | |
| </ul> | |
| <p>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.</p> | |
| <ol> | |
| <li>To create a new Visual MIDlet, select <tt>File</tt> > <tt>New File</tt> and then in New File dialog box under Categories | |
| choose MIDP and in File Types choose Visual MIDlet. The new file should be part of <tt>org.netbeans.lab.ui.svg</tt> package. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_5.png" rel="lytebox" | |
| title="New File dialog box"> | |
| <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_5-small.png" | |
| alt="New File dialog box" border=1></a> | |
| </p> | |
| </li> | |
| <li>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 <code>employeeList</code> and <code>employeeForm</code>. | |
| <p class="align-center"><a href="../../../images_www/articles/71/mobility/svgtouch/ex2_6.png" rel="lytebox" | |
| title="Two SVG Forms added"> | |
| <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_6-small.png" | |
| alt="Two SVG Forms added" border=1></a></p> | |
| </li> | |
| <li>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 | |
| <code>employeeList.svg</code> file from the Project window onto the <code>employeeList</code> component and repeat this action for the | |
| <code>employeeForm.svg</code> by dragging it onto the <code>employeeForm</code>. | |
| <p class="align-center"><a href="../../../images_www/articles/71/mobility/svgtouch/ex2_8.png" rel="lytebox" | |
| title="SVG UI components connected to the source code"> | |
| <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_8-small.png" | |
| alt="SVG UI components connected to the source code" border=1></a></p> | |
| </li> | |
| <li>Now we have to change the instance name of the <code>svgButtons</code> 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 <code>svgButtons</code> right-click on the button and select Rename from the contextual menu. Type the action name you want for the <code>svgButtons</code> instance in the New Name field of the Rename Instance Name dialog. | |
| <p class="notes"><b>Note:</b> Make sure that the new name corresponds to the UI button's function when changing the instance names of UI components.</p> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_9.png" rel="lytebox" | |
| title="Instance names of svgButtons changed"> | |
| <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_9-small.png" | |
| alt="Instance names of svgButtons changed" border=1></a> | |
| </p> | |
| </li> | |
| <li>In next step we have to change the default SVG Labels for the buttons and text fields to match the information displayed | |
| by the <strong>ContactBrowser</strong> application. To do so switch to the Screen view and display <code>employeeForm</code>. | |
| 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. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_11.png" rel="lytebox" | |
| title="Text propterties for labels and buttons changed"> | |
| <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_11-small.png" | |
| alt="Text propterties for labels and buttons changed" border=1></a> | |
| </p> </li> | |
| <li>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 <code>svgTextFieldFirstName</code>. Repeat this step for the Last Name field and rename it <code>svgTextFieldLastName</code>.</li> | |
| <li>Now in the drop down menu of the IDE project window, switch from <strong>employeeForm</strong> to <strong>employeeList</strong> and rename the buttons as shown in the screenshot below. You can see the changes in the Text field of the Properties window. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_11a.png" rel="lytebox" | |
| title="Buttons' text propterties changed"> | |
| <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_11a-small.png" | |
| alt="Buttons' text propterties changed" border=1></a> | |
| </p> </li> | |
| </ol> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <h2><a name="vmdflow"></a>Using the Visual Mobile Designer to Create the Application Flow</h2> | |
| <p>Now we are ready to create the application flow using the Flow view of Visual Mobile Designer. </p> | |
| <ol> | |
| <li>Switch from the Screen to the Flow view in the IDE.</li> | |
| <li>Connect the components as they are shown below. Start by clicking Started on the <strong>Mobile Device</strong> element and drag the mouse to the | |
| <strong>employeeList</strong> element. Repeat this method to make the other component connections. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_12.png" rel="lytebox" | |
| title="Application flow created"> | |
| <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_12-small.png" | |
| alt="Application flow created" border=1></a> | |
| </p> | |
| </li> | |
| </ol> | |
| <p>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 <code>button_0</code>.</p> | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/svgtouch/ex2_14.png"></p> | |
| <h3>Running the Application</h3> | |
| <p>Before we add the application logic we should test the Contact Browser UI on the emulator.</p> | |
| <p>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.</p> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <h2><a name="applogic"></a>Adding Application Logic to the SVG User Interface</h2> | |
| <p>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.</p> | |
| <a name="background"></a> | |
| <h3>Background Information</h3> | |
| <ul> | |
| <li><strong>SVG ListModel</strong>: 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 <tt>0</tt> to <tt>ListDataModel.getSize() - 1</tt>. 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.</li> | |
| <li><strong>Entry Point component</strong>: 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.</li> | |
| </ul> | |
| <a name="creatingsvg"></a> | |
| <h3>Creating a Custom SVGList Model</h3> | |
| <p> In this step we are going to create our own implementation of SVGListModel. Our implemention of SVGListModel is an anonymous class inside of the | |
| <code>getSvgList</code> method.</p> | |
| <ol> | |
| <li> Use the Navigator (Ctrl+7 if it is not already displayed) to find the <code>getSvgList</code> element under the <code>employeeList</code> | |
| component by right-clicking and choosing Got To Source from contextual menu.</li> | |
| <li>Inside of the <code>getSVGList</code> method add the following code after <code>svgList = new SVGList(getEmployeeList(), "list_0");</code>:<br> | |
| <pre class="examplecode"> | |
| //Creating and adding new SVGListModel as anonymous class. Implementation of ListModel | |
| svgList.setModel(new SVGList.ListModel() { | |
| //Getting contact data as Vector from class EmployeeData | |
| Vector data = EmployeeData.getData(); | |
| /** | |
| * Method returns combination of strings: First Name + Last Name | |
| * @return Employee name as String | |
| */ | |
| public Object getElementAt(int index) { | |
| //Getting First Name String | |
| String firstName = ((Employee) data.elementAt(index)).getFirstName(); | |
| //Getting Last Name String | |
| String lastName = ((Employee) data.elementAt(index)).getLastName(); | |
| return firstName + " " + lastName; | |
| } | |
| /** | |
| * Number of employees | |
| * @return number of employees | |
| */ | |
| public int getSize() { | |
| return data.size(); | |
| } | |
| //not used | |
| public void addDataListener(DataListener listener) { } | |
| //not used | |
| public void removeDataListener(DataListener listener) { } | |
| });</pre></li> | |
| </ol> | |
| <p class="notes"><b>Note:</b> You can use the code completion feature in the IDE and type the code for yourself.</p> | |
| <a name="nextprevious"></a> | |
| <h3>Next and Previous Buttons Logic</h3> | |
| <p>In this step we will add logic for the SVGButtons which are a part of | |
| the <code>employeeForm</code>. 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.</p> | |
| <ol> | |
| <li>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 <tt>nextMethod</tt> and <tt>previousMethod</tt> as shown below: | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex3_1.png" rel="lytebox" | |
| title="SVGButtons flow created"> | |
| <img src="../../../images_www/articles/71/mobility/svgtouch/ex3_1-small.png" | |
| alt="SVGButtons flow created" border=1></a> | |
| </p> | |
| </li> | |
| <li> 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:<br> | |
| <pre class="examplecode">private int index = 0;</pre></li> | |
| <li>Now we must add logic to update the UI in the <code>employeeForm</code>. The method we use here updates the SVG UI elements | |
| in the <code>employeeForm</code> component. In the Source editor at the end of the class add the following method: | |
| <p class="notes"><b>Note:</b> You can use the IDE's code completion feature to enter the code.</p> | |
| <pre class="examplecode"> | |
| //**Method is responsible for populating employee UI form with information about employees. | |
| private void updateEmployeeFormUI() { | |
| //Getting currently selected employee | |
| final Employee employee = (Employee) EmployeeData.getData().elementAt(index); | |
| //Setting First Name | |
| getSvgTextFieldFirstName().setText(employee.getFirstName()); | |
| //Setting Last Name | |
| getSvgTextFieldLastName().setText(employee.getLastName()); | |
| //Setting Gender | |
| if (employee.getGender()) { | |
| getSvgRadioButton().setSelected(false); | |
| getSvgRadioButton1().setSelected(true); | |
| } else { | |
| getSvgRadioButton().setSelected(true); | |
| getSvgRadioButton1().setSelected(false); | |
| } | |
| //Setting age | |
| getSvgSpinner().getModel().setValue(new Integer(employee.getAge())); | |
| } | |
| </pre> | |
| <p>Now we can start adding logic to the <tt>nextMethod</tt> and <tt>previousMethod</tt>.</p></li> | |
| <li>Switch to the Flow view and right-click on the <code>nextMethod</code> Entry Point and choose the Go To Source option from the popup menu.</li> | |
| <li>In the Source editor, add the following code to the <tt>nextMethod()</tt> method before <tt>switchDisplayable(null, getEmployeeForm().getSvgCanvas());</tt>. This code displays the next record in the | |
| queue of the employee data records. It also invokes the UI to update the information displayed.<br> | |
| <pre class="examplecode">// Move to the next Employee record | |
| if (index < EmployeeData.getData().size() - 1) { | |
| //Update index. | |
| index++; | |
| } | |
| //Update UI - employee form | |
| updateEmployeeFormUI(); | |
| //Go back to employeeForm | |
| </pre></li> | |
| <li>Switch to the Flow view and right-click on the <code>previousMethod</code> Entry Point and choose the Go To Source option from the popup menu.</li> | |
| <li>In the Source editor, add the following code to the <tt>previousMethod()</tt> method before <tt>switchDisplayable(null, getEmployeeForm().getSvgCanvas());</tt> to enable the data browsing functionality to work.<br> | |
| <pre class="examplecode">// Move to the previous Employee record | |
| if (index > 0) { | |
| //Update index | |
| index--; | |
| } | |
| //Update UI | |
| updateEmployeeFormUI(); | |
| //Go back to employeeForm | |
| </pre> | |
| <p>Next we need to make sure that the UI will be updated when <code>employeeForm</code> and set global index based on a | |
| selection done in in the employee list.</p></li> | |
| <li>Switch to the Flow view and right-click the <tt>select</tt> button in the <code>employeeList</code> and choose Go To Source from the popup menu.</li> | |
| <li>In the Source editor, add the following code to the <code>getSelect()</code> method after <tt>public void actionPerformed(SVGComponent svgComponent) {</tt>:<br> | |
| <pre class="examplecode"> //Updating global index | |
| index = getSvgList().getSelectionModel().getSelectedIndex(); | |
| //Updating UI after selection has been made | |
| updateEmployeeFormUI(); | |
| //Switching to the employeeForm</pre></li> | |
| </ol> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <h2><a name="uitest"></a>Testing the Application in A Touch Screen Device Emulator</h2> | |
| <p>We are ready to test our application in the Java ME SDK 3.0 <strong>DefaultFxTouchPhone1</strong> device emulator that comes bundled in the NetBeans IDE installer. In order to launch the application we need to edit the Project Properties.</p> | |
| <ol> | |
| <li>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.</li> | |
| <li>For touch screen device emulation select DefaultFxTouchPhone1 from the Device drop down menu and CLDC-1.1 as Device Configuration as shown below and click OK. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex4_4.png" rel="lytebox" | |
| title="Emulator platform and device selected"> | |
| <img src="../../../images_www/articles/71/mobility/svgtouch/ex4_4-small.png" | |
| alt="Emulator platform and device selected" border=1></a> | |
| </p> | |
| </li> | |
| <li>Go to Run > Run Project 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 can be moved around the screen to navigate the application menus as a user would do with a fingertip.</li> | |
| <li>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. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex4_5.png" rel="lytebox" | |
| title="Application launched in the emulator"> | |
| <img src="../../../images_www/articles/71/mobility/svgtouch/ex4_5-small.png" | |
| alt="Application launched in the emulator" border=1></a> | |
| </p> </li> | |
| </ol> | |
| <h2>Summary<a name="summary"></a></h2> | |
| <p> In this tutorial you learned how to create an SVG-based, touch screen enabled UI for Java ME devices using the NetBeans IDE.</p> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <div class="feedback-box"><a href="/about/contact_form.html?to=6&subject=Creating%20a%20Touch%20Enabled%20SVG%20UI%20for%20Java%20ME%20Devices">Send | |
| Us Your Feedback</a></div> | |
| <br style="clear:both;" > | |
| <a name="see-also"></a> | |
| <h2>See Also</h2> | |
| <ul> | |
| <li><a href="http://wiki.netbeans.org/MobilityDesignerRichComponents">Rich SVG UI Components Reference</a></li> | |
| <li><a href="http://blogs.oracle.com/kharezlak/entry/playing_with_svg_components_in">Rich SVG UI Application</a></li> | |
| <li><a href="http://wiki.netbeans.org/MobilitySVGComponents">Using SVG Rich UI Components</a></li> | |
| <li><a href="http://wiki.netbeans.org/VisualMobileDesignerPalatteReference">Reference: Visual Mobile Designer Palette Guide</a></li> | |
| <li><a href="../../../kb/trails/mobility.html">NetBeans Java ME Applications Learning Trail</a></li> | |
| </ul> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| </body> | |
| </HTML> |