help.themeEditorHelp.html Maven / Gradle / Ivy
Theme Editor Help
Introduction
The theme editor allows designers to customize the appearance of a CodenameOne
application or GUI builder UI and see a live preview of said changes
in the preview pane on the right side. The preview pane is "live" and
supports keyboard/mouse interaction, it can also be customized extensively
by clicking its options button.
By default the CodenameOne Demo application is presented in the preview pane
however you can pick a custom CodenameOne application or use any form from the GUI
builder builtin to this tool.
To gain a deep understanding of the tool and its full potential we suggest
you check out the tutorials in the help menu that are based on video
screen casts.
Basics
If you are familiar with CSS then the theme editor is a much simplified
version of that with simpler selectors and more refined attributes.
CodenameOne applications are comprised of components each of which has a UIID
(User Interface ID), the UIID defaults to the component type (e.g. a
button has the "Button" UIID) however a developer/designer may change
the UIID to provide greater range (more on that later).
A UIID is the main part of the "selector" it allows a theme to
define the element to customize, a selector is matched by a set
of values indicating what is being customized.
E.g. If you would like all the buttons to be drawn in blue you
can add a Button entry and set its foreground color to Blue.
However, this will only work for some of the buttons since a selector
has another important part based on the state of the component.
CodenameOne components can be unselected (unfocused), selected (focused),
pressed (only buttons support this) or disabled. To make the button
blue for all cases we will need to define the button as blue in all
4 tabs (we can ease this using inheritance).
Each selector (UIID + state) can have a style associated with it, a style
contains multiple attribute values that can either be inherited or
replaced with your custom settings (e.g. foreground color). For more
information click the "Add" button bellow and select the help tab.
Inheritance
CodenameOne has a base style for every component state, this base style determines
the "starting point" for a component specific style. E.g. if I want all
components to be blue I can change the default style to blue, I will need
to do this for disabled, pressed and selected tabs as well.
Other than that CodenameOne has no implicit inheritance (although it has some
elaborate default settings for components), it does have explicit inheritance
where its possible to define a UIID from which to derive the attribute
values.