How to highlight button when get focus on it in blackberry? - blackberry

Question

I want to make a blackberry button with images, the one image should be shown when focused and another when unfocused.
or even you can say a blue color when focus is off(by default) and red color when focus is on, how can I achieve such thing ?
see my custom class
import net.rim.device.api.system.Bitmap;
import net.rim.device.api.ui.Color;
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;
public class MyButtonField extends Field {
// private int backgroundColour = 0xFFFFFF;
private Bitmap button;
private Bitmap on; //= Bitmap.getBitmapResource("img/pink_scribble.bmp");
private Bitmap off; // = Bitmap.getBitmapResource("img/blue_scribble.bmp");
private int fieldWidth;
private int fieldHeight;
// private int buffer = (Display.getHeight() - 105) / 2;
private String text;
private Font fieldFont;
private boolean btn_text = true;
private static long style = Field.FIELD_HCENTER | Field.FIELD_VCENTER;
public MyButtonField(String _text, String onpath, String offpath) {
super(Field.FOCUSABLE | style);
text = _text;
on = Bitmap.getBitmapResource(onpath);
off = Bitmap.getBitmapResource(offpath);
fieldWidth = on.getWidth();
fieldHeight = on.getHeight();
button = off;
fieldFont = FieldFont();
}
public MyButtonField(String _text, String onpath, String offpath, String focusedpath){
this(_text, onpath, offpath);
}
public MyButtonField(String _text, String onpath, String offpath, boolean btn_text) {
this(_text, onpath , offpath);
this.btn_text = btn_text;
}
public MyButtonField(String _text, String onpath, String offpath, boolean btn_text, int style, int size)
{
this(_text, onpath , offpath, btn_text);
fieldFont = FieldFont(style, size);
}
public MyButtonField(String _text, String onpath, String offpath, long style)
{
this(_text, onpath , offpath);
}
// public MyButtonField(String _text, String onpath, String offpath, int background)
// {
// this(_text, onpath , offpath);
//// backgroundColour = background;
// }
protected boolean navigationClick(int status, int time) {
fieldChangeNotify(1);
return true;
}
protected void onFocus(int direction) {
button = on;
invalidate();
}
protected void onUnfocus() {
button = off;
invalidate();
}
public int getPreferredWidth() {
return fieldWidth;
}
public int getPreferredHeight() {
return fieldHeight;
}
protected void layout(int arg0, int arg1) {
setExtent(getPreferredWidth(), getPreferredHeight());
}
public static Font FieldFont()
{
try {
FontFamily theFam = FontFamily.forName("SYSTEM");
return theFam.getFont(net.rim.device.api.ui.Font.PLAIN, 14);
} catch (ClassNotFoundException ex) {
ex.printStackTrace();
}
return null;
}
public static Font FieldFont(int style, int size)
{
try {
FontFamily theFam = FontFamily.forName("SYSTEM");
return theFam.getFont(style, size);
} catch (ClassNotFoundException ex) {
ex.printStackTrace();
}
return null;
}
protected void drawFocus(Graphics graphics, boolean on) {
if (on) {
//graphics.setColor(Color.RED);
int width = getWidth();
int height = getHeight();
graphics.drawBitmap(0, 0, fieldWidth, fieldHeight, button, 0, 0);
//Draw a border around the field.
/*
graphics.fillRoundRect(0, 0, 3, height,10,10); //Left border
graphics.fillRoundRect(0, 0, width, 3,10,10); //Top border
graphics.fillRoundRect(width-3, 0, 3, height,10,10); //Right border
graphics.fillRoundRect(0, height-3, width, 3,10,10); //Bottom border
*/
graphics.setColor(Color.GRAY);
}
invalidate();
}
public void setFocusImage()
{
button = on;
}
public void setUnFocusImage()
{
button = off;
}
protected void fieldChangeNotify(int context) {
this.getChangeListener().fieldChanged(this, context);
}
protected void paint(Graphics graphics)
{
graphics.drawBitmap(0, 0, fieldWidth, fieldHeight, button, 0, 0);
graphics.setFont(getFont().derive(Font.PLAIN, 8));
graphics.setColor(Color.LIGHTGRAY);
// graphics.fillRoundRect(0, 0, fieldWidth, fieldHeight, 8, 8);
// graphics.setColor(Color.GRAY);
//graphics.drawRoundRect(0, 0, fieldWidth, fieldHeight, 8, 8);
if(btn_text)
graphics.drawText(text, 10, 5);
}
public String getLabel() {
return text;
}
}

Answer 1

You should override onFocus(), onUnfocus() and paint().
Please refer to Custom Button Field article.

Answer 2

You are probably missing this point:
public boolean isFocusable() {
return true;
}
This should be in your custom Field in order the BB UI framework to understand it is a focusable field. Yes, this is odd, since you're already passing Field.FOCUSABLE in constructor, however just give it a try.

Answer 3

Why are you overriding drawFocus() method. Since you are overriding paint method and onFocus & onUnFocus to change bitmap, you don't need to do anything in drawFocus(). Use paint method to draw anything. Everytime you call Invalide(), it will ask screen/field to repaint itself. So remove all code from drawFocus and add it in paint method.
protected void drawFocus(Graphics graphics, boolean on)
{
// Do nothing
}
protected void paint(Graphics graphics)
{
graphics.drawBitmap(0, 0, fieldWidth, fieldHeight, button, 0, 0);
graphics.setFont(getFont().derive(Font.PLAIN, 8));
graphics.setColor(Color.LIGHTGRAY);
if(btn_text)
graphics.drawText(text, 10, 5);
}
Hope it solves your problem.