Links

Main Window

When you start the Theme Builder application, it shows the main window displayed below. Initially it shows the default preview pane containing a sample of Wisej controls in two floating windows in a Wisej.Web.Desktop container.
The tree on the left side shows all the elements in the current theme and the property grid on the left-bottom side displays the properties or items of the selected tree node.
You can change any aspect of the theme through this window and see immediately what effect your changes have on any Wisej control or on your application while it's running.
Main Window
Tool
Description
Text
create New Theme.Image
Creates a new theme.
load Theme.Image
Loads an existing theme.
Read more
save Theme.Image
Saves the theme being edited.
save Theme As.Image
Saves the theme being edited to a different file.
Dropdown list with the preloaded themes. You can switch the theme being edited using this list.
reload.Image
Reloads the current theme. It may be useful if the preview window gets messed up after a while.
Enables or disables the live-update mode. When live update is ON, the preview window shows any change to the theme immediately. Turn it OFF to apply several changes in a sequence and save the time it takes to refresh the preview.
Enables or disables right-to-left alignment and layout. When Right To Left is ON, the preview scripts create the widgets setting the rtl and rtlLayout property to true, which adds the "RightToLeft" state to the widgets that support RTL mode.
add.Image
Adds a new element or a new value to the theme.
A new element can be a Color, an Image, a Font, an Appearance, a State or a Component.
A new value can be a Style or a Property. The type of element or value that is added depends on the selected node in the components.
Colors
Images
Fonts
States
Styles
delete.Image
Deletes the selected element.
rename.Image
Renames the selected element.
move Left.Image
Demotes the selected components. This button is enabled only when the selected element is a child component. Since components are hierarchical, this action lets you change the parent of a component.
move Right.Image
Promotes the selected components. This button is enabled only when the selected element is a child component. Since components are hierarchical, this action lets you change the parent of a component.
move Down.Image
Moves the selected element down. This button is enabled only when the selected element is a state a component or an appearance.
Moving a state up or down changes the order in which the styles and properties associated with the state are applied to the widget.
The Default state is always the first state in the list.
move Up.Image
Moves the selected element up. This button is enabled only when the selected element is a state a component or an appearance.
Moving a state up or down changes the order in which the styles and properties associated with the state are applied to the widget.
The Default state is always the first state in the list.
clicked Appearance.Image
Last Clicked
Shows the full appearance path of the last clicked widget in the preview window. The appearance key may not be present in the theme definition tree for several reasons: a) it could be a custom key defined in your application or an extension; b) it's a child component that is not themed (doesn't need to be); c) it's a new widget that wasn't themed.
The Last Clicked information allows you to add the specific appearance key when needed.