How do I use the User Interface API to create an editable table?
To create a table for use in a BlackBerry application, you can use custom fields and vertical and horizontal field managers. The attached image illustrates this idea graphically.
To implement these ideas using code, refer to the following commented code example.
The general approach is to create a screen, add fields and managers to that screen, and add other fields within each of these internal managers. Because these fields will not span the entire width of the screen, create custom field types that map themselves properly.
The following code should be contained in a file called Table.java, and can be used as the main application class.
package com.rim.KnowledgeBase;
//import these libraries
import net.rim.device.api.system.*;
import net.rim.device.api.ui.*;
import net.rim.device.api.ui.component.*;
import net.rim.device.api.ui.container.*;
//main table class that provides constructor to display UI components
class Table extends UiApplication implements TrackwheelListener, KeyListener
{
//private members of table class
private VerticalFieldManager mainVerticalManager;
private VerticalFieldManager column1;
private VerticalFieldManager column2;
private VerticalFieldManager column3;
private HorizontalFieldManager mainHorizontalManager;
//title to be displayed
private String title = "Sample Table";
//main function that serves as the entry point for the BlackBerry
//application
//calls the Table constructor to display the UI components
public static void main(String [] args)
{
Table app = new Table();
app.enterEventDispatcher();
}
//Table constructor
public Table()
{
//instance of FullScreen (extends Screen) to display all the UI
//components on
FullScreen tableScreen = new FullScreen();
mainVerticalManager = new VerticalFieldManager();
//main vertical manager to display the
//the title, separator, and main
//horizontal manager
mainHorizontalManager = new HorizontalFieldManager(Field.USE_ALL_WIDTH);
//main horizontal
//manager
column1 = new VerticalFieldManager();
//secondary vertical manager to be displayed within the
//main horizontal manager
column2 = new VerticalFieldManager();
//secondary vertical manager to be displayed within the
//main horizontal manager
column3 = new VerticalFieldManager();
//secondary vertical manager to be displayed within the
//main horizontal manager
//add the title to the main vertical manager
mainVerticalManager.add(new LabelField(title, LabelField.NON_FOCUSABLE | LabelField.ELLIPSIS | LabelField.USE_ALL_WIDTH));
//add the separator field to the main vertical manager
mainVerticalManager.add(new SeparatorField());
//add the fields (heading and rows) to the first column
//the fields added here are of fixed width (see class definitions of FixedWidthLabelField and
//FixedWidthField below)
column1.add(new FixedWidthLabelField("Heading 1", LabelField.NON_FOCUSABLE | FixedWidthLabelField.FIELD_LEFT));
column1.add(new FixedWidthField(null, "R1 C1", 10, FixedWidthField.EDITABLE | FixedWidthField.FOCUSABLE));
column1.add(new FixedWidthField(null, "R2 C1", 10, FixedWidthField.EDITABLE | FixedWidthField.FOCUSABLE));
column1.add(new FixedWidthField(null, "R3 C1", 10, FixedWidthField.EDITABLE | FixedWidthField.FOCUSABLE));
column1.add(new FixedWidthField(null, "R4 C1", 10, FixedWidthField.EDITABLE | FixedWidthField.FOCUSABLE));
column1.add(new FixedWidthField(null, "R5 C1", 10, FixedWidthField.EDITABLE | FixedWidthField.FOCUSABLE));
column1.add(new FixedWidthField(null, "R6 C1", 10, FixedWidthField.EDITABLE | FixedWidthField.FOCUSABLE));
column1.add(new FixedWidthField(null, "R7 C1", 10, FixedWidthField.EDITABLE | FixedWidthField.FOCUSABLE));
//add column1 to the main horizontal field manager
mainHorizontalManager.add(column1);
//add the fields (heading and rows) to the second column
//the fields added here are of fixed width (see class definitions of FixedWidthLabelField and
//FixedWidthField below)
column2.add(new FixedWidthLabelField("Heading 2", FixedWidthLabelField.NON_FOCUSABLE | FixedWidthLabelField.FIELD_LEFT));
column2.add(new FixedWidthField(null, "R1 C2", 10, FixedWidthField.EDITABLE | FixedWidthField.FOCUSABLE));
column2.add(new FixedWidthField(null, "R2 C2", 10, FixedWidthField.EDITABLE | FixedWidthField.FOCUSABLE));
column2.add(new FixedWidthField(null, "R3 C2", 10, FixedWidthField.EDITABLE | FixedWidthField.FOCUSABLE));
column2.add(new FixedWidthField(null, "R4 C2", 10, FixedWidthField.EDITABLE | FixedWidthField.FOCUSABLE));
column2.add(new FixedWidthField(null, "R5 C2", 10, FixedWidthField.EDITABLE | FixedWidthField.FOCUSABLE));
column2.add(new FixedWidthField(null, "R6 C2", 10, FixedWidthField.EDITABLE | FixedWidthField.FOCUSABLE));
column2.add(new FixedWidthField(null, "R7 C2", 10, FixedWidthField.EDITABLE | FixedWidthField.FOCUSABLE));
//add column2 to the main horizontal field manager
mainHorizontalManager.add(column2);
//add the fields (heading and rows) to the third column
//the fields added here are of fixed width (see class definitions of
//FixedWidthLabelField and FixedWidthField below)
column3.add(new FixedWidthLabelField("Heading 3", FixedWidthLabelField.NON_FOCUSABLE | FixedWidthLabelField.FIELD_LEFT));
column3.add(new FixedWidthField(null, "R1 C3", 10, FixedWidthField.EDITABLE | FixedWidthField.FOCUSABLE));
column3.add(new FixedWidthField(null, "R2 C3", 10, FixedWidthField.EDITABLE | FixedWidthField.FOCUSABLE));
column3.add(new FixedWidthField(null, "R3 C3", 10, FixedWidthField.EDITABLE | FixedWidthField.FOCUSABLE));
column3.add(new FixedWidthField(null, "R4 C3", 10, FixedWidthField.EDITABLE | FixedWidthField.FOCUSABLE));
column3.add(new FixedWidthField(null, "R5 C3", 10, FixedWidthField.EDITABLE | FixedWidthField.FOCUSABLE));
column3.add(new FixedWidthField(null, "R6 C3", 10, FixedWidthField.EDITABLE | FixedWidthField.FOCUSABLE));
column3.add(new FixedWidthField(null, "R7 C3", 10, FixedWidthField.EDITABLE | FixedWidthField.FOCUSABLE));
//add column3 to the main horizontal field manager
mainHorizontalManager.add(column3);
//add the main horizontal field manager to the main vertical field
//manager
mainVerticalManager.add(mainHorizontalManager);
//add the main vertical manager to the screen
tableScreen.add(mainVerticalManager);
//add key and trackwheel listeners to the screen
tableScreen.addKeyListener(this);
tableScreen.addTrackwheelListener(this);
//push the screen onto the UI stack
pushScreen(tableScreen);
}
//function to make the menu with the default Close menu item visible
public void makeMenu(Menu menu)
{
menu.addItem("Close", null, 100);
}
//function to tell the application what do in the event that the Close menu
//item is selected
public void menuSelected(int id)
{
if (id == 100)
{
System.exit(0);
}
}
//function to tell the applciation what to do when the trackwheel is clicked
public boolean trackwheelClick(int status, int time)
{
Menu appMenu = new Menu();
//create an instance of menu
makeMenu(appMenu);
//make the menu and pass it the instance of menu
appMenu.show();
//show the menu
menuSelected(appMenu.getSelectedId());
//get the selected menu ID
return true;
//return true to indicate the trackwheel was clicked
}
//function to tell the application what to do when a key is pressed
public boolean keyChar(char key, int status, int time)
{
switch (key) {
case Characters.ESCAPE:
//if the key pressed is one of the escape characters,
//exit the application
System.exit(0);
break;
}
return true;
//return true to indicate that a key was pressed
}
//return false in all these cases because we want the application to do
//nothing
//special in the case of these trackwheel and keyboard events
public boolean keyDown(int keycode, int time)
{ return false; }
public boolean keyRepeat(int keycode, int time)
{ return false; }
public boolean keyStatus(int keycode, int time)
{ return false; }
public boolean keyUp(int keycode, int time)
{ return false; }
public boolean trackwheelUnclick(int status, int time)
{ return false; }
public boolean trackwheelRoll(int amount, int status, int time)
{ return false; }
}
The following code defines the custom field type that is added to the columns of the table, and should be contained in a file called FixedWidthField.java.
package com.rim.KnowledgeBase;
//import these libraries
import net.rim.device.api.ui.component.*;
import net.rim.device.api.ui.Font;
//main class for FixedWidthField which extends the EditField class
class FixedWidthField extends EditField
{
//private members of the FixedWidthField class
private Font defaultFont;
//used to get the default font
private String text;
//used to specify the default width of the table cells
//constructor calls the super class constructor
FixedWidthField(String label, String initialValue, int maxNumChars, long style) {
super(label, initialValue, maxNumChars, style);
}
//overrides the default getPreferredWidth functionality to return a fixed
//width
public int getPreferredWidth() {
defaultFont = Font.getDefault();
text = "0000000000";
return defaultFont.getAdvance(text);
}
//overrides the default layout functionality to set the width of the table
//cell
protected void layout(int width, int height) {
width = getPreferredWidth();
height = super.getPreferredHeight();
super.layout(width, height);
//uses the super class' layout functionality
//after the width and the height are set
super.setExtent(width,height);
//uses the super class' setExtent functionality
//after the width and the height are set
}
}
//main class for the FixedWidthLabelField which extends LabelField
//the same functions are overwritten as above to create fixed width label fields
//for the headings of the table
class FixedWidthLabelField extends LabelField
{
private Font defaultFont;
private String text;
FixedWidthLabelField(String text, long style) {
super(text, style);
}
public int getPreferredWidth() {
defaultFont = Font.getDefault();
text = "0000000000";
return defaultFont.getAdvance(text);
}
protected void layout(int width, int height) {
width = getPreferredWidth();
height = super.getPreferredHeight();
super.layout(width, height);
super.setExtent(width, height);
}
}
