Introduction

BBInterfaceNET is a visual designer application that can be used to build Blackberry user interfaces more easily. A user can create a project in order to manage the screens and can than generate the code files that are to be imported in the Blackberry project.

Architecture

BBInterfaceNET is a WPF application that uses PRISM. The application is composed of 6 modules.

All these modules are loaded into the shell when the application starts. The module discovery is done by using the application configuration file.

The image below presents the main application screen as well as the containing regions.

main screen

The application was designed to be extesible but in its current version this is not possible. This extensibility will be represented by the user's posibility to add new controls that can be used to build the user interfaces. I will talk about how to do this later in the article.

Using the application

The application has two primary usage scenarios: creating and editing UI screens and generating java code.

Creating and editing UI screens

In order to start using the application we need to create a project. This project will be used to manage the screen files. The image below presents the New Project dialog.

new project

As can be seen from the previous image, you can use this window to specify the project storage path, the BB operating system version and the BB device model. These last two settings are necessary in order to set the screen size and the default font size when editing the documents.

Once we click Ok, the project will be created and the project file can be seen in the explorer window. Now the user will have the possibility to add files to the project in order to create the BB screens. This can be done by right clicking the project name in the explorer and choosing the Add New Item option.

As soon as a file is created, that file will be visible in the explorer window and it will also be automatically opened in the main region of the application (in the designer). This can be seen in the image below.

new file

The designer surface size is dependent on the device model. This is why we needed to specify it when we created the project. After the file is created the user can start adding controls to the designer. This can be done either by dragging and dropping the controls from the toolbox window or by using the layout window. The image below presents a screen after a few elements have been dropped from the toolbox.

controls

The other option we have for adding controls to the screen is to use the Layout Window. In this window we can add and remove controls to and from any manager. The window can also be used to set the title, banner and status for the screen. In fact, this is the only way, at the moment, in which you can change these screen properties.

To add elements to a manager you use the plus icon. Pressing this opens up the Add New Field dialog. If we click Ok the field is added either as a sibling or as a child of the currently selected control, depending on the control type (non manager or manager respectively). The image below presents this window.

add item

In order to change the selected element's properties we can use the properties window. The image below presents how to edit the background color of a label field.

edit label

Saving changes and generating code

Once the screens have been designed we can save them in order to start the code generation. In order to generate the code we use the Generate menu option of the Project menu. The files are saved in XML format. Not only that but the XML has a very simple structure. This is in order to support a future version that will allow the user to add controls to the screen by writing xml. The image below presents the structure of such a file.

xml view

The application will generate the corresponding java code for our project files. The generated code is MVC code. The application will use the file names as the names of the view classes (the classes that derive from the MainScreen class). If the file names don't end if "View" the app will automatically sufix the file names. The app also generate one controller class for each view class. This can be seen in the image below. The image presents the list of project files, the generated views and the generated controllers.

gen res

The listing below presents the code generated for one of the designed views. We can see from this listing that the view has a reference to the corresponding controller. This will help us delegate the tasks when user events are triggered.

 

//the class definition
public class HomeView extends MainScreen{

	//Constructors
	public HomeView(HomeViewController controller){
		super();
		this.controller=controller;
		initComponents();
	}
	public HomeView(HomeViewController controller, long style){
		super(style);
		this.controller=controller;
		initComponents();
	}
	//Field initialization
	private void initComponents(){
		labelField1 = new LabelField();
		labelField1.setText("Click to go the the settings page");
		labelField1.setBackground(BackgroundFactory
			.createSolidTransparentBackground(0x00C8C800, 200));
		this.add(labelField1);

		buttonField1 = new ButtonField(Field.FIELD_RIGHT);
		buttonField1.setLabel("Start");
		this.add(buttonField1);
	}
	//Fields
	public LabelField labelField1;
	public ButtonField buttonField1;
	private HomeViewController controller;
}

The listing below presents the code for the corresponding controller.

 

public class HomeViewController {

	private MainScreen view;
	
	public HomeViewController(){
		
	}
	public MainScreen getView(){
		if(view==null)
			view=new HomeView(this);
		return view;
	}
	public void showView(){
		UiApplication.getUiApplication().pushScreen(getView());
	}
}

Integrating the generated files into a Blackberry project

All that is necessary in order to build our Blackberry app at this point is to copy the files to the Blackberyr project and to import them by using the JDE. This job is even easier considering the fact that the applciation generate the correct folder structure. The image below shows a Blackberry project.

jde proj

The code listing below presents the application class code that is used to start the app.

 

public class App extends UiApplication {
	public App() {
		HomeViewController ctrl=new HomeViewController();
		ctrl.showView();
	}
	public static void main(String[] args) {
		App app=new App();
		app.enterEventDispatcher();
	}
}

The code below uses one of the generated controller classes in order to show the first application screen. Next we need to add some navigation code in order to change the screen when the user presses a button. This is a very easy task because of the MVC architecture. To move to the next screen we will add a button handler in the HomeView view class and in this handler we will delegate to the controller class. This will be done in the initComponents method.

buttonField1.setChangeListener(new FieldChangeListener() {
	public void fieldChanged(Field arg0, int arg1) {
		controller.moveToNextPage();
	}
});

The code for the moveToNextPage method can be seen in the listing below.

public void moveToNextPage(){
	SettingsViewController ctrl= new SettingsViewController();
	ctrl.showView();
}

Running the Blackberry application

The image below presents the two screens as they appear in the Blackberry emulator.

bb run

The image below presents the designed screens as they appear in the BBInterfaceNET application.

designer run

The UIs are a bit different but this will be solved by adjusting the control styles.

Known issues

This application is far from finished. I decided to make it public in order to see if there is a real need in the industry for a Blackberry visual designer. I always wandered why there isn't a Blackberry designer available even though every other modern mobile technology has one (WP7, Android and iOS all have visual designers. The WP7 designer rules by the way:)).

Below are some of the known issues. I hope i can fix them as soon as i can.