Using Backgrounds and Borders in BlackBerry Super Apps

The use of field background colors and rounded borders is a great way to enhance the user experience in your BlackBerry applications.

Let’s examine how to create a screen with a nice linear background, and a rounded border for the region that contains the input fields, as shown in the following picture:

Setting a field’s background color in a BlackBerry application

We will use the setBackground family of functions of the Field Class to specify a field’s background for the different states of the field; and we will use the BackgroundFactory Class to create the type of background we need (BackgroundFactory provides solid, linear and bitmap backgrounds).

To set the background of our screen, we set the background of its main manager like so:

class MyScreen extends MainScreen {

    public MyScreen() {

        this.setTitle("My Screen");

        // Set the linear background.
        this.getMainManager().setBackground(
            BackgroundFactory.createLinearGradientBackground(0x0099CCFF,
            0x0099CCFF,0x00336699,0x00336699)
        );

    }
}

Now it’s time to work on the rounded border.

Creating fields with rounded borders

The BorderFactory Class has a variety of functions that create different types of borders.  We will use the createBitmapBorder function to specify the rounded border for the region that contains the input fields on the screen:

class MyScreen extends MainScreen {

    public MyScreen() {

        this.setTitle("My Screen");

        // Linear background goes here...

        // Create a vertical field manager with a rounded border.
        Bitmap borderBitmap = Bitmap.getBitmapResource("rounded.png");
        VerticalFieldManager m = new VerticalFieldManager();
        m.setBorder(
            BorderFactory.createBitmapBorder(
                new XYEdges(12,12,12,12), borderBitmap
            )
        );

    }
}

Here’s the rounded.png image used for the border bitmap:

With the background and border ready, we can add fields to the vertical field manager:

class MyScreen extends MainScreen {

    public MyScreen() {

        this.setTitle("My Screen");

        // Set the linear background.
        this.getMainManager().setBackground(
            BackgroundFactory.createLinearGradientBackground(0x0099CCFF,
            0x0099CCFF,0x00336699,0x00336699)
        );

        // Create a vertical field manager with a rounded border.
        Bitmap borderBitmap = Bitmap.getBitmapResource("rounded.png");
        VerticalFieldManager m = new VerticalFieldManager();
        m.setBorder(
            BorderFactory.createBitmapBorder(
                new XYEdges(12,12,12,12), borderBitmap
            )
        );
        Border fieldBorder = BorderFactory.createSimpleBorder(new XYEdges(5,5,5,0),Border.STYLE_TRANSPARENT);  
        java.util.Date today = new java.util.Date();
        DateField dateField = new DateField("Date:",
            today.getTime(),DateField.DATE | DrawStyle.LEFT);
        m.add(dateField);
        m.add(new SeparatorField());

        AutoTextEditField projectField = new AutoTextEditField("Project:",
            "",1024,EditField.FILTER_DEFAULT);
        m.add(projectField);
        projectField.setBorder(fieldBorder);
        m.add(new SeparatorField());

        EditField hoursField = new EditField("Hours:",
            "",4,EditField.FILTER_DEFAULT);
        m.add(hoursField);
        hoursField.setBorder(fieldBorder);
        m.add(new SeparatorField());

        AutoTextEditField notesField = new AutoTextEditField("Notes:",
            "",1024,EditField.FILTER_DEFAULT);
        notesField.setBorder(fieldBorder);
        m.add(notesField);

        add(m);

    }
}

Conclusion

This has been a simple example of how to use backgrounds and borders to enhance the user experience in your BlackBerry applications.  (You can find more information in the BlackBerry Support Forums.)

Is this something you do in your applications?  What approaches do you follow?