C.4 Looking at the Source Code with a Toggling Graphic Node Style Example

In this example, we’ll build a new node style and take a look at what happens as the source code and bind commands are built in the background.

We’ll set the node style to display different graphic displays based on element state, such as:


Shows recycle symbol when state is OK.	Shows a yellow caution symbol when element is any state other than OK or Critical.	Shows a red/round attention symbol when state is Critical.

In order to set this up, we’ll create a “toggle” between graphics based on the element condition.

To do this, we will take advantage of a stack container, which allows you to overlay multiple objects directly on top of each other. Bind rules are then created for each graphic to indicate when it is visible or hidden based on specific element conditions.

If these bind rules are not set properly, two graphics can possibly show for a particular state. In some cases, this might be desirable. You can have an extra adornment for some states in addition to the main graphic toggle and a condition color change.

To build a node style that toggles between various graphics based on state:

In the Explorer pane, expand Administration > Graphics > Nodes.
Right-click Nodes, then select Create Node Style.

Although node style names can contain spaces, because of encoding of source code, note that names with no spaces are easier to read if you are planning to work directly in the source code.
Click the Layout tab to open the Layout view.

A simple default object displays. The Layout view is in Edit mode by default.
Right-click the drawing background, then select Clear Drawing to start building the node from scratch.

The default object is removed.
Right-click the Layout view background, then select Customize > Container > Add > Stack Layout Container. A stack layout container shows in the view:

A stack container “stacks” one or more objects in a container. Each object is directly on top of the other with the order determine by the order that objects are added (first object is on top). The background of the stack container has a bind rule, which tells it to update background color based on current element condition.

Click View Source to view the source code in the layout editor:

<?xml version="1.0" encoding="ISO-8859-1"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:bind="http://www.managedobjects.com/bind" bind:setup="1151445190011" MOS_PanX="448" contentScriptType="text/ecmascript" zoomAndPan="magnify" MOS_PanY="232" contentStyleType="text/css" dname="graphic=ToggleIndicator/graphicsFolder=Development/graphicsFolder=Nodes/graphics=Graphics/root=Administration" version="1.0" width="1000.0" dname_relid="1" preserveAspectRatio="xMidYMid meet" height="1000.0" MOS_World="1" MOS_Scale="1.0" overflow="visible">
  <defs/>

The next section of code is the opening tag for the container and default container attributes:

  <g transform="translate(-158.0,114.0)">
    <bind:layout minWrapHeight="30" wrap="true" pad="15" id="1225bc948ab" gap="10" name="grid" align="center" columns="1" minWrapWidth="30">
      <bind:value default="stack" property="condition" set="stack" default.edit="grid" attr="name" ignoregenerated="true" set.edit="grid" when="Unknown,Critical,Major,Minor,Info,OK,Unmanaged"/>
    </bind:layout>

Now, the top object is formed (square shape):

    <rect x="-11.5" y="-11.5" fill="rgb(128,255,128)" width="78" undofill="lightgray" rx="4" opacity="1" bind:container="true" height="124" ry="4" stroke="black" stroke-width="1.5">
      <bind:fill property="condition" default="" set="" when=""/>
    </rect>
    <rect gautolayout="1225bc948ab" stroke="#000000" stroke-linecap="butt" transform="matrix(1, 0, 0, 1, 5, 5)" width="45" fill="#c0c0c0" stroke-dasharray="none" filter="none" stroke-width="3" height="43" opacity="1" x="0" stroke-linejoin="miter" y="0"/>

And then, the bottom object (round shape):

    <circle transform="matrix(1, 0, 0, 1, 27.5, 79.5)" fill="#c0c0c0" gautolayout="1225bc948ab" filter="none" cx="0" stroke-dasharray="none" r="16.5" opacity="1" cy="0" stroke="#000000" stroke-width="3"/>
  </g>

And lastly, the closing tag for the outer container:

</svg>

Click Back to Preview to work with objects in the layout editor.
Right-click the container, then select Change Group to allow the objects inside the container to be modified.

To delete the default shapes inside the container, select each shape, then click Delete.

The source code updates as shown:

