Writing a style sheet

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:
Tree {
  view: true;
}
View {
  background: orange;
}
The configuration of each graphic component is specified in a CSS rule, which is identified by the name of the graphic component:
  • Table
  • Tree
  • Network
  • Equipment
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.
object.Alarm {
    label: @identifier;
}
When you have configured the style sheet, you can load it into the various graphic components with the method setStyleSheets :
//Load the tree component configuration
String[] css = new String[] { "tree.css" };
try {
  treeComponent.setStyleSheets(css);
} catch (Exception e) {
  e.printStackTrace();
}
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.