Blackberry ListField with Clicked Row
this time i create based on rtm4bb code. it used manager as TableRowManager to create the field for each row.
first i create MenuListField.java
import net.rim.device.api.ui.DrawStyle; import net.rim.device.api.ui.Field; import net.rim.device.api.ui.Font; import net.rim.device.api.ui.Graphics; import net.rim.device.api.ui.Manager; import net.rim.device.api.ui.UiApplication; import net.rim.device.api.ui.component.Dialog; import net.rim.device.api.ui.component.LabelField; import net.rim.device.api.ui.component.ListField; import net.rim.device.api.ui.component.ListFieldCallback; import net.rim.device.api.ui.component.RichTextField; public class MenuListField extends ListField implements ListFieldCallback { /* * This code created based on rtm4bb HomeMenuListField.java */ private Font font; TableRowManager[] rows; public MenuListField(){ // this number should be the same with rows = new TableRowManager[7] // or list item in item field wont show super(7); setEmptyString("sorry, No Menu", DrawStyle.HCENTER); setCallback(this); // this row height to show the height setRowHeight(36); font = Font.getDefault(); rows = new TableRowManager[7]; // create a table row manager rows[0] = new TableRowManager(); // set the menu item name rows[0].add(new RichTextField("Sub Menu", DrawStyle.ELLIPSIS)); // set the number of list items if there are any rows[0].add(new LabelField("", DrawStyle.ELLIPSIS | Field.USE_ALL_WIDTH | DrawStyle.RIGHT)); // create a table row manager rows[1] = new TableRowManager(); // set the menu item name rows[1].add(new RichTextField("Login", DrawStyle.ELLIPSIS)); // set the number of list items if there are any rows[1].add(new LabelField("", DrawStyle.ELLIPSIS | Field.USE_ALL_WIDTH | DrawStyle.RIGHT)); // create a table row manager rows[2] = new TableRowManager(); // set the menu item name rows[2].add(new RichTextField("Register", DrawStyle.ELLIPSIS)); // set the number of list items if there are any rows[2].add(new LabelField("", DrawStyle.ELLIPSIS | Field.USE_ALL_WIDTH | DrawStyle.RIGHT)); // create a table row manager rows[3] = new TableRowManager(); // set the menu item name rows[3].add(new RichTextField("Shopping Cart", DrawStyle.ELLIPSIS)); // set the number of list items if there are any rows[3].add(new LabelField("", DrawStyle.ELLIPSIS | Field.USE_ALL_WIDTH | DrawStyle.RIGHT)); // create a table row manager rows[4] = new TableRowManager(); // set the menu item name rows[4].add(new RichTextField("Logout", DrawStyle.ELLIPSIS)); // set the number of list items if there are any rows[4].add(new LabelField("", DrawStyle.ELLIPSIS | Field.USE_ALL_WIDTH | DrawStyle.RIGHT)); // create a table row manager rows[5] = new TableRowManager(); // set the menu item name rows[5].add(new RichTextField("Track Pesanan", DrawStyle.ELLIPSIS)); // set the number of list items if there are any rows[5].add(new LabelField("", DrawStyle.ELLIPSIS | Field.USE_ALL_WIDTH | DrawStyle.RIGHT)); // create a table row manager rows[6] = new TableRowManager(); // set the menu item name rows[6].add(new RichTextField("Shopping Cart", DrawStyle.ELLIPSIS)); // set the number of list items if there are any rows[6].add(new LabelField("", DrawStyle.ELLIPSIS | Field.USE_ALL_WIDTH | DrawStyle.RIGHT)); } public void drawListRow(ListField listField, Graphics graphics, int index, int y, int width) { // TODO Auto-generated method stub MenuListField list = (MenuListField) listField; TableRowManager rowManager = list.rows[index]; rowManager.drawRow(graphics, 0, y, width, list.getRowHeight()); } public Object get(ListField listField, int index) { // TODO Auto-generated method stub return null; } public int getPreferredWidth(ListField listField) { // TODO Auto-generated method stub return Graphics.getScreenWidth(); } public int indexOfList(ListField listField, String prefix, int start) { // TODO Auto-generated method stub return -1; } protected boolean trackwheelClick(int status, int time) { int index = getSelectedIndex(); Dialog.inform("Clicked " + Integer.toString(index)); /*if( index == 0 ) { new MenuCategoryController(); } */ switch(index) { case 0: /// UiApplication.getUiApplication().pushScreen(screen); break; case 1: /// UiApplication.getUiApplication().pushScreen(screen); break; case 2: /// UiApplication.getUiApplication().pushScreen(screen); break; } return true; } /* * this private class taken from * i still can't get the hang of it */ private class TableRowManager extends Manager{ public TableRowManager(){ super(0); } public void drawRow(Graphics g, int x, int y, int width, int height){ // Arrange the cell fields within this row manager. layout(width, height); // Place this row manager within its enclosing list. setPosition(x, y); // Apply a translating/clipping transformation to the graphics // context so that this row paints in the right area. g.pushRegion(getExtent()); // Paint this manager's controlled fields. subpaint(g); g.setColor(0x00CACACA); g.drawLine(0, 0, getPreferredWidth(), 0); // Restore the graphics context. g.popContext(); } protected void sublayout(int width, int height) { // TODO Auto-generated method stub int preferredWidth = getPreferredWidth(); int preferredHeight = getPreferredHeight(); Field field = getField(0); layoutChild(field, preferredWidth - 110, preferredHeight); setPositionChild(field, 35, 12); field = getField(1); layoutChild(field, 75, preferredHeight); setPositionChild(field, preferredWidth-75, 11); setExtent(preferredWidth, preferredHeight); } public int getPreferredWidth() { return Graphics.getScreenWidth(); } // The preferred height of a row is the "row height" as defined in the // enclosing list. public int getPreferredHeight() { return getRowHeight(); } } }
then push it on screen
MenuListField mylist = new MenuListField();
add(mylist);
this code generates
if you want to load image, just change the LabelField to BitmapField.
after all this i still doesn't get how to create and draw the list. well for the next part i hope i can break down the code. or maybe just go on until i can do image field on the list.
September 20, 2012
Today i want to add ListField With Image. the end product will be look like this :
the image that i used is this :
I call this app ListField Image.
this is the main code :
ListFieldImage.java
package listfieldimage;
import net.rim.device.api.ui.UiApplication;
/**
* This class extends the UiApplication class, providing a
* graphical user interface.
*/
public class ListFieldImage extends UiApplication
{
/**
* Entry point for application
* @param args Command line arguments (not used)
*/
public static void main(String[] args)
{
// Create a new instance of the application and make the currently
// running thread the application's event dispatch thread.
ListFieldImage theApp = new ListFieldImage();
theApp.enterEventDispatcher();
}
/**
* Creates a new ListFieldImage object
*/
public ListFieldImage()
{
// Push a screen onto the UI stack for rendering.
pushScreen(new LFIScreen());
}
}
this is the Screen for ListFieldImage
LFIScreen.java
package listfieldimage;
import net.rim.device.api.ui.container.MainScreen;
/**
* A class extending the MainScreen class, which provides default standard
* behavior for BlackBerry GUI applications.
*/
public final class LFIScreen extends MainScreen
{
/**
* Creates a new LFIScreen object
*/
ImageListField myList;
public LFIScreen()
{
// Set the displayed title of the screen
setTitle("List Field With Image");
myList = new ImageListField();
add(myList);
}
}
now the ImageListField Class
ImageListField.java
package listfieldimage;
import java.util.Vector;
import net.rim.device.api.system.Bitmap;
import net.rim.device.api.ui.DrawStyle;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.Font;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.Manager;
import net.rim.device.api.ui.component.BitmapField;
import net.rim.device.api.ui.component.Dialog;
import net.rim.device.api.ui.component.LabelField;
import net.rim.device.api.ui.component.ListField;
import net.rim.device.api.ui.component.ListFieldCallback;
public class ImageListField extends ListField implements ListFieldCallback {
private Bitmap p1;
TableRowManager row;
Vector rows;
public ImageListField(){
/* Init & Declaration */
setEmptyString("This ListField has No Data",DrawStyle.HCENTER);
setCallback(this);
setRowHeight(50);
Font.getDefault();
p1 = Bitmap.getBitmapResource("no-image.png");
rows = new Vector();
for(int x = 0; x < 5; ++x){
row = new TableRowManager();
BitmapField myImageField = new BitmapField(p1);
row.add(myImageField);
row.add(new LabelField("NAME " + Integer.toString(x), DrawStyle.ELLIPSIS | FOCUSABLE));
row.add(new LabelField("Detail " + Integer.toString(x), DrawStyle.ELLIPSIS | FOCUSABLE));
row.add(new LabelField("Price " + Integer.toString(x), DrawStyle.ELLIPSIS | FOCUSABLE));
rows.addElement(row);
}
setSize(rows.size());
}
public void drawListRow(ListField listField, Graphics graphics, int index,
int y, int width) {
// TODO Auto-generated method stub
ImageListField list = (ImageListField) listField;
TableRowManager rowManager = (TableRowManager)list.rows.elementAt(index);
rowManager.drawRow(graphics,0,y,width,list.getRowHeight());
}
public Object get(ListField listField, int index) {
// TODO Auto-generated method stub
return rows.elementAt(index).toString();
}
public int getPreferredWidth(ListField listField) {
// TODO Auto-generated method stub
return Graphics.getScreenWidth();
}
public int indexOfList(ListField listField, String prefix, int start) {
// TODO Auto-generated method stub
return -1;
}
protected boolean trackwheelClick(int status, int time)
{
int index = getSelectedIndex();
Dialog.inform(Integer.toString(index));
return true;
}
private class TableRowManager extends Manager
{
public TableRowManager()
{
super(0);
}
// Causes the fields within this row manager to be layed out then
// painted.
public void drawRow(Graphics g, int x, int y, int width, int height)
{
// Arrange the cell fields within this row manager.
layout(width, height);
// Place this row manager within its enclosing list.
setPosition(x, y);
// Apply a translating/clipping transformation to the graphics
// context so that this row paints in the right area.
g.pushRegion(getExtent());
// Paint this manager's controlled fields.
subpaint(g);
g.setColor(0xFF0000);
g.drawLine(0, height-1, getPreferredWidth(), height-1);
g.drawLine(40, 0, 40, getPreferredHeight());
// Restore the graphics context.
g.popContext();
}
// Arrages this manager's controlled fields from left to right within
// the enclosing table's columns.
protected void sublayout(int width, int height)
{
// set the size and position of each field.
int fontHeight = Font.getDefault().getHeight();
int preferredWidth = getPreferredWidth();
// start with the Bitmap Field of the priority icon
Field field = getField(0);
layoutChild(field, 40, 40);
setPositionChild(field, 0, 0);
// set the task name label field
field = getField(1);
layoutChild(field, preferredWidth - 46, fontHeight+1);
setPositionChild(field, 46, 3);
// set the list name label field
field = getField(2);
layoutChild(field, 150, fontHeight+1);
setPositionChild(field, 46, fontHeight+6);
// set the due time name label field
field = getField(3);
layoutChild(field, 150, fontHeight+1);
setPositionChild(field, preferredWidth - 152, fontHeight+6);
setExtent(preferredWidth, getPreferredHeight());
}
// The preferred width of a row is defined by the list renderer.
public int getPreferredWidth()
{
return Graphics.getScreenWidth();
}
// The preferred height of a row is the "row height" as defined in the
// enclosing list.
public int getPreferredHeight()
{
return getRowHeight();
}
}
}
I am using 4 Field in a row. one bitmap and 3 Label Field. the code that control position and layout of the field is at TableRowManager Class in method SubLayout. The Bitmap Image is already in res folder. once you have known the basic. it should be easy to modified everything.
thats about it. it should have the same look and feel as the image above. the image that i used is saved into res folder so the app just load it from the app it self. what if the image is on the web and we need to load it to our app. i havent figured it out and because of the connection is really slow sometimes the app waiting the image to be downloaded and after that the app run with the image that have been downloaded.
to handle that slow connection and delay load of the app, at first im using local image to load the app first then after that the web image is shown. well i have to delay this some other time because i dont have a job to support myself right now.
Next time will be loading ListField Data with JSON. thanks for reading this crappy tutorial. i appreciate it.
Read Part 1
Go to Part 3
Comments