Blackberry Creating Toolbar Part 1

Update  Oct-9-2012

* I think i should make this tutorial into parts. Part 1 should be for beginner, the higher part should be for advanced coder *
-----------------------------------------------------------------------------------------------------
Requirements :

- BlackBerry OS 5

Right now I want to create Toolbar just like this

 

What i really want to create Toolbar with Back Button, Screen Name and some Align Right Button or Text. and of course with fixed position.

Right now i don't really have a solution to create amazing toolbar but right now I'm using GridFieldManager to create a simple toolbar. but I'll update this soon i got the solution and i hope with a cool layout.

This is the First Code

// CODE SUPPOSED TO BE HERE

import net.rim.device.api.system.Display;
import net.rim.device.api.ui.DrawStyle;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.FieldChangeListener;
import net.rim.device.api.ui.Font;
import net.rim.device.api.ui.FontFamily;
import net.rim.device.api.ui.component.ButtonField;
import net.rim.device.api.ui.component.Dialog;
import net.rim.device.api.ui.component.LabelField;
import net.rim.device.api.ui.container.GridFieldManager;
import net.rim.device.api.ui.container.MainScreen;

public class HeaderTest extends MainScreen {

    /**
     * 
     */
    public HeaderTest() {
        super(MainScreen.VERTICAL_SCROLL | MainScreen.VERTICAL_SCROLLBAR);
        // TODO Auto-generated constructor stub
        HeaderStyle1();
        
    }
    
    public void HeaderStyle1(){
        /*
         * This Style Should be Consist <backButton> ScreenName <otherButton>
         * And Using GridFieldManager
         */
        GridFieldManager gfm = new GridFieldManager(1, 3, 0);
        //gfm.setBorder(BorderFactory.createSimpleBorder(new XYEdges(0,0,0,0),Border.STYLE_DASHED));
        
        int columnWidth1 = (int) ((Display.getWidth() * 0.2) - gfm.getColumnPadding());
        int columnWidth2 = (int) ((Display.getWidth() * 0.6) - gfm.getColumnPadding());
        int columnWidth3 = (int) ((Display.getWidth() * 0.2) - gfm.getColumnPadding());
        //int totalCol = gfm.getColumnCount();
//         for(int i = 0; i < totalCol; i++) {
//            gfm.setColumnProperty(i, GridFieldManager.FIXED_SIZE, columnWidth);
//         }
        //gfm.setBackground(BackgroundFactory.createSolidBackground(0xA3080C));
        gfm.setColumnProperty(0, GridFieldManager.FIXED_SIZE, columnWidth1);
        gfm.setColumnProperty(1, GridFieldManager.FIXED_SIZE, columnWidth2);
        gfm.setColumnProperty(2, GridFieldManager.FIXED_SIZE, columnWidth3);
        gfm.isStyle(GridFieldManager.USE_ALL_WIDTH);
        ButtonField backButton = new ButtonField("Back",ButtonField.CONSUME_CLICK | DrawStyle.ELLIPSIS);
        gfm.add(backButton);
        
        LabelField labelTitle = new LabelField("Screen Name");
        Font myFont = labelTitle.getFont();
        FontFamily fontFam;
        try {
            fontFam = FontFamily.forName("System");
            myFont = fontFam.getFont(Font.BOLD,28);
        } catch (ClassNotFoundException e) {
            // TODO Auto-generated catch block
            //e.printStackTrace();
        }
        labelTitle.setFont(myFont);
        gfm.add(labelTitle);
        ButtonField cartButton = new ButtonField("Cart",ButtonField.CONSUME_CLICK | DrawStyle.ELLIPSIS);
        gfm.add(cartButton);
        
        FieldChangeListener backBtnListener = new FieldChangeListener() {
            
            public void fieldChanged(Field field, int context) {
                // TODO Auto-generated method stub
                Dialog.inform("Back Button is Pushed");
            }
        };
        backButton.setChangeListener(backBtnListener);
        
        FieldChangeListener cartBtnListener = new FieldChangeListener() {
            
            public void fieldChanged(Field field, int context) {
                // TODO Auto-generated method stub
                Dialog.inform("Cart Button is Pushed");
            }
        };
        cartButton.setChangeListener(cartBtnListener);
        add(gfm);
    }
    
    public boolean onClose() {
        setDirty(false);
        return super.onClose();
    }
    
}

This is my First Result

As you see the code i'm using GridFieldManager to handle Fields (Button Field, Label Field, etc). Other things is pretty much simple.

Thanks.

See the Part 2 of the tutorial. the part 2 will be using a simple style to create colorfull toolbar. well its not really colorful. i just add background color.. :p

Go to Part 2