| « BlackBerry Simulators Reference Guide for Eclipse 3.5 plugin | How to get rid of DAO.msi pop up, after installing Roxio Media Manager » |
Adding Style and Color to Blackberry Labels
The Blackberry API provides the RichTextField class to allow for different styles, and the ActiveRichTextField to add color. When I first tried using them I found them not very easy to figure out. After playing around for a while, and finding a few examples I was able to figure it out. To help others get started I have put together this little tutorial/example.
In this example, I will show how to created the following formatted text:
This is formatted text, containing bold, and italic text, as well as blue and red text.
First, we define the text we want to format as a String:
Code:
String text = "This is formatted text, containing bold, and italic text, as well as blue and red text."; |
The RichTextField formatting, is based on defining the regions of the text that should be formatted. These regions are defined by offsets within the String. So next we need to define an Array of offsets that set the boundaries of the regions we want to format. It is important to set the first offset as the beginning of the text and the last offset as the end of the text (i.e. the must always be at least two offsets). The offsets can be specified as hard coded integer offsets, but this is not very maintainable. I try to define the offsets using the indexOf() method in the String class, as the following shows:
Code:
int[] offsets = new int[10]; | |
offsets[0] = 0; //This is the beginning of the text | |
offsets[1] = text.indexOf("bold"); | |
offsets[2] = text.indexOf("bold") + "bold".length(); | |
offsets[3] = text.indexOf("italic"); | |
offsets[4] = text.indexOf("italic") + "italic".length(); | |
offsets[5] = text.indexOf("blue"); | |
offsets[6] = text.indexOf("blue") + "blue".length(); | |
offsets[7] = text.indexOf("red"); | |
offsets[8] = text.indexOf("red") + "red".length(); | |
offsets[9] = text.length(); //End of the text |
Now we have or text chunked into all the necessary regions. The next step is to define the Font styles and Colors we want to use for the formatting.
When using a RichTextField with only Fonts (no Colors) it is relatively straight forward. You create an Array of Fonts and then define an Array of Attributes that link an Offset to a Font. When using both Font styles and Colors these attribute must be thought of as Font style/Color pairs. The easiest way to try to set this up is to set up a grid. For our example the grid could be as follows:
| Offset | Font | Color | Attribute Value |
| 0 | PLAIN (default) | BLACK | 0 |
| 1 | BOLD | BLACK | 1 |
| 2 | PLAIN (default) | BLACK | 0 |
| 3 | ITALIC | BLACK | 1 |
| 4 | PLAIN (default) | BLACK | 0 |
| 5 | PLAIN (default) | BLUE | 3 |
| 6 | PLAIN (default) | BLACK | 0 |
| 7 | PLAIN (default) | RED | 4 |
| 8 | PLAIN (default) | BLACK | 0 |
In this grid I first laid out the offsets, then defined the Font style/Color pair I wanted for each offset. I then went and gave each unique pair an incremental attribute value. I can then use this attribute value to set up the Font and Color arrays:
Code:
Font[] fonts = new Font[5]; | |
fonts[0] = Font.getDefault(); | |
fonts[1] = Font.getDefault().derive(Font.BOLD); | |
fonts[2] = Font.getDefault().derive(Font.ITALIC); | |
fonts[3] = Font.getDefault(); | |
fonts[4] = Font.getDefault(); | |
| |
int[] foregroundColors = new int[5]; | |
foregroundColors[0] = Color.BLACK; | |
foregroundColors[1] = Color.BLACK; | |
foregroundColors[2] = Color.BLACK; | |
foregroundColors[3] = Color.BLUE; | |
foregroundColors[4] = Color.RED; |
Once I have created the Fonts and Colors I create the Attributes Array to link the Font style/Color pairs, to the Offsets.
Code:
byte[] attributes = new byte[9]; | |
attributes[0] = 0; | |
attributes[1] = 1; | |
attributes[2] = 0; | |
attributes[3] = 2; | |
attributes[4] = 0; | |
attributes[5] = 3; | |
attributes[6] = 0; | |
attributes[7] = 4; | |
attributes[8] = 0; |
Finally once all of the Offsets, Fonts, Colors and Attribute are defined, we can create an instance of our class:
Code:
ActiveRichTextField formattedTextField = new ActiveRichTextField(text, offsets, attributes, fonts, foregroundColors, null, Field.NON_FOCUSABLE); |
In this example, I didn't want to do anything to the background color so I passed in null, I also wanted this field to act as a simple label, so I set the field as non focusable.
This field can then be added the screen.
A few things to watch out for:
- Make sure the offsets array contains an element for the start of the String and an element for the end of the String.
- The length of the attributes array should be one less than the length of the offsets array.
- Make sure the length used in the definition of the array, matches the actual number of elements you include; it is easy to go added a font element, but forget to change the value in the array definition. This will lead to ArrayIndexOutOfBounds Exceptions.
- In your attributes array, make sure you have corresponding elements in your font/color arrays for each value you set. For example, setting attribute[8] to 5 would be a problem since there isn't a fifth element in the font or color arrays.
This may not be the only way, or even the best way to accomplish this, but it worked for me, and hopefully some people find this helpful.
Check out the great deal in
Electronics
at Best Buy!
Trackback address for this post
Trackback URL (right click and copy shortcut/link location)
15 comments, 1 trackback
It's good to read a quality article for once