Using LWUIT Example

LWUIT version 1.3, released in December 2009, consolidates the modifications over version 1.1 initiated in version 1.2 and incorporates some new ones too. It also introduces three new components -- Tree, Table and Spinner. The use of the Tree widget is demonstrated through the LWUIT Demo that comes with the LWUIT download bundle. In this article we examine the changes with respect to Style and go on to check out Table and Spinner.


The demo applications have been developed on the Sprint Wireless Toolkit 3.3.2 (SWTK). Not only does this toolkit support LWUIT extremely well, it also has an interesting array of device emulators like those for HTC Touch and Samsung Instinct. If you intend to try out LWUIT, I would strongly suggest that you install the Sprint WTK on your computer.
Style

The idea behind Style is to centrally define the visual attributes for each widget (component). In addition to its physical design, such as its shape, the appearance of a widget can be defined in terms of a number of common features or attributes. In LWUIT 1.1 the settable attributes for a component were:

•  Background and foreground colors.
• Fonts for writing text on it.
• Background transparency.
• Background image.
• Margin and padding.
• Background painters.
• Border.

The additional attributes defined under LWUIT 1.3 are:

•  Background type -- specifies whether the background has an image or a color gradient. An image can be tiled, scaled or aligned (unscaled with alignment). A gradient for background can be linear (vertical/horizontal) or radial.
• Background alignment -- if an image (tiled or aligned) is used for the background, the alignment (top/bottom/left/right/center) is defined by this attribute.
• Background gradient start and end colors.

A Style object holds all these attributes for each state of each component that is used in an application, and has appropriate accessor methods. In addition this class also has the ability to inform a registered listener when a style object associated with a given component is altered.
A Style for Each State

In the early days of LWUIT, that is up to version 1.1, there used to be just one Style object for each widget to be displayed. This single Style object had separate attributes corresponding to the different widget states. For example, the background color for the unselected (unfocused) state would be defined as bgColor and that for the selected (focused) state as bgSelectionColor. The code for setting these colors would look like this.

//when the widget does not have focus
 //the background will be red
myComponent.getStyle().setBgColor(0xff0000);

 //when the widget has focus
 //the background will be blue
 myComponent.getStyle().setBgSelectionColor(0x0000ff);

However, as of version 1.2, this has changed. Components now have distinct styles for each of their permissible states. Most components would have a selectedStyle and an unselectedStyle. Components like buttons and those that extend the Button class will have an additional style corresponding to the pressed state -- the pressedStyle. So, the above code sample will now look as follows.

        //when the widget does not have focus
        //the background will be red
        myComponent.getUnselectedStyle().setBgColor(0xff0000);

        //when the widget has focus
        //the background will be blue
        myComponent.getSelectedStyle().setBgColor(0x0000ff);

Note that we have used two different versions of the getter method -- one for each style. Actually, the Component class has a getStyle method too, which returns the appropriate style depending upon the state of the component. This capability leads to simpler coding especially for methods that render components.

When a component is created, a default Style object gets associated with it as its unselectedStyle. The other styles are created when accessed for the first time through the corresponding setter or getter methods.

There are several ways for setting and modifying attributes as shown in the following list.

* By using the get*Style().set* combination as above.
* By creating a new style with the desired attributes and then invoking the set*Style method to set the new style.
Style for an entire set of widgets can be set through the UIManager instance. The relevant technique is

              //method for setting unselected style
              UIManager.getInstance().setComponentStyle
                      (String id, Style style)

              //method for setting selected style
              UIManager.getInstance().setComponentSelectedStyle
                      (String id, Style style)

      However, currently this approach works for selected and unselected styles.
    * Through a Theme.

In the following section we shall check out a simple demo application which shows how styling can be done under LWUIT 1.3.
Using Style

Our application will have a single form with three widgets and will look like the Figure 1:

 The screenshot above shows a screen with two labels and one button. Labels, by default, cannot receive focus and the topmost widget is such a label. The second label has been explicitly made focusable as shown by the code snippet below.

//create a label
Label focusLabel = new Label("Focusable");

//and make it focusable
focusLabel.setFocusable(true);

In Figure 1 we see the second label in the selected state. The applicable style is set as follows:

//modify default style to set attributes 
//for selected state of focus label
focusLabel.getSelectedStyle().setBgColor(0x555555);
focusLabel.getSelectedStyle().setFont(font);
focusLabel.getSelectedStyle().setBorder
(Border.createBevelRaised())

The first label and the button are unselected and their appearances are styled through the same Style object. This object has the following attributes:

//create a common style for unselected state
Style unselStyle = new Style();
unselStyle.setFont(font);
unselStyle.setBgTransparency(64);
unselStyle.setFgColor(0xffc605);
unselStyle.setBorder(Border.createEtchedRaised());

This style is set as the unselected one for all labels by calling the setComponentStyle(String id, Style style) method. This is shown below.

//set unselected style for labels
UIManager.getInstance().setComponentStyle
("Label", unselStyle);

The unselected style for the button is set in the following way using the same style object that is used for labels.

//create button
Button button = new Button("Button");

//set style for unselected state of button
button.setStyle(unselStyle)

Figure 2 shows the same screen as above with the button in the selected state.

We can see that both labels are unselected and their appearances are the same. The button, which has focus, looks just like focusLabel in Figure 1. This is ensured by creating a style with attributes that have the same values that were used for the selected style of focusLabel. This new style -- buttonSelStyle -- is then installed as the selected style for the button.

//create selected style for button
Style buttonSelStyle = new Style();
buttonSelStyle.setBgColor(0x555555);
buttonSelStyle.setFont(font);
buttonSelStyle.setBorder(Border.createBevelRaised());
        ...
//set style for selected state of button
button.setSelectedStyle(buttonSelStyle);

n a similar manner we create and set a style for the pressed state of the button:

//create pressed style for button
Style buttonPrStyle = new Style();
buttonPrStyle.setBgColor(0xff0055);
buttonPrStyle.setFont(font);
buttonPrStyle.setBgTransparency(127);
buttonPrStyle.setBorder(Border.createRoundBorder(12, 5, 0xff0000));
        ...
//set style for pressed state of button
button.setPressedStyle(buttonPrStyle);

The result of pressing the button can be seen in Figure 3 below.