Blackberry: create custom ButtonField

It is sometimes necessary to implement custom ButtonField for new look and feel of UI. You may do the following codes to make a custom button.



// Custom ButtonField with custom color option used in LoginScreen
final class CustomButtonField extends Field {

	// By default, the button is Dim Gray in color with a white background. 
        //It attains the custom color when focused
	private int backgroundColor = Color.LIGHTGREY;
	private int backgroundBorder = Color.LIGHTGREY;
	private int textColor=Color.CORNFLOWERBLUE;
	// Focus color of the button
	private int color;
	// Field width and height are calculated
	private int fieldWidth;
	private int fieldHeight;
	// Text to be displayed in the button
	private String text;
	private int padding = 15;
	private int arc = 20;
	//width - ratio of screen width
	public static final int SCREEN_WIDTH=1;
	public  static  final int ONE_THIRD_SCREEN_WIDTH=2;
	public  static final int TWO_THIRD_SCREEN_WIDTH=3;
	public  static  final int THREE_FOURTH_SCREEN_WIDTH=4;
	public  static  final int HALF_SCREEN_WIDTH=5;

	public CustomButtonField(String label, int color) {
		super(Field.FOCUSABLE | Field.FIELD_HCENTER);
		// Text on the button
		text = label;
		this.color = color;
		Font defaultFont = Font.getDefault();

		// Height and width of the field
		fieldHeight = defaultFont.getHeight() + padding;
		fieldWidth = defaultFont.getAdvance(text) + (padding * 2);
		this.setPadding(2, 2, 2, 2);
	}

	public CustomButtonField(String label, int color, long style)
	{
		super(Field.FOCUSABLE | style);
		// Text on the button
		text = label;
		this.color = color;
		Font defaultFont = Font.getDefault();

		// Height and width of the field
		fieldHeight = defaultFont.getHeight() + padding;
		fieldWidth = defaultFont.getAdvance(text) + (padding * 2);
		this.setPadding(2, 2, 2, 2);
	}

	//newly added
	public CustomButtonField(String label, int color,int maxWidthScreenRatio)
	{
		super(Field.FOCUSABLE | Field.FIELD_HCENTER);
		// Text on the button
		text = label;
		this.color = color;
		Font defaultFont = Font.getDefault();
		this.setPadding(2, 2, 2, 2);
		// Height and width of the field
		fieldHeight = defaultFont.getHeight() + padding;
		//fieldWidth = defaultFont.getAdvance(text) + (padding * 2);
		switch(maxWidthScreenRatio)
		{
		case SCREEN_WIDTH:
			//left-right margin
			fieldWidth = Display.getWidth()-10*2;
			break;
		case ONE_THIRD_SCREEN_WIDTH:
			//fieldWidth = ((Graphics.getScreenWidth() * 1) / 3)+ (padding * 2);
			fieldWidth = ((Display.getWidth() * 1) / 3)+ (padding * 2);
			break;
		case TWO_THIRD_SCREEN_WIDTH:
			//fieldWidth = ((Graphics.getScreenWidth() * 2) / 3)+ (padding * 2);
			fieldWidth = ((Display.getWidth() * 2) / 3)+ (padding * 2);
			break;
		case THREE_FOURTH_SCREEN_WIDTH:
			fieldWidth = ((Display.getWidth() * 3) / 4) + (padding * 2);
			break;
		case HALF_SCREEN_WIDTH:
			//fieldWidth = (Graphics.getScreenWidth()  / 2) - (padding * 2);
			fieldWidth = (Display.getWidth()  / 2) - (padding * 2);
			break;
		default:
			fieldWidth = defaultFont.getAdvance(text) + (padding * 2);
		}

	}

	protected void onFocus(int direction) {
		// Color set
		backgroundColor = color;
		textColor = Color.WHITE;
		invalidate();
		super.onFocus(direction);
	}

	protected void onUnfocus() {
		// Color set to dim gray
		backgroundColor = Color.LIGHTGREY;
		textColor = Color.CORNFLOWERBLUE;
		invalidate();
		super.onUnfocus();
	}

	protected boolean navigationClick(int status, int time) {
		// Field change notify
		fieldChangeNotify(1);
		return false;
	}

	public int getPreferredWidth() {
		return fieldWidth;
	}

	public int getPreferredHeight()
	{
		return fieldHeight;
	}

	protected void layout(int arg0, int arg1) {
		setExtent(getPreferredWidth(), getPreferredHeight());
	}

	protected void drawFocus(Graphics graphics, boolean on) {
	}

	protected void fieldChangeNotify(int context) {
		try
		{
			// Alert the change listener
			this.getChangeListener().fieldChanged(this, context);
		}
		catch (Exception e)
		{
			System.out.println("CustomButton.fieldChangeNotify():ex - "+ e.getMessage());
		}
	}

	protected void paint(Graphics graphics) {
		graphics.setColor(backgroundBorder);
		// Fill a white rectangle
		graphics.fillRoundRect(0, 0, fieldWidth, fieldHeight, arc, arc);
		// Draw a white rectangle - (this will give a white ring like effect)
		graphics.drawRoundRect(0, 0, fieldWidth, fieldHeight, arc, arc);
		graphics.setColor(backgroundColor);
		// Fill with the background color
		graphics.fillRoundRect(1, 1, fieldWidth-2, fieldHeight-2, arc, arc);
		//
		graphics.setColor(textColor);
		graphics.setFont(graphics.getFont().derive(Font.BOLD));
		//graphics.drawText(text, padding - 1, padding / 2 - 1);
		int x = (fieldWidth/2)-(graphics.getFont().getAdvance(text)/2);
		graphics.drawText(text, x , padding/2-1);
	}
}//end of class





if it is helpful to you, please comments.

thanks.

Advertisements

About M Moniruzzaman
A passionate software engineer, have been developing applications on various platforms such as Android, iPhone, .Net (C#) technologies and web based ASP.NET, PHP, JavaScript, jQuery technologies for more than 10 years. Especially I have expertise on developing applications for Android and iPhone, as well as service oriented, client-server based applications where clients will be reside on Android/iPhone that communicate with WCF(.NET) service hosted on server. I have completed certification in Microsoft Certified Professional Developer (MCPD) on .Net 4 . I have completed my graduation in -- B.Sc. (Engineering) in Computer Science and Engineering, ShahJalal University of Science and Technology, Bangladesh. Thanks, M. Moniruzzaman (Zaman)

One Response to Blackberry: create custom ButtonField

  1. Ana says:

    Thanks a lot!. It worked for me.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: