Create login screen in blackberry.

On Last post we have study LableFiled and CustomEditField now we go one step ahead. How to design simple login screen. Means here we are trying to design login screen also use existing component like CustomEditField we can also create same PasswordEditField also.

Please variety following Border image on resource folder before run this application.

import net.rim.device.api.system.Bitmap;
import net.rim.device.api.system.Display;
import net.rim.device.api.ui.Color;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.XYEdges;
import net.rim.device.api.ui.component.ButtonField;
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.BorderFactory;

public class LoginScreen extends MainScreen {

 private Bitmap borderBitmap; // Bitmap to  that use to draw border please verify on source
 private ButtonField btnLogin, btnCancel; 
 private CustomTextBox txtUserID; // Please see previous blog for this component.
 private CustomPasswordField txtPassword; // Create CustomPasswordField using CustomTextBox.
 
 public LoginScreen() {
  super(NO_VERTICAL_SCROLL);
  
  txtUserID = new CustomTextBox("User Name :");
  txtPassword = new CustomPasswordField("Password:");

  btnLogin = new ButtonField("Login");
  btnCancel = new ButtonField("Cancel");
  
  setLoginScreen();

 }

 private void setLoginScreen() {

  VerticalFieldManager vfmForCenterDisplay = new VerticalFieldManager(Field.FIELD_HCENTER | Field.USE_ALL_WIDTH | Field.USE_ALL_HEIGHT){
   protected void sublayout(int maxWidth, int maxHeight) {
    super.sublayout(maxWidth, maxHeight);
    int topSpace = (Display.getHeight()/4);
    setPadding(topSpace, 0, 0, 0);
   }
  };
  //Please verify this image src 
  borderBitmap = Bitmap.getBitmapResource("img/rounded-border.png");
  VerticalFieldManager vfmBasicInfoWithBorder = new VerticalFieldManager(){
   protected void sublayout(int maxWidth, int maxHeight) {
    super.sublayout(maxWidth, maxHeight);
    Background background = BackgroundFactory.createSolidBackground(Color.WHITE);
    setBackground(background);
   }
  };
  
  vfmBasicInfoWithBorder.setPadding(0,0,5,0);
  
  vfmBasicInfoWithBorder.add(txtUserID);
  vfmBasicInfoWithBorder.add(txtPassword);
  
  HorizontalFieldManager hfm1 = new HorizontalFieldManager(Field.FIELD_HCENTER);
  hfm1.add(btnLogin);
  hfm1.add(btnCancel);
  
  vfmBasicInfoWithBorder.add(hfm1);
  vfmBasicInfoWithBorder.setBorder(BorderFactory.createBitmapBorder(new XYEdges(12,12,12,12), borderBitmap));
  
  vfmForCenterDisplay.add(vfmBasicInfoWithBorder);

  add(vfmForCenterDisplay);
 }
 
}

Following Output will display.

Now you can set any background image here please change border image then display that type of image.

Enjoy..