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. enter image description here

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.stack.imgur.com/PlDRu.png

Please format your code in the question editor using the **{ }** button. You also need to paste it in from an editor (IDE) that puts spaces in for indentation, not tabs. This code is unreadable. — Nate, Mar 15 '13 at 22:07

score 1 · Accepted Answer · answered Mar 16 '13 at 05:40

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

the problem i am facing now is i want to make this "header " fix for the screen.like it should remain fix on the top of the screen.how to achieve this task? kindly help me "user 1213202" and thanks for your response — user2174312, Mar 19 '13 at 13:53
this will be fixed only.i did n't get exactly what u r asking.if u want any other fields after that custom manager you can add it. — user1213202, Mar 20 '13 at 03:44

score 1 · Answer 2 · edited Jun 05 '13 at 09:13

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

edited Jun 05 '13 at 09:13

Nate

31,017
13
83
207

answered Mar 25 '13 at 17:00

Atif Imran

1,899
2
18
33

HorizontalFieldManager alignment in BlackBerry

2 Answers2