BlackBerry: Custom Label Field

Some times when we're developing UI screens for a BlackBerry app we find that there are not too many fancy UI elements.

Here i let you a code i wrote for my app. It can not be as optimized as it could, but i'm just starting BlackBerry developing and learning every day something new! I just wanted to share it with all the people who could need it.

Si if you want to create what i show you in this image, this is your code!!

I created a CustomLabel class where i create my title and my text fields, i set their colors and the background style.

package com.ui;

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

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

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

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

import net.rim.device.api.ui.component.EditField;

import net.rim.device.api.ui.component.LabelField;

import net.rim.device.api.ui.container.VerticalFieldManager;

import net.rim.device.api.ui.decor.BackgroundFactory;

import net.rim.device.api.ui.decor.Border;

import net.rim.device.api.ui.decor.BorderFactory;

public class CustomLabel{

//You can change this colors as you like!

private int titleFontColor = 0x2bb7de;

private int textFontColor=0x000000;

private int bgColor = 0xe8e8e8;

private VerticalFieldManager vm;

private LabelField titleLabel;

private EditField textField;

private Font _font;

private int _labelHeight;

private int _labelWidth;

public CustomLabel(String title, String text){

//We create a Vertical Field Manager that will wrap all our content

vm = new VerticalFieldManager(Manager.USE_ALL_WIDTH);

//Now we set our border style to simulate a cool efect

XYEdges padding = new XYEdges(15, 15, 15, 15);

vm.setBorder(BorderFactory.createRoundedBorder(padding, bgColor, Border.STYLE_FILLED));

//We set the same Background color to the border and to our

//Manager Background so it looks all the same field

vm.setBackground(BackgroundFactory.createSolidBackground(bgColor));

//We create our title LabelField and set the same background color

titleLabel = new LabelField(""){

public void paint(Graphics g){

g.setColor(titleFontColor);

super.paint(g);

}

};

titleLabel.setText(title);

//Our text LabelField again with the same background color

textField = new EditField("","", bgColor, EditField.READONLY){

public void paint(Graphics g){

g.setColor(textFontColor);

super.paint(g);

}

};

textField.setText(text);

//Now we set some padding and add our elements to our CustomField! 

vm.setPadding(5, 5, 5, 5);

vm.add(titleLabel);

vm.add(textField);

_labelHeight = textField.getHeight()+titleLabel.getHeight();

_labelWidth = textField.getWidth()+titleLabel.getWidth();

}

public VerticalFieldManager getField(){

return vm;

}

}

You can download the full project example from here CustomLabel Project