Customizing User-Defined Network Nodes

Styling > Customizing User-Defined Business Objects > Customizing User-Defined Network Nodes

Customizing User-Defined Network Nodes

User-defined business objects are graphically represented in the network and equipment components by a shape and a label, like the following:

Figure 4.1 A User-Defined Network Node

Refer to <installdir>/samples/network/customClasses for an example of how to customize user-defined business objects in the network component.

Customizing the Node Shape

You can customize the shape of a node using the following properties:

Table 4.1 CSS Properties for Network Nodes

Property Name	Type	Default Value	Description
`shapeType`	`int`	`ROUND_RECTANGLE`	Sets the shape of an `ilog.views.sdm.graphic.IlvGeneralNode`. The values are those accepted by `IlvGeneralNode#setShapeType`.
`shapeWidth`	`float`	`40`	Sets the width of the shape of an `ilog.views.sdm.graphic.IlvGeneralNode`.
`shapeHeight`	`float`	`40`	Sets the height of the shape of an `ilog.views.sdm.graphic.IlvGeneralNode`. Use only when the value of the property `keepingAspectRatio` is `false`.
`shapeAspectRatio`	`float`	`1`	Sets the aspect ratio of the shape of an `ilog.views.sdm.graphic.IlvGeneralNode`.
`keepingAspectRatio`	`boolean`	`true`	Specifies whether the width/height ratio is preserved by the value of the properties `shapeWidth` and `shapeHeight`.
`foreground`	`Color`	`Color.darkGray`	Denotes the node foreground color.
`background`	`Color`	`Color(192,192,192,128)`	Denotes the node background color.
`fillStyle`	`int`	`SOLID_COLOR`	Sets the style used to fill the shape of an `ilog.views.sdm.graphic.IlvGeneralNode`. The possible values are those defined in `ilog.views.sdm.graphic.IlvGeneralNode#setFillStyle`: `NO_FILL` `SOLID_COLOR` `LINEAR_GRADIENT` `RADIAL_GRADIENT` `TEXTURE`
`fillTexture`	`Image`	`null`	Sets the texture used to fill the shape of the general node or the general link.
`fillAngle`	`float`	`0`	Sets the angle (in degrees) of the gradient used to fill the shape of an `ilog.views.sdm.graphic.IlvGeneralNode`.
`fillStart`	`float`	`0f`	Sets the position where the gradient of a `fillColor2` starts; that is, where the color is the first color set by `background`.
`fillEnd`	`float`	`1f`	Sets the position where the gradient of an `ilog.views.sdm.graphic.IlvGeneralNode` ends; that is, where the color is the first color set by `fillColor2`.
`horizontalAutoResizeMargin`	`float`	`2f`	Sets the margin that is left on both sides of the shape when it is horizontally resized automatically.
`horizontalAutoResizeMode`	`int`	`NO_AUTO_RESIZE`	Sets the horizontal autoresize mode of an `IlvGeneralNode`. The possible values are those accepted by `ilog.views.sdm.graphic.IlvGeneralNode#setHorizontalAutoResizeMode`: `NO_AUTO_RESIZE` `EXPAND_ONLY` `SHRINK_ONLY` `EXPAND_OR_SHRINK`
`verticalAutoResizeMargin`	`float`	`2f`	Sets the margin that is left on both sides of the shape when it is autoresized vertically.
`verticalAutoResizeMode`	`int`	`NO_AUTO_RESIZE`	Sets the vertical autoresize mode of an `ilog.views.sdm.graphic.IlvGeneralNode`. The possible values are: `NO_AUTO_RESIZE` `EXPAND_ONLY` `SHRINK_ONLY` `EXPAND_OR_SHRINK`
`icon`	`Image`	`null`	Determines the image used for the icon.
`iconPosition`	`IlvDirection`	`Bottom`	Sets the position of the icon with respect to the label of an `IlvGeneralNode`. This property is only effective if the label position is equal to `IlvDirection.Center`, that is, the label is inside the shape. If the label is outside the shape, the icon is always at the center of the shape. The value is one of the static fields of the `{@link.ilog.views.IlvDirection}` interface.
`iconVisible`	`boolean`	`true`	Denotes whether the icon is visible or not in the object.
`borderColor`	`Color`	`120,120,120`	Sets the color of the shape border.
`borderEndCap`	`BasicStroke`	`BasicStroke.CAP_BUTT`	Sets the end cap style of the shape border. The end cap style controls what the ends of the segments of the border look like when the border is dashed. The possible values are: CAP_BUTT CAP_ROUND CAP_SQUARE
`borderLineJoin`	`BasicStroke`	`BasicStroke.JOIN_MITER`	Sets the line join style of the shape border. The line join property controls what the angles connecting the segments of the border look like. The possible values are: JOIN_BEVEL JOIN_MITER JOIN_ROUND
`borderMiterLimit`	`float`	`10f`	Sets the miter limit of the shape border. The miter limit controls how far the angles of the border are allowed to extend when the angle is very sharp.
`borderWidth`	`float`	`2`	Sets the width of the border of the object.
`borderLineStyle`	`float[]`	`null` (Solid)	Sets the line style of the shape border. The line style allows you to have a dashed border. For example, setting the line style to 4,8 creates a dashed border with segments of 4 pixels in length separated by spaces of 8 pixels. The line style can contain more than two values to create longer line style patterns.
`borderLineStylePhase`	`float`	`0f`	Sets the line style phase of the shape border. This property can be used to adjust the positions of the dashes on the border. This is useful if the dashes look unattractive at the corners of the shape.

