Color in Your Cheeks: Brighten Up BlackBerry Apps

Moving into the 21st century

Despite respectable download numbers from AppWorld and other markets, BlackBerry applications have been a second class citizen for some time.

Hiding beyond the ubiquitous email, calendar, and contacts, the application environment sits — often unknown and unseen.

One of the obstacles facing BlackBerry applications has been their lack of pizazz. In part this is because early devices contained black and white or gray-scale LCD displays. BlackBerry built their brand on connectivity and security, not on the color of the paint. Add to those historical device and culture challenges the popularity of the newer platforms such as iPhone and Android and the sound of developers heading out the door was palpable.

The trend towards “damn-the-battery-life, I want y applications” means it is time for longer in the tooth BlackBerry applications to receive a much needed face-lift. This article presents one way of adding a little splash of color into a BlackBerry application.

Color Matters

Generally speaking, there are three types of application development available for BlackBerry: Java applications, MDS applets, and browser-based applications. The focus of this article is on adding some color to Java applications using the BlackBerry Java Development Environment (JDE). This is for stand-alone applications that require neither a BES for MDS applets nor the browser control where HTML rules the day in terms of visual appearance. This is “good ‘ole Java code”.

The basic prescription for creating BlackBerry applications is to create a “Screen” and then push it to the top of the visible stack, where each screen contains one or more “fields”.

Let’s start with the main class of the application, which extends UiApplication:

package com.msi.linuxmag;

import net.rim.device.api.ui.*;

class bbcolor extends UiApplication {
    bbcolor() {
        BWScreen theScreen = new BWScreen();
        pushScreen(theScreen);
    }

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

This code’s entry point is the main function. We create a new instance of the bbcolor application and begin processing events.

In the constructor of the class, we instantiate a new instance of the class named “BWScreen” and then push it to the top of the UI stack. The BWScreen class is a simple extension of the MainScreen class. Once instantiated and displayed, the screen may be dismissed by selecting the escape button on the BlackBerry. Here is the code for the BWScreen class:

package com.msi.linuxmag;

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

class BWScreen extends MainScreen  {
    BWScreen() {
        LabelField lbl = new LabelField("linuxdlsazine b/w screen");
        this.add(lbl);
    }
}

This code creates an instance of the LabelField and then “adds” it to the screen.

Black and White BlackBerry application screen

The application shows a simple black and white screen. Predictable and boring.

OK, now let’s have a look at what it takes to add some color to this application.

Unfortunately we cannot say something like “backgroundColor = red;”. In order to get some color into our application we need to subclass the BlackBerry provided classes.

We’ll start with subclassing the VerticalFieldManager with the ColorManager class:

package com.msi.linuxmag;

import net.rim.device.api.ui.*;
import net.rim.device.api.ui.Color;
import net.rim.device.api.ui.container.VerticalFieldManager;

class ColorManager extends VerticalFieldManager {
    private int bColor;

    public ColorManager() {
        super();
        bColor = Color.AZURE;
    }

    public ColorManager(int color) {
        super();
        this.bColor  = color;
    }

    public void paint(Graphics g) {
        g.setBackgroundColor(bColor);
        g.clear();
        super.paint(g);
    }
}

The VerticalFieldManager typically works like a “scroll” — it is only as long as it needs to be in order to display any child fields. The challenge with this approach is that a small form can have a background color for only a portion of the screen with the bottom portion lacking the color shade as shown below.

Limited Color coverage

The solution to this is to pass the USE_ALL_HEIGHT and USE_ALL_WIDTH when creating the base class.

super(USE_ALL_HEIGHT | USE_ALL_WIDTH);

This class provides the facility for defaulting to a color or allowing the caller to provide a preferred color in the constructor.

In the paint method, we set the background color of the Graphics instance, call clear() and then request that the base class paint itself.

Now, if we want a label to have a particular foreground color, we can subclass the LabelField:

package com.msi.linuxmag;

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

class ColorLabel extends LabelField {
        private int bColor;
        public ColorLabel(int color) {
            super();
            bColor = color;
        }
        public void paint(Graphics g) {
            g.setColor(bColor);
            g.clear();
            super.paint(g);
        }
}

The ColorLabel simply extends the LabelField and permits a similar approach to the ColorManager. In this case we demonstrate changing the foreground, or painting, color.

Both the ColorManager and the ColorLabel are demonstrated in the class ColorScreen.java:

    package com.msi.linuxmag;

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

class ColorScreen extends MainScreen  {
    ColorScreen() {
        // background
        ColorManager cm = new ColorManager(Color.TEAL);

        // traditional label field
        LabelField lbl = new LabelField("linuxdlsazine color screen");
        cm.add(lbl);

        // color label field (subclassed by us)
        ColorLabel clbl = new ColorLabel(Color.WHEAT);
        clbl.setText("color label");
        cm.add(clbl);

        this.add(cm);
    }
}

This code first creates an instance of the ColorManager, passing in the color of TEAL. Teal? It’s my mom’s favorite color — I hope that’s not one of those security questions….

Then we create both a traditional LabelField and a ColorLabel. The ColorLabel instance is set to WHEAT for a nice contrast on the Teal background.

Both of these labels are added to the ColorManager with the add() method. Finally, the ColorManager instance itself is added to the MainScreen instance itself. You can see the results in the image below.

Color BlackBerry application screen

Does a wheat-on-teal screen jump anyone to the top of the charts on any App Store? No — but perhaps it is just what you’re looking for when you need to update an older BlackBerry application.

This code is available for download from the linuxdlsazine Mobile code hosting site.