Tuesday, September 27, 2011

Creating Bottom Menu Bar in Blackberry



Here is the tutorial explaining about creating bottom menu bar in blackberry. Tool tip also included with this menu bar.




First create several images to place in the bottom menu bar. Don't forget to create two different type of images(one for normal and another for hover state).

CODE



Code for Home screen


public class home extends UiApplication implements FieldChangeListener {
public long mycolor;
public Background txtcolor = BackgroundFactory.createLinearGradientBackground(Color.GRAY, Color.GRAY, Color.GRAY, Color.GRAY);
Font myFont1;
Font myFont2;
Font font = Font.getDefault().derive(Font.ITALIC, 14);
Font myFont;

HttpConnection connection;

VerticalFieldManager mainManager;
VerticalFieldManager subManager;

private int deviceWidth = Display.getWidth();
private int deviceHeight = Display.getHeight();

static PictureBackgroundButtonField picture1;
static PictureBackgroundButtonField picture2;
static PictureBackgroundButtonField picture3;
static PictureBackgroundButtonField picture4;
static PictureBackgroundButtonField picture5;

Bitmap btp1_in = Bitmap.getBitmapResource("1.png");
Bitmap btp2_in = Bitmap.getBitmapResource("2.png");
Bitmap btp3_in = Bitmap.getBitmapResource("3.png");
Bitmap btp4_in = Bitmap.getBitmapResource("4.png");
Bitmap btp5_in = Bitmap.getBitmapResource("5.png");

Bitmap btp1_out = Bitmap.getBitmapResource("1_focus.png");
Bitmap btp2_out = Bitmap.getBitmapResource("2_focus.png");
Bitmap btp3_out = Bitmap.getBitmapResource("3_focus.png");
Bitmap btp4_out = Bitmap.getBitmapResource("4_focus.png");
Bitmap btp5_out = Bitmap.getBitmapResource("5_focus.png");

final Bitmap backgroundBitmap = Bitmap.getBitmapResource("blackbg.png");

public static Vector imgvet = new Vector();

public static void main(String arg[])
{
home application = new home();
application.enterEventDispatcher();

}

public home() {

super();

pushScreen(Screen);
//this is the main manager
mainManager = new VerticalFieldManager(Manager.NO_VERTICAL_SCROLL | Manager.NO_VERTICAL_SCROLLBAR )
{
public void paint(Graphics graphics)
{
graphics.clear();
graphics.drawBitmap(0, 0, deviceWidth, deviceHeight, backgroundBitmap, 0, 0);
super.paint(graphics);
}
};
//this manger is used for adding the componentes
subManager = new VerticalFieldManager(Manager.NO_VERTICAL_SCROLL | Manager.NO_VERTICAL_SCROLLBAR )
{
protected void sublayout( int maxWidth, int maxHeight )
{
int displayWidth = deviceWidth;
int displayHeight = deviceHeight;

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

//adding the sub manager to the main manager
mainManager.add(subManager);
// adding the main manager to the screen
Screen.add(mainManager);

HorizontalFieldManager menuBar = new HorizontalFieldManager(Field.USE_ALL_WIDTH);

picture1 = new PictureBackgroundButtonField("1 selected",btp1_in, btp1_out,0);
picture2 = new PictureBackgroundButtonField("2 selected",btp2_in, btp2_out,100);
picture3 = new PictureBackgroundButtonField("3 selected",btp3_in, btp3_out,200);
picture4 = new PictureBackgroundButtonField("4 selected",btp4_in, btp4_out,300);
picture5 = new PictureBackgroundButtonField("5 selected",btp5_in, btp5_out,400);

picture1.setChangeListener(this);
picture2.setChangeListener(this);
picture3.setChangeListener(this);
picture4.setChangeListener(this);
picture5.setChangeListener(this);

menuBar.add(picture1);
menuBar.add(picture2);
menuBar.add(picture3);
menuBar.add(picture4);
menuBar.add(picture5);

FontFamily ff2 = null;
try {
ff2 = FontFamily.forName("Times New Roman");
} catch (ClassNotFoundException e) {

e.printStackTrace();
}

myFont2 = ff2.getFont(Font.EXTRA_BOLD, 180,(int) RichTextField.USE_ALL_WIDTH|(int)RichTextField.READONLY);

Screen.setStatus(menuBar);

LabelField lbl = new LabelField()
{
public void paint(Graphics graphics)

{
graphics.setColor(0x00FFFFFF);
super.paint(graphics);

}
};

LabelField lbl2 = new LabelField()
{
public void paint(Graphics graphics)

{
graphics.setColor(0x00FFFFFF);
super.paint(graphics);

}
};
//************** done this for Cluster Lessons name in the screen *********************
lbl.setFont(myFont2);
lbl.setText("Cluster");

lbl2.setFont(myFont2);
lbl2.setText("Lessons");
subManager.add(lbl);
subManager.add(lbl2);

int dHeight=deviceHeight/4;
int dWidth=(deviceWidth/2)-120;
subManager.setPadding(dHeight, 0, 0, dWidth);
//****************************************************************************************


}

//##############################constructor ends here..###############################################


public static MainScreen Screen = (new MainScreen() {
protected boolean navigationClick(int status, int time)
{
try
{

if(picture1.isFocus())
{
//navigate for Button 1
}


if(picture2.isFocus())
{
//navigate for Button 2
}

if(picture3.isFocus())
{
//navigate for Button 4
}

if(picture4.isFocus())
{
//navigate for Button 4
}

if(picture5.isFocus())
{
//navigate for Button 5
}


}
catch(Exception e)
{
System.out.println("Exception:- : navigationClick() "+e.toString());
}

return true;
}

public boolean onSavePrompt()
{
return true;
}
});

public void fieldChanged(Field field, int context) {


}

}


Creating custom class for menu bar.


public class PictureBackgroundButtonField extends BitmapField {
MyTooltip _tooltip;
Bitmap mNormal;
Bitmap mFocused;
Bitmap mActive;
String text;
int mWidth;
int mHeight;
int xpos1;


public PictureBackgroundButtonField(String text,Bitmap normal, Bitmap focused, int xpos)
{
super(normal,FOCUSABLE);
mNormal = normal;
mFocused = focused;
mWidth = mNormal.getWidth();
mHeight = mNormal.getHeight();
this.text=text;
setMargin(0, 0, 0, 0);
setPadding(0, 0, 0, 0);
xpos1 = xpos;
}

public String getText()
{
return text;
}
public void setText(String text)
{
this.text=text;
}
protected void paint(Graphics graphics) {
Bitmap bitmap = mNormal;
if(isFocus())
{
bitmap = mFocused;
}
else
{
bitmap = mNormal;
}

graphics.drawBitmap(0, 0, bitmap.getWidth(), bitmap.getHeight(), bitmap, 0, 0);
}
protected void drawFocus(Graphics graphics, boolean on) {
}
protected void onFocus(int direction) {

//lbt.setText(text);
invalidate();
super.onFocus(direction);
if ( _tooltip != null ) {
_tooltip.removeToolTip();
_tooltip = null;
}

// Display tooltip at 50,50 for 5 seconds
_tooltip = MyTooltip.addToolTip(UiApplication.getUiApplication(), text, xpos1, 270, 1);
}
protected void onUnfocus() {
//lbt.setText("");
invalidate();
super.onUnfocus();
if ( _tooltip != null ) {
// We have displayed a Tooltip - remove it
_tooltip.removeToolTip();
_tooltip = null;
}
}
public int getPreferredWidth() {
return mWidth;
}

public int getPreferredHeight() {
return mHeight;
}

protected void layout(int width, int height) {
setExtent(mWidth, mHeight);
}
}



Creating custom class for Tool tip.


class MyTooltip extends PopupScreen{
int _x;
int _y;
TooltipThread _tooltipThread;

private MyTooltip(Manager manager) {
super(manager);
}
public void sublayout(int width, int height) {
super.sublayout(width,height);
setPosition(_x,_y);
System.out.println("Tooltip x: " + Integer.toString(_x) + ", y: " + Integer.toString(_y));
}
protected void applyTheme() {
// Overriden to suppress Border etc.
}
public void removeToolTip() {
if ( _tooltipThread != null ) {
_tooltipThread.dismiss();
}
}
private void display(UiApplication uiApp, int x, int y, int displayTime) {
_x = x;
_y = y;
_tooltipThread = new TooltipThread(uiApp, this, displayTime);
_tooltipThread.start();
}

public static MyTooltip addToolTip(UiApplication uiApp, String toolTipString, int x, int y, int displayTime) {
VerticalFieldManager manager = new VerticalFieldManager(Manager.FIELD_VCENTER|Manager.NON_FOCUSABLE) {
protected void paint(Graphics graphics) {
graphics.setColor(0x00FFFFFF); // White
graphics.fillRect(0,0,getWidth(),getHeight());
graphics.setColor(0x00000000); // Black
graphics.drawRect(0,0,getWidth(),getHeight());
super.paint(graphics);
}
};
MyTooltip toolTip = new MyTooltip(manager);
LabelField label = new LabelField(' ' + toolTipString + ' ', LabelField.NON_FOCUSABLE);
label.setFont(Font.getDefault().derive(Font.PLAIN, 16));
toolTip.add(label);
toolTip.display(uiApp, x, y, displayTime);
return toolTip;
}

class TooltipThread extends Thread {

Object _notifyObject = new Object(); // Used to allow user to dismiss this Tooltip
PopupScreen _tooltip; // Screen we are going to display
UiApplication _ourApplication; // access to pushGlobalScreen and dismissStatus from our Application
int _displayTime; // in seconds

public TooltipThread(UiApplication ourApplication, PopupScreen tooltip, int displayTime) {
_tooltip = tooltip;
_ourApplication = ourApplication;
_displayTime = displayTime;
}

public void run() {
_ourApplication.pushGlobalScreen(_tooltip, 999, false);
synchronized(_notifyObject) {
try {
_notifyObject.wait(_displayTime * 1000);
} catch (Exception e) {
}
};
_ourApplication.dismissStatus(_tooltip);
}

public void dismiss() {
// notify the waiting object to stop the Thread waiting
synchronized(_notifyObject) {
_notifyObject.notify();
}
}

}


}


Your output will be like this.



That's it. Your custom bottom menu bar is ready. You can download the sample project below.


Arun Kumar Munusamy Web Developer

Morbi aliquam fringilla nisl. Pellentesque eleifend condimentum tellus, vel vulputate tortor malesuada sit amet. Aliquam vel vestibulum metus. Aenean ut mi aucto.

No comments:

Post a Comment