Visual Mobile Designer Custom Components: Creating Tables with TableItem
Contributed by Karol Harezlak
The Visual Mobile Designer (VMD) is a graphical interface within the NetBeans
Mobility Pack that enables you to design mobile applications using drag and
drop components. With it, you can determine the application flow and the design
of your GUI by using components supplied by the IDE, or by using components
you design yourself. The VMD contains many standard components you might 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 tables.
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 a screen in both directions; users
can use a cursor to scroll in all directions.
As you'll see in this tutorial, using the TableItem component of the Visual
Mobile Designer (VMD) in the NetBeans Mobility Pack simplifies the design and
implementation of data tables in your mobile application.
Application Overview
This example shows you how to use the TableItem and TableModel components in
a mobile application. You'll learn the basic features of the the components,
how to use the components to visualize data in your Java ME application, and
how to manipulate data inside the SimpleTableModel component. The TableItem
custom component discussed in this tutorial visualizes a table from the SimpelTableModel
interface,
displays the data and, optionally, allows the user to
edit the data.
Besides the TableItem custom component we'll use two other MIDP components:
TextBox and Form.
Requirements
Before you begin, you need to install the following software on your
computer:
- NetBeans IDE 5.5 (download)
- NetBeans Mobility Pack 5.5 (download)
- Java Standard Development Kit (JDK) version 5.0 (download)
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:
- Download
tableItem.zip.
- Unzip the file.
- In the IDE, choose File > Open Project and browse to the folder that
contains the unzipped file.
- Open the Project and Inspector windows. It should look like the following:
- In the Projects window, right-click the project node and choose Run Project
(or press F6 key). As the application runs, an emulator window opens and
displays the application running in the default device emulator.
- In the Emulator window, click the button underneath "Launch."
The emulator displays a table, as shown:
- Edit the table:
- 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, let's go back to
the beginning and create this application. To create the application, you
will do the following:
- Create the MyTableExample project
- Add packages and a visual MIDlet to the MyTableExample project
- Add components to MyTableMIDlet
- Assign SimpleTableModel to a TableItem Component
- Edit the SimpleTableModel design
- Add Commands to the Form and TextBox Components
- Connect the Components to create an application flow
- Insert a Pre-action into the source code
- Run the Project
Creating the MyTableExample Project
- Choose File > New Project (Ctrl-Shift-N). Under Categories, select
Mobile. Under Projects, select Mobile Application and click Next.
- Enter
MyTableExample
in the Project Name field. Change the
Project Location to a directory on your system. From now on, we will refer
to this directory as $PROJECTHOME.
- Uncheck the Create Hello MIDlet checkbox. Click Next.
- Leave the J2ME Wireless Toolkit as the selected Target Platform. Click
Next.
- 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.
Adding Packages and a Visual MIDlet to the MyTableExample
Project
- Choose the
MyTableExample
project in the Project Window,
then choose File > New File (Ctrl-N) . Under Categories, select Java
Classes. Under File Types, select Java Package. Click Next.
- Enter
tableitemexample
in the Package Name field. Click Finish.
- 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.
- Enter
MyTableItemMidlet
into MIDlet Name and MIDP Class
Name fields. Click Finish.
Adding Components to MyTableItemMidlet
- Switch your Visual MIDlet to the Flow Designer window. Drag the following
Screen components from the Component Palette and drop them in the Flow Designer:
- Double-click the form1 component to switch to the Screen Designer Window.
- Drag the TableItem component
from the Form Item section of the Component Palette and drop it into form1.
The TableItem component looks like the following when it is added to the
Screen Designer:

- Click on tableItem1 and, in the Properties Window, type
TableItem
Example
into the Label property.
- Select textBox1 in the Inspector Window and change the Title of the component
to "Edit"
.
- Right-click the Resources folder in the Inspector Window then choose Add
> SimpleTableModel.
Assigning SimpleTableModel to a TableItem Component
- Select the tableItem1 component in the Screen Designer Window.
- In the Properties Window, click on the Table Model property and choose
simpleTableModel1 from the the list.
Now you can see a table grid inside the tableItem component.
Editing SimpleTableModel
- Double-click on the tableItem1 component (Screen Designer) to open the Table Model Editor
Window.
- In the Table Editor Model Window, change the number of rows and columns
to 4.
- Check the Use Headers option.
- Rename the table headers to "column 1", "column 2",
"column 3" and "column 4".
- Click OK to finish.
Adding Commands to the Form and TextBox Components
- Open the Flow Designer Window.
- Choose Exit Command from the Commands section of the Component Palette.
Drag and drop it into Flow Designer Window (form1 component). Repeat this action for Item
Command.
- Choose itemCommand1[Command] in the Inspector Window or the Screen Designer.
In the Properties Window, change the Label property value to "Edit
Cell".
- Choose the Ok Command from the Commands section of the Component Palette
and drag and drop it into the textBox1 component.
Connecting Components
- In the Flow design window, click on the Start Point on the Mobile Device
and drag it to the form1 component. In the same manner, connect the components
together as shown in the following graphic.

Inserting a Pre-action into the Source Code
- Switch to the Source Window.
- Find commandAction method in the source code:
Insert following code into pre-action section of the okCommand1 (right after:
if (command == okCommand1) {
, where it says //insert
pre-action code here)
:
/* This part of the code is responsible for
* saving values into the table model
*/
// Get the position of the cursor in the table
int row = tableItem1.getSelectedCellRow();
int column = tableItem1.getSelectedCellColumn();
// Set new value to the table model
simpleTableModel1.setValue(column,row,textBox1.getString());
// Repaint table model on the screen device
simpleTableModel1.fireTableModelChanged();
-
Insert following code into pre-action section of the itemCommand1 (right after:
} else if (command == itemCommand1) {
, where it says //insert
pre-action code here)
:
/* This part of the code is responsible for
* getting value from the table model
*/
if (textBox1 != null) {
// Get position of the cursor in the table.
int row = tableItem1.getSelectedCellRow();
int column = tableItem1.getSelectedCellColumn()
// Get value from the table model
Object value = simpleTableModel1.getValue(column,row);
// Set textBox string value
if (value != null)
textBox1.setString(value.toString());
else
textBox1.setString("");
}
Running the Project
-
Press <F6> to Run the main project.
Alternatively you could select Run > Run Main Project.
To Learn More about the TableItem and SimpleTableModel Components
The NetBeans IDE provides API documentation—javadocs—for the
TableItem and TableModel components, as well as other components you can use
in the VMD. To read the javadocs for the TableItem and TableModel components:
- Choose View > Documentation Indices > NetBeans MIDP Components.
- Click
org.NetBeans.microedition.lcdui.
You will see links
for the component information
.
Next Steps
Copyright and Trademark Notice