Nodes decorations

Article ID: 2223
Last updated: 29 May, 2018
Article ID: 2223
Last updated: 29 May, 2018
Revision: 3
Views: 701
Posted: 07 Jan, 2003
by Dean J.
Updated: 29 May, 2018
by Gargani A.

Question

How to set a common decoration and have other decorations reuse it?

Answer

Sometimes you define decorations that are very complex and you need to duplicate them because of a label or a color.

For example, assume that you intend to have a decoration for different values of a node status. Instead of writing multiple copies of a decoration you can use the inheritance to simplify your .css file.
The principle is to use the attribute matching test for "status" on the decoration instead of the node.

You take advantage of the way the CSS engine processes the properties. The CSS engine looks for the property in the current object and then, if the property does not exist on the object, it searches for in the model ascendancy recursively.

This CSS stylesheet:

node[status="error"] {
decorations[0] : "@#errorDecoration";
}
node[status="valid"] {
decorations[0] : "@#validDecoration";
}
node[status="acquiring"] {
decorations[0] : "@#unknownDecoration";
}
#errorDecoration {
class      : "ilog.views.sdm.graphic.IlvGraphicFactories$ShadowLabel";
IlvRect    : "0,0,20,20";
label      : "E";
foreground : "red" ;
background : "white" ;
}
#validDecoration {
class      : "ilog.views.sdm.graphic.IlvGraphicFactories$ShadowLabel";
IlvRect    : "0,0,20,20";
label      : "V";
foreground : "green" ;
background : "white" ;
}
#unknownDecoration {
class      : "ilog.views.sdm.graphic.IlvGraphicFactories$ShadowLabel";
IlvRect    : "0,0,20,20";
label      : "?";
foreground : "blue" ;
background : "white" ;
}

can be replaced by the shorter:

node{
decorations[0] : "@#statusDecoration";
}
#statusDecoration {
class      : "ilog.views.sdm.graphic.IlvGraphicFactories$ShadowLabel";
IlvRect    : "0,0,20,20";
label      : "?";
foreground : "blue" ;
background : "white" ;
}
#statusDecoration[status="error"]  {
label      : "E";
foreground : "red";
}
#statusDecoration[status="valid"]  {
label      : "V";
foreground : "green";
}

This principle can also be used to decorate links.

This article was:   Helpful | Not helpful
Report an issue
Article ID: 2223
Last updated: 29 May, 2018
Revision: 3
Views: 701
Posted: 07 Jan, 2003 by Dean J.
Updated: 29 May, 2018 by Gargani A.
Also listed in


Others in this category