This use case illustrates how you can
extend the predefined business object representation by adding
new decorations. It applies to the network and equipment
components.
The network and equipment node
representation of predefined business objects cannot be replaced,
but you can extend it by adding new decorations.
The following properties are available to
add a new decoration:
It illustrates how to extend a predefined
business object representation with a new decoration. In this use
case, the following customization is notable:
object."SampleNetworkElement" {
children[0]: '';
constraints[0]: '';
children[1]: '';
constraints[1]: '';
}
object."SampleNetworkElement"[comments] {
children[0]: @+commentIcon;
constraints[0]: @+commentIconConstraint;
}
The selectors in this extract indicate that a new decoration will
be added to the object representation when the attribute
comments
is set in the object. When the attribute is set, an icon is
attached to the bottom left side of the base as illustrated by
the following CSS extract.
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// This selector creates an icon decoration.
//
// Here we show the use of built-in properties:
// * ILPATTRIBUTE
// * ILPDECORATIONNAME
//
// 1. To associate a decoration to an IlpAttribute
// specify the 'ILPATTRIBUTE' property as illustrated
// below.
//
// This property is used to associate a graphic decoration
// to an attribute in the business model.
//
// The ILPATTRIBUTE property type is String. Its value
// should be an attribute name.
//
// Once this association is done, tooltips and interactors
// can be defined in CSS for the business attribute
// and will be displayed/triggered when the event
// occurs in the decoration graphic.
//
// 2. To associate a decoration to a name specify
// the 'ILPDECORATIONNAME' property as illustrated
// below.
//
// The ILPDECORATIONNAME property type is a String.
// Its value should be a ilog.tgo.graphic.IltGraphicElementName
// value.
//
// Once this association is done, it will be possible
// to customize the layer policy and zoom policy to
// take into account your new decorations.
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Subobject#commentIcon {
class: 'ilog.views.graphic.IlvIcon';
image: '@|image("commentIcon.png")';
ILPATTRIBUTE: "comments";
ILPDECORATIONNAME: "Comments";
}
Subobject#commentIconConstraint {
class: 'ilog.views.graphic.composite.layout.IlvAttachmentConstraint';
hotSpot: BottomLeft;
anchor: BottomLeft;
}
New decorations can be added to all
predefined business objects, either nodes or links. The
attachment locations vary depending on whether the object is a
node or a link.
In the case of nodes, new decorations can be added to the
following attachment locations, relative to the object base (see
IlvAttachmentLocation):
TopLeft
,
TopCenter
,
TopRight
LeftCenter
Center
RightCenter
BottomLeft
,
BottomCenter
,
BottomRight
HotSpot
In the case of links, new decorations can be added to the
following attachment locations, relative to the link shape (see
IlvLinkAttachmentLocation) :
NearFromLink
NearToLink
FromLink
ToLink
MiddleLink
For details about creating and customizing
composite graphics, see the section on developing composite nodes
in Developing with the JViews Diagrammer SDK.
You can use the following features when
new decorations are added to the predefined business object
representation:
Define
a tooltip to be displayed when the mouse is over the new
decoration
Define
interactors to be executed when events occur on the new
decoration
Specify
in which layer the decoration will be placed
Specify
a visibility threshold that will make the decoration disappear
depending on the zoom level of the view
To customize the new decoration and make
use of these features, you need to declare the following two
properties with the new decoration:
ILPATTRIBUTE
: This property associates the decoration with a business
attribute in the object. It is used to customize the
decoration tooltip and interactor.
ILPDECORATIONNAME
: This property associates the decoration with a decoration
name, which is the identifier used by the layer policy and
zoom policy configurations in the network and equipment
components.
The following sections provide examples of
how to use these properties to achieve the desired
configurations.