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?

Comments

  1. kalimuthu says

    Hello Friend. I am newbie for blackberry application. how to bind data from sqlite using table view .? plz hep me

  2. says

    Thanks for this it will help me alot.

    I have a query how doe the image corners relate to the amount of padding. If i wanted to create my own image how do I get the amount of padding needed

  3. Hrvoje says

    Thank you for sharing this code. It gave me idea on a design I’ve been working on for a while. The line between the fields, I found, as a really brilliant idea – the whole screen looks nicer.

  4. mrana says

    Hello jorge,

    Thank you very much man. This was really cool stuff. keep posting some more Ui concepts. God bless you my friend.

  5. Rahul says

    When i fill background color my already label’s background showing white color i need complete background color…..

  6. says

    Hi it really helped me a lot. But i am not getting the full background color. I am not getting the background color for round border vertical manager. Can you help me in this?

  7. Saurabh says

    Please can You explain the use of XYEdges in setting the border when i changed the value to (1, 1, 1, 1)
    than it showed lots of images..

Leave a Reply

Your email address will not be published. Required fields are marked *