Visual Mobile Designer Custom Components Creating Tables with TableItem

Requirements

Before you begin, you need to install the following software on your computer:

• NetBeans IDE 5.0 (download)
• NetBeans Mobility Pack 5.0 (download)
• Java Standard Development Kit (JDK) version 1.4.2 or 5.0 (download)

If you are new to the NetBeans Mobility Pack 5.0, you should start with NetBeans Mobility Pack 5.0 Quick Start Guide before continuing.

Take the following steps to install the tableitemexample sample application:

1. Download tableItem.zip.
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 and Inspector windows. It should look like the following:



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

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:

Creating the MyTableExample Project

1. Choose File > New Project (Ctrl-Shift-N). Under Categories, select Mobile. 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 will refer to this directory as $PROJECTHOME.
3. Uncheck the Create Hello MIDlet checkbox. Click Next.
4. Leave the J2ME Wireless Toolkit as the selected Target Platform. Click Next.
5. 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

1. 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.
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 Designer window. Drag the following Screen components from the Component Palette and drop them in the Flow Designer:
• Form
• TextBox
2. Double-click the form1 component to switch to the Screen Designer Window.
3. 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:
   
   
   
4. Click on tableItem1 and, in the Properties Window, type TableItem Example into the Label property.
5. Select textBox1 in the Inspector Window and change the Title of the component to "Edit".
6. Right-click the Resources folder in the Inspector Window then choose Add > SimpleTableModel.

Assigning SimpleTableModel to a TableItem Component

1. Select the tableItem1 component in the Screen Designer Window.
2. 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

1. Double-click on the tableItem1 component (Screen Designer) to open the Table Model Editor Window.
2. In the Table Editor Model Window, change the number of rows and columns to 4.
3. Check the Use Headers option.
4. Rename the table headers to "column 1", "column 2", "column 3" and "column 4".
5. Click OK to finish.
   
   
   

Adding Commands to the Form and TextBox Components

1. Open the Flow Designer Window.
2. 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.
3. Choose itemCommand1[Command] in the Inspector Window or the Screen Designer. In the Properties Window, change the Label property value to "Edit Cell".
   
   
   
4. Choose the Ok Command from the Commands section of the Component Palette and drag and drop it into the textBox1 component.

Connecting Components

1. In the Flow design window, click on the Start Point on the Mobiel 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

1. Switch to the Source Window.
2. 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();
   
   
   

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

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

1. Choose View > Documentation Indices > NetBeans MIDP Components.
2. Click org.NetBeans.microedition.lcdui. You will see links for the component information.

Next Steps