Getting started with JViews TGO style sheets

Here is a basic example to start with, which is intended to help you understand quickly how to write style sheets in JViews TGO.

How to write an easy style sheet

A CSS usually starts with the configuration of the graphic component. The graphic component configuration includes the configuration of the view, the interactor, the adapter and of some other elements in relation to the graphic component. For example, to set a background color in a tree component, you can write:

The configuration of each graphic component is specified in a CSS rule, which is identified by the name of the graphic component:

Each graphic component has a set of properties that can be customized through CSS.

For information on the properties in each graphic component, see the following topics:

Once a graphic component is configured, you can start to set the characteristics of the graphic representation of objects that are to be displayed in the component. In JViews TGO, all objects from the model have the CSS type object.

The following CSS extract shows how to configure objects of the business class Alarm. The complete version of this configuration is in the tutorial in <installdir> /tutorials/gettingStarted.

Normally, the JViews TGO tree component displays objects of a custom class as tree nodes indicated by a default icon and a label. You can specify a different behavior by customizing the graphic representation of these objects: you can set a specific icon and define that the label of the tree node has the value of the identifier attribute. A special character, the commercial at sign ( @ ), informs JViews TGO that it must get the value from the business model. The @ character is used as a prefix of the name of the attribute from the model.

When you have configured the style sheet, you can load it into the various graphic components with the method setStyleSheets :

The style sheet is dynamically interpreted, that is, you can load a new CSS configuration in a graphic component without recompiling or relaunching the application.

In CSS, the term declaration is used to describe the statements placed between braces ({}). Declarations represent property settings. They are used in JViews TGO like a JavaBean™ for customizing graphic objects. Typically, the left part of a declaration contains the name of a property of a graphic object and the right part contains the value set for the property. Sometimes, the left part of a declaration is not used to refer to a property of a graphic object. For example, class is a reserved word that represents the class name of the graphic representation.

JViews TGO defines a set of properties that can be applied to user-defined and predefined business objects to customize their graphic representation.

You can also define your own graphic representation by declaring the class property with your JavaBean class and setting it in the CSS rule.

How to define your own graphic representation

The CSS rule defined in this example states that objects from the business class Alarm are represented by JButton instances that are configured with the properties text, background, and foreground.

A CSS rule consists of a selector followed by one or more declarations contained within braces ({}). Up until now, selectors have only been used to distinguish CSS types and CSS classes.

In JViews TGO, the CSS class corresponds to the business model class.

How to match a business class

Within a selector, the syntax for matching a business class is:

How to match a business attribute

In the table component, table cells have a specific CSS class that is made up of the business class and attribute (column) names. The syntax for a business attribute is the following:

Matching object identifiers

Identifier matching in the selector is used to match a specific business object in the model. It is expressed in the format #id. When you use this type of selector, you can customize each individual business object through the style sheet. However, the benefits of factorization through declarations are lost.

How to match object identifiers

Add this rule to the style sheet to set the foreground color of the object RJLed0 to yellow.

Matching attribute values

The syntax for matching attribute values is expressed in the format [att=val]. This syntax allows you to write patterns in the style sheet that are close to the objects in the business model and to test the attribute against a value.

The following example adjusts the background color of the table cells in the column identifier according to the value of the attribute perceivedSeverity.

How to vary table cell background color depending on attribute value

Declarations that are not overridden are still valid. This mechanism allows you to write default declarations for common objects and to refine customization with rules that apply to more specialized objects in the model by overriding the default declarations.

In the following example, business objects of class Alarm have a label with a yellow background when the attribute perceivedSeverity is 0, and a white background when this attribute has a different value.

How to customize the representation of an object depending on a specific value

When styling with CSS, one of the most common problems concerns the order of priority. A rule can be assumed to have a greater or lesser priority than is actually the case. Then, unsuitable declarations are applied. With many rules, it can be difficult to determine which declarations apply to which conditions. Understanding the priority of CSS rules is the most difficult aspect of a large style sheet.

Another common problem is syntax errors in the declarations. If an identifier on the left does not refer to a valid property, it will be silently ignored. If the value on the right is invalid, it may also be ignored by the target object. In both cases, the declaration has no visible effect.

Yet another common problem concerns changes in properties. An event marking a new value may trigger a new rule. When the object in the model reverts to its previous state, the previous set of rules applies. Therefore, the previous set of rules must contain declarations that undo the changes in the properties of the graphic object correctly. For example, if a node switches to an alarm state, a CSS rule will create an alarm decoration. When the alarm state is resolved, the decoration should be canceled by a declaration in the normal set of rules.

You can specify a styleSheetDebugMask property in the graphic components. This flag has several levels that help in debugging problems. The style sheet debug mask can be set directly in the graphic component with the method setStyleSheetDebugMask or it can be customized in the style sheet itself.