MiamiCoder

Quite a few readers have requested more information about development for BlackBerry devices. In this series of posts I will walk you through the creation of an end-to-end application that will be a BlackBerry version of the web application I talk about in these articles: End-to-end ExtJS application (Part 1) and End-to-end ExtJS application (Part 2).

In case you haven’t read the articles, the web application I built is a very simple Knowledge Base System. These are the basic usage scenarios I had established for it

1. Browsing a collection of articles stored in a knowledge base repository
2. Creation, edition or deletion of articles (any user can view, create, edit and delete any articles),
3. View an article. The article’s visible attributes are
   • Title
   • Body
   • Tags, as a way to connect the article to specific topics
   • Author’s name
   • Date published

Requirements

For the BlackBerry application, I will skip the creation, edition and deletion of articles and focus on browsing and viewing existing articles. So, my first take at the usage scenarios produces this list

1. Searching a collection of articles stored in a knowledge base repository,
   • By title,
   • By tags 
2. View an article. The article’s visible attributes are
   • Title
   • Body
   • Tags, as a way to connect the article to specific topics
   • Author’s name
   • Date published

Building Blocks

Besides the BlackBerry application, I will use a .NET http handler on the server side, to channel all communications between the device and the articles database.

User Interface

I’ve found that when I enter the construction phase on a project of this kind, it always helps me if I have an idea of how the user interface is going to look. Keeping my “product owner” hat on, I am going to help my coder alter ego by putting together a few rough UI prototypes.

First comes the Home Screen. This will be the main screen of the application and I expect it to be a door into the different search features that will be available as well as the application settings.

Now to the Search Screen. This screen will allow our users to initiate an articles search by typing one or more words belonging to the article’s title.

The Browse Tags Screen will display a list of the existing tags in the database. Beside each tag there will be a count of the articles the tag applies to.

The Results Screen will show a list of articles that satisfy the criteria entered on the Search Screen. It will also allow our users to click on any listed article in order to view it.

The Article Screen will show the viewable attributes of the article that was selected on the Results Screen. This is where the user get’s to read the article.

The Options Screen will allow the user to change the application settings. In terms of settings, so far I can only think of the url our application will connect to in order to talk to its server counterpart, and the number of references to recently viewed articles to keep cached on the device.

Implementation

It looks like I can switch to “coder” mode and get started writing our device-side code. I will first take care of creating a stripped-down version of the application that does nothing but display the main user interface elements. This will allow me to validate my UI prototypes and serve as a foundation I can build upon later when I have to add the networking routines and the code that will take care of loading and saving the application settings. In this post I will create the Application Class and the Home Screen. I will tackle the rest of the screens in my next article.

The Development Environmet

The IDE I will be using is the BlackBerry JDE version 4.3.0. You can download the IDE as well as its documentation here.

The Application Class

Let’s begin with the Application Class. This class will be the entry point into our application and will be in charge of creating the Home Screen.

Worth highlighting is the constructor of the Class, which is where I create an instance of the Home Screen and push it to the display stack.

Home Screen

The Home Screen displays a list of search options.

One interesting detail here is that I'm extending the ObjectListField Class in order to be able to add a small icon to each of the search options.

The navigationClick method is where I’m going to determine what search option will be displayed.

What’s next

This is it for now. In my next article of this series, I will build the rest of the screens and lay the foundation for adding the networking code as well as the code to save a retrieve the application settings. Once I cover the device-side code, I will move to the server side and take care of the pieces that will handle the communications with the device.

Downloads

Download the source code for this article from the Downloads page.