This section contains reference information on CSS. It explains how CSS concepts are used in JViews TGO. It introduces you to:

CSS Syntax

The main elements of syntax are:

Applying CSS to Java Objects

You can apply CSS to style Java objects instead of XML documents.

The CSS selector is designed to match HTML or XML documents. It can also be used to match a hierarchy of Java objects accessible through a model interface. The declarations are then sorted for the objects in the model and are used depending on the application that controls the CSS engine. In JViews TGO, declarations create and customize one graphic object for each object in the model.

The input model represents the kernel of the CSS for Java engine. It provides these important categories of information:

The declarations part represents property settings on a target object. The target object depends on the way the CSS engine is used. In JViews TGO, the target object is the rendering object associated with the object in the model. JViews TGO provides a default graphic representation for user-defined business classes and predefined business classes. This graphic representation has a set of properties that are used to customize its appearance.

How to Customize the Graphic Representation

object."test.Vehicle"[model=sports] {
    icon: "sports-car.gif";
}

This example matches the object of the class test.Vehicle with the property model (which has the value sports) and fixes the property icon of the graphic object associated with this object to sports-car.gif. (The association of the object with the graphic object is defined elsewhere.)

Property matching can be used to add dynamic behavior. An event that changes attribute values occurring on the model can activate the CSS engine to establish new property values.

How to Add Dynamic Behavior Through Property Matching

object.computer[state=down] {
    foreground: gray;
}

This example changes the foreground color whenever an object of CSS class computer has the value of the property state set to down.

The CSS Engine in JViews TGO

In JViews TGO, the CSS engine is responsible for creating and customizing graphic objects and renderers when the data is loaded. At run time, the engine customizes the graphic objects according to changes in the model.

The left side of a declaration usually represents a JavaBean property of the graphic property. The right side is a literal. If the literal requires type conversion, the method setAsText() is invoked on the property editor associated with the JavaBean property.

Class Property

The class property name is a reserved keyword that indicates the class name of the generated graphic object. JViews TGO provides a predefined representation for the objects in all graphic components, which means that the class property is optional. It can be used when you want to replace the predefined representation.

How to Use the Class Property

The right side of a class declaration could contain:

In the network and equipment components, the class declaration is applied only when a creation request occurs. When the model state changes, graphic components are customized by applying only new declarations from the matching rules in the CSS. The class declaration is ignored. To change the class, the object in the model must be removed and then added again.

Model Indirection

The right side of a declaration contains a literal that is converted dynamically through a property editor. If the literal is prefixed by @, the remainder of the string is treated as a model attribute name. The declaration expects the attribute value of the object from the model.

How to Refer to Attribute Values of Model Objects

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

The label property is set to the value of the attribute named name in the model.

Besides the standard model attributes, JViews TGO also provides the following attributes that you can use when customizing objects and graphic components:

Resolving URLs

Sometimes declaration values are URLs relative to the style sheet location. A special construct, standard in CSS level 2, allows you to create a URL from the base URL of the current style sheet. For example, the following declaration extends the path of the current style sheet URL with images/icon.gif.

How to Extend the Path of the Current Style Sheet

imageURL: url(images/icon.gif);

This feature is very useful for creating style sheets with images located relative to the style sheet itself, since the URL remains valid even when the CSS is cascaded or imported elsewhere.

CSS Recursion

You may want to specify a Java object as the value of a declaration. A simple convention allows you to recurse in the style sheet; that is, to define a new Java object which has the same style sheet, but is unrelated to the current model.

Prefix the value with @# to create a new JavaBean dynamically.

How to Create a New JavaBean Dynamically

object."Alarm/creationTime" {
    toolTipText: "@#tooltipFormatBean";
    label: @creationTime;
}
Subobject#toolTipFormatBean {
    class:"ilog.cpl.util.text.IlpSimpleDataFormat";
    pattern: "HH:mm:ss z";
}

The @# operator extends the current data model by adding a dummy model object as the child of the current object. The object ID of the dummy object is the remainder of the string, beyond the @# operator. The type of the dummy object is Subobject. The dummy object inherits CSS classes and attributes from its parent.