<?xml version="1.0" encoding="ISO-8859-1"?><svg xmlns:bind="http://www.managedobjects.com/bind" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" MOS_PanX="0" contentScriptType="text/ecmascript" zoomAndPan="magnify" MOS_PanY="0" contentStyleType="text/css" dname="graphic=ToggleIndicator/graphicsFolder=Development/graphicsFolder=Nodes/graphics=Graphics/root=Administration" version="1.0" preserveAspectRatio="xMidYMid meet" MOS_World="1" MOS_Scale="1.0" overflow="visible">

With only the container code remaining (the 2 objects are no longer there):

  <g transform="translate(461.0,334.0)">
    <bind:layout minWrapHeight="30" wrap="true" xmlns:bind="http://www.managedobjects.com/bind" pad="15" id="12260bc2b1c" gap="10" name="grid" align="center" columns="1" minWrapWidth="30">
      <bind:value default="stack" property="condition" set="stack" default.edit="grid" attr="name" ignoregenerated="true" set.edit="grid" when="Unknown,Critical,Major,Minor,Info,OK,Unmanaged"/>
    </bind:layout>
    <rect x="-10.0166" y="-13.21" fill="lightgray" width="141.033" xmlns:bind="http://www.managedobjects.com/bind" rx="4" opacity="1" bind:container="true" height="124.6642" ry="4" stroke="black" stroke-width="1.5"/>
  </g>
  <defs/>
</svg>

Select graphics from the clipart library and add them to the container.

Click the Graphics tab to open the graphics selector panel:
Locate the desired clipart image.

For this example, we chose the recycle, attention3 and attention2 images in the Symbols folder.

Click and drag each image from the graphics panel into the layout view background (do not try to drop directly on top of the container).

The graphics are automatically added to the container:

The source code updates as shown here. The code adds the three new graphics into the container just beneath it’s <rect></rect> tag:

  <g transform="translate(321.0,299.0)">
    <bind:layout minWrapHeight="30" wrap="true" xmlns:bind="http://www.managedobjects.com/bind" pad="15" id="122c25d2b41" gap="10" name="grid" align="center" columns="1" minWrapWidth="30">
      <bind:value default="stack" property="condition" set="stack" default.edit="grid" attr="name" set.edit="grid" when="Unknown,Critical,Major,Minor,Info,OK,Unmanaged"/>
    </bind:layout>
    <rect bind:container="true" stroke="black" width="141.033" fill="rgb(128,255,128)" stroke-width="1.5" height="315.3989" xmlns:bind="http://www.managedobjects.com/bind" undofill="lightgray" x="-10.0166" rx="4" opacity="1" y="-8.5239" ry="4">
      <bind:fill property="condition" default="" set="" when=""/>
    </rect>

The following section contains Object 1, recycle:

    <g transform="matrix(1, 0, 0, 1, 10.522090911865234, 0.692075252532959)" display="inline" instantiated="122c25d2b42" bind:marks="Clipart" gautolayout="122c25d2b41" xmlns:bind="http://www.managedobjects.com/bind" id="122c25d2b42_clipart" ghash="19c484af" bind:graphicsource="clipart">
      <image width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="Clipart__Symbols__recycle" xlink:type="simple" xlink:actuate="onLoad" height="100" preserveAspectRatio="xMidYMid meet" xlink:show="embed" overflow="visible"/>
    </g>

The following section contains Object 2, attention3:

    <g transform="matrix(1, 0, 0, 1, 5.220731258392334, 93.2699203491211)" display="inline" instantiated="122c25d2b44" bind:marks="Clipart" gautolayout="122c25d2b41" id="122c25d2b44_clipart" ghash="fe87ffe9" bind:graphicsource="clipart">
      <image width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="Clipart__Symbols__attention3" xlink:type="simple" xlink:actuate="onLoad" height="100" preserveAspectRatio="xMidYMid meet" xlink:show="embed" overflow="visible"/>
    </g>

The following section contains Object 3, attention2:

    <g transform="matrix(1, 0, 0, 1, 20.500015258789062, 212.49998474121094)" display="inline" instantiated="122c25d2b45" bind:marks="Clipart" gautolayout="122c25d2b41" id="122c25d2b45_clipart" ghash="7d8870b4" bind:graphicsource="clipart">
      <image width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="Clipart__Symbols__attention2" xlink:type="simple" xlink:actuate="onLoad" height="100" preserveAspectRatio="xMidYMid meet" xlink:show="embed" overflow="visible"/>
    </g>
  </g>

