Style and State Definitions
Style Definitions
All colors, text formats and line formats are managed and rendered in the mashup environment using style definitions entities. A style definition is a collection of HTML styling elements that can be applied to a widget just as you would apply a CSS (Cascading Style Sheet) definition to an HTML tag.
Defining and Using Style Definitions
When you create a style, the following properties may be defined:
• Display String — Descriptive string that is displayed to indicate the currently-applied style definition.
• Background Color — Background for charts, buttons, panels, etc.
• Secondary Background Color — Used for widgets that support gradients.
• Font Bold (true/false)
• Font Italic (true/false)
• Font Underline (true/false)
• Image — If your widget style supports image displays, such as buttons, you can select an image to represent the image styling.
• Line Color — For pen styling in charts.
• Line Thickness — For pen styling in charts.
• Line Style — Generally refers to borders. ThingWorx provides the following options: Solid, Dashed, Dotted, None.
• Text Size — Choose a font size from 9-72px.
There are many style definitions that come pre-installed. It is encouraged to create your own to create a consistent look and feel for your mashup components.
State Definitions
A state definition is a collection of style definitions, along with rules on when to apply each style definition. The rule plus the style definition is a state. A state definition should have more than one state. This allows you to do data based formatting of cells in a grid, for example, based on the value of a column in the data service bound to the grid.
When you apply a state definition to a widget, you must also pick which field from the widget data set that you wish the rule to be evaluated against. This allows you to use fields other than the visible data column as the field that determines state.
Defining and Using State Definitions
When you create a state definition, you must apply the state type: as a String/Value or Numeric type. Defining a String/Value type applies the style definition to an exact match. Defining a Numeric type applies the style definition to any number within a defined range.
When you define a String/Value state definition, define the following fields for each state:
• String/Value— The string you want to match.
• Display Name — Use this to indicate a pump running versus off, for example, rather than using the match value. This name also shows up when dynamically binding state values (see below).
• Style — The style definition to apply on a match.
When you define a Numeric state definition, define the following field for each state:
• Operator — Select Less than or equal to or Less than.
• Value — A numeric value.
• Display Name— Name that is used for labeling the state at run time. This name also shows up when dynamically binding state values (see below).
• Style — The style definition to apply on a match.
It is important to note that you can define a state definition rather generically, and you can use specific overrides when that state is applied to an object. For example, you may have a typical scenario where you have a Low-Low condition, a Low condition, a Normal condition, a High condition, and a High-High condition. You want to use the following color scheme whenever this concept applies:
• Low-Low — Orange
• Low — Yellow
• Normal — Green
• High — Purple
• High-High — Red
However, the actual numeric range may be different for different data points, even though the five states will be the same. Rather than define a state definition for each data point, you can apply the same state definition, but override the actual numeric ranges for that specific application of a state definition to a widget. This is done within the widget configuration.
Overriding State Definitions
There are two ways to override the state definition:
• Choose the state definition to use for a specific widget and input widget-specific values into the renderer and state configuration dialog.
• Bind the state values to a data service. When you choose a state definition to apply to a widget, additional properties are added to the widget properties panel, one for each state in a state definition. The additional properties are named ValueFormat_<Display Name>, where Display Name is the name you applied in the original state definition. You can then bind a value from any data service to those properties, allowing you to dynamically set the state definition limits, and make it completely data driven.