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
demoForm.setCommandListener(this);
//label
Label label = new Label("This is a Label");
//button
Button button = new Button("An ordinary Button");
//radiobutton
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.setBgColor(0x556b3f);
tStyle.setFgColor(0xe8dd21);
tStyle.setBorder(Border.createRoundBorder(5, 5));
timeTeller.setTitleStyle(tStyle);
Style tmStyle = timeTeller.getTimeStyle();
tmStyle.setBgColor(0xff0000);
tmStyle.setFgColor(0xe8dd21);
tmStyle.setBgTransparency(80);
tmStyle.setBorder(Border.createRoundBorder(5, 5));*/
//add the widgets to demoForm
demoForm.addComponent(label);
demoForm.addComponent(button);
demoForm.addComponent(rButton);
//demoForm.addComponent(timeTeller);
//show the form
demoForm.show();

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.