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 used 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 Rogue Wave® 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

The following code example 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";}

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.

The following code example 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"}

For more information on attribute matching see also Attribute matching.

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 the following code example shows how to change the color of leaf nodes to an RGB color specification.

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

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 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 IlvGraphicFactories for more details.
A path name 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 path name 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 the following code example.

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

The label property will be set to the value of the attribute called caption in the model. If the specified attribute 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 getTag respectively.

In a palette symbol CSS, the indirection cannot directly access the properties of the SDM object that is rendered by the palette symbol. In this case, the indirection can only access the symbol parameters. If you want a property of a graphic element of the symbol to be mapped to a property of the corresponding SDM object, you have to define a parameter and use it as an intermediate property. The ID of this parameter can then be accessed in the symbol CSS as an object property. In the outer CSS, you can use this parameter ID as a bean property.

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.

Current section

Applying CSS to Java objects