How to design a tabpanel in blackberry like iPhone style

Tab:

package com.synnex.mobile.utils; import net.rim.device.api.system.Bitmap; import net.rim.device.api.ui.Field; 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.Ui; import net.rim.device.api.ui.decor.Background; import net.rim.device.api.ui.decor.BackgroundFactory; public class SNXTab extends Field { private Background background; private String label; private Bitmap tabImage; private Bitmap tabImageHighlight; private Bitmap[] bitmaps; private final int NORMAL = 0; private final int FOCUS = 1; private final int TAB_WIDTH = 60; private final int TAB_HEIGHT = 49; protected SNXTab(String label, Bitmap tabImage, Bitmap tabImageHighlight, long style) { super(Field.FOCUSABLE | style); this.label = label; this.tabImage = tabImage; this.tabImageHighlight = tabImageHighlight; bitmaps = new Bitmap[] { this.tabImage, this.tabImageHighlight }; background = BackgroundFactory.createBitmapBackground(Bitmap .getBitmapResource("tab_bg.png")); setBackground(null); try { FontFamily alphaSansFamily = FontFamily.forName("Arial"); Font tabFont = alphaSansFamily.getFont(Font.PLAIN, 4, Ui.UNITS_pt); setFont(tabFont); } catch (ClassNotFoundException e) { } setMargin(0, 10, 0, 10); } protected void paint(Graphics graphics) { int index = NORMAL; int fontColor = 0x999999; if (isFocus()) { index = FOCUS; fontColor = 0xFFFFFF; } graphics.drawBitmap((TAB_WIDTH - this.bitmaps[index].getWidth()) / 2, (TAB_HEIGHT - this.bitmaps[index].getHeight()) / 2 - 4, this.bitmaps[index].getWidth(), this.bitmaps[index].getHeight(), this.bitmaps[index], 0, 0); int oldFontColor = graphics.getColor(); graphics.setColor(fontColor); graphics.drawText(label, (TAB_WIDTH - getFont().getAdvance(label)) / 2, (TAB_HEIGHT + this.bitmaps[index].getHeight()) / 2 - 2); graphics.setColor(oldFontColor); } protected void drawFocus(Graphics graphics, boolean on) { } protected void onFocus(int direction) { super.onFocus(direction); invalidate(); setBackground(background); } protected void onUnfocus() { super.onUnfocus(); invalidate(); setBackground(null); } public int getPreferredWidth() { return this.bitmaps[NORMAL].getWidth(); } public int getPreferredHeight() { return this.bitmaps[NORMAL].getHeight(); } protected void layout(int width, int height) { setExtent(TAB_WIDTH, TAB_HEIGHT); } }  

 

TabPanel:

package com.synnex.mobile.utils; import net.rim.device.api.system.Bitmap; import net.rim.device.api.system.Display; import net.rim.device.api.ui.Field; import net.rim.device.api.ui.Graphics; import net.rim.device.api.ui.Manager; import net.rim.device.api.ui.container.HorizontalFieldManager; import net.rim.device.api.ui.decor.Background; import net.rim.device.api.ui.decor.BackgroundFactory; public class SNXTabPanel extends HorizontalFieldManager { private Background background; public SNXTabPanel() { super(Manager.FIELD_HCENTER | Field.USE_ALL_WIDTH); Bitmap bitmap = Bitmap.getBitmapResource("bottom.png"); this.background = BackgroundFactory.createBitmapBackground(bitmap); setBackground(this.background); add(new SNXTab("Test1", Bitmap.getBitmapResource("Test11.png"), Bitmap.getBitmapResource("Test11active.png"), 0)); add(new SNXTab("Test2", Bitmap.getBitmapResource("Test22.png"), Bitmap.getBitmapResource("Test22active.png"), 0)); add(new SNXTab("Test3", Bitmap.getBitmapResource("Test33.png"), Bitmap .getBitmapResource("Test33active.png"), 0)); } }