Monday, February 11, 2013

BlackBerry Custom checkbox

Hi have a look on the given below custom checkbox code and enjoy with this custom component. for the example purpose i just used arbitrary images, the image resources are as follows





package customradio;



import net.rim.device.api.ui.component.CheckboxField;
import net.rim.device.api.ui.component.RadioButtonField;
import net.rim.device.api.ui.component.RadioButtonGroup;

import net.rim.device.api.ui.Color;
import net.rim.device.api.ui.Graphics;

import net.rim.device.api.system.Bitmap;
import net.rim.device.api.system.Display;

/**
 *
 */
public class CustomCheckBox extends CheckboxField {

private String label;
private Bitmap _currentPicture;
private Bitmap _onPicture; // image for "in focus"
private Bitmap _offPicture; // image for "not in focus"
private int width;
private int height;

// Constructor
public CustomCheckBox(String offImage, String onImage, String label,
RadioButtonGroup group, boolean selected) {

super(label, selected);
this.label = label;
_offPicture = Bitmap.getBitmapResource(offImage);
_onPicture = Bitmap.getBitmapResource(onImage);
_currentPicture = _offPicture;

} // end of constructor

public CustomCheckBox(String label) {

this.label = label;

}

/**
* The getPreferredHeight() and getPreferredWidth() methods return 45 since
* the images for custom buttons are 45 x 45 pixel
*
* @return <description>
*/
public int getPreferredHeight() {

/**
* If image not null then set height is equal to image height plus
* label. getFont().getHeight() + 8 shows that left 8 pixels from top
* and bottom of image so label not stick with image
*/
if (_currentPicture != null) {

return Math.max(getFont().getHeight(), _currentPicture.getHeight());

} else {

return getFont().getHeight() + 8;

}

} // end of getPreferredHeight()

public int getPreferredWidth() {

int width = 40;
return width;

} // end of getPreferredWidth()

protected void layout(int width, int height) {

super.layout(getPreferredWidth(), getPreferredHeight());

setExtent(getPreferredWidth(),
Math.min(height, getPreferredHeight()) + 20);

} // end of layout()

/**
* These functions set the currentPicture variable to the correct image when
* the user rolls over the button using the paint() method. The image is
* redrawn after the change by calling the invalidate() method.
*
*/
protected void onFocus(int direction) {

super.onFocus(direction);
_currentPicture = _onPicture;
invalidate();

}

protected void onUnfocus() {

super.onUnfocus();
_currentPicture = _offPicture;
invalidate();

}

protected void paint(Graphics graphics) {

/**
* If the Bitmap is taller than the font, we want the text centerd
* vertically. Similarly, if the font is taller, we want the bitmap
* centered vertically. The algorithm in both cases is the same position
* = (Field height - item height) / 2;
*/
int textY = (getHeight() - getFont().getHeight()) / 2;

if (_currentPicture != null) {

int imageY = (getHeight() - _currentPicture.getHeight()) / 2;

if (_currentPicture == _onPicture) {

graphics.setColor(Color.GREEN);

}

if (this.getChecked()) {

graphics.setColor(Color.RED);

graphics.drawRoundRect(2, 2, getWidth() - 4, getHeight() - 2,
15, 15);
// graphics.drawRect(5, getHeight() / 4, 20, 20);
graphics.drawArc(5, getHeight() / 4, 20, 20, 0, 360);
graphics.fillArc(5 + 2, (getHeight() / 4) + 2, 16, 16, 0, 360);

graphics.drawBitmap(0, imageY, _currentPicture.getWidth(),
_currentPicture.getHeight(), Bitmap.getBitmapResource("selected.png"), 0, 0);
graphics.drawText(label, 65, textY);

} else { // end of if (isSelected())

graphics.drawRoundRect(2, 2, getWidth() - 4, getHeight() - 2,
15, 15);
// graphics.drawRect(5, getHeight() / 4, 20, 20);
graphics.drawArc(5, getHeight() / 4, 20, 20, 0, 360);
graphics.drawBitmap(0, imageY, _currentPicture.getWidth(),
_currentPicture.getHeight(), _currentPicture, 0, 0);
graphics.drawText(label, 65, textY);

} // end of if / else (isSelected())

} else { // end of if (_currentPicture != null)

if (isFocus()) {

graphics.setColor(Color.GREEN);

} // end of if (isFocus())

if (this.getChecked()) {

graphics.setColor(Color.RED);
graphics.drawRoundRect(2, 2, getWidth() - 4, getHeight() - 2,
15, 15);
graphics.drawArc(5, getHeight() / 4, 16, 16, 0, 360);
graphics.fillArc(5 + 2, (getHeight() / 4) + 2, 12, 12, 0, 360);
graphics.drawText(label, 24, textY);

} else {

graphics.drawRoundRect(2, 2, getWidth() - 4, getHeight() - 2,
15, 15);
graphics.drawArc(5, getHeight() / 4, 16, 16, 0, 360);
graphics.drawText(label, 24, textY);

}

} // end of if / else (_currentPicture != null)

} // end of paint()

/**
* We'll disable the default focus so that the blue rectangle isn't drawn.
* To do this, we just override drawFocus() and have it to do nothing
*/
protected void drawFocus(Graphics graphics, boolean on) {

} // end of drawFocus()

} // end of class