Jorge Ramon

  • Home
  • New Here?
  • Articles
    • All
    • Sencha Touch
    • jQuery Mobile
    • ExtJS
  • Books
  • About

Using Backgrounds and Borders in BlackBerry Super Apps

April 6, 2010 18 Comments

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?

Tagged With: BlackBerry Tutorial 18 Comments

Comments

  1. BeN says

    February 17, 2011 at 1:29 PM

    Thanks a lot for this code.
    This make my life easier !!!!!!!!!!

    Reply
  2. Nilesh says

    July 8, 2011 at 5:53 AM

    Thanx a lot yar…
    it helped me a lot.. 🙂

    Reply
  3. Anonymous says

    July 9, 2011 at 11:59 PM

    Thanks a lot. This was very very helpful for beginners like me!!

    Reply
  4. kalimuthu says

    August 5, 2011 at 8:39 AM

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

    Reply
  5. Saurabh says

    October 10, 2011 at 8:15 AM

    Thanks a lot.

    Reply
  6. Marcos Escudero says

    October 16, 2011 at 12:41 AM

    Jorge. Soy Marcos Escudero de Arngetina. Quisiera hacerte algunas preguntas. Muchas gracias

    Reply
  7. Omarie says

    October 16, 2011 at 6:30 PM

    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

    Reply
  8. Hrvoje says

    November 18, 2011 at 4:25 PM

    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.

    Reply
    • Jorge says

      November 18, 2011 at 5:45 PM

      Thanks! I’m glad this article helped you.

      Reply
  9. mrana says

    November 20, 2011 at 10:21 AM

    Hello jorge,

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

    Reply
  10. Suresh says

    January 22, 2012 at 11:16 PM

    Thanks, This article very help full in my project.

    Reply
  11. navendrata says

    May 23, 2012 at 7:06 AM

    thanks a lot Jorge..
    very very nice codes!

    Reply
    • Jorge says

      May 23, 2012 at 4:30 PM

      You’re welcome!

      Reply
      • Ahmad says

        September 26, 2012 at 7:58 AM

        nice, appreciated!

        Reply
  12. Rahul says

    October 18, 2012 at 1:36 AM

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

    Reply
  13. sravanthi says

    November 6, 2012 at 1:22 AM

    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?

    Reply
  14. Saurabh says

    September 11, 2013 at 7:29 AM

    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..

    Reply
  15. Meyta says

    January 15, 2014 at 11:30 PM

    wow cool(y) thanks a lot 😉

    Reply

Leave a Comment Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get My Books

The beginner's guide to Sencha Touch apps
The beginner's guide to jQuery Mobile apps

Book: How to Build a jQuery Mobile Application

Topics

  • » jQuery Mobile Tutorials
  • » Sencha Touch Tutorials
  • » ExtJS Tutorials
  • » Books
  • » Tools
  • » .Net Tutorials
  • » BlackBerry Tutorials
  • » iOS Tutorials
  • » Node.js Tutorials
  • » Android Training
  • » BlackBerry Training
  • » iOS Training

Search

Contact Me

  •  Email: jorge[AT]jorgeramon.me
  •  Twitter: @MiamiCoder
  •  LinkedIn: Jorge Ramon


Don’t Miss the Free Updates

Receive free updates in your inbox.
Your address is safe with me.

Copyright © 2021 Jorge Ramon · The opinions expressed herein do not represent the views of my employers in any way · Log in