Skip to main content

BlackBerry ListField Tutorial Part 2


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
Labels:

Comments

Admin said…
great articel.how to loading ListField Data with JSON ? waiting for part 3. :D thanks..
January 26, 2013 at 5:03 PM
Unknown said…
still waiting part 3
March 19, 2013 at 7:57 PM
Post a Comment

Popular posts from this blog

JavaScript Real Time Calculation

I've been around looking for javascript that can do Real Time Calculation. javascript real time calculation, javascript real time calculation textbox. by some lucky keywords i found this code. this is exactly the code that i want. it really do the real time calculation. and it doesn't need onChange or OnBlur function. Just try it Example + = this is the javascript code <script type='text/javascript' > function startCalc(){   interval = setInterval("calc()",1); } function calc(){   one = document.autoSumForm.firstBox.value;   two = document.autoSumForm.secondBox.value;   document.autoSumForm.thirdBox.value = (one * 1) + (two * 1); } function stopCalc(){   clearInterval(interval); } </script> this is the html code <form name="autoSumForm">   <input class="right" type=text name="firstBox" value="" onFocus="startCalc();" onBlur="stopCalc();"><br...
3 comments
Read more

iOS 5 Creating eCommerce with Shopping Cart App Part 1

[Created 11-28-2012] it seems like there are tons of tutorial ios and xcode for beginner out there. you can view the list at my post here http://javalearning-adventure.blogspot.com/2012/11/learning-xcode.html that's the link that i always update if i find anything. this tutorial will consist of step by step in creating Shopping Cart App. There will be Browse Product, Shopping Cart, and Checkout Method. I will update these later after i satisfied with the end result. These tutorial will also include web programming using php. but these php will only using basic sample not the very complex with mysql database and everything. these php pages will only creating json output. i think you don't need to learn php and json. you should only learn how to handle json using objective-c. I am still a beginner in xcode and objective-c, its still only 1 month since i started these tutorial. requirements suppose to be iOS 5 with xcode 4. [i will update these later][postponed...
1 comment
Read more

BlackBerry ListField Tutorial Part 3

This Part 3 will consist of Networking, ListField, JSON and Thread. I'm really sorry for pending this part 3. I've been busy making money and still failed. Its just really hard to live in third world country by coding. anyway, There are few Library that you will need creating ListField with JSON data, but we wont touch that area first. we need to learn the basic. * note added : Aug 26 2013 The basic should be : Networking Thread ListField [if i find anything, will be add here]
Post a Comment
Read more