Set the condition binds for each graphic.

Select a graphic object inside the container.

The object is selected and Layout palette panels display:

For instance, we’ll select the recycle graphic first.
In the Palette panel (Element section), deselect any conditions when the recycle graphic is to be hidden.

In this case, we deselect all conditions except OK (green).

Repeat for all three graphics to set the desired conditions where the graphic is to be visible.

The source code updates as shown here. Under each graphic object, new bind rules are added for visibility. The first is hidden for all conditions except OK, the second is hidden when condition is OK or Critical, and the third is hidden for all conditions except Critical.

    <g transform="matrix(1, 0, 0, 1, 10.522090911865234, 0.692075252532959)" display="inline" instantiated="122c25d2b42" bind:marks="Clipart" gautolayout="122c25d2b41" xmlns:bind="http://www.managedobjects.com/bind" id="122c25d2b42_clipart" ghash="19c484af" bind:graphicsource="clipart">
      <image width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="Clipart__Symbols__recycle" xlink:type="simple" xlink:actuate="onLoad" height="100" preserveAspectRatio="xMidYMid meet" xlink:show="embed" overflow="visible"/>

The new bind rule for visibility:

    <bind:value default="inline" property="condition" MOS_bindtype="visibility" set="none" default.edit="inline" attr="display" set.edit="inline" when="Unknown,Critical,Major,Minor,Info,Unmanaged"/>
    </g>

    <g transform="matrix(1, 0, 0, 1, 5.220731258392334, 93.2699203491211)" display="inline" instantiated="122c25d2b44" bind:marks="Clipart" gautolayout="122c25d2b41" id="122c25d2b44_clipart" ghash="fe87ffe9" bind:graphicsource="clipart">
      <image width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="Clipart__Symbols__attention3" xlink:type="simple" xlink:actuate="onLoad" height="100" preserveAspectRatio="xMidYMid meet" xlink:show="embed" overflow="visible"/>

Another bind rule for visibility is added here:

   <bind:value default="inline" property="condition" MOS_bindtype="visibility" set="none" default.edit="inline" attr="display" set.edit="inline" when="Critical,OK"/>
    </g>

    <g transform="matrix(1, 0, 0, 1, 20.500015258789062, 212.49998474121094)" display="inline" instantiated="122c25d2b45" bind:marks="Clipart" gautolayout="122c25d2b41" id="122c25d2b45_clipart" ghash="7d8870b4" bind:graphicsource="clipart">
      <image width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="Clipart__Symbols__attention2" xlink:type="simple" xlink:actuate="onLoad" height="100" preserveAspectRatio="xMidYMid meet" xlink:show="embed" overflow="visible"/>

And, another is added here:

   <bind:value default="inline" property="condition" MOS_bindtype="visibility" set="none" default.edit="inline" attr="display" set.edit="inline" when="Unknown,Major,Minor,Info,OK,Unmanaged"/>
    </g>

Right-click the Layout view background, then select Save Group.

The container group is saved and the Layout view background switches to white.

To add element name label to the node display, right-click the Layout background, then select Customize > Add Caption.

In this step we’ll add a caption, which automatically updates with the element’s name.

A caption label is added:

The source code updates as shown here. This code adds a caption tag directly under the node container tag but before the closing </SVG> tag:

   <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:bind="http://www.managedobjects.com/bind" MOS_PanX="181" contentScriptType="text/ecmascript" zoomAndPan="magnify" MOS_PanY="136" contentStyleType="text/css" dname="graphic=ToggleIndicator/graphicsFolder=Nodes/graphics=Graphics/root=Administration" version="1.0" width="142.5330047607422" dname_relid="1" MOS_viewBox="300 279 162 336" preserveAspectRatio="xMidYMid meet" height="316.8988952636719" MOS_World="0" MOS_Scale="1.0" overflow="visible">
