How to change custom buttonfield bitmap on focus? (Blackberry)

Question

I am trying to change the bitmap of a custom buttonfield on focus. I have 2 images, one in grey, the other in red, and I wish to swap them when the button is focused.

This code is making the buttons twitch to the right value for a fraction of a second, going from grey to red. When focused it is selcted, and generates an unwanted event. After changing, it goes right back to the original color and the simulator freezes.

Can anyone help us find whats wrong with this code?

My custom buttonField class:

import net.rim.device.api.system.Bitmap;
import net.rim.device.api.system.Characters;
import net.rim.device.api.ui.Color;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.component.BitmapField;

public class ImageNavbarButtonField extends BitmapField{

private Bitmap image;
private boolean isFocused;

public ImageNavbarButtonField(Bitmap image) {
    super(image);
    this.image = image;
}

public boolean isFocusable() {
    return true;
}

protected boolean navigationClick(int status, int time) {
    fieldChangeNotify(0);
    return true;
}

protected boolean trackwheelClick(int status, int time) {
    fieldChangeNotify(0);
    return true;
}

protected void drawFocus(Graphics graphics, boolean on){} 
public void onFocus(){
        setBitmap(ImageResizer.generateHitBitmap(image));
        invalidate();
 }

 public void onUnfocus(){
         //super.onUnfocus();
         setBitmap(image);
         invalidate();
 }

protected void paint(Graphics graphics) {
    super.paint(graphics);
}

protected boolean keyChar(char character, int status, int time) {
    if(Characters.ENTER == character || Characters.SPACE == character) {
        fieldChangeNotify(0);
        return true;
    }
    return super.keyChar(character, status, time);
}

}

Answer 1

Use PictureBackgroundButtonField class insted of Buttonfield or yourcustom class. below is the class. `package com.picturebackgroundbuttonfield;

import net.rim.device.api.ui.; import net.rim.device.api.system.;

/** * Custom button field that shows how to use images as button backgrounds. */ public class PictureBackgroundButtonField extends Field {
private String _label; private int _labelHeight; private int _labelWidth; private Font _font; private Bitmap _onPicture, _offPicture; private Bitmap _currentPicture;

/**
 * Constructor.
 * @param text The text to be displayed on the button
 * @param style Combination of field style bits to specify display attributes 
 */
public PictureBackgroundButtonField(Bitmap onFocus, Bitmap offFocus, String text, long style) 
{
    super(style);
    _onPicture = onFocus;
    _offPicture = offFocus;
    _font = getFont();
    _label = text;
    _labelHeight = _onPicture.getHeight();
    _labelWidth = _onPicture.getWidth();
    _currentPicture = _offPicture;
}

/**
 * @return The text on the button
 */
String getText()
{
    return _label;
}

/**
 * Field implementation.
 * @see net.rim.device.api.ui.Field#getPreferredHeight()
 */
public int getPreferredHeight() 
{
    return _labelHeight;
}

/**
 * Field implementation.
 * @see net.rim.device.api.ui.Field#getPreferredWidth()
 */
public int getPreferredWidth() 
{
    return _labelWidth;
}

/**
 * Field implementation.  Changes the picture when focus is gained.
 * @see net.rim.device.api.ui.Field#onFocus(int)
 */
protected void onFocus(int direction) 
{
    _currentPicture = _onPicture;
   // setFont(getFont().derive(Font.BOLD));
    invalidate();
}

/**
 * Field implementation.  Changes picture back when focus is lost.
 * @see net.rim.device.api.ui.Field#onUnfocus()
 */

protected void onUnfocus() 
{
    _currentPicture = _offPicture;
  //  setFont(getFont().derive(Font.PLAIN));
    invalidate();
}

/**
 * Field implementation.  
 * @see net.rim.device.api.ui.Field#drawFocus(Graphics, boolean)
 */
protected void drawFocus(Graphics graphics, boolean on) 
{
    // Do nothing
}

/**
 * Field implementation.
 * @see net.rim.device.api.ui.Field#layout(int, int)
 */
protected void layout(int width, int height) 
{
    setExtent(Math.min( width, getPreferredWidth()), 
    Math.min( height, getPreferredHeight()));
}

/**
 * Field implementation.
 * @see net.rim.device.api.ui.Field#paint(Graphics)
 */

/**
 * Overridden so that the Event Dispatch thread can catch this event
 * instead of having it be caught here..
 * @see net.rim.device.api.ui.Field#navigationClick(int, int)
 */
protected boolean navigationClick(int status, int time) 
{
    fieldChangeNotify(1);
    return true;
}

/*protected void paint(Graphics graphics) {
    // TODO Auto-generated method stub

}*/

protected void paint(Graphics graphics) 
{       
    graphics.drawBitmap(0, 0, getWidth(), getHeight(), _currentPicture, 0, 0);
    graphics.setBackgroundColor(Color.BLACK);
    graphics.drawText(_label, 2, 0, 
            (int)( getStyle() & DrawStyle.ELLIPSIS | DrawStyle.HALIGN_MASK ),
            getWidth() - 6 );
}

} `

