Skip to main content

Blackberry Creating Toolbar Part 2

This is part 2 of Creating Toolbar on Blackberry.

Read Part 1

Requirements :

- Blackberry OS 5

UPDATE 4-29-2012

After few styling and researching i managed to create background color. after i think its looking quite alright without color gradient or anything, its time to try on storm / BB 9550.

after that i found a problem when the Display is tilted into Landscape the layout width doesn't redraw / synchronize automatically. but solution found on http://www.stackoverflow.com.

here's the link if you want to know : http://stackoverflow.com/questions/7789734/auto-rotation-on-blackberry-programming

anyway here is my code



import net.rim.device.api.system.Display;
import net.rim.device.api.ui.Color;
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.Graphics;
import net.rim.device.api.ui.UiApplication;
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;
import net.rim.device.api.ui.decor.BackgroundFactory;

public class HeaderTest extends MainScreen {
    GridFieldManager gfm ;
    /**
     * 
     */
    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
         */
        
        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.25) - gfm.getColumnPadding());
        int columnWidth2 = (int) ((Display.getWidth() * 0.5) - gfm.getColumnPadding());
        int columnWidth3 = (int) ((Display.getWidth() * 0.25) - 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"){

            protected void paint(Graphics graphics) {
                // TODO Auto-generated method stub
                graphics.setColor(Color.WHITE);
                super.paint(graphics);
            }
            
        };
        Font myFont = labelTitle.getFont();
        FontFamily fontFam;
        try {
            fontFam = FontFamily.forName("System");
            myFont = fontFam.getFont(Font.BOLD,20);
            
        } catch (ClassNotFoundException e) {
            // TODO Auto-generated catch block
            //e.printStackTrace();
        }
        //myFont.
        labelTitle.setFont(myFont);
        
        gfm.add(labelTitle);
        ButtonField cartButton = new ButtonField("Cart",ButtonField.CONSUME_CLICK | DrawStyle.ELLIPSIS);
        gfm.add(cartButton);
        
        backButton.setChangeListener(new FieldChangeListener() {
            
            public void fieldChanged(Field field, int context) {
                // TODO Auto-generated method stub
                Dialog.inform("Back Button is Pushed");
            }
        });
        
        cartButton.setChangeListener(new FieldChangeListener() {
            
            public void fieldChanged(Field field, int context) {
                // TODO Auto-generated method stub
                Dialog.inform("Cart Button is Pushed");
            }
        });
        add(gfm);
    }
    
    public void refreshList(){
        if(gfm != null){
            delete(gfm);
            HeaderStyle1();
        }
    }
    
    public boolean onClose() {
        setDirty(false);
        return super.onClose();
    }

    protected void sublayout(int width, int height) {
         int displayWidth = Display.getWidth();
         int displayHeight = Display.getHeight();

         switch (Display.getOrientation()) {
         case Display.ORIENTATION_LANDSCAPE:
             UiApplication.getUiApplication().invokeLater(new Runnable()
             {
                 public void run()
                 {
                     Dialog.alert("Screen orientation is landscape");
                     refreshList();
                     // here you need to change your uI code as you want to do in for landscape mode
                     // you may need to delete and add the UI comps manually
                     // if the components added to absolute layout then just refresh the screen it will auto adjust with your new screen size 
                 }
             });

             break;
         case Display.ORIENTATION_PORTRAIT:
             UiApplication.getUiApplication().invokeLater(new Runnable()
             {
                 public void run()
                 {
                     Dialog.alert("Screen orientation is PORTRAIT:");
                     refreshList();
                     // here you need to change your uI code as you want to do in for PORTRAIT mode
                     // you may need to delete and add the UI comps manually
                     // if the components added to absolute layout then just refresh the screen it will auto adjust with your new screen size 

                 }
             });
             break;
         }
         super.sublayout(displayWidth, displayHeight);
         setExtent(displayWidth, displayHeight);
        
    }
    
}


and here is the result


UPDATE 4-30-2012 :

After this few period of research i don't know if i can do the gradient color. anyway RIM Developer have already created advance UI to use. they already at git hub. so if you wanna grab it just use GIT Client.

i'm using HorizontalListStyleButtonSet from
https://github.com/blackberry/Samples-for-Java/tree/master/Advanced%20UI
don't forget to add few class that support HorizontalListStyleButtonSet
JustifiedEvenlySpacedHorizontalFieldManager.java
ListStyleButtonField.java

the result is like this



the code is

package mypackage.screen;

import mypackage.HorizontalListStyleButtonSet;
import mypackage.ListStyleButtonField;
import net.rim.device.api.system.Display;
import net.rim.device.api.ui.Color;
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.Graphics;
import net.rim.device.api.ui.UiApplication;
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;
import net.rim.device.api.ui.decor.BackgroundFactory;

public class HeaderTest extends MainScreen {
    GridFieldManager gfm ;
    HorizontalListStyleButtonSet exampleSet;
    /**
     * 
     */
    public HeaderTest() {
        super(MainScreen.VERTICAL_SCROLL | MainScreen.VERTICAL_SCROLLBAR);
        // TODO Auto-generated constructor stub
        HeaderStyle1();
        ListStyle();
        
    }
    
