Appearances

The appearances section in the theme file is where all the styles and properties that apply to the widgets are defined. Each widget has an appearance name (corresponds to the AppearanceKey property exposed by the server-side control) that selects which section of the theme applies to the widget.

The appearances are organizes in a hierarchical structure:

"apparances": {

    [appearance key]: {
      "inherit": "",
      "text": "",
      "states": {
        [state name]: {
          "styles": {
            ...
          },
          "properties": {
            ...
          }
        },
        "components": {
          [child key]: {
            "inherit": "",
            "text": "",
            "states": {
              [state name]: {
                "styles": {
                  ...
                },
                "properties": {
                  ...
                }
              },
              "components": {
                ...
              }
            }
          }
        }
      }
    }

See Elements section for a detailed explanation of the theme structure.

ElementDescription

[appearance key]

Top level appearance key. Widgets that want to use the styles and properties defined under this key must match the key. i.e., wisej.web.Button uses the "button" appearance, but it could use "button-ok" or "button-cancel" to retrieve different styles and properties.

"inherit"

Inherits all the states, styles and properties from another key. i.e., "button-ok" inherits from "button" and overrides the face color.

"text"

The text property is used only by the Theme Builder. It simply changes the text of the appearance in the tree view. i.e. "listview" can be displayed as "ListView". The Theme Builder already converts all appearance keys from first lower to first upper, and converts dashed to spaces. Use the "text" property only when you want to change the text displayed by the Theme Builder.

"states"

The states section contains the list of the states that the appearance should style. See States.

The first state must be default. The theme engine in Wisej applies the styles and properties of all the states that match the widget states in the order they are declared in the theme.

[state name]

The state name depends on the widget using the appearance. Some state are used by most widgets and are suggested by the Theme Builder. However, many widgets use states that depend on the implementation of the widget itself, and can add new states in later releases.

For example, the disabled state is available for most widgets, while the checked, or pressed state is not.

"styles"

Styles used to create the CSS class used by the widget with the matching appearance. See Styles.

"properties"

Property values to assign to the corresponding properties of the widget using the appearance. See Properties.

"components"

The components collection defines child appearances that use the same recursive structure as the main appearance. See Components.

[child key]

Child keys are appearance keys inside another appearance key. They apply their styles and properties to inner widgets. i.e. the icon widget inside a wisej.web.Button uses the styles and properties defined in button/icon.

  • Child appearances are reachable using the forward slash. To inherit from the "title" child appearance defined inside "window", use "window/title".

  • Appearance keys are case sensitive.

  • Child widgets are not child controls. You cannot refer to child widgets from the server: the Wisej.Web.Button control can only refer to the wisej.web.Button JavaScript widget but cannot reference the internal composition of the widget.

Components

Components refer to child widgets that compose a larger widget. The name of the component is the name used by the parent widget to refer to the child.

The component entry in the Theme is identical to the Appearance entry. A component can include other components in a recursive structure.

In the image above, you can see that the Button appearance contains a component named Icon. Each component has a set of states and for each state it has styles and properties.

Some states are inherited: when the widget adds or removes a state to a widget it will also add it and remove it to child widgets.

PreviousFontsNextStylesheet

Last updated