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:

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 Sun Java Wireless Toolkit 2.5.2 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. 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 and change the Title of the component to "Edit".
6. Right-click the Resources folder then choose Add > SimpleTableModel.

Assigning SimpleTableModel to a TableItem Component

1. Select the tableItem1 component in the Screen view.
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 Window.
2. Choose Exit Command from the Commands section of the Component Palette. Drag and drop it into Flow Window (form1 component). Repeat this action for Item Command.
3. Choose itemCommand1[Command] in 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 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

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.