Blackberry_fruit

Welcome to the third development tutorial in the Blackberry Development 101 series. In this tutorial we are going to purely cover making a Graphical User Interface for our Blackberry Bold 9900. This interface will be a form where we should be able to enter client contact information. This will include their full name, shipping address, phone number and email. We should also have a button added to the form so that we can later enable the information to be saved. Jump past the break to find out how we accomplished this.

image

We covered setting up a project in the previous tutorial so we are going to create a new Project called ClientContactInformation. After this has been completed we can start adding code to MyScreen.java which is the screen that is pushed to the Bold 9900 when we run the application. Keep in mind you may have chosen to name this something different than we did.


// MyScreen.java

package com.binarywasteland.contaclientinformation;

import net.rim.device.api.ui.component.BasicEditField;
import net.rim.device.api.ui.component.ButtonField;
import net.rim.device.api.ui.component.SeparatorField;
import net.rim.device.api.ui.container.MainScreen;
import net.rim.device.api.ui.container.VerticalFieldManager;

Above you can see we are importing a lot of objects from the RIM Device API User Interface (UI). We do this as these are not implemented when the project is created. We also have a Field Manager tat we have imported to manage our UI elements. A Field Manager must be present when developing an application to let the device know where the elements are going and in what order. The SeperatorField will give us a cleaner feel to the application and make it feel less clustered than a form usually is on other devices. Some other imports are fairly straight forward like BasicEditField but we will cover these anyways later on in the tutorial.


/**
* A class extending the MainScreen class, which provides default standard
* behavior for BlackBerry GUI applications.
*/
public final class MyScreen extends MainScreen
{
/**
* Creates a new MyScreen object
*/
public MyScreen()
{
// Set the displayed title of the screen
setTitle("Client Information");

The code above is standard generated code that does nothing to enhance the application we are developing. It is key to not that it is vital for our application though as without it, our application would fail to run.

BasicEditField _firstName = new BasicEditField("First Name:", "");
BasicEditField _middleName = new BasicEditField("Middle Name:", "");
BasicEditField _lastName = new BasicEditField("Last Name:", "");
BasicEditField _address1 = new BasicEditField("Address 1:", "");
BasicEditField _address2 = new BasicEditField("Address 2:", "");
BasicEditField _city = new BasicEditField("City:", "");
BasicEditField _provstate = new BasicEditField("Province/State:", "");
BasicEditField _zippostalcode = new BasicEditField("Postal/Zip Code:", "");
BasicEditField _country = new BasicEditField("Country:", "");
BasicEditField _phone = new BasicEditField("Phone:", "");
BasicEditField _email = new BasicEditField("Email:", "");
ButtonField _submit = new ButtonField("Submit");

We can see in the above code we are defining the objects we are going to use in our application. This is done for the BasixEditField by declaring a name for the object we are going to use, instantiating that object by declaring it as new and then passing it the text we would like displayed and making the textfield blank using the enclosing () of new BasicEditField();. For the Button field we can accomplish the same thing by creating the object again then instantiating the object with new ButtonField(); and enclosing the text we want displayed in the () which we chose to display “Submit”. After this is done we can move onto actually adding these objects to the Blackberry Application.

VerticalFieldManager vfm = new VerticalFieldManager();
vfm.add(_firstName);
vfm.add(new SeparatorField());
vfm.add(_middleName);
vfm.add(new SeparatorField());
vfm.add(_lastName);
vfm.add(new SeparatorField());
vfm.add(_address1);
vfm.add(new SeparatorField());
vfm.add(_address2);
vfm.add(new SeparatorField());
vfm.add(_city);
vfm.add(new SeparatorField());
vfm.add(_provstate);
vfm.add(new SeparatorField());
vfm.add(_zippostalcode);
vfm.add(new SeparatorField());
vfm.add(_country);
vfm.add(new SeparatorField());
vfm.add(_phone);
vfm.add(new SeparatorField());
vfm.add(_email);
vfm.add(new SeparatorField());
vfm.add(_submit);
add(vfm);
}
}

Above we can see that to add the objects onto the screen we push when loading the application requires us to have a field manger to determine what is added and where it should go. To do this we will call the new object and instantiate it with VerticalFieldManager vfm = new VerticalFieldManager();. After this is done we can proceed to add objects to the Verticle Field Manager. The SeperatorField is used to divide our fields so the application has a cleaner feel to at as mentioned before. The end result when running the application should look like the following below.

99309930-01

With the initial graphics user interface layout complete you should now be able to set up a field manager which will control all user interface objects. You should also know what a BasicEditField is and how to implement these objects. In the next Blackberry Development 101 series we will improve the Graphical User Interface (GUI) and add event handlers for certain objects. If you have any questions feel free to let us know in the comments section below and we will respond ASAP. Until the next blackberry development series, Happy Hacking!

Share This