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 tree
structure of objects, which is exploited by selector transitions
Object
type, ID, and CSS classes
Attribute
value that matches the selector attribute of the same name
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.
Instead of using the default graphic representation supplied by
JViews TGO, you can define
your own rendering object, an
IlvGraphic or a
JComponent
. In this case, the declarations change property values on the
graphic object that corresponds to the object matched in the model.
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.)
Note
The enclosing double quotes around
test.Vehicle
are used so that the dot is not interpreted as a CSS class
pattern; that is, an object of type
test
with CSS class
Vehicle
.
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
.