A practical introduction to the Table Model BlackBerry 6.0. OS UI component.
Introduction
Another interesting component available in BlackBerry OS 6.0 is the TableModel. As you may suppose, this will allow us to build a table made of rows and columns, and also to manage its changes and updates in the view.
Let’s have an initial look at its behavior with an example.
This example creates a table with three columns and four rows with lots of mobile device information.
The code
Here’s some example code:
class TableModelBrightHubDemoScreen extends MainScreen
{
private RegionStyles _mystyles;
private TableModel _mytableModel;
private TableView _mytableView;
private TableController _ mytableController;
private static final int ROWS = 4;
private static final int COLUMNS = 3;
private static final int IMAGE_WIDTH = 50;
private String modelName[] = {“BlackBerry Torch”, “Nexus One”, “iPhone4”};
private String osVersion[] = {“RIM OS 6.0”, “Android 2.2”, “iOS 4”};
private String deviceYear[] = {“2010”, “2009”, “2010”};
private String deviceManufacturer[] = {“RIM”, “Google”, “Apple”};
public TableModelDemoScreen()
{
super(Manager.NO_VERTICAL_SCROLL);
setTitle(“Bright Hub Table Mobile Models”);
This is where we give the table a special style using the RegionStyles constructor. Our table will have a simple border and the content will be horizontally aligned to the left and vertically aligned in the middle.
_ mystyles = new RegionStyles(BorderFactory.createSimpleBorder(new XYEdges(1, 1, 1, 1), Border.STYLE_SOLID), null,
null, null, RegionStyles.ALIGN_LEFT, RegionStyles.ALIGN_MIDDLE);
Here a new TableModel is created and assigned to the view via its constructor. We also assign a background to this view.
_mytableModel = new TableModel();
_mytableView = new TableView(_mytableModel);
_mytableView.setDataTemplateFocus(BackgroundFactory.createLinearGradientBackground(Color.WHITE, Color.WHITE,
Color.BLUEVIOLET, Color.BLUEVIOLET));
The way these components associate each of the view/model objects is different from what we did in the previous article, but the result is the same.
_mytableController = new TableController(_mytableModel, _mytableView);
_mytableView.setController(_mytableController);
The following method is explained later:
setStyle();
add(new LabelField(“Smartphone Devices”, LabelField.FIELD_HCENTER));
add(new SeparatorField());
add(_mytableView);
We add the images stored in our application src folder with the same name as the model name they represent (“BlackBerry Torch.png”…)
for(int i = 0; i < modelName.length; i++)
{
String imageFileName = modelName[i] + “.png”;
Bitmap bitmap = Bitmap.getBitmapResource(imageFileName);
Here we add the content of the row:
_mytableModel.addRow(new Object[] {bitmap, osVersion[i], deviceYear[i], deviceManufacturer[i]});
}
}
Here is the code of the setStyle method we called before. This snippet sets a DataTemplate (which is a repeating layout of fields with the data we set later) with the selected style of the table.
public void setStyle()
{
DataTemplate myTemplate = new DataTemplate(_mytableView, ROWS, COLUMNS)
{
public Field[] getDataFields(int modelRowIndex)
{
Object[] data = (Object[]) _mytableModel.getRow(modelRowIndex);
Field[] fields = new Field[data.length];
for(int i = 0; i < data.length; i++)
{
if(data[i] instanceof Bitmap)
{
fields[i] = new BitmapField((Bitmap) data[i]);
}
else if(data[i] instanceof String)
{
fields[i] = new LabelField(data[i], Field.FOCUSABLE);
}
else
{
fields[i] = (Field) data[i];
}
}
return fields;
}
};
myTemplate.createRegion(new XYRect(0, 1, 1, 3), _style);
myTemplate.createRegion(new XYRect(0, 0, 2, 1), _style);
myTemplate.setRowProperties(0, new TemplateRowProperties(Font.getDefault().getHeight() +
(_mystyles.getBorder() == null ? 0 : _mystyles.getBorder().getTop() + _mystyles.getBorder().getBottom()) +
(_mystyles.getMargin() == null ? 0 : _mystyles.getMargin().top + _mystyles.getMargin().bottom)));
for(int i = 1; i < ROWS; i++)
{
myTemplate.createRegion(new XYRect(1, i, 1, 1), _style);
myTemplate.setRowProperties(i, new TemplateRowProperties(Font.getDefault().getHeight() +
(_mystyles.getBorder() == null ? 0 : _mystyles.getBorder().getTop() + _mystyles.getBorder().getBottom()) +
(_mystyles.getMargin() == null ? 0 : _mystyles.getMargin().top + _mystyles.getMargin().bottom)));
}
int width = IMAGE_WIDTH + (_mystyles.getBorder() == null ? 0 : _mystyles.getBorder().getTop() + _mystyles.getBorder().getBottom()) +
(_mystyles.getMargin() == null ? 0 : _mystyles.getMargin().top + _mystyles.getMargin().bottom);
myTemplate.setColumnProperties(0, new TemplateColumnProperties(width));
myTemplate.setColumnProperties(1, new TemplateColumnProperties(Display.getWidth() - width));
_mystyles.setDataTemplate(myTemplate);
myTemplate.useFixedHeight(true);
}
}
That’s all. With this example, we finish our review of the new components available in this new BlackBerry 6.0 OS. As you may have seen, one of the goals of this new version of RIM OS, is to provide good User Interface capabilities to the developers, so as to create attractive applications that make the most of the OS. Please have a look at the other components tutorials for more information.
This post is part of the series: BlackBerry UI Development
Working with the user interface of BlackBerry 6 OS. Learn about different UI components and how to use them with some easy to follow code samples and snippets.
