There was a question on nbusers mailing list if it is possible to edit the individual cells in the TableItem component provided by the Mobility Pack 5.0. Even though the TableItem component does not contain functionality which would let users directly edit the individual cells in the table, it is still possible to let the users edit the cells using the following technique:.

The editing itself will be done by a TextBox screen, so you need to add a TextBox to your design - let's call it tableItemEditBox. Then you need to assign a command to the table item (not to the form) - this command will be used to start the editing and to switch to the text box. You can do this by switching to the screen designer, dragging Item Command from the palette and dropping it on the table item. Below Assigned Item Command you should see an instance of the command you just dropped. Click on Edit action and set the action to switch to the display to the tableItemEditBox component.

You need to also add two more commands to the tableItemEditBox component - Ok and Cancel command, so user can either confirm or cancel the editing of the cell. Both commands should go back to the form with the table item. The flow design of the application could be similar to the following screen shot:

Don't be surprised the command assigned to the table item is not visible - the current version of the designer does not visualize commands assigned to the items (we definitely plan to change it in the future releases). Fortunately, the assigned command can be seen and its action can be edited in the screen designer when editing the form containing the table item:





Now you have to manually add a code, which will handle the edit action of the cell. Switch to the screen designer and right-click on the command assigned to the table item (itemCommand1[tableItem1] on the screen shot above). In the pop-up menu select Go To Source item - the source editor should open and you should see the actual code which switches to the tableItemEditBox. component. You should see the following code:

if (item == tableItem1) {

    if (command == itemCommand1) {

        // Insert pre-action code here

        getDisplay().setCurrent(get_tableItemEditBox());

        // Insert post-action code here

        }

    }

}

Now you need to add the code before the display is going to switch to the text box, which will get a value of currently selected cell from the table item and assign it to the text box, in which the user is going to edit the value. This can be done quite easily - you need to obtain column and row of the currently selected table item cell and set this value to the text box. The code might look like the following:

if (item == tableItem1) {

    if (command == itemCommand1) {

        // insert value from the currently selected cell in the table item to the text box

        final int selectedRow = get_tableItem1().getSelectedCellRow(); // get selected row

        final int selectedColumn = get_tableItem1().getSelectedCellColumn(); // get selected column

        final String cellValue = (String)get_simpleTableModel1().getValue(selectedColumn,selectedRow); // get value from the model

        get_tableItemEditBox().setString(cellValue); // set the value to the text box

        getDisplay().setCurrent(get_tableItemEditBox());

        // Insert post-action code here

        }

    }

}

Now you should be able to edit the cell value, but the edited value should get somehow back to the table. To do so, you need to add some more code to the Ok action on the text box component. Go to the flow designer, right-click on the line going from ok command from the tableItemEditBox and select Go To Source from the pop-up menu. This opens the source and the cursor is positioned at the code which switches from the text box back to the form with the table item. Here you can type the code which will get the edited value from the tableItemEditBox component, update the table model with it and then fire event that the table model has changed (so the table item can relayout the table grid based on the new values). The code could look like the following:

} else if (displayable == tableItemEditBox) {

    if (command == okCommand1) {

        // need to update the value of the edited cell

        final String value = get_tableItemEditBox().getString();

        final int selectedRow = get_tableItem1().getSelectedCellRow();

        final int selectedColumn = get_tableItem1().getSelectedCellColumn();

        get_simpleTableModel1().setValue(selectedColumn,selectedRow,value);

        // don't forget to fire table model changed event, so the table item gets relayouted

        get_simpleTableModel1().fireTableModelChanged();

        getDisplay().setCurrent(get_form1());

        // Insert post-action code here

    } else if (command == cancelCommand1) {

        // just return from the textbox - no change in the tableModel for cancel action

        getDisplay().setCurrent(get_form1());

    }

}

And that's it - now you should have the functionality for editing the cells of the table item. You can download an archive of the project which contains all this functionality and you can use it as you wish. I hope this mini how-to helps a bit when working with the new custom components available in the Mobility Pack 5.0.