Download source code - 41.5 KB

Introduction

In the first article of this series, I started walking you through the creation of an end-to-end BlackBerry application that will serve as a mobile front-end to my Knowledge Base sample web application.

The requirements for the mobile application are pretty simple:

Searching a collection of articles stored in a knowledge base repository, by title or tags.
View an article. The article’s visible attributes are: title, body, tags, author’s name, date published.

And, my building blocks look like this:

Implementation

Previously, I finished the Application class and the Home Screen.

I will continue now with the rest of the screens.

Tags Screen

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

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 searchArticles() function is present in both the Tags Screen and the Search Screen, and so far, it only pushes the Articles Screen to the top of the stack. Later, I will add the code that will request my server-side handler to issue the database query and return any results.

private void searchArticles() {
    String searchPhrase = searchPhraseField.getText().trim();
    if (null != searchPhrase && searchPhrase.length() > 0) {
        UiApplication.getUiApplication().pushScreen(articlesScreen);
        // TODO: Trigger the search function in the Articles Screen. 
    } else {
        Dialog.alert("You must enter a search phrase.");
    }
}

Articles Screen

The Articles Screen shows a list of articles that satisfy the criteria entered on the Search Screen. It can also show a list of recently viewed articles. Clicking on any listed article will bring the Article Screen to the top of the stack.

Since I’m still missing the network routines, I created a few dummy articles in order to test the look and feel of the Articles Screen:

ArticlesScreen() {
        
    this.setTitle("Articles");

    // Create a few dummy tags in order to test the screen;
    articles = new Article[15];
    Article article;
    for (int i = 0; i < 15; i++) {
        article = new Article();
        article.title = "Dummy article " + Integer.toString(i);
        article.author = "ramonj";
        article.contents = "This is a test article";
        article.tags = new String[] {"tag 1", "tag 2", "tag 3"};
        article.dateCreated = "01/01/2008";
        articles[i] = article;
    }
    
    articlesList = new ArticlesListField();
    articlesList.set(articles);
    this.add(articlesList);
}

The Article class is shown below. Note that I’m not paying a lot of attention to encapsulation, since the usage of this class will be restricted to only a few places in the application.

class Article {
    public String title;
    public String dateCreated;  
    public String author;
    public String[] tags;
    public String contents;
}

Article Screen

The Article Screen shows the viewable attributes of the article that was selected on the Articles Screen. This is where the user gets to read the article. This is another place where I use the Article class shown above.

Options Screen

Finally, the Options Screen allows 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.

What’s Next

In the next article of this series, I will add the networking code as well as the code to save and retrieve the application settings. After this, I will move to the server side and take care of the pieces that will handle the communications with the device.

History

End-to-End Real World BlackBerry Application, Part 1

End-to-End Real World BlackBerry Application, Part 2