How to Use Network Node Properties in a User-Defined Business Class

object."test.MyNetworkElement" {
    shapeType: ROUND_RECTANGLE;
    shapeWidth: 30;
    shapeHeight: 30;
    label: @name;
    labelSpacing: 3;
}

The following sections provide more information on the use of these properties:

Shape Type

The basic shape of the user-defined node is controlled by the shapeType property. The possible values are:

Table 4.2 Shape Type Properties

CSS Property and Values	Rendering
`shapeType = RECTANGLE`
`shapeType = ROUND_RECTANGLE`
`shapeType = ELLIPSE`
`shapeType = DIAMOND`
`shapeType = TRIANGLE_UP`
`shapeType = TRIANGLE_DOWN`
`shapeType = TRIANGLE_LEFT`
`shapeType = TRIANGLE_RIGHT`
`shapeType = MARKER`

Shape Size

The horizontal and vertical sizes of the shape are controlled through the properties shapeWidth, shapeHeight, and shapeAspectRatio.

How to Control the Width and Height of a User-Defined Business Object

There are two policies for setting the width and height of the shape.

You can set the properties shapeWidth and shapeHeight. In this case, the aspect ratio of the shape is not preserved.

For example:

#Node {

  shapeWidth: 100;

  shapeHeight: 50;

You can set the property shapeWidth to the desired width and the property shapeAspectRatio to the desired width:height ratio. For example:

#Node {

  shapeWidth: 100;

  shapeAspectRatio: 2;

If you change the shape width in another rule, the aspect ratio will be preserved.

The property keepingAspectRatio is used to preserve the width to height ratio. This property sets a flag that specifies whether the width to height ratio is preserved by the properties shapeWidth and shapeHeight.

If the flag is set to true, the dimensions of the shape are controlled by calling either shapeWidth or shapeHeight and by setting shapeAspectRatio.

If the flag is set to false, the dimensions of the shape are controlled by setting shapeWidth and shapeHeight.

Note

Setting shapeHeight explicitly sets the keep aspect ratio flag to false automatically. Setting shapeAspectRatio sets this flag to true automatically.

If the flag is true, the properties shapeWidth and shapeHeight will preserve the width-to-height ratio of the shape of the node. Otherwise, you can set the width and the height independently.

Shape Paint Styles

The following properties control the way the interior of the shape is painted: fillStyle, foreground, background, fillStart, fillEnd, fillAngle, and fillTexture.

Fill Style

The fillStyle property specifies the type of paint object used to fill the shape. Here are the possible values:

Table 4.3 Fill Style Properties

CSS Property and Values	Rendering
`fillStyle = SOLID_COLOR`
`fillStyle = LINEAR_GRADIENT`
`fillStyle = RADIAL_GRADIENT`
`fillStyle = TEXTURE`

