The Data Model

Developing with the SDK > Using CSS Syntax in the Style Sheet > Applying CSS To Java Objects > The Data Model

The Data Model

The input data model represents the seed of the "CSS for Java" engine. It provides three important kinds of information to the CSS engine, required to resolve the selectors:

The tree structure of objects, which will be exploited by selector transitions.
Object type, ID, and tag (or user-defined type), which match element type, ID, and CSS classes. IDs and types are strings; CSS classes are words separated by a space character. ID is not required to be unique, although it is wise to assume so.
Attribute, which matches an attribute of the same name in an attribute condition within the selector.

The target object is the graphic object associated with the model object. The declarations change property values of the graphic object that corresponds to the matching model object, thereby customizing the graphic appearance given by the rendering.

In ILOG JViews Diagrammer the target object is an IlvGraphic instance (see Graphic Objects in The Essential JViews Framework, for information about IlvGraphic objects) or a composite graphic.

Object Types and Attribute Matching

Code Sample 3.1 shows a rule that matches the object of class (type) test_Vehicle, with the attribute model equal to sport, and sets the property icon of the graphic object associated with this object (defined elsewhere) to sport-car.gif.

test_Vehicle[model=sport] {icon : "sport-car.gif";}

Code Sample 3.1 Setting a Property Value for a Class

Attribute matching can be used to add dynamic behavior: a PropertyChange event occurring on the model can activate the CSS engine to set new property values on the graphic objects.

Code Sample 3.2 shows a rule that changes the color of any object of CSS class computer whenever the model attribute state is set to down.

.computer[state = down] {color : "gray"}

Code Sample 3.2 Color Change Behavior Dependent on an Attribute Value

Object Identifiers and CSS Classes

The Java model provides a getID method which represents the ID of a model object. This ID can be checked against the # selector of a rule.

If there is a single CSS class in the selector, it is resolved with the getTag method in the model.

Additional CSS classes can be set for an object in a property called CSSclass. The engine automatically merges the result of getTag with the value of the CSSclass property.

CSS classes are not necessarily related to data model semantics; they are devices to add to the pattern-matching capabilities in the style sheet. An object belongs to only one class (its type) but can belong to several (or no) CSS classes. A check on a CSS class is for its presence or absence. Therefore a CSS class can be seen as an attribute without a value.

By default, an XML element name is defined as a CSS class. If, for example, a simple XML file contains the element names root and leaf, then Code Sample 3.3 shows how to change the color of leaf nodes to an RGB color specification.

node.leaf {
    fillColor1 : 255,198,202 ;
    foreground : 153,40,100  ;
}

Code Sample 3.3 Matching a CSS Class (Leaf)

The RGB color specification shown for the foreground (border) color is magenta.

Class Name

The class property is a reserved keyword indicating the class name of the generated graphic object. Obviously the class declaration is applied only when there is a creation request. If the model state is changed, the graphic objects are customized by applying only new declarations coming from new matching rules of the style sheet. The class declaration is then simply ignored.

To change the class, you must remove the model object and add it again.

The right side of a class declaration may be:

The class name, loaded with the system class loader. For example:

link {
  class      : ilog.views.sdm.graphic.IlvGeneralLink;
  foreground : red;
}

There are two supplied base classes: IlvGeneralLink for links (see Customizing General Links in the Style Sheet) and IlvGeneralNode for nodes (see Customizing General Nodes in the Style Sheet).

A factory (interface ilog.views.interactors.IlvRectangularObjectFactory). The factory requires an IlvRect object which should be present in the declarations. This rectangle will be passed as a parameter of the factory. For example:
node { class : ilog.views.interactor.IlvMakeFilledRectangleInteractor; IlvRect : 0,0,100,200; }

There is a factory for most of the available graphic components. See ilog.views.sdm.graphic.IlvGraphicFactories for more details.

A pathname to a file. The class name is forwarded to the Beans library (method java.beans.Beans.instantiate) so a serialized Bean is suitable. For example:
link { class : data.beans.gauge; foreground : red; }

When beanName is used as a serialized object name, the given beanName is converted to a resource pathname and a trailing .ser suffix is added. An attempt is made to load a serialized object from that resource.

In this example, Beans.instantiate would try to read a serialized object from the resource data/beans/gauge.ser.

Pseudo-classes and Pseudo-elements

Pseudo-classes are the minimal building blocks of a selector which match model objects according to an external context. The syntax is like a CSS class but with a colon instead of a dot. For example, node:selected matches a node only if the node is selected. The user agent can resolve this pseudo-class at run time according to the state of each node.

A pseudo-class has the same specificity as a CSS class.

Pseudo-elements are metaclasses, like pseudo-classes, but match document structure instead of the user agent state.

Model Indirection

The right side of a declaration resolves to a literal that is determined at run time by a Property Editor. However, if the literal is prefixed by @, the remainder of the string is interpreted as a model attribute name. The declaration takes the value from the model object, as shown in Code Sample 3.4.

node { label : "@caption" ; title : "CSS rocks" ;}

Code Sample 3.4 Setting a Property to an Attribute Value

The label property will be set to the value of the attribute called caption in the model. If the specified atribute does not exist for the object, it is searched for recursively in the model ascendancy. The title property will be set to the literal CSS rocks.

Such indirection is also used in the opposite direction, that is, to retrieve the name of the model attribute that controls a graphic property. This allows user interactions to modify the data model correctly. Two special names, @_ID and @_TAG, represent values returned by the model method calls getID and getTag respectively.

Resolving URLs

Sometimes declaration values are URLs relative to the style sheet location. A special construct, standard in CSS level2, allows you to create a URL from the base URL of the current style sheet. For example:

imageURL : url(images/icon.gif) ;

This declaration extends the path of the current style sheet URL with images/icon.gif. This construct is very useful for creating a style sheet with images located relative to it, because the URL remains valid even if the style sheet is cascaded or imported elsewhere.

PREVIOUS NEXT