Blackberry UI guidelines for making Toolbar like iPhone

Question

I want to make an existing iPhone application in blackberry. Now I am in feasibility study phase for mockup design. I was looking for implementing the iPhone toolbar (as shown in below attached image) kind of functionality for blackberry. I am not really looking to implement the same, it can be changed according to the blackberry UI guidelines.

After doing round of googleing i came across few things listed below

1. Use menu items and place icon
2. Create ToolBar same as iPhone, But again the API is available from BB SDK 6.0 onwards. I am keen to implement in BB SDK 5.0. We can customize the same but, I believe that is gonna be a huge effort.

Some reference links

BlackBerry - Custom menu toolbar

how to create iphone like tabs layout in blackberry

http://docs.blackberry.com/en/developers/deliverables/17965/Toolbars_6_0_1137042_11.jsp

Please suggest any other best way to implement the same, without violating the blackberry usability guidelines and could be best suited for my requirements.

Answer 1

try this -

import net.rim.device.api.system.Bitmap;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.FocusChangeListener;
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.BasicEditField;
import net.rim.device.api.ui.component.BitmapField;
import net.rim.device.api.ui.component.ButtonField;
import net.rim.device.api.ui.component.LabelField;
import net.rim.device.api.ui.component.SeparatorField;
import net.rim.device.api.ui.container.HorizontalFieldManager;
import net.rim.device.api.ui.container.MainScreen;
import net.rim.device.api.ui.container.VerticalFieldManager;

public class tabbar extends UiApplication {

public tabbar() {
    TabControlScreen screen = new TabControlScreen();
    pushScreen(screen);
}

/**
 * @param args
 */
public static void main(String[] args) {
    tabbar app = new tabbar();
    app.enterEventDispatcher();
}

private class TabControlScreen extends MainScreen implements FocusChangeListener {



    private VerticalFieldManager tabArea;

    private LabelField tab1Heading;
    private LabelField tab2Heading;
    private LabelField tab3Heading;
    private LabelField tab4Heading;


    private VerticalFieldManager tab1Manager;
    private VerticalFieldManager tab2Manager;
    private VerticalFieldManager tab3Manager;
    private VerticalFieldManager tab4Manager;
    BitmapField bit,bit1,bit2,bit3;

    public TabControlScreen() {



        HorizontalFieldManager hManager = new HorizontalFieldManager(FIELD_HCENTER);

        final Bitmap header_logo = Bitmap.getBitmapResource("1.png");
        bit=new BitmapField(header_logo,BitmapField.FOCUSABLE |BitmapField.HIGHLIGHT_FOCUS);

        final Bitmap header_logo1 = Bitmap.getBitmapResource("3.png");
        bit1=new BitmapField(header_logo1,BitmapField.FOCUSABLE |BitmapField.HIGHLIGHT_FOCUS);

        final Bitmap header_logo2 = Bitmap.getBitmapResource("2.png");
        bit2=new BitmapField(header_logo2,BitmapField.FOCUSABLE |BitmapField.HIGHLIGHT_FOCUS);

        final Bitmap header_logo3 = Bitmap.getBitmapResource("4.png");
        bit3=new BitmapField(header_logo3,BitmapField.FOCUSABLE |BitmapField.HIGHLIGHT_FOCUS);


        bit.setFocusListener(this);
        bit1.setFocusListener(this);
        bit2.setFocusListener(this);
        bit3.setFocusListener(this);


        hManager.add(bit);
        hManager.add(bit1);
        hManager.add(bit2);
        hManager.add(bit3);



        add(hManager);

        tab1Manager = new VerticalFieldManager();
        tab2Manager = new VerticalFieldManager();
        tab3Manager = new VerticalFieldManager();
        tab4Manager = new VerticalFieldManager();


        tabArea = displayTab1();
        add(tabArea);

    }

    public void focusChanged(Field field, int eventType) {
        if (tabArea != null) {
            if (eventType == FOCUS_GAINED) {
                if (field == bit) {

                    delete(tabArea);
                    tabArea = displayTab1();
                    add(tabArea);
                } else if (field == bit1) {

                    delete(tabArea);
                    tabArea = displayTab2();
                    add(tabArea);
                } else if (field == bit2) {

                    delete(tabArea);
                    tabArea = displayTab3();
                    add(tabArea);
                }
                else if (field == bit3) {

                    delete(tabArea);
                    tabArea = displayTab4();
                    add(tabArea);
                }
            }
        }

    }

    public VerticalFieldManager displayTab1() {
        if (tab1Heading == null) {
            tab1Heading = new LabelField("1");

            ButtonField settings=new ButtonField("Settings",ButtonField.FIELD_LEFT);
            //ButtonField add=new ButtonField("Add",ButtonField.FIELD_RIGHT);

            //JustifiedHorizontalFieldManager JustifiedHorizontalFieldManager=new JustifiedHorizontalFieldManager(settings,add,true);


            tab1Manager.add(settings);
        }

        return tab1Manager;
    }



    public VerticalFieldManager displayTab2() {
        if (tab2Heading == null) {
            tab2Heading = new LabelField("2");
            tab2Manager.add(tab2Heading);
        }

        return tab2Manager;
    }

    public VerticalFieldManager displayTab3() {
        if (tab3Heading == null) {
            tab3Heading = new LabelField("3");
            tab3Manager.add(tab3Heading);
        }

        return tab3Manager;
    }
    public VerticalFieldManager displayTab4() {
        if (tab4Heading == null) {
            tab4Heading = new LabelField("4");
            tab4Manager.add(tab4Heading);
        }

        return tab4Manager;
    }
}

}

Answer 2

You can use the Advanced UI components, we use them in our projects and they usually do the trick.

The code is open source, and you can extend them if you need to.