Using Themes in LWUIT 1.1: Part 1

Create great user interfaces for mobile devices

Working with theme files

A theme file is conceptually similar to CSS while its implementation is like that of a Java properties file. Essentially a theme is a list of key-value pairs with an attribute being a key and its value being the second part of the key-value pair An entry in the list may be Form.bgColor= 555555. This entry specifies that the background color of all forms in the application will be (hex) 555555 in the RGB format. The list is implemented as a hashtable.

Viewing a theme file

A theme is packaged into a resource file that can also hold, as we have already seen, other items like images, animations, bitmap fonts, and so on. The fact that a theme is an element in a resource bundle means it can be created, viewed, and edited using the LWUIT Designer. The following screenshot shows a theme file viewed through the LWUIT Designer:


The first point to note is that there are five entries at the bottom, which appear in bold letters. All such entries are the defaults. To take an example, the only component-specific font setting in the theme shown above is for the soft button. The font for the form title, as well as that for the strings in other components is not defined. These strings will be rendered with the default font.

A theme file can contain images, animations, and fonts—both bitmap and system—as values. Depending on the type of key, values can be numbers, filenames or descriptions along with thumbnails where applicable.

Editing a theme file

In order to modify an entry in the theme file, select the row, and click on the Edit button. The dialog for edit will open, as shown in the following screenshot: Clicking


Clicking on the browse button (the button with three dots and marked by the arrow) will open a color chooser from which the value of the selected color will be directly entered into the edit dialog. The edit dialog has fields corresponding to various keys, and depending on the one selected for editing, the relevant field will be enabled. Once a value is edited, click on the OK button to enter the new value into the theme file. In order to abort editing, click on the Cancel button.

Populating a theme

We shall now proceed to build a new theme file and see how it affects the appearance of a screen. The application used here is DemoTheme, and the code snippet below shows that we have set up a form with a label, a button, and a radio button.

//create a new form
Form demoForm = new Form("Theme Demo");
//demoForm.setLayout(new BorderLayout());
demoForm.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
//create and add 'Exit' command to the form
//the command id is 0
demoForm.addCommand(new Command("Exit", 1));
//this MIDlet is the listener for the form's command
Label label = new Label("This is a Label");
Button button = new Button("An ordinary Button");
RadioButton rButton = new RadioButton("Just a RadioButton");
//timeteller -- a custom component
//TimeTeller timeTeller = new TimeTeller();
//set style for timeLabel and titleLabel(in TimeViewer)
//these parts of TimeTeller cannot be themed
//because they belong to TimeViewer which does not
//have any UIID
/*Style tStyle = new Style();
tStyle.setBorder(Border.createRoundBorder(5, 5));
Style tmStyle = timeTeller.getTimeStyle();
tmStyle.setBorder(Border.createRoundBorder(5, 5));*/
//add the widgets to demoForm
//show the form;

The statements for TimeTeller have been commented out. They will have to be uncommented to produce the screenshots in the section dealing with setting a theme for a custom component.

The basic structure of the code is the same as that in the examples that we have come across so far, but with one difference—we do not have any statement for style setting this time around. That is because we intend to use theming to control the look of the form and the components on it. If we compile and run the code in its present form, then we get the following (expected) look.


All the components have now been rendered with default attributes. In order to change the way the form looks, we are going to build a theme file—SampleTheme—that will contain the attributes required. We start by opening the LWUIT Designer through the SWTK. Had a resource file been present in the res folder of the project, we could have opened it in the LWUIT Designer by double-clicking on that file in the SWTK screen. In this case, as there is no such file, we launch the LWUIT Designer through the SWTK menu.

The following screenshot shows the result of selecting Themes, and then clicking on the Add button:


The name of the theme is typed in, as shown in the previous screenshot. Clicking on the OK button now creates an empty theme file, which is shown under Themes.


Our first target for styling will be the form including the title and menu bars. If we click on the Add button in the right panel, the Add dialog will open. We can see this dialog below with the drop-down list for the Component field.


Form is selected from this list. Similarly, the drop-down list for Attribute shows all the attributes that can be set. From this list we select bgImage, and we are prompted to enter the name for the image, which is bgImage in our case.


The next step is to close the Add Image dialog by clicking on the OK button. As we have not added any image to this resource file as yet, the Image field above is blank. In order to select an image, we have to click on the browse button on the right of the Image field to display the following dialog.


Again, the browse button has to be used to locate the desired image file. We confirm our selection through the successive dialogs to add the image as the one to be shown on the background of the form.

As we can see, the process of adding an attribute to a component is pretty intuitive. In a similar manner, we can set the various background and foreground colors for the components. When setting a color attribute, the dialog will have the familiar browse button to select the color from a color chooser dialog.

For setting a font, the dialog has two radio buttons to select Bitmap or System fonts. If Bitmap is selected, then the available bitmap fonts in the resource file will be shown in the corresponding field. If there are no bitmap fonts in the resource file, then the required font will have to be selected by clicking on the browse button, which will initiate the same sequence of operations for adding a bitmap font. With the System button selected, on the other hand, the applicable parameter fields will become active.


Once we have set the attributes for the form, its title and its menu, the theme file looks like the following screenshot:


Now, it is time to see what we have done to our form. One way of doing this is to run the application. But the LWUIT Designer provides a very convenient way of checking the result of our actions on a theme file through the preview panel. If you maximize the LWUIT Designer window, then this panel will appear on the extreme right of the window whenever a theme file is selected.


What we see on the preview panel is how the LWUITDemo application (it is a part of the LWUIT download bundle) would look with the attributes specified in the theme file that we are dealing with. This preview keeps showing the effects of style attributes as we enter them into the theme. The style settings for the form, the title and the menu do appear to have produced the intended result. To cross-check, let us save the file and run our demo so that we can see how the screen looks now. However, for the theme file to take effect, it has to be installed, and that is quite easily done as we see in the code below:

Resources sampleThemeResource ="/SampleTheme.res");
Hashtable sampleTheme =

With that done, we can compile and run the code, and as we see, the form together with the title and menu, does indeed look the way we would expect it to after the preview.


We now turn our attention to the label, the button, and the radio button. The following is the complete theme file to set attributes for all the components on the form. Note that there is no font setting for the label, the button, or the radio button. Instead, there is a default font, which is effective for all these three components.


Before we save this file, let us preview the theme. The LWUIT Demo on the preview panel is not merely an image. It works as well. So, to preview the look of the label, the button, and the radio button, we select Buttons on the demo, and the following screen opens on the preview panel:


The styles appear to be acceptable. We have not set any attribute for the check boxes, and the defaults become applicable to them. However, we did set a default font, and this is effective for the check boxes too. The file can now be saved. The final result as applied to our form is shown in the following screenshot:



The steps we followed during our exploration of this topic are:

  • We saw how to use the LWUIT Designer for viewing and editing an existing theme
  • We built up a new theme from scratch
  • As we built the theme, we previewed its effects

In the next part, we will focus on theming custom components, how to make theming and manual styling work together, and new version of the LWUIT Designer.

Books to Consider

comments powered by Disqus