Visual Mobile Designer Custom Components: Using Table Items in Java ME Applications

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.

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.

If you are new to mobile application development in NetBeans, you should start with the NetBeans Java ME MIDP Quick Start Guide before continuing.


Content on this page applies to NetBeans IDE 6.9 or later

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

Software or Resource Version Required
NetBeans IDE with Java ME Version 6.9 or later
Java Development Kit (JDK) Version 6 or version 7

How the TableItem Component Works

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.

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 Visual Mobile Designer Palette Guide.

Installing and Running the Sample Application

Before we begin, you might want to see final result of the tutorial. Take the following steps to install the TableItemExample sample application:

  1. Download file.
  2. Unzip the file.
  3. In the IDE, choose File > Open Project and browse to the folder that contains the unzipped file.
  4. Open the Project window. It should look like the following:

    Project Window with Table Item example

  5. 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.
  6. In the Emulator window, click the button underneath "Launch." The emulator displays a table, as shown:

    DefaultColorPhone emulator displaying the sample table application

  7. Edit the table:
    • Move the cursor from cell to cell using the directional arrows on the Select button.
    • Click the button underneath "Edit Cell" to edit the contents of a cell.
  8. Click the button underneath "Exit" to close the application.


Creating a Table with the TableItem Custom Component

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:

  1. Create the MyTableExample project
  2. Add Packages and a Visual MIDlet to the MyTableExample Project
  3. Add Components to MyTableMIDlet
  4. Edit the SimpleTableModel Design
  5. Add Commands to the Form and TextBox Components
  6. Connect the Components to Create an Application Flow
  7. Inserting Source Code
  8. Run the Project

Creating the MyTableExample Project

  1. Choose File > New Project (Ctrl-Shift-N). Under Categories, select Java ME. Under Projects, select Mobile Application and click Next.
  2. Enter MyTableExample 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 $PROJECTHOME.
  3. Uncheck the Create Hello MIDlet checkbox. Click Next.
  4. Leave the Java Platform Micro Edition SDK 3.0 as the selected Emulator Platform. Click Finish.

Adding Packages and a Visual MIDlet to the MyTableExample Project

  1. Choose the MyTableExample project in the Project Window, then choose File > New File (Ctrl-N). Under Categories, select Java. Under File Types, select Java Package. Click Next.
  2. Enter tableitemexample in the Package Name field. Click Finish.
  3. Choose the tableitemexample package in the Project window, then choose File > New File (Ctrl-N). Under Categories, select MIDP. Under File Types, select Visual MIDlet. Click Next.
  4. Enter MyTableItemMidlet into MIDlet Name and MIDP Class Name fields. Click Finish.

Adding Components to MyTableItemMidlet

  1. Switch your Visual MIDlet to the Flow view. Drag the following Screen components from the Component Palette and drop them in the Flow Designer:
    • Form
    • TextBox
  2. Select the textBox and change the Title of the component to Edit in the Properties window.
  3. Double-click the form component to switch to the Screen view.
  4. Drag the Table Item component from the Items section of the Component Palette and drop it into the form. The Table Item component looks like the following when it is added to the Screen Designer:

    Shows Screen Designer with TableItem on the Device Screen

  5. Select the tableItem and, in the Properties window, type TableItem Example as the Label property value.
  6. Right-click the tableItem component and choose Properties in the popup menu.
  7. Click the arrow (Arrow) in the Table Model property and choose <New SimpleTableModel> in the drop-down list.
  8. Click Close.
    The simpleTableModel component is added to the Resources.

    simpleTableModel added

Editing SimpleTableModel

  1. In the Screen view, double-click the <No table model specified> component to open the Values dialog box.
  2. In the Values dialog box, check the Use Header option.
  3. Click the Add Row and Add Column buttons four times respectively to change the number of rows and columns to 4.
  4. Rename the table headers to column 1, column 2, column 3 and column 4.

    Table Model

  5. Click OK to finish.

    Simple Table Model assigned to TableItem component

Adding Commands to the Form and TextBox Components

  1. Open the Flow view.
  2. Choose Exit Command from the Commands section of the Component Palette. Drag and drop it into the form component. Repeat this action for the Item Command.
  3. Choose itemCommand in the Screen view. In the Properties window, change the Label property value to Edit Cell.
  4. In the Flow view, choose the Ok Command from the Commands section of the Component Palette and drag and drop it into the textBox component.

    Shows the Flow View with Added Commands

Connecting Components

In the Flow view, click on the Started on the Mobile Device and drag it to the form component. In the same manner, connect the components together as shown in the following graphic.

Shows the Flow window with conneted components

Inserting Source Code

  1. In the Flow view, right-click itemCommand of the form component and choose Go to source from the popup menu.
  2. Insert the following code before the switchDisplayable method where it reads // write pre-action user code here:
                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)
  3. Switch to the Flow view, right-click okCommand of the textBox component and choose Go to Source in the popup menu.
  4. Insert the following code before the switchDisplayable method where it reads // write pre-action user code here:
    	            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
  5. Press Ctrl+S to save the edits.

Running the Project

Press F6 to run the main project. Alternatively you could select Run > Run Main Project.


Javadoc for the TableItem and SimpleTableModel Components

The NetBeans IDE provides API Javadocs for the TableItem or TableModel components, as well as other components you can use in the VMD. To read the Javadocs for the TableItem or TableModel components, complete the steps below:

  1. Place the cursor on the TableItem or TableModel component in the source code and press Ctr-Shift-Space (or choose Source > Show Documentation).
    The Javadoc for this element displays in a popup window.
  2. Click the Show documentation in external web browser icon (Show documentation in external web browser) in the popup window to view the detailed information about the TableItem or TableModel component in your browser.


See Also


get support for the NetBeans