Zuble Style System

Style System

Zuble uses a style system that supports page themes for workpads and tools. Styles are loosely defined in Zuble to be named properties the value of which must be propagated to a specific group of target objects. What kind of properties constitute styles and to what objects styles should apply are up to the application designer. The styles of a text objext, for example, are different from those of a video clip.

Thus the goal of the style system is to allow application designers to group style properties and target them to specific sets of target objects.

Object Styles

Zuble uses styles to define the following visual attributes:

• text color
• text weight
• rectangle background color
• rectangle border color
• rectangle hover color
• rectangle radius

Style Files

Styles are named and are stored as separate files in JSON format. Each style file contains a metadata field named "style.meta.name" containing the name of the style. Style names used in a Zuble application must be unique.

Style Groups

Styles are defined as properties of JSON objects and are organized as collections called groups. Each group defines a set of properties that apply to a particular kind of object.

Styles within a style file are spedified as follows:

<group>.<propertyName>

where <group> names a collection of style properties that are common to a specific object type.

The final "." is a property name separator.

<propertyName> is the name of the style property.

As an example Zuble provides two style groups for buttons: textButton and symbolButton. Although the same set of style properties apply to both kinds of buttons they are defined as separate groups so that symbol button properties can have different values than the same properties for text buttons. They could be different colors, for example, or different font weights.

The style file format is illustrated in the sample style file shown below.

Style Propagation Mechanism

Style files are loaded into ZScopedMap objects, which are connected to ZStyleTarget objects. A ZStyleTarget loads styles from a single style group and monitors its source ZScopedMap object for changes to that group. When a change is made to a style property in ZScopedMap it is propagated to all ZStyleTarget objects that are watching the style group to which that style belongs.

Zuble loads each application style file into a separate ZScopedMap object and stores those objects in a ZMap keyed by their style name. These are the page theme objects that comprise the outer style scopes for each styled workpad. Each styled workpad also has an inner style scope that defines overrides for style properties in the page theme. This allows users to customize page themes for individual workpads. Customizations are stored in workpad persistence. Styled workpads are created by extending ZStyledWorkpad.

Style Scopes

ZScopedMap objects can be cascaded to form scopes, in which the same property can have different values. Properties defined in inner scopes take precedence over the same name properties in outer scopes. This mechanism is used by Zuble to allow local customization of page themes.

When a ZScopedMap's outer scope is changed style property values are reloaded by the ZStyleTarget objects. This allows the application user to switch page themes at runtime.

Each workpad contains a reference to an external ZScopedMap, owned by the main application frame window, representing the workpad's page theme and comprising the outer style scope. And then each workpad also contains a second internal ZScopedMap comprising the inner style scope, containing the styles that are being overriden for that workpad. By adding styles to the internal ZScopedMap a user can override values for those styles from the page theme.

Both the page theme ZScopedMap and the workpad ZScopedMap are persisted in a Zuble settings file. A user can customize their page themes by editing the settings file.

Extend ZStyledWorkpad to create workpads that support page themes.

Example Style File

Here is an example of a Zuble style file. It is a JSON object containing all the style groups for a particular page theme:

{
    "style.meta.name": "lighter-background",
    "style.meta.version": "0.1",

    "fillColor":"transparent",
    "textColor":"darkslategray",
    "borderColor":"green",
    "backgroundColor":"darkgoldenrod",
    "onHoverColor":"red",

    "workpad.backgroundColor":"lightgray",
    "workpad.borderColor":"dimgray",
    "workpad.fillColor":"transparent",
    "workpad.onHoverColor":"white",
    "workpad.textColor":"darkslategray",
    "workpad.textBold":false,

    "textbutton.backgroundColor":"silver",
    "textbutton.textColor":"black",
    "textbutton.borderColor":"rosybrown",
    "textbutton.onHoverColor":"salmon",
    "textbutton.radius": 6,

    "symbolButton.backgroundColor":"transparent",
    "symbolButton.textColor":"black",
    "symbolButton.borderColor":"transparent",
    "symbolButton.onHoverColor":"transparent",
    "symbolButton.radius": 2,

    "toolbox.backgroundColor":"gray",
    "toolbox.textColor":"white",
    "toolbox.textBold":false,

    "toolboxButton.backgroundColor":"gray",
    "toolboxButton.textColor":"orange",
    "toolboxButton.borderColor":"lightsteelblue",
    "toolboxButton.onHoverColor":"orange",
    "toolboxButton.radius": 6
}