Blackberry Development 4: Create an User Interface

There are three types of UI components from RIM API:

Screens (net.rim.device.api.ui.Screen): There’s one active screen per application at any time. Screens handle field layout through a delegate manager and provide additional functionality like menus.

Managers (net.rim.device.api.ui.Manager): These arrange fields on the screen. Each field must belong to one and only one manager. Each manager is also a field, meaning managers can contain other managers, allowing for some pretty intricate UI layouts.

Fields (net.rim.device.api.ui.Field): These are the basic building blocks of the UI. Generally, each control, such as a button or text field, corresponds to an instance of a field. The Field class draws the control and handles user input.

Please refer to Blackberry Smartphone UI Guide from RIM.

UiTest.java(Project: UiTest)

package com.henry416.UiTest;
import net.rim.device.api.ui.UiApplication;

public class UiTest extends UiApplication {
     public UiTest () {
        UiTestMainScreen mainScreen = new UiTestMainScreen();
        pushScreen(mainScreen);
     }

     public static void main(String[] args) {
        UiTest app = new UiTest();
        app.enterEventDispatcher();
     }
}

UiTestMainScreen.java:

package com.henry416.UiTest;
import net.rim.device.api.ui
import net.rim.device.api.system.Bitmap;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.component.BitmapField;
import net.rim.device.api.ui.container.MainScreen;
import net.rim.device.api.ui.component.EditField;
import net.rim.device.api.ui.component.PasswordEditField;
import net.rim.device.api.ui.component.CheckboxField;
import net.rim.device.api.ui.component.ObjectChoiceField;
import net.rim.device.api.ui.component.ButtonField;
import net.rim.device.api.ui.container.HorizontalFieldManager;
import net.rim.device.api.ui.container.HorizontalFieldManager;
import net.rim.device.api.ui.FieldChangeListener;
import net.rim.device.api.ui.component.Dialog;
public class UiTestMainScreen extends MainScreen implements FieldChangeListener {
    BitmapField bitmapField;
    EditField usernameField;
    PasswordEditField passwordField;
    ObjectChoiceField domainField;
    CheckboxField rememberCheckbox;
    ButtonField clearButton;
    ButtonField loginButton;
    public UiTestMainScreen() {
         // add a logo at top, also put it under rsc folder of the project
         Bitmap logoBitmap = Bitmap.getBitmapResource("UiTest_logo.png");
         bitmapField = new BitmapField(logoBitmap, Field.FIELD_HCENTER);
         add(bitmapField);
         add(new SeparatorField());
         add(new LabelField("Please enter your credentials:"));
         // add two fields
         usernameField = new EditField("Username:", "");
         passwordField = new PasswordEditField("Password:", "");
         add(usernameField);
         add(passwordField);
         // add a domain field
         domainField = new ObjectChoiceField("Domain:", new String[] {"Prod", "Dev"});
         add(domainField);
         // add a checkbox
         rememberCheckbox = new CheckboxField("Remember password", false);
         add(rememberCheckbox);
         add(new SeparatorField());
         // create two buttons
         clearButton = new ButtonField("Clear", ButtonField.CONSUME_CLICK);
         loginButton = new ButtonField("Login", ButtonField.CONSUME_CLICK);
         // using HorizontalFieldManager to add two buttons
         HorizontalFieldManager buttonManager = new HorizontalFieldManager(Field.FIELD_RIGHT);
         buttonManager.add(clearButton);
         buttonManager.add(loginButton);
         add(buttonManager);
         // hook the events
         clearButton.setChangeListener(this);
         loginButton.setChangeListener(this);
    }
    public void fieldChanged(Field field, int context) {
       if (field == clearButton) {
          clearTextFields();
          //Dialog.inform("Clear Button Pressed!");
       }
       else if (field == loginButton) {
            login();
            }
    }
    private void clearTextFields() {
        usernameField.setText("");
        passwordField.setText("");
    }
    private void login() {
         if (usernameField.getTextLength() == 0 || passwordField.getTextLength() == 0) {
            Dialog.alert("You must enter a username and password");
         }
         else {
            String username = usernameField.getText();
            String selectedDomain =
               (String)domainField.getChoice(domainField.getSelectedIndex());
            LoginSuccessScreen loginSuccessScreen =
                new LoginSuccessScreen(username, selectedDomain);
             UiApplication.getUiApplication().pushScreen(loginSuccessScreen);
         }
     }
}

LoginSuccessScreen.java

package com.henry416.UiTest;

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

public class LoginSuccessScreen extends MainScreen {
    public LoginSuccessScreen(String username, String domain) {
        add(new LabelField("Logged in!"));
        add(new LabelField("Username: " + username));
        add(new LabelField("Domain: " + domain));
    }
}

About henry416
I am a computer technology explorer and an university student based on Toronto. If you have any question, please feel free to discuss and comment here

One Response to Blackberry Development 4: Create an User Interface

  1. sbn keren says:

    hello henry ,

    how i can create login menu with template login,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s