<g transform="matrix(1, 0, 0, 1, 10.522090911865234, 0.692075252532959)" display="inline" instantiated="122c25d2b42" bind:marks="Clipart" gautolayout="122c25d2b41" xmlns:bind="http://www.managedobjects.com/bind" id="122c25d2b42_clipart" ghash="19c484af" bind:graphicsource="clipart">
      <image width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="Clipart__Symbols__recycle" xlink:type="simple" xlink:actuate="onLoad" height="100" preserveAspectRatio="xMidYMid meet" xlink:show="embed" overflow="visible"/>
      <bind:value default="inline" property="condition" MOS_bindtype="visibility" set="none" default.edit="inline" attr="display" set.edit="inline" when="Unknown,Critical,Major,Minor,Info,Unmanaged"/>
    </g>
    <g transform="matrix(1, 0, 0, 1, 5.220731258392334, 93.2699203491211)" display="inline" instantiated="122c25d2b44" bind:marks="Clipart" gautolayout="122c25d2b41" id="122c25d2b44_clipart" ghash="fe87ffe9" bind:graphicsource="clipart">
      <image width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="Clipart__Symbols__attention3" xlink:type="simple" xlink:actuate="onLoad" height="100" preserveAspectRatio="xMidYMid meet" xlink:show="embed" overflow="visible"/>
      <bind:value default="inline" property="condition" MOS_bindtype="visibility" set="none" default.edit="inline" attr="display" set.edit="inline" when="Critical,OK"/>
    </g>
    <g transform="matrix(1, 0, 0, 1, 20.500015258789062, 212.49998474121094)" display="inline" instantiated="122c25d2b45" bind:marks="Clipart" gautolayout="122c25d2b41" id="122c25d2b45_clipart" ghash="7d8870b4" bind:graphicsource="clipart">
      <image width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="Clipart__Symbols__attention2" xlink:type="simple" xlink:actuate="onLoad" height="100" preserveAspectRatio="xMidYMid meet" xlink:show="embed" overflow="visible"/>
      <bind:value default="inline" property="condition" MOS_bindtype="visibility" set="none" default.edit="inline" attr="display" set.edit="inline" when="Unknown,Major,Minor,Info,OK,Unmanaged"/>
    </g>

The caption is added here above the container closing SVG tag:


 <g gautolayout="122c25d2b53" transform="translate(56.2292,252.638)">
      <rect x="-15.7293" y="53.862" fill="white" text-anchor="middle" width="81.7163" bind:container="true" height="18.289" stroke="gray"/>
      <bind:layout name="wrap" pad="0" id="122c25d2b52"/>
      <text x="25.0" font-size="11px" y="67.0" fill="black" text-anchor="middle" gautolayout="122c25d2b52" stroke="none" xml:space="preserve">ToggleIndicator<bind:value property="name"/></text>
    </g>
</svg>

Position the caption to display at the edge of the node box.

You can force the caption to overlay the bottom of the node box by wrapping both the caption and the node container in an outer container, and then update the vertical gap to a negative value.

Do one of the following:
- Click and drag on the Layout background to select both the container and the caption.
- Press Shift while clicking to select each object, one at a time, until both are selected.
Right-click over one of the selected objects, then select Customize > Container > Wrap in Container:
Right-click the new container, then select Customize > Container > Layout > Set Layout to open the Set Layout dialog box.
Select Flow from the drop-down list.

The extra space is removed from between the objects in the container.
Right-click the new container, then select Customize > Container > Layout > Adjust Flow Layout to open the Adjust Flow Layout dialog box.
Update the VGap to ‑5 to overlap the caption with the node container.
Click Apply to save and apply the setting, or click OK to save the setting and exit the dialog box.

Right-click the new container, then select Customize > Container > Wrapping > Hide Wrapping Rectangle to hide the outer container when the node style is in use.

The above selections result in the following configuration:

The source code updates as shown here. The code highlighted in yellow, show the new outer container that now groups the node container and caption (which is still below the node container):

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:bind="http://www.managedobjects.com/bind" MOS_PanX="181" contentScriptType="text/ecmascript" zoomAndPan="magnify" MOS_PanY="136" contentStyleType="text/css" dname="graphic=ToggleIndicator/graphicsFolder=Nodes/graphics=Graphics/root=Administration" version="1.0" width="142.5330047607422" dname_relid="1" MOS_viewBox="300 279 162 336" preserveAspectRatio="xMidYMid meet" height="316.8988952636719" MOS_World="0" MOS_Scale="1.0" overflow="visible">
  <defs/>

