HorizontalFieldManager alignment in BlackBerry - blackberry

Question

Horizontally, I want to display two custom buttons, and between them display a label field in a BlackBerry app. I looked at "BlackBerry HorizontalFieldManager alignment", but did not achieve any success.
Here is a screenshot that I want to create in BlackBerry.
Here is the code that I created for this screen:
package mypackage;
import net.rim.device.api.system.Bitmap;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.FieldChangeListener;
import net.rim.device.api.ui.Font;
import net.rim.device.api.ui.Manager;
import net.rim.device.api.ui.UiApplication;
import net.rim.device.api.ui.XYEdges;
import net.rim.device.api.ui.component.BasicEditField;
import net.rim.device.api.ui.component.BitmapField;
import net.rim.device.api.ui.component.ButtonField;
import net.rim.device.api.ui.component.Dialog;
import net.rim.device.api.ui.component.LabelField;
import net.rim.device.api.ui.component.PasswordEditField;
import net.rim.device.api.ui.container.HorizontalFieldManager;
import net.rim.device.api.ui.container.MainScreen;
import net.rim.device.api.ui.container.VerticalFieldManager;
import net.rim.device.api.ui.decor.Background;
import net.rim.device.api.ui.decor.BackgroundFactory;
import net.rim.device.api.ui.decor.Border;
import net.rim.device.api.ui.decor.BorderFactory;
/**
* A class extending the MainScreen class, which provides default standard * behavior for BlackBerry GUI applications. */ public final class HelloBlackBerryScreen extends MainScreen { BasicEditField username; PasswordEditField password;
/**
* Creates a new MyScreen object
*/ public HelloBlackBerryScreen() { // Set the linear background. this.getMainManager().setBackground(BackgroundFactory.createLinearGradientBackground(0x91e7ff,0x0099CCFF,0x00336699,0x91e7ff));
// SET HEADER OF SCREEN VerticalFieldManager vfm = new
VerticalFieldManager(Manager.USE_ALL_WIDTH); BitmapField header = new
BitmapField(Bitmap.getBitmapResource("header.png"),FIELD_HCENTER);
HorizontalFieldManager hfm = new
HorizontalFieldManager(Field.FIELD_VCENTER |Manager.USE_ALL_WIDTH);
setTitle(header);
hfm.add(vfm); add(hfm);
//SET Container
LabelField usernameTxt = new LabelField("Username:",LabelField.FIELD_TOP);
usernameTxt.setFont(Font.getDefault().derive(Font.PLAIN, 30));
usernameTxt.setMargin(20, 0, 0, 160);
LabelField passwordTxt = new LabelField("Password :",LabelField.FIELD_BOTTOM);
passwordTxt.setFont(Font.getDefault().derive(Font.PLAIN, 30));
passwordTxt.setMargin(10, 0, 0, 160);
username = new BasicEditField(BasicEditField.FIELD_BOTTOM);username.setMargin(10, 110, 0, 160); //username.setMaxSize(getHeight());
username.setBorder(BorderFactory.createRoundedBorder(new XYEdges(3, 3,3, 3), 0x999999, Border.STYLE_FILLED));
username.setBackground(BackgroundFactory.createSolidBackground(0xe0e0e0));
password = new PasswordEditField(); password.setMargin(10, 110, 0,160); password.setBorder(BorderFactory.createRoundedBorder(new
XYEdges(3, 3, 3, 3), 0x999999, Border.STYLE_FILLED));
password.setBackground(BackgroundFactory.createSolidBackground(0xe0e0e0));
ButtonField loginBtn = new ButtonField(" Log-In ", ButtonField.CONSUME_CLICK); loginBtn.setMargin(30, 0, 0,240);
ButtonField recoveryBtn = new ButtonField("Forget Password", ButtonField.CONSUME_CLICK); recoveryBtn.setMargin(10, 0, 0,200);
add(usernameTxt); add(username); add(passwordTxt); add(password);
add(loginBtn); add(recoveryBtn);
loginBtn.setChangeListener(btnlistener); } FieldChangeListener
btnlistener = new FieldChangeListener() {
public void fieldChanged(Field field, int context) {
//Open a new screen
String uname = username.getText();
String pwd =password.getText();
//If there is no input if (uname.length() == 0 || pwd.length()==0)
Dialog.alert("One of the textfield is empty!");
else if
(uname.equals("user") && pwd.equals("admin"))
UiApplication.getUiApplication().pushScreen(newwelcome());
//Open a
new Screen else
Dialog.alert("Username or password not found!");
}
};
FieldChangeListener btnlistener2 = new FieldChangeListener() {
public void fieldChanged(Field field, int context) {
screen if variables are not empty
[1]: http://i.stack.imgur.com/PlDRu.png

Answer 1

For that you need to use custom manager like this.
Main Field Manager for this screen
VerticalFieldManager vfm = new VerticalFieldManager(VerticalFieldManager.USE_ALL_HEIGHT
|VerticalFieldManager.USE_ALL_WIDTH|VerticalFieldManager.FIELD_VCENTER|VerticalFieldManager.FIELD_HCENTER){
//Override the paint method to draw the background image.
public void paint(Graphics graphics){
//Draw the background image and then call super.paint
//to paint the rest of the screen.
graphics.setBackgroundColor(Color.DEEPSKYBLUE);
graphics.clear();
super.paint(graphics);
}
};
add(vfm);
and add custom manger like this
//Placing back,home icon and title at particular positions
HorizontalFieldManager customManager = new HorizontalFieldManager(HorizontalFieldManager
.USE_ALL_WIDTH)
{
//Applying background color for that Manager
public void paint(Graphics graphics)
{
graphics.setBackgroundColor(Color.DEEPSKYBLUE);//blue
graphics.clear();
super.paint(graphics);
}
//Placing the Fields
protected void sublayout(int width, int height) {
setPositionChild(
getField(0),
0,
0);
layoutChild(
getField(0),
getField(0).getPreferredWidth(),
getField(0).getPreferredHeight());
setPositionChild(
getField(1),
Display.getWidth()/2 - getField(1).getPreferredWidth()/2,
0);
layoutChild(
getField(1),
getField(1).getPreferredWidth(),
getField(1).getPreferredHeight());
setPositionChild(
getField(2),
Display.getWidth() - getField(2).getPreferredWidth(),
0);
layoutChild(
getField(2),
getField(2).getPreferredWidth(),
getField(2).getPreferredHeight());
setExtent(width, 50);
}
};
//To display Back icon
final Bitmap bmp1 = Bitmap.getBitmapResource("back.png");
BitmapField bmpfield1 = new BitmapField(bmp1,BitmapField.FOCUSABLE|BitmapField.FIELD_LEFT);
//To display Home icon
final Bitmap bmp2 = Bitmap.getBitmapResource("home.png");
BitmapField bmpfield2 = new BitmapField(bmp2,BitmapField.FOCUSABLE |BitmapField.FIELD_RIGHT);
//To display Title
LabelField lbl = new LabelField("Login",LabelField.FIELD_VCENTER);
//To Add Fields
customManager.add(bmpfield1);
customManager.add(lbl);
customManager.add(bmpfield2);
vfm. add(customManager);

Answer 2

If you want to fix your header at the top as I understood from your comments what you can do is create a HorizontalFieldManager and add your back, title and home button to it then you can set that horizontal field manager in your title using setTitle(hfm). Similarly if you also need to fix your footer you may use setStatus(hfm).