HorizontalFieldManager alignment in 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]: https://i.sstatic.net/PlDRu.png

Answer 1

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).

Answer 2

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);