The new outer container starts here:

  <g>
    <bind:layout width="" wrap="true" pad="10" vgap="-5" id="122c25d2b53" hgap="0.0" name="flow" gap="10" columns="1" align=""/>
    <rect x="-1.0E-4" y="-15" fill="lightgray" width="162.533" rx="4" bind:container="true" height="350.289" ry="4" stroke="black" stroke-width="1.5"/>

    <g gautolayout="122c25d2b53" transform="translate(20.7665,4.2739)">
      <bind:layout minWrapHeight="30" wrap="true" pad="15" id="122c25d2b41" gap="10" name="grid" align="center" columns="1" minWrapWidth="30">
        <bind:value default="stack" property="condition" set="stack" default.edit="grid" attr="name" set.edit="grid" when="Unknown,Critical,Major,Minor,Info,OK,Unmanaged"/>
      </bind:layout>
      <rect bind:container="true" stroke="black" width="141.033" fill="rgb(128,255,128)" stroke-width="1.5" height="315.3989" undofill="lightgray" x="-10.0166" rx="4" opacity="1" y="-8.5239" ry="4">
        <bind:fill property="condition" default="" set="" when=""/>
      </rect>
      <g transform="matrix(1, 0, 0, 1, 10.522090911865234, 0.692075252532959)" display="inline" instantiated="122c25d2b42" bind:marks="Clipart" gautolayout="122c25d2b41" id="122c25d2b42_clipart" ghash="19c484af" bind:graphicsource="clipart">
        <image width="100" xlink:href="Clipart__Symbols__recycle" xlink:type="simple" xlink:actuate="onLoad" height="100" preserveAspectRatio="xMidYMid meet" xlink:show="embed" overflow="visible"/>
        <bind:value default="inline" property="condition" MOS_bindtype="visibility" set="none" default.edit="inline" attr="display" set.edit="inline" when="Unknown,Critical,Major,Minor,Info,Unmanaged"/>
      </g>
      <g transform="matrix(1, 0, 0, 1, 5.220731258392334, 93.2699203491211)" display="inline" instantiated="122c25d2b44" bind:marks="Clipart" gautolayout="122c25d2b41" id="122c25d2b44_clipart" ghash="fe87ffe9" bind:graphicsource="clipart">
        <image width="100" xlink:href="Clipart__Symbols__attention3" xlink:type="simple" xlink:actuate="onLoad" height="100" preserveAspectRatio="xMidYMid meet" xlink:show="embed" overflow="visible"/>
        <bind:value default="inline" property="condition" MOS_bindtype="visibility" set="none" default.edit="inline" attr="display" set.edit="inline" when="Critical,OK"/>
      </g>
      <g transform="matrix(1, 0, 0, 1, 20.500015258789062, 212.49998474121094)" display="inline" instantiated="122c25d2b45" bind:marks="Clipart" gautolayout="122c25d2b41" id="122c25d2b45_clipart" ghash="7d8870b4" bind:graphicsource="clipart">
        <image width="100" xlink:href="Clipart__Symbols__attention2" xlink:type="simple" xlink:actuate="onLoad" height="100" preserveAspectRatio="xMidYMid meet" xlink:show="embed" overflow="visible"/>
        <bind:value default="inline" property="condition" MOS_bindtype="visibility" set="none" default.edit="inline" attr="display" set.edit="inline" when="Unknown,Major,Minor,Info,OK,Unmanaged"/>
      </g>
    </g>

The following is the caption showing element name:

    <g gautolayout="122c25d2b53" transform="translate(56.2292,252.638)">
      <rect x="-15.7293" y="53.862" fill="white" text-anchor="middle" width="81.7163" bind:container="true" height="18.289" stroke="gray"/>
      <bind:layout name="wrap" pad="0" id="122c25d2b52"/>
      <text x="25.0" font-size="11px" y="67.0" fill="black" text-anchor="middle" gautolayout="122c25d2b52" stroke="none" xml:space="preserve">ToggleIndicator<bind:value property="name"/></text>
    </g>

The closing tag for the new outer container:

  </g>
</svg>

To test that the bind rules for condition will function on the node style as expected, do the following:
1. Apply the node style to a layout for a test Service Model.
  
  This can be done easily by dragging and dropping the node style onto the service model’s Layout view.
2. Change the state of the service model using a condition algorithm or another method to verify the node style functions as necessary.