Fill Color

The foreground and background properties specify the colors used:

In SOLID_COLOR mode, the shape is filled with foreground.
In LINEAR_GRADIENT and RADIAL_GRADIENT modes, the gradient starts with foreground and ends with background:
Table 4.4 Fill Color Properties

CSS Properties and Values
Rendering

fillStyle = LINEAR_GRADIENT
foreground = blue
background = red

fillStyle = RADIAL_GRADIENT
foreground = blue
background = red

CSS Properties and Values	Rendering
`fillStyle = LINEAR_GRADIENT` `foreground = blue` `background = red`
`fillStyle = RADIAL_GRADIENT` `foreground = blue` `background = red`

Fill Start, Fill End, and Fill Angle

In LINEAR_GRADIENT and RADIAL_GRADIENT modes, the fillStart, fillEnd, and fillAngle properties define the geometry of the gradient. A gradient is defined by two points, P1 and P2. The following figures show the results of the properties.

Figure 4.2 shows the geometry of a linear gradient.

Figure 4.2 Linear Gradient

Note that the linear gradient is always in reflect mode, so the colors go back and forth from foreground to background outside the (P1, P2) segment.

Figure 4.3 shows the geometry of a radial gradient.

Figure 4.3 Radial Gradient

Fill Texture

Finally, the fillTexture property specifies an image that will be used as a texture in TEXTURE mode.

Shape Border

The border of the shape is controlled by the properties borderColor, borderWidth, borderLineStyle, borderEndCap, borderLineJoin, borderMiterLimit, and borderLineStylePhase.

The borderColor property sets the color used to paint the border.

The other properties are used to create an instance of java.awt.BasicStroke:

borderWidth specifies the width of the border.
borderLineStyle is used to create dashed or dotted borders. It is an array of floating-point values that specify the lengths of the alternate painted and transparent segments.
borderEndCap specifies the shape of the ends of the dash segments.
borderLineJoin and borderMiterLimit control the appearance of the border at the angles between two segments.

For example, the following CSS file creates a dashed blue border with rounded segment ends, visible segments that have a length of 4, and transparent segments that have a length of 2.

How to Control the Border of a User-Defined Business Object

#Node {
  borderColor: blue;
  borderLineStyle: "4, 2";
  borderEndCap: CAP_ROUND;
}

See the Java documentation of the java.awt.BasicStroke class for more details on these properties.

Customizing the Node Icon

To display an icon inside the shape, set the property icon to the URL of the icon to be displayed. Note that the URL should be absolute. The URL Access Service is not implicitly used here. If you want to use it, you must do so explicitly.

If you do not want an icon, set the property iconVisible to false.

The icon is always displayed inside the shape (or centered on top of the marker if the shape type is MARKER).

If the label is inside the shape (labelPosition = Center), the position of the icon relative to the label is controlled by the property iconPosition, which can be any direction defined by the interface IlvDirection. For example, iconPosition = Left places the icon to the left of the label.

Customizing the Node Label

The label decoration is customized using the same properties as for the predefined business objects.

How to Use Label Properties in a User-Defined Business Class

object."test.MyNetworkElement" {
  labelBackground: white;
  labelForeground: blue;
  labelPosition: Right;
  label: @name;
  labelVisible: true;
}

Refer to Customizing the Label of Business Objects for a complete list of the available properties.

Automatic Resizing

The user-defined node representation automatically computes the size of its shape according to the size of the icon.

Autoresizing can be controlled independently in the vertical and horizontal directions through the properties horizontalAutoResizeMode and verticalAutoResizeMode. These properties accept the following values:

Table 4.5 CSS Properties for Autoresizing of Nodes

Values	Behavior
`NO_AUTO_RESIZE`	Autoresize is disabled.
`EXPAND_ONLY`	The node is allowed to grow in the specified direction, but not to shrink.
`SHRINK_ONLY`	The node is allowed to shrink in the specified direction, but not to grow.
`EXPAND_OR_SHRINK`	The node is allowed to expand or to shrink as needed.

You can control how much space is left between the border of the shape and its content (icon) using the properties horizontalAutoResizeMargin and verticalAutoResizeMargin.

PREVIOUS NEXT