| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> | |
| <!-- Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. --> | |
| <!-- Use is subject to license terms.--> | |
| <html> | |
| <head> | |
| <title>Visual Mobile Designer Custom Components: Using Table Items in Java ME Applications - NetBeans IDE Tutorial</title> | |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> | |
| <meta name="Karol Harezlak" content="NetBeans Visual Mobile Designer"> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > | |
| </head> | |
| <body> | |
| <a name="top"></a> | |
| <h1>Visual Mobile Designer Custom Components: Using Table Items in Java ME Applications</h1> | |
| <p> The Visual Mobile Designer (VMD) enables you to design Java ME applications using drag and drop components. With it, you can determine the application flow as well as the look and feel of your UI by using components supplied by the IDE, or by using components you design yourself. The VMD contains many standard components you can use to create your application: Lists, Alerts, Forms, Images, and more. It also includes custom components that simplify the creation of more complex components, such as wait screens, splash screens and login screens. </p> | |
| <p>The TableItem component enables you to quickly create tables that consist of one or more columns, each with a header area and a data area that repeats for | |
| each record. The table can be larger than the screen in both vertically and horizontally. Users can use a cursor to scroll in either directions. Using the TableItem component of the Visual Mobile Designer (VMD) simplifies the design and implementation of data tables in your Java ME application. </p> | |
| <p>If you are new to mobile application development in NetBeans, you should start with the<A HREF="quickstart.html"> NetBeans Java ME MIDP Quick Start Guide</A> before continuing.</p> | |
| <!--<p class="notes"><b>Note:</b> If you are using NetBeans IDE 6.8, refer to the <a href="../../68/javame/tableitem.html">Using Table Items in Java ME Applications 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="#intro" title="How the TableItem Component Works">How the TableItem Component Works</a></li> | |
| <li><a href="#sample" title="Installing and Running the Sample Application">Installing and Running the Sample Application</a></li> | |
| <li><a href="#creating" title="Creating a Java ME Application with the TableItem Custom Component">Creating a Java ME Application with the TableItem Custom Component</a> | |
| <ul> | |
| <li> <a href="#create">Creating the MyTableExample Project</a> </li> | |
| <li><a href="#add">Adding Packages and a Visual MIDlet to the MyTableExample Project</a></li> | |
| <li><a href="#addcomponent">Adding Components to MyTableMIDlet</a></li> | |
| <li><a href="#edit">Editing the SimpleTableModel Design</a></li> | |
| <li><a href="#addcommands">Adding Commands to the Form and TextBox Components</a></li> | |
| <li><a href="#connect">Connecting the Components to Create an Application Flow</a></li> | |
| <li><a href="#insert">Inserting Source Code</a></li> | |
| <li><a href="#run">Running the Project</a></li> | |
| </ul></li> | |
| <li><a href="#nextsteps" title="See Also">See Also</a></li> | |
| </ul> | |
| <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 version 7</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <h2><a name="intro"></a>How the TableItem Component Works</h2> | |
| <p>This example shows you how to use the TableItem and TableModel components in a mobile application. It demonstrates the basic features of the the components as well as how to use them to visualize and manipulate data in your Java ME application inside the SimpleTableModel component. The TableItem custom component discussed in this tutorial uses a table from the SimpelTableModel interface, displays the data and, even allows the user to edit the data.</p> | |
| <p>In addition to the TableItem custom component we need to use two other MIDP components: TextBox and Form. To learn more about these and other custom components included in the VMD palette see the <a href="http://wiki.netbeans.org/VisualMobileDesignerPalatteReference">Visual Mobile Designer Palette Guide</a>.</p> | |
| <h2><a name="sample"></a>Installing and Running the Sample Application</h2> | |
| <p> Before we begin, you might want to see final result of the tutorial. Take the following steps to install the <code>TableItemExample</code> sample application:</p> | |
| <ol> | |
| <li>Download <a href="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/TableItemExample.zip">TableItemExample.zip</a> file.</li> | |
| <li> Unzip the file. </li> | |
| <li> In the IDE, choose <tt>File</tt> > <tt>Open Project</tt> and browse to the folder that contains the unzipped file. </li> | |
| <li>Open the Project window. It should look like the following: | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-project-window.png" border=1 alt="Project Window with Table Item example" ></p> | |
| </li> | |
| <li>In the Projects window, right-click the project node and choose Run Project (or press F6). As the application runs, an emulator window opens and | |
| displays the application running in the default device emulator. </li> | |
| <li>In the Emulator window, click the button underneath "Launch." The emulator displays a table, as shown: | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-emulator.png" border=1 alt="DefaultColorPhone emulator displaying the sample table application" > </p> </li> | |
| <li>Edit the table: | |
| <ul> | |
| <li>Move the cursor from cell to cell using the directional arrows on the Select button.</li> | |
| <li>Click the button underneath "Edit Cell" to edit the contents of a cell.</li> | |
| </ul></li> | |
| <li>Click the button underneath "Exit" to close the application. </li> | |
| </ol> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <h2><a name="creating"></a>Creating a Table with the TableItem Custom Component </h2> | |
| <div class="indent"> | |
| <p>Now that you have seen the TableItem component in action, we can show you how to create this application. To create the application do the following: </p> | |
| </div> | |
| <ol> | |
| <li> <a href="#create">Create the MyTableExample project</a> </li> | |
| <li><a href="#add">Add Packages and a Visual MIDlet to the MyTableExample Project</a></li> | |
| <li><a href="#addcomponent">Add Components to MyTableMIDlet</a></li> | |
| <li><a href="#edit">Edit the SimpleTableModel Design</a></li> | |
| <li><a href="#addcommands">Add Commands to the Form and TextBox Components</a></li> | |
| <li><a href="#connect">Connect the Components to Create an Application Flow</a></li> | |
| <li><a href="#insert">Inserting Source Code</a></li> | |
| <li><a href="#run">Run the Project</a></li> | |
| </ol> | |
| <div class="indent"> | |
| <h3 class="tutorial">Creating the MyTableExample Project<a name="create"></a></h3> | |
| <ol> | |
| <li> Choose <tt>File</tt> > <tt>New Project (Ctrl-Shift-N)</tt>. Under Categories, select Java ME. Under Projects, select Mobile Application and click Next. </li> | |
| <li> Enter <code>MyTableExample</code> in the Project Name field. Change the | |
| Project Location to a directory on your system. From now on we can refer | |
| to this directory as <tt>$PROJECTHOME</tt>. </li> | |
| <li> Uncheck the Create Hello MIDlet checkbox. Click Next. </li> | |
| <li> Leave the Java Platform Micro Edition SDK 3.0 as the selected Emulator Platform. Click Finish. </li> | |
| <!--li> Click Finish. The project folder contains all of your sources and project metadata, such | |
| as the project Ant script. The application itself is displayed in the Flow Design window of the Visual Mobile Designer. </li--> | |
| </ol> | |
| <h3 class="tutorial">Adding Packages and a Visual MIDlet to the MyTableExample | |
| Project<a name="add"></a></h3> | |
| <ol> | |
| <li> Choose the <code> MyTableExample</code> project in the Project Window, | |
| then choose <tt>File</tt> > <tt>New File (Ctrl-N)</tt>. Under Categories, select Java. Under File Types, select Java Package. Click Next. </li> | |
| <li> Enter <code>tableitemexample</code> in the Package Name field. Click Finish. | |
| </li> | |
| <li> Choose the <code>tableitemexample</code> package in the Project window, | |
| then choose <tt>File</tt> > <tt>New File (Ctrl-N)</tt>. Under Categories, select MIDP. | |
| Under File Types, select Visual MIDlet. Click Next. </li> | |
| <li> Enter <code>MyTableItemMidlet</code> into MIDlet Name and MIDP Class | |
| Name fields. Click Finish. </li> | |
| </ol> | |
| <h3 class="tutorial">Adding Components to MyTableItemMidlet<a name="addcomponent"></a></h3> | |
| <ol> | |
| <li> Switch your Visual MIDlet to the Flow view. Drag the following | |
| Screen components from the Component Palette and drop them in the Flow Designer: | |
| <ul> | |
| <li> | |
| <div class="indent"> Form</div> | |
| </li> | |
| <li> | |
| <div class="indent">TextBox</div> | |
| </li> | |
| </ul></li> | |
| <li>Select the <tt>textBox</tt> and change the Title of the component to <tt>Edit</tt> in the Properties window.</li> | |
| <li>Double-click the <tt>form</tt> component to switch to the Screen view. </li> | |
| <li>Drag the <tt>Table Item</tt> component from the Items section of the Component Palette and drop it into the <tt>form</tt>. | |
| The <tt>Table Item</tt> component looks like the following when it is added to the Screen Designer: | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-tableitemform.png" border=1 alt="Shows Screen Designer with TableItem on the Device Screen" ></p> | |
| </li> | |
| <li>Select the <tt>tableItem</tt> and, in the Properties window, type <code>TableItem Example</code> as the Label property value.</li> | |
| <li>Right-click the <tt>tableItem</tt> component and choose Properties in the popup menu.</li> | |
| <li>Click the arrow (<img src="../../../images_www/articles/71/mobility/tableitem/arrow.png" border=1 alt="Arrow">) in the Table Model property and choose <tt><New SimpleTableModel></tt> in the drop-down list.</li> | |
| <li>Click Close.<br>The <tt>simpleTableModel</tt> component is added to the Resources. | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/resources.png" border=1 alt="simpleTableModel added" ></p></li> | |
| </ol> | |
| <h3 class="tutorial">Editing SimpleTableModel <a name="edit"></a></h3> | |
| <ol> | |
| <li> In the Screen view, double-click the <tt><No table model specified></tt> component to open the Values dialog box. </li> | |
| <li>In the Values dialog box, check the Use Header option.</li> | |
| <li> Click the Add Row and Add Column buttons four times respectively to change the number of rows and columns to 4.</li> | |
| <li> Rename the table headers to <tt>column 1</tt>, <tt>column 2</tt>, <tt>column 3</tt> and <tt>column 4</tt>. | |
| <p class="align-center"> <img src="../../../images_www/articles/71/mobility/tableitem/ti-values-editor.png" border=1 alt="Table Model" > </p></li> | |
| <li>Click OK to finish. | |
| <p class="align-center"> <img src="../../../images_www/articles/71/mobility/tableitem/ti-screeneditor_form1.png" border=1 alt="Simple Table Model assigned to TableItem component" > </p></li> | |
| </ol> | |
| <h3 class="tutorial">Adding Commands to the Form and TextBox Components<a name="addcommands"></a></h3> | |
| <ol> | |
| <li>Open the Flow view.</li> | |
| <li>Choose <tt>Exit Command</tt> from the Commands section of the Component Palette. Drag and drop it into the <tt>form</tt> component. Repeat this action for the <tt>Item | |
| Command</tt>.</li> | |
| <li>Choose <tt>itemCommand</tt> in the Screen view. In the Properties window, change the Label property value to <tt>Edit Cell</tt>. | |
| </li> | |
| <li>In the Flow view, choose the <tt>Ok Command</tt> from the Commands section of the Component Palette and drag and drop it into the <tt>textBox</tt> component. | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-flow.png" border=1 alt="Shows the Flow View with Added Commands" > </p></li> | |
| </ol> | |
| <h3 class="tutorial">Connecting Components<a name="connect"></a></h3> | |
| <div> | |
| <p>In the Flow view, click on the <tt>Started</tt> on the Mobile Device and drag it to the <tt>form</tt> component. In the same manner, connect the components | |
| together as shown in the following graphic.</p> | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-flowdesigner.png" border=1 alt="Shows the Flow window with conneted components" ></p> | |
| </div> | |
| <h3 class="tutorial">Inserting Source Code<a name="insert"></a></h3> | |
| <ol> | |
| <li>In the Flow view, right-click <tt>itemCommand</tt> of the <tt>form</tt> component and choose Go to source from the popup menu.</li> | |
| <li>Insert the following code before the <tt>switchDisplayable</tt> method where it reads <tt>// write pre-action user code here</tt>: | |
| <pre class="examplecode"> | |
| if (textBox != null) { | |
| // Get position of the cursor in the table. | |
| int row = tableItem.getSelectedCellRow(); | |
| int column = tableItem.getSelectedCellColumn() ; | |
| // Get value from the table model | |
| Object value = simpleTableModel.getValue(column,row); | |
| // Set textBox string value | |
| if (value != null) | |
| textBox.setString(value.toString()); | |
| else | |
| textBox.setString(""); | |
| } </pre> | |
| </li> | |
| <li>Switch to the Flow view, right-click <tt>okCommand</tt> of the <tt>textBox</tt> component and choose Go to Source in the popup menu.</li> | |
| <li>Insert the following code before the <tt>switchDisplayable</tt> method where it reads <tt>// write pre-action user code here</tt>: | |
| <pre class="examplecode"> | |
| int row = tableItem.getSelectedCellRow(); | |
| int column = tableItem.getSelectedCellColumn(); | |
| // Set new value to the table model | |
| simpleTableModel.setValue(column, row, textBox.getString()); | |
| // Repaint table model on the screen device | |
| simpleTableModel.fireTableModelChanged(); | |
| </pre></li> | |
| <li>Press Ctrl+S to save the edits.</li> | |
| </ol> | |
| <h3 class="tutorial">Running the Project<a name="run"></a></h3> | |
| <p>Press F6 to run the main project. Alternatively you could select <tt>Run</tt> > <tt>Run Main Project</tt>.</p> | |
| </div> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <h2>Javadoc for the TableItem and SimpleTableModel Components</h2> | |
| <P>The NetBeans IDE provides API Javadocs for the <tt>TableItem</tt> or <tt>TableModel</tt> components, as well as other components you can use in the VMD. To | |
| read the Javadocs for the <tt>TableItem</tt> or <tt>TableModel</tt> components, complete the steps below:</P> | |
| <OL> | |
| <li>Place the cursor on the <tt>TableItem</tt> or <tt>TableModel</tt> component in the source code and press Ctr-Shift-Space (or choose <tt>Source</tt> > <tt>Show Documentation</tt>).<br> | |
| The Javadoc for this element displays in a popup window. </li> | |
| <li>Click the Show documentation in external web browser icon (<img src="../../../images_www/articles/71/mobility/smscomposer/show-doc-button.png" alt="Show documentation in external web browser">) in the popup window to view the detailed information about the <tt>TableItem</tt> or <tt>TableModel</tt> component in your browser.</li> | |
| </OL> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <div class="feedback-box"><a href="/about/contact_form.html?to=6&subject=VMD%20Custom%20Components:%20Using%20Table%20Items">Send | |
| Us Your Feedback</a> </div><br style="clear:both;" > | |
| <h2><a name="nextsteps"></a>See Also</h2> | |
| <ul> | |
| <li><a href="smscomposer.html">Visual Mobile Designer Custom Components: Creating an SMS Composer Application</a></li> | |
| <li><a href="filebrowser.html">Visual Mobile Designer Custom Components: Creating Mobile Device File Browser</a></li> | |
| <li><a href="pimbrowser.html">Visual Mobile Designer Custom Components: Creating a Personal Information Manager Application</a></li> | |
| <li><a href="loginscreen.html">Visual Mobile Designer Custom Components: Creating Mobile Login Screens</a></li> | |
| <li><a href="waitscreen.html">Visual Mobile Designer Custom Components: Creating Wait Screens for Mobile Applications</a></li> | |
| <li><a href="splashscreen.html">Visual Mobile Designer Custom Components: Using Splash Screens in Java ME Applications</a></li> | |
| </ul> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| </body> | |
| </html> |