uset it in below way..

PictureBackgroundButtonField button = new PictureBackgroundButtonField(onfocusimage,offfocusimage,"",Field.HCENTER);
manager.add(button);

Answer 2

try this

final imagebutton sav_users = new imagebutton("",Field.FOCUSABLE, "normalimage.png","mouseoverimage.png", 0x9cbe95);

imagebutton classs is given below-

import net.rim.device.api.ui.*;
import net.rim.device.api.system.*;

public class imagebutton extends Field {

private String _label;
private int _labelHeight;
private int _labelWidth;
private Font _font;

private Bitmap _currentPicture;
private Bitmap _onPicture; 
private Bitmap _offPicture; 
int color;

public imagebutton(String text, long style ,String img, String img_hvr, int color){
    super(style);


    _offPicture = Bitmap.getBitmapResource(img);
    _onPicture = Bitmap.getBitmapResource(img_hvr);

    _font = getFont();
    _label = text;
    _labelHeight = _onPicture.getHeight();  
    _labelWidth = _onPicture.getWidth();

    this.color = color;

    _currentPicture = _offPicture;
}

/**
 * @return The text on the button
 */
String getText(){
    return _label;
}

/**
 * Field implementation.
 * @see net.rim.device.api.ui.Field#getPreferredHeight()
 */
public int getPreferredHeight(){
    return _labelHeight;
}

/**
 * Field implementation.
 * @see net.rim.device.api.ui.Field#getPreferredWidth()
 */
public int getPreferredWidth(){
    return _labelWidth;
}

/**
 * Field implementation.  Changes the picture when focus is gained.
 * @see net.rim.device.api.ui.Field#onFocus(int)
 */
protected void onFocus(int direction) {
    _currentPicture = _onPicture;
    invalidate();
}

/**
 * Field implementation.  Changes picture back when focus is lost.
 * @see net.rim.device.api.ui.Field#onUnfocus()
 */
protected void onUnfocus() {
    _currentPicture = _offPicture;
    invalidate();
}

/**
 * Field implementation.  
 * @see net.rim.device.api.ui.Field#drawFocus(Graphics, boolean)
 */
protected void drawFocus(Graphics graphics, boolean on) {
    // Do nothing
}

/**
 * Field implementation.
 * @see net.rim.device.api.ui.Field#layout(int, int)
 */
protected void layout(int width, int height) {
    setExtent(Math.min( width, getPreferredWidth()), 
    Math.min( height, getPreferredHeight()));
}

/**
 * Field implementation.
 * @see net.rim.device.api.ui.Field#paint(Graphics)
 */
protected void paint(Graphics graphics){       
    // First draw the background colour and picture
    graphics.setColor(this.color);
    graphics.fillRect(0, 0, getWidth(), getHeight());
    graphics.drawBitmap(0, 0, getWidth(), getHeight(), _currentPicture, 0, 0);

    // Then draw the text
    graphics.setColor(Color.BLACK);
    graphics.setFont(_font);
    graphics.drawText(_label, 4, 2, 
        (int)( getStyle() & DrawStyle.ELLIPSIS | DrawStyle.HALIGN_MASK ),
        getWidth() - 6 );
}

/**
 * Overridden so that the Event Dispatch thread can catch this event
 * instead of having it be caught here..
 * @see net.rim.device.api.ui.Field#navigationClick(int, int)
 */
protected boolean navigationClick(int status, int time){
    fieldChangeNotify(1);
    return true;
}

}

Answer 3

You can create your customButton like this:

public class ImageNavbarButtonField extends Field{

    protected Bitmap image;
    protected Bitmap inverseImage;
    protected int fieldWidth;
    protected int fieldHeight;

    public ImageNavbarButtonField (Bitmap image,long style) {
        super(Field.FOCUSABLE | style);
        this.image = image;
        this.inverseImage = ImageResizer.generateHitBitmap(image);
        fieldHeight = image.getHeight();
        fieldWidth = image.getWidth();
    }
    public int getPreferredWidth() {
        return fieldWidth;
    }
    public int getPreferredHeight() {
        return fieldHeight;
    }
    protected void paint(Graphics graphics) {
        if (isFocus()){
            graphics.drawBitmap(0,0,fieldWidth,fieldHeight,inverseImage,0,0);
        }else{
            graphics.drawBitmap(0,0,fieldWidth,fieldHeight,image,0,0);
        }
    }
    protected boolean navigationClick(int status, int time) {
        fieldChangeNotify(0);
        return true;
    }

    protected boolean trackwheelClick(int status, int time) {
        fieldChangeNotify(0);
        return true;
    }
    protected boolean keyChar(char character, int status, int time) {
        if(Characters.ENTER == character || Characters.SPACE == character) {
            fieldChangeNotify(0);
            return true;
        }
        return super.keyChar(character, status, time);
    }
}