The CSS engine creates and customizes a new subobject according to the declarations it finds for the dummy object. This means, in particular, that the Java class of the subobject is determined by the value of the class property. The newly created subobject becomes the value of the @# expression. In the declarations for the subobject, attribute references through the @ operator refer to the attributes of the parent object.

Once the subobject is completed, the previous model is restored, so that normal processing is resumed.

There are two refinements to the @#ID operator:

The need for these refinements arises from a performance issue. The @# operator creates a new object each time a declaration is resolved. Usually, a declaration is applied when properties change. Under certain circumstances, the creation of objects may lead to expensive processing. These optional mechanisms minimize the creation of objects.

CSS Expressions and Functions

The values of CSS declarations can be literals, @# constructions, or attributes from the model (prefixed by @). In addition, you can also declare a value with @|, which considers the rest of the value as an expression.

The syntax of the expression after the @| prefix is close to Java syntax. Expressions can be, for example, arithmetic (int, long, float, or double), Boolean, or String.

Expressions can also refer to attributes in the model. The syntax used is the normal one.

The usual functions are accepted:

For example:

@|3+sin(pi/2)

which results in the value 4.

CSS also supports functions as part of expressions.

JViews TGO Functions

JViews TGO provides a set of functions that can be used directly in your CSS files.

How to Create New CSS Functions

The signature of the main method is:

public Object call (Object[] args,
                    Class type,
                    IlpContext appc,
                    IlpGraphicView view,
                    IlpRepresentationObject ro,
                    IlpAttribute attribute);

When a function is evaluated, the parameters are first resolved as subexpressions. Then, the final values of the parameters are passed to the args array.

The parameter type is the expected type of the function when it is known. A null value is possible. The implementation should be careful to return an object of the appropriate type. Otherwise, a simple conversion is applied, if conversion is possible, that is, between primitive types or to a String.

The other parameters provide information about the application context, graphic view, representation object, and attribute at the time when the call is made. Stateless expressions do not need these parameters.

If an error occurs during a call, an exception will be reported and the current property setting will be canceled.

Functions are registered in the CSS file with one of the following properties:

How to Register a Function in a CSS File

StyleSheet {
    functionList: "test.function.FirstFunction,test.function.SecondFunction";
}

or

StyleSheet {
    functions[0]: "test.function.FirstFunction";
    functions[1]: "test.function.SecondFunction";
}

Divergences from CSS2

Java objects are not HTML documents. The differences lead to an adaptation of the CSS, so that its power can be fully exploited. The CSS2 syntax is retained. Therefore, a CSS editor can still be used to create the style sheet.

Cascading

Cascading is explicit. The API provides a means of cascading the style sheets. The !important and inherit tags are not supported. They have not been implemented for the sake of simplicity.

Pseudo-classes and Pseudo-elements

The pseudo-classes are fully implemented and are used by all JViews TGO renderers. JViews TGO recognizes the pseudo-classes :selected, :focus, and :expanded by default.

Pseudo-elements are metaclasses like pseudo-classes, but match document structure instead of the browser state; for example, :first-child.

Attribute Matching

Each attribute value must be converted to String. This conversion is done using the Type converter specified in your application context.

The attribute pattern in CSS2 checks only the presence [att], equality [att=val], and inclusion [att~=val] of strings. The |= operator is disabled. In Java, numeric comparators (>, >=, <>, <=, <) have been added, with the usual semantics.

Syntax Enhancement

CSS for Java requires the use of quotation marks when a token contains special characters such as dot (.), colon (:), commercial at sign (@), hash sign (#), space ( ), and so on. Quotes can be used almost everywhere, in particular to delimit a declaration value, an element type, or a CSS class with reserved characters. The closing semicolon (;) is optional.

Null Value

Sometimes it makes sense to specify a null value in a declaration. By convention, null is a zero-length string '' or "".

How to Specify a Null Value

object {
    labelBackground: '';
}

The notation '' is also used to denote a null array for properties that expect an array of values.

Empty String

The null syntax does not distinguish the ability to write an empty string in the style sheets. If an empty string is required, it is easy to create it dynamically.

How to Create an Empty String

object {
    label: @#emptyString;
}
 
Subobject#emptyString {
    class: 'java.lang.String';
}