Theme Basics

This chapter covers the creation of a simple hello world style theme and how it can be customized visually. It uses the Codename One Designer tool to demonstrate basic concepts in theme creation such as 9-piece borders, selectors and style types.

Codename One themes are effectively a set of UIID’s mapped to a Style object. We can create a new theme by adding it in the Designer tool and customizing the UIID values.

Figure 1. New Theme Dialog

We can add a component style to a component such as Button; typically UIID’s are named with the same name as the Component class. You can modify the UIID of a component by invoking setUIID(String) on an arbitrary component or changing the UIID property in the GUI builder.

Figure 2. Add Style Dialog

Styles can have one of 4 states:

1. Default (unselected) - the way a component appears when it’s in none of the other states.

2. Selected - shown when the component has focus or is active (on a touch screen device this only appears when the user interacts with the device with touch or with a physical key).

3. Pressed - shown when the component is pressed. This is only active for Buttons.

4. Disabled - shown when the component is disabled.

You can add a style to any one of the states in the Designer to make the component appear as expected in those cases.

Figure 3. Select style mode

When editing the style of a component, you can customize multiple things, such as the background image, the way such a background image is displayed, or a gradient/solid color background. You can customize colors, fonts, padding/margin, border etc.

Figure 4. Custom theme background

Borders are a remarkably powerful tool for customizing the appearance of a Component. The most powerful approach is the 9-piece image border, which is easiest to use when using the Image Border Wizard.

Figure 5. Border wizard

The image border wizard allows you to take an image and "cut it" into 9 distinct pieces: 4 corners, top, bottom, left, right & center. When the border is rendered to the screen the style places the corners in the edges of the component and the other elements are tiled to fill up the available space.

Figure 6. Nine-piece slice tool

It’s important, when using a gradient effect within the image border, to make sure the center section (piece) is as narrow as possible to avoid a "broken" gradient.

Figure 7. Cut image