Jorge is the author of three software development books: "Building a Sencha Touch Application", "How to Build a jQuery Mobile Application", and the "Ext JS 3.0 Cookbook". He runs a software development and developer education shop that focuses on mobile, web and desktop technologies. Jorge is a DZone MVB and is not an employee of DZone and has posted 53 posts at DZone. You can read more from them at their website. View Full User Profile

Using Backgrounds and Borders in BlackBerry Super Apps

03.28.2011
| 7754 views |
  • submit to reddit

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
            )
        ); 

        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?




References
Published at DZone with permission of Jorge Ramon, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Shoaib Almas replied on Sat, 2012/08/25 - 7:01am

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

Java Forum

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.