Specializing CSS rules

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.

CSS Class

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:

object."ilog.tgo.model.IltObject" {
    label: @name;
}

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:

object."Alarm/identifier" {
    label: @identifier;
}

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

#RJLed0 {
    foreground: yellow;
}

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

object."Alarm/identifier"[perceivedSeverity=0] {
    labelBackground: '#FFFFFF';
}

Current section

Getting started with JViews TGO style sheets