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.
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.
Styles can have one of 4 states:
-
Default (unselected) - the way a component appears when it’s in none of the other states.
-
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).
-
Pressed - shown when the component is pressed. This is only active for Buttons.
-
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.
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.
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.
The image border wizard allows you to take an image and "cut it" into 9 distinct pieces: 4 corners, top, bottom, left, right & center. The corners are placed, as usual, in the edges of the component and the other elements are tiled to fill up the available space.
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.
