<?xml version="1.0" encoding="UTF-8"?> <SDM> <MyNode > <property name="x">100</property> <property name="y">100</property> <property name="label">Composite Graphic</property> <property name="alarm">Balloon</property> </MyNode> </SDM>
MyNode
.SDM { Composite:true; }
MyNode
as composite graphics, as follows:node.MyNode { class:'ilog.views.sdm.graphic.IlvSDMCompositeNode'; children[0]:@+Rectangle; } Subobject#Rectangle { class:'ilog.views.graphic.IlvRectangle'; width:40; height:40; fillOn:true; background:blue; }
children
array.
In this example, the first child is created as an IlvRectangle object. It is defined with the ID Rectangle
in
a separate rule.MyNode
node
would be displayed by the SDM engine as shown in the following figure.MyNode
object,
add another child element to the MyNode
rule
as shown in the following code example. node.MyNode { class:'ilog.views.sdm.graphic.IlvSDMCompositeNode'; layout:@+AttachmentLayout; children[0]:@+Rectangle; children[1]:@+Label; constraints[1]:@=attachmentLabel; } ... Subobject#AttachmentLayout { class:'ilog.views.graphic.composite.layout.IlvAttachmentLayout'; } Subobject#Label { class:'ilog.views.graphic.IlvText'; label:@label; } Subobject#attachmentLabel { class:'ilog.views.graphic.composite.layout.IlvAttachmentConstraint'; hotSpot:TopCenter; anchor:BottomCenter; }
children
array.
In this example, the second child is created as an IlvText object. It is defined with the ID Label
in
a separate rule.constraints
array must correspond
to the index of the children
array. hotSpot
,
which is the point on the subsequent child object by which it is attachedanchor
,
which is the point on the first child to which the subsequent child
is attachedMyNode
node
would be displayed by the SDM engine as shown in figure A composite node with only the first child element.@=
is used in the MyNode
rule.
Child graphics cannot be shared and so they are created with the CSS
construct @+
.Rect1
, Rect2
,
and Rect3
, as shown in the following code
example. These are the simple graphic objects which make up the nested
composite graphic.Subobject#Rect1 { class:'ilog.views.graphic.IlvRectangle'; width:5; height:5; background:red; fillOn:true; } Subobject#Rect2 { class:'ilog.views.graphic.IlvRectangle'; width:5; height:5; background:yellow; fillOn:true; } Subobject#Rect3 { class:'ilog.views.graphic.IlvRectangle'; width:5; height:5; background:green; fillOn:true; }
MyNode
rule
as shown in the following code example.node.MyNode { ... children[2]:@+Rectangles; ... constraints[2]:@=attachmentRectangles; } ... Subobject#Rectangles { class:'ilog.views.sdm.graphic.IlvSDMCompositeNode'; layout:@+StackerLayout; children[0]:@+Rect1; children[1]:@+Rect2; children[2]:@+Rect3; } Subobject#attachmentRectangles { class : "ilog.views.graphic.composite.layout.IlvAttachmentConstraint" ; hotSpot:BottomLeft; anchor:TopRight; } Subobject#StackerLayout { class:'ilog.views.graphic.composite.layout.IlvStackerLayout'; }
children
array.
It is composite graphic, that is, an IlvSDMCompositeNode. object and it is defined with the ID Rectangles
in
a separate rule.Subobject#Rectangles
rule,
you need to specify which layout to use for the three children. In
this case, the Stacker Layout is appropriate because a Stacker Layout
is used to align graphics, either horizontally or vertically. The
graphics to be aligned horizontally in this example are the children
of the composite node. MyNode
rule
to specify how the third child is attached to the first. In this example,
the bottom left of the third child (IlvSDMCompositeNode
object)
is anchored to the upper right of the first child (IlvRectangle
object).MyNode
node
would be displayed by the SDM engine as shown in the following figure.alarm
attribute.Ellipse
,
and BalloonLabel
, as shown in the following
code example. These are the simple graphic objects which make up the
nested composite graphic.Subobject#Ellipse { class:'ilog.views.graphic.IlvEllipse'; background:yellow; fillOn:true; } Subobject#BalloonLabel { class:'ilog.views.graphic.IlvText'; label:@alarm; }
MyNode
rule
as shown in the following code example.node.MyNode { ... children[3]:@+Balloon; ... constraints[3]:@=attachmentBalloon; } ... Subobject#Balloon { class:'ilog.views.sdm.graphic.IlvSDMCompositeNode'; layout:@+CenteredLayout; children[0]:@+Ellipse; children[1]:@+BalloonLabel; } Subobject#CenteredLayout { class:'ilog.views.graphic.composite.layout.IlvCenteredLayout'; insets:5,5,5,5; } Subobject#attachmentBalloon { class:'ilog.views.graphic.composite.layout.IlvAttachmentConstraint'; hotSpot:BottomCenter; anchor:TopLeft; }
children
array.
It is a composite graphic, that is, an IlvSDMCompositeNode. object and it is defined with the ID Balloon
in
a separate rule.Subobject#Balloon
rule,
you need to specify which layout to use for the two children. In this
case, the Centered Layout is appropriate because a Centered Layout
is used to center one graphic on another. A Centered Layout displays
an outer graphic (the child at index 0) around an inner graphic (the
child at index 1). The four insets
specify
the pixel distances from each edge of the bounding box of the outer
graphic. Note that the two child objects maintain their relative position
when the composite graphic is resized. MyNode
rule
to specify how the fourth child is attached to the first. In this
example, the bottom center of the fourth child (IlvSDMCompositeNode
object)
is anchored to the upper left of the first child (IlvRectangle
object).MyNode
node
would be displayed by the SDM engine as shown in figure The example composite graphic,
as required.