    public void HeaderStyle1(){
        /*
         * This Style Should be Consist <backButton> ScreenName <otherButton>
         * And Using 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.25) - gfm.getColumnPadding());
        int columnWidth2 = (int) ((Display.getWidth() * 0.5) - gfm.getColumnPadding());
        int columnWidth3 = (int) ((Display.getWidth() * 0.25) - 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"){

            protected void paint(Graphics graphics) {
                // TODO Auto-generated method stub
                graphics.setColor(Color.WHITE);
                super.paint(graphics);
            }
            
        };
        Font myFont = labelTitle.getFont();
        FontFamily fontFam;
        try {
            fontFam = FontFamily.forName("System");
            myFont = fontFam.getFont(Font.BOLD,20);
            
        } catch (ClassNotFoundException e) {
            // TODO Auto-generated catch block
            //e.printStackTrace();
        }
        //myFont.
        labelTitle.setFont(myFont);
        
        gfm.add(labelTitle);
        ButtonField cartButton = new ButtonField("Cart",ButtonField.CONSUME_CLICK | DrawStyle.ELLIPSIS);
        gfm.add(cartButton);
        
        backButton.setChangeListener(new FieldChangeListener() {
            
            public void fieldChanged(Field field, int context) {
                // TODO Auto-generated method stub
                Dialog.inform("Back Button is Pushed");
            }
        });
        
        cartButton.setChangeListener(new FieldChangeListener() {
            
            public void fieldChanged(Field field, int context) {
                // TODO Auto-generated method stub
                Dialog.inform("Cart Button is Pushed");
            }
        });
        
            add(gfm);
        
    }
    
    public void refreshList(){
        if(gfm != null){
            int myIndex = gfm.getIndex();
            delete(gfm);
            HeaderStyle1();
        }
        if(exampleSet != null) {
            delete(exampleSet);
            ListStyle();
        }
    }
    
    public boolean onClose() {
        setDirty(false);
        return super.onClose();
    }

    protected void sublayout(int width, int height) {
         int displayWidth = Display.getWidth();
         int displayHeight = Display.getHeight();

         switch (Display.getOrientation()) {
         case Display.ORIENTATION_LANDSCAPE:
             UiApplication.getUiApplication().invokeLater(new Runnable()
             {
                 public void run()
                 {
                     Dialog.alert("Screen orientation is landscape");
                     refreshList();
                     // here you need to change your uI code as you want to do in for landscape mode
                     // you may need to delete and add the UI comps manually
                     // if the components added to absolute layout then just refresh the screen it will auto adjust with your new screen size 
                 }
             });

             break;
         case Display.ORIENTATION_PORTRAIT:
             UiApplication.getUiApplication().invokeLater(new Runnable()
             {
                 public void run()
                 {
                     Dialog.alert("Screen orientation is PORTRAIT:");
                     refreshList();
                     // here you need to change your uI code as you want to do in for PORTRAIT mode
                     // you may need to delete and add the UI comps manually
                     // if the components added to absolute layout then just refresh the screen it will auto adjust with your new screen size 

                 }
             });
             break;
         }
         super.sublayout(displayWidth, displayHeight);
         setExtent(displayWidth, displayHeight);
        
    }
    
    
    public void ListStyle(){
        exampleSet = new HorizontalListStyleButtonSet();
        ListStyleButtonField myBackBtn = new ListStyleButtonField( "Back", DrawStyle.HCENTER ) ;
        myBackBtn.setChangeListener(new FieldChangeListener() {
            
            public void fieldChanged(Field field, int context) {
                // TODO Auto-generated method stub
                Dialog.inform("Back Button Clicked");
            }
        });
        exampleSet.add( myBackBtn );
        exampleSet.add( new ListStyleButtonField( "Screen Name", DrawStyle.HCENTER ) );
        exampleSet.add( new ListStyleButtonField( "Cart", DrawStyle.HCENTER ) );
        add( exampleSet );
    }
}



as you can see I'm still using the same code as before. so you'll notice the difference.


P.S I'll update this soon i got the solution and i hope with a cool layout.

Read Part 1

Go to Part 3
Labels:

Comments

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

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
2 comments
Read more

MySQL and Java Developer's Guide

Now we begin the second book and thats called MySQL and Java Developer's Guide. Book before this is quiet advance for beginner but still for beginner. And i notice that previous book had only 4 chapter. Ill read that book again. Okay Lets start. This book consist MySQL and Java plus Connector/J that connect Java to MySQL. This book is perfect for beginner but not beginner in programming. I think that this book is a hardcore book. Everything they wrote even if they use GUI Object like form and button they only use a "Notepad" or should i say "Text Editor". i really love this book. From this book you need to install three things to make the code in the book work. a. Install mySql b. Install Java SDK @ http://java.sun.com/j2se/1.4.1/download.html. c. Installing Connector/J @mysql.com version 3.0 thats from the book. I use this : jdk-1_5_0_11-nb-5_5-win-ml.exe notice the nb-5_5 that means itll install netbeans 5.5. netbean 5.5 is IDE for jdk 1.5. its devel...
Post a Comment
Read more