skip to main content
TGO > Programmers documentation > Graphic components > Equipment component > Configuring the equipment component
 
Configuring the equipment component
Describes how to display an equipment using rendering information. This information defines how to display equipment data.
*Configuring an equipment component through CSS
*Describes display customization using CSS.
*Configuring an equipment component through the API
*Describes how to use the API to configure the equipment view and the equipment adapter of an equipment component.
*Customizing the rendering of equipment nodes and links
*Provides links to further information on rendering equipment nodes and links.
*Loading a project file
*Describes how to load a project file that combines rendering style sheets and a data source.
Configuring an equipment component through CSS
You can configure an equipment either through a CSS configuration file or through the API, the easiest and preferred way being the CSS configuration. You also have the possibility to load a project file which combines the CSS configuration and the equipment data. You can customize the behavior and properties of the equipment component, for example by redefining the toolbar, specifying a zoom policy, or choosing a specific background image. You can also customize the behavior and properties of the equipment objects.
You can customize the following features in a CSS file:
*Equipment view
*Toolbar visibility
*Toolbar buttons
*Overview window
*View interactor
*Zoom policy
*Link layout
*Type of background map and its URL
*Position converter
*Equipment adapter
*Expansion
*Filtering
*Origin
*Node factory
*Link factory
*Accepted classes
*Excluded classes
How to load a CSS file in an equipment component
The equipment configuration can be split across several CSS files. The method setStyleSheets accepts several CSS filenames.
There are three ways to apply a CSS configuration to an equipment component, depending on whether you have one or several configuration files:
*If you have a single configuration file, and you do not want to inherit the settings from the default configuration file, pass the CSS configuration filename to the constructor of IlpEquipment, as follows:
 
equipmentComponent = new IlpEquipment(myConfigurationFile);
If no CSS file is specified, the equipment component uses the default configuration, that is, ilog.cpl.equipment.defaultConfiguration.css from the jviews-tgo-all.jar file.
*If you have one or several configuration files to be applied, you can specify a project file that lists the style sheets, the configuration files, and the XML data file to be loaded in the component (see Loading a project file). The following example shows a project file with two configuration files.
 
<?xml version="1.0"?>
<tgo xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation = "ilog/cpl/schema/project.xsd"
style="configurationFile1.css,configurationFile2.css">
  <datasource javaClass="ilog.tgo.datasource.IltDefaultDataSource"
fileName="equipment.xml"/>
</tgo>
If the settings in two CSS files disagree, the effect depends on the order of the filenames in the list: the last file mentioned takes precedence over the first file.
*If you have several configuration files to be applied together, use the setStyleSheets method, as follows:
 
equipmentComponent = new IlpEquipment();
equipmentComponent.setStyleSheets(
  new String[] { myConfigurationFile1, myConfigurationFile2 });
or, if you want to inherit and extend the settings from the default configuration file, use setStyleSheets as follows:
 
equipmentComponent = new IlpEquipment();
equipmentComponent.setStyleSheets(
  new String[] {
    IlpEquipment.DefaultConfigurationFileName,
    myExtraConfigurationFile
  });
If the settings in two CSS files disagree, the effect depends on the order of the filenames in the list: the last file mentioned takes precedence over the first file.
How to configure an equipment component in a CSS file
The following code represents an example of configuring an equipment component in CSS. It is based on the CSS files located in <installdir> /samples/equipment/styling where <installdir> is the directory where you have installed JViews TGO.
The configuration in CSS is organized as a set of rules that define properties.
 
Equipment {
  toolbar: true;
  overview: true;
  interactor: true;
  zooming: true;
  graphLayout: true;
  backgrounds: true;
  positioning: true;
}
 
ToolBar {
  enabled: true;
  button[0]: @+SelectButton;
  button[1]: @+ZoomResetButton;
}
 
Subobject#SelectButton {
  actionType: "Select";
  usingObjectInteractor: true;
  opaqueMove: true;
}
 
Subobject#ZoomResetButton {
  actionType: "ZoomReset";
}
 
Overview {
  enabled: true;
}
 
Interactor {
  name: "Select";
}
 
Zooming {
  type: "Mixed";
  zoomThreshold: 2.0;
}
 
GraphLayout {
  class: "ilog.views.graphlayout.grid.IlvGridLayout";
}
 
Backgrounds {
  background[0]: "data/images/europe.jpg";
}
 
Positioning {
  positionClass: "ilog.cpl.graphic.IlpPosition";
  converterClass: "ilog.cpl.network.IlpDefaultPositionConverter";
}
The Equipment rule
This rule specifies Boolean flags that indicate whether each customizable property is present. For example, customization of the property GraphLayout is not taken into account unless graphlayout: true; is declared in the Equipment rule.
This feature provides powerful cascading possibilities of CSS files. Thus, you can define GraphLayout customizations in a default CSS file and then turn them on or off in another CSS file.
The following properties are supported in the Equipment rule. You will find detailed documentation for each of these properties in the Rogue Wave® JViews TGO Java API Reference Documentation, package ilog.cpl.equipment.renderer.
CSS properties of the equipment view
Property
Rule Type
adapter
Adapter
toolbar
ToolBar
view
View
overview
Overview
interactor
Interactor
zooming
Zooming
graphLayout
GraphLayout
labelLayout
LabelLayout
backgrounds
Backgrounds
positioning
Positioning
The ToolBar rule
This rule controls the toolbar.
The property enabled is a Boolean property, with default value true. It controls whether the toolbar is visible or not.
The property external is a Boolean property, with default value false. It specifies whether the placement and visibility of the toolbar are managed by user code instead of internally by the equipment component.
Buttons can be added through the syntax button[i]: @+ButtonId; followed by the customization setting of the button with the given ButtonId.
A button has a mandatory property, actionType. This property specifies the action triggered by the button or a separator that is added to the toolbar. The value can be:
*a short name, such as Select, used for predefined actions, or
*the name of a subclass of AbstractButton with a constructor that takes an instance of IlpViewsView as argument, or
*the Separator short name to indicate that a separator should be placed in the specified position.
How to add a toolbar separator for the equipment component
You can add toolbar separators in specified positions of the equipment component toolbar. When configuring the equipment component toolbar, you can specify the position where a separator should be placed by using the predefined button action called Separator. This button action supports an optional property, dimension, which allows you to specify the dimensions of the separator in the toolbar.
The following example shows how to achieve this result:
 
ToolBar {
  enabled: true;
  button[0]: @+SelectButton;
  button[1]: @+Separator;
  button[2]: @+PanButton;
}
Subobject#Separator {
  actionType: "Separator";
  dimension: "20,10";
}
The predefined values for the actionType property are the following:
Predefined values of the actionType property 
actionType Values
Bean Class
Description
ZoomIn
Allows you to zoom in the view
ZoomOut
Allows you to zoom out of the view
ZoomBack
Allows you to go back to the previous zoom level
ZoomReset
Allows you to reset the zoom level to the original level
ZoomView
Allows you to specify a rectangular area on which to zoom
FitToContents
Allows you to fit the contents of the view to the size of the view
ScrollToContents
Allows you to recenter the view
Pan
Allows you to pan the view
Select
Allows you to select and move objects
MakeLink
Allows you to create links
MakeLinearGroup
Allows you to create linear groups
MakePolyGroup
Allows you to create polygonal groups
MakeRectGroup
Allows you to create rectangular groups
EditGroup
Allows you to edit the shape of groups
EditLabel
Allows you to edit labels
EditObject
Allows you to edit equipment objects
LabelLayout
Allows you to trigger the label layout
A button can have a property permanent. This is a Boolean property, with default value true. For interactor buttons, this property denotes whether the interactor remains attached after it has performed its action.
A button can have a property name. This property specifies the name by which other elements in the file refer to the button. The default name is the short name used as actionType.
A button can have additional properties, corresponding to Bean properties of the Java™ class. For example, the Select button has the properties multipleSelectionMode, moveAllowed, dragAllowed, editingAllowed, moveThreshold, opaqueMove, showingMovingObject, opaqueDragSelection, opaqueResize, opaquePolyPointsEdition, multipleSelectionModifier, selectionModifier, which are documented in the class ilog.cpl.equipment.action.toolbar. IlpEquipmentSelectButton.
An interactor button can have key or gesture actions attached to it. These actions are triggered by specific keystrokes or gestures while the interactor is active. These actions are added through the syntax action[i]: @+ActionId; followed by a customization setting for the action.
An action customization has the mandatory property class which specifies the Java class name of the javax.swing.Action object. Bean properties of this class are also customizable. The properties key and gesture can be set to specify when the action is to be executed. These two properties are not used in combination. For example, if you specify:
 
key: "control A";
gesture: "BUTTON1_CLICKED";
the action will be executed either when the key sequence ‘control-A’ is typed, or when the mouse BUTTON1 is clicked. To define the property "gesture", specify one of the predefined user gestures defined in class IlpGesture. To define the property "key", specify a string that will be converted to a keystroke by the type converter ( IlpTypeConverter).
The following predefined actions are available:
*ilog.cpl.graph.action. IlpSelectAllObjectsAction
*ilog.cpl.graph.action. IlpRemoveSelectedObjectsAction
An interactor can have a pop-up menu factory associated with it. You can specify this factory using the Bean property popupMenuFactory. Its value should be an indirect reference (through @+ or @# ) to a property class or to other Bean properties. For example,
 
Subobject#SelectButton {
    actionType: "Select";
    popupMenuFactory: @+popupMenuFactory;
  }
 
Subobject#popupMenuFactory {
    class: 'CustomPopupMenuFactory';
  }
In this example, the value of the property popupMenuFactory is a bean that is defined by the class CustomPopupMenuFactory. This class should implement the interface IlpPopupMenuFactory.
For more information on configuring the toolbar in an equipment view, refer to the class IlpToolBarRenderer.
How to add a predefined toolbar button to the equipment component
JViews TGO provides a list of predefined toolbar buttons usable in the equipment component (see Predefined values of the actionType property ).
The following example shows how to add a predefined button that enables the select interactor. When this interactor is enabled, you can customize actions, pop-up menus and interactor properties as illustrated here:
 
ToolBar {
  enabled: true;
  button[0]: @+SelectButton;
}
 
Subobject#SelectButton {
  actionType: "Select";
  usingObjectInteractor: true;
  opaqueMove: true;
  action[0]: @+action0;
  popupMenuFactory: @+popupMenuFactory;
}
 
Subobject#popupMenuFactory {
  class: 'CustomPopupMenuFactory';
}
 
Subobject#action0 {
  key: "control A";
  class: 'ilog.cpl.graph.action.IlpSelectAllObjectsAction';
}
How to add a custom toolbar button to the equipment component
To add your own toolbar button, you need to create a new action class that inherits from IlpEquipmentInteractorAction and contains a constructor that takes an IlpViewsView as parameter.
 
public class CustomButtonAction extends IlpEquipmentInteractorAction {
 
  public CustomButtonAction(IlpViewsView view) {
     super(view);
     // Do any needed initialization
     // Define your own view interactor that will be active when the button is
selected
     // in the toolbar
     IlpViewsViewInteractor interactor = new IlpViewsViewInteractor();
     // Register the interactor in this action
     setIlpInteractor(interactor);
  }
}
Then, you need to register this new button in your component configuration, as follows:
 
ToolBar {
  enabled: true;
  button[0]: @+MyButton;
}
 
Subobject#MyButton {
  actionType: 'CustomButtonAction';
  toolTipText: "Custom";
  icon: @+customIcon;
}
Subobject#customIcon {
  class: 'javax.swing.ImageIcon';
  image: '@|image("custom.png")';
}
The custom action will be encapsulated in an IlpEquipmentInteractorButton, and you will be able to customize the properties of this button as with the predefined buttons. For example, you can customize the following:
*name
*usingObjectInteractor
*popupMenuFactory
*actions associated with gestures and keystrokes
The View rule
This rule controls the view.
You can customize the following properties of the view:
View properties
Property Name
Type
Default value
Description
horizontalScrollBarPolicy
int
IlvJScrollManagerView.HORIZONTAL_SCROLLBAR_AS_NEEDED
Defines the policy for the visibility of the horizontal scrollbar
verticalScrollBarPolicy
int
IlvJScrollManagerView.VERTICAL_SCROLLBAR_AS_NEEDED
Defines the policy for the visibility of the vertical scrollbar
keepingAspectRatio
boolean
false
Defines whether the view keeps the aspect ratio when zooming
minZoomXFactor
double
0
Specifies the minimum zoom factor allowed on the X (horizontal) axis of the view
maxZoomXFactor
double
Double.MAX_VALUE
Specifies the maximum zoom factor allowed on the X (horizontal) axis of the view
minZoomYFactor
double
0
Specifies the minimum zoom factor allowed on the Y (vertical) axis of the view
maxZoomYFactor
double
Double.MAX_VALUE
Specifies the maximum zoom factor allowed on the Y (vertical) axis of the view
wheelZoomingEnabled
boolean
true
Defines whether the view zooms in response to moving the mouse wheel while pressing the Control key
wheelScrollingEnabled
boolean
true
Defines whether the view scrolls in response to moving the mouse wheel
The following CSS sample shows how to customize the view:
 
View {
  horizontalScrollBarPolicy: AsNeeded;
  verticalScrollBarPolicy: Never;
  keepingAspectRatio: true;
}
For more information on configuring an equipment view, refer to the class IlpViewRenderer.
The Overview rule
The Overview rule controls the overview window.
The property overviewVisible controls the visibility of the overview window. The default value is false.
The following CSS sample shows how to customize the overview:
 
Overview {
  overviewVisible: true;
}
For more information on configuring the overview window in an equipment view, refer to the class IlpOverviewRenderer.
The Interactor rule
The Interactor rule controls the interactor associated with the view.
You can customize the following properties of the interactor:
Interactor properties
Property Name
Type
Default value
Description
name
String
none
Specifies the name of a toolbar button that activates an interactor. This button is activated at startup. Its interactor becomes the initial view interactor, as well as the default view interactor when another interactor stops its interaction. This property is only considered when the view has a toolbar configured and enabled.
viewInteractor
IlpViewsViewInteractor
none
Specifies the interactor instance that becomes the initial view interactor, and the default view interactor when another interactor stops its interaction.
How to configure an equipment interactor in a CSS file
Prior to configuring the equipment view interactor, you need to configure the equipment component so that the interactor configuration is enabled:
 
Equipment {
  interactor: true;
}
After that, you can customize the interactor property in the Interactor rule as illustrated by the next code extract. Refer to The CSS specification in the Styling documentation for details about the CSS syntax.
How to set the default view interactor from the toolbar of the equipment component
You can customize the default view interactor to be one of the interactors present in the toolbar configured for the equipment component. In this case, the toolbar button is identified when the equipment component is configured, and it is activated at startup. This interactor becomes the initial view interactor, and the default view interactor when another interactor stops its interaction. This configuration is achieved through the property name, whose value must be the name of one of the configured toolbar buttons.
The following CSS extract configures the equipment view to use the Select toolbar button as the default view interactor:
 
Interactor {
  name: "Select";
}
How to set the default view interactor when the toolbar is disabled in the equipment view
When the toolbar is disabled, you can no longer specify the default view interactor by using a toolbar button name, as in the example above. However, you can specify the view interactor directly in CSS, as follows:
 
Interactor {
  viewInteractor: @+viewInt;
}
 
Subobject#viewInt {
  class: 'ilog.cpl.graphic.views.IlpViewsViewInteractor';
}
The behavior of the view interactor is determined by the actions that are associated with user gestures and keystrokes. This behavior can also be customized through CSS. You can also configure a pop-up menu to be displayed in the equipment view. For more information about interactor customization, refer to Interacting with the equipment view and Interacting with the equipment objects.
When the interactor renderer is enabled, you can also customize interactors for objects displayed in the equipment component. The property in the object selector will only be considered if the interactor renderer is enabled.
For more information on configuring the default view interactor in an equipment view, refer to class IlpInteractorRenderer.
The Zooming rule
Th Zooming rule controls the zoom policy.
The mandatory property type specifies the type of zoom. The possible values are Logical, Physical, or Mixed. Each zoom policy may have additional properties that you can also set using CSS:
*Logical zoom policy (see IltLogicalZoomPolicy)
Logical zoom property
Property name
Type
Default
Description
additionalZoom
double
1
Specifies an additional zoom factor that is implicitly multiplied with the view's transformer. This property is useful when printing with unusual transformers.
*Physical zoom policy (see IltPhysicalZoomPolicy)
Physical zoom properties
Property name
Type
Default
Description
decorationNames
String[]
null
Specifies a list of decoration names that are customized at the zoom policy level. See IltGraphicElementName for a list of decoration names that can be used.
visibilityThresholds
double[]
null
Specifies a list of thresholds, one for each decoration name customized with property decorationNames. These thresholds indicate the zoom level below which the decorations become invisible in the view. It allows you to hide decorations as the user zooms out in the view.
*Mixed zoom policy (see IltMixedZoomPolicy)
Mixed zoom properties
Property name
Type
Default
Description
zoomThreshold
double
1
Specifies the zoom threshold when the physical zoom or the logical zoom should be used
subnetworkZoomFactor
double
1
Specifies an additional zoom threshold that is applied to expanded subnetworks
decorationNames
String[]
null
Specifies a list of decoration names that are customized at the zoom policy level. See IltGraphicElementName for a list of decoration names that can be used.
visibilityThresholds
double[]
null
Specifies a list of thresholds, one for each decoration name customized with property decorationNames. These thresholds indicate the zoom level below which the decorations become invisible in the view. It allows you to hide decorations as the user zooms out in the view.
How to customize the zoom policy in an equipment component
The following CSS sample shows how to customize the zoom policy in an equipment view:
 
Zooming {
  type: "Mixed";
  zoomThreshold: 1.0;
  subNetworkZoomFactor: 1.0;
}
For more information on configuring the zoom behavior in an equipment view, refer to class IlpZoomingRenderer.
How to configure the visibility of decorations for a specific equipment component
JViews TGO provides three predefined zoom policies that you can use directly in the equipment component (see Zooming for more information). When using the physical or the mixed zoom policy, decorations may become invisible as the user zooms out in the view. By default, this configuration is global in the application and can be customized using visibility thresholds. However, you may need to specify the visibility threshold for a specific view. This feature is supported by properties decorationNames and visibilityThresholds. Property decorationNames specifies each decoration that is configured for the view. For a list of the decoration names that can be customized, see IltGraphicElementName. Property visibilityThresholds specifies the visibility threshold below which the decoration becomes invisible for each decoration name. The following example shows a mixed configuration.
 
Zooming {
  type: "Mixed";
  decorationNames[0]: Name;
  decorationNames[1]: AlarmBalloon;
  decorationNames[2]: AlarmCount;
  decorationNames[3]: Plinth;
  visibilityThresholds[0]: 0.5;
  visibilityThresholds[1]: 0.8;
  visibilityThresholds[2]: 0.5;
  visibilityThresholds[3]: 0.5;
}
The GraphLayout rule
This rule allows you to control the automatic node layout in the view and to configure nonautomatic node layouts. Nonautomatic node layouts can only be executed through the API (see Layout for more details).
How to control the automatic node layout in the equipment view
Automatic node layout is configured through the property class. This property specifies the graph layout class, a subclass of IlvGraphLayout. Additional Bean properties can be specified, depending on the class.
The following CSS sample shows how to customize the graph layout:
 
GraphLayout {
    class:
     'ilog.views.graphlayout.uniformlengthedges.IlvUniformLengthEdgesLayout';
    respectNodeSizes: true;
    preferredLinksLength: 200;
    forceFitToLayoutRegion: true;
    layoutRegion: "50, 50, 700, 450";
}
The graph layout is always a subclass of IlvGraphLayout which supports the " preserveFixedNodes " property. This property allows you to switch the support of fixed nodes on or off. You can set a node as fixed in the business object customization.
NOTE If a graph layout is set and supports fixed nodes, a link layout is required when links are connected to the fixed nodes.
The properties of each layout algorithm are fully explained in Layout algorithms in Using graph layout algorithms in the documentation for JViews Diagrammer.
The properties of the IlvGraphLayout subclasses conform to the following JavaBeans™ convention: if a class has a pair of methods called setMyProp (with a single parameter) and getMyProp (without parameters), then you can set the property myProp in the style sheet.
NOTE >> If the value of the property is an enumeration of integer values defined by static member variables of the class, then you can use the name of the variable alone, or the variable name prefixed by the class name alone, or the variable name prefixed by the fully qualified class name. For example, the following declarations are all valid:
globalLinkStyle: "ORTHOGONAL_LINKS";
globalLinkStyle: "IlvHierarchicalLayout.ORTHOGONAL_LINKS";
globalLinkStyle: "ilog.views.graphlayout.hierarchical.IlvHierarchicalLayout.ORTHOGONAL_LINKS";
How to configure multiple node layouts in an equipment view
The Graph Layout rule allows you to configure multiple node layouts, and to define the node layout to be used automatically in the view. Multiple node layout configuration is achieved through the properties layouts and autoLayoutIndex, as illustrated below:
 
GraphLayout {
  layouts[0]: @+treeLayout;
  layouts[1]: @+hierarchicalLayout;
  layouts[2]: @+springEmbedderLayout;
  autoLayoutIndex: 1;
}
 
Subobject#treeLayout {
  class: 'ilog.views.graphlayout.tree.IlvTreeLayout';
  flowDirection: Bottom;
}
 
Subobject#hierarchicalLayout {
  class: 'ilog.views.graphlayout.hierarchical.IlvHierarchicalLayout';
  flowDirection: Bottom;
}
 
Subobject#springEmbedderLayout {
  class: 'ilog.views.graphlayout.springembedder.IlvSpringEmbedderLayout';
  respectNodeSizes: true;
  preferredLinksLength: 200;
  forceFitToLayoutRegion: true;
  layoutRegion: "50, 50, 700, 450";
}
In this use case, three node layouts are configured for the view: IlvTreeLayout, IlvHierarchicalLayout and IlvSpringEmbedderLayout. The hierarchical layout is configured to be performed automatically when the contents of the view changes. This configuration is achieved by specifying the value of property autoLayoutIndex as the index of the hierarchical layout defined through the layouts property. The other node layouts can be performed on demand using the API (see IlpGraphView.performAttachedLayout ).
How to configure nonautomatic node layouts in the equipment component
If you are not interested in automatic node layout, you can still configure multiple node layouts in CSS. To have only nonautomatic node layouts, set property autoLayoutIndex to -1, as illustrated below:
 
GraphLayout {
  layouts[0]: @+treeLayout;
  layouts[1]: @+hierarchicalLayout;
  layouts[2]: @+springEmbedderLayout;
  autoLayoutIndex: -1;
}
 
Subobject#treeLayout {
  class: 'ilog.views.graphlayout.tree.IlvTreeLayout';
  flowDirection: Bottom;
}
 
Subobject#hierarchicalLayout {
  class: 'ilog.views.graphlayout.hierarchical.IlvHierarchicalLayout';
  flowDirection: Bottom;
}
 
Subobject#springEmbedderLayout {
  class: 'ilog.views.graphlayout.springembedder.IlvSpringEmbedderLayout';
  respectNodeSizes: true;
  preferredLinksLength: 200;
  forceFitToLayoutRegion: true;
  layoutRegion: "50, 50, 700, 450";
}
How to set node or link parameters on graph layout objects in the equipment component
You can set parameters for a graph layout algorithm that applies to a particular node or link, in the style sheet. Such parameters are defined by a method of the form:
 
setMyParam(Object node, value);
or
 
setMyParam(Object link, value);
Node parameters are set in the style sheet as follows:
 
object."ilog.tgo.model.IltObject":graphLayoutRenderer {
  myParam: "value";
}
The name of the property is the name of the method, without the prefix set. The pseudoclass graphLayoutRenderer indicates that the declarations apply to the node layouts that are configured in the graph layout rule.
For example, the graph layout defines a setFixed method that lets you specify whether a node or link is fixed. Fixed nodes or links are not moved when the layout is applied. The signature of the method is:
 
setFixed(Object nodeOrLink, boolean fixed);
In the style sheet, you can set this parameter as follows:
 
object."ilog.tgo.model.IltObject":graphLayoutRenderer {
  fixed: true;
}
The value of the property can be any basic type (integer, String, float), or it can be the name of a public constant defined by the graph layout class, for example, WEST, which is defined in the class IlvHierarchicalLayout.
When the graph layout rule contains multiple node layouts, you can still specify node and link layout parameters by using pseudoclasses that identify the graph layout to which the declarations apply.
 
GraphLayout {
  layouts[0]: @+treeLayout;
  layouts[1]: @+hierarchical;
  autoLayoutIndex: 0;
}
 
Subobject#treeLayout {
  class: 'ilog.views.graphlayout.tree.IlvTreeLayout';
  flowDirection: Bottom;
}
 
Subobject#hierarchicalLayout {
  class: 'ilog.views.graphlayout.hierarchical.IlvHierarchicalLayout';
  flowDirection: Top;
}
 
#NE1:graphLayoutRenderer:tree {
  root: true;
}
 
#NE1:graphLayoutRenderer:hierarchical {
  specNodeLevelIndex: 0;
}
 
#NE2:graphLayoutRenderer:hierarchical {
  specNodeLevelIndex: 1;
}
In the example above, NE1 is configured as the root object for the Tree Layout algorithm. This is achieved by declaring the property root in a selector that contains the pseudoclasses graphLayoutRenderer (indicates that this is a graph layout renderer per-object property) and tree (indicates that this is a property specific to the IlvTreeLayout algorithm).
At the same time, NE1 is configured to be placed at level 0 in case of a hierarchical layout. This is achieved using pseudoclasses graphLayoutRenderer and hierarchical (indicates that this is a graph layout per-object property specific to the IlvHierarchicalLayout algorithm).
Each layout algorithm supports a set of per-object parameters. For more information on the parameters supported by each layout algorithm, refer to package ilog.cpl.graph.css.renderer.graphlayout.
In addition to the properties that are specific to the layout algorithms, the graph layout renderer also supports the following properties:
*layoutIgnored : If this property is set to true, the object is completely ignored by the graph model (using an IlvLayoutGraphicFilter).
*markedForIncremental : If the layout algorithm is an IlvHierarchicalLayout, you can use the property markedForIncremental. When this property is set to true for an object, the method IlvHierarchicalLayout.markForIncremental(java.lang.Object) is called for this object. This means that the position of the object is recomputed during the next incremental layout. This property has an effect only if the incrementalMode property of the layout itself is set to true. For example:
 
GraphLayout {
  layouts[0]: @+hierarchicalLayout;
}
 
Subobject#hierarchicalLayout {
  class: 'ilog.views.graphlayout.hierarchical.IlvHierarchicalLayout';
  incrementalMode: true;
}
 
#NE1:graphLayoutRenderer:hierarchical {
  markedForIncremental : "true";
}
Important Starting with JViews TGO 7.5, if you are not using any node or link parameters, you can disable this mechanism by specifying IlpGraphLayoutRenderer.setUsePerObjectParameters(false). This will remove the overhead of testing the parameters and speed up the rendering process significantly.
How to disable the per-object layout parameters for node configuration in the equipment view
You can also disable the per-object layout parameters configuration through CSS as follows:
 
GraphLayout {
  layouts[0]: @+hierarchicalLayout;
  usePerObjectParameters: false;
}
For more information on configuring the node layout in an equipment view, refer to the class IlpGraphLayoutRenderer.
The LinkLayout rule
The LinkLayout rule controls the automatic link layout in the view.
The mandatory property class specifies the link layout class, a subclass of IlvGraphLayout. Additional Bean properties can be specified, depending on the class.
How to control the automatic link layout in the equipment view
The following CSS sample shows how to customize the link layout:
 
LinkLayout {
    class: "ilog.tgo.graphic.graphlayout.IltShortLinkLayout";
    globalLinkStyle: MIXED_STYLE;
}
The link layout is always a subclass of IlvGraphLayout which supports the " preserveFixedLinks " property. This property allows you to switch the support of fixed links on or off.
Like the graph layout renderer, the link layout renderer supports setting per-object link layout parameters through CSS. See How to set node or link parameters on graph layout objects in the equipment component.
How to specify per-object parameters for link layouts in the equipment view
Link parameters are set in the style sheet as follows:
 
object."ilog.tgo.model.IltAbstractLink":linkLayoutRenderer {
  linkStyle: ORTHOGONAL_STYLE;
}
 
#Link1:linkLayoutRenderer {
  linkStyle: DIRECT_STYLE;
}
Important Starting with JViews TGO 7.5, if you are not using any node or link parameters, you can disable this mechanism by specifying IlpLinkLayoutRenderer.setUsePerObjectParameters(false). This will remove the overhead of testing the parameters and speed up the rendering process significantly.
How to disable per-object layout parameters for link configuration in the equipment view
You can also disable the per-object layout parameters configuration through CSS as follows:
 
LinkLayout {
  class: 'ilog.views.graphlayout.link.IlvLinkLayout';
  usePerObjectParameters: false;
}
For more information on configuring the link layout in an equipment view, refer to class IlpLinkLayoutRenderer.
The LabelLayout rule
The LabelLayout rule controls the automatic label layout in the view.
The mandatory property class specifies the label layout class, a subclass of IlvLabelLayout. Additional Bean properties can be specified, depending on the class. The usual setting is ilog.tgo.graphic.graphlayout.labellayout. IltAnnealingLabelLayout.
The following CSS sample shows how to customize the label layout:
 
LabelLayout {
    class: 'ilog.tgo.graphic.graphlayout.labellayout.IltAnnealingLabelLayout';
    obstacleOffset: 10;
    labelOffset: 15;
}
Some properties can be set within IltAnnealingLabelLayout and some within IlvAnnealingLabelLayout. Refer to the Rogue Wave JViews TGO Java™ API Reference Documentation for more details.
For more information on configuring the label layout in an equipment view, refer to class IlpLabelLayoutRenderer.
The Backgrounds rule
The Backgrounds rule allows you to configure two kinds of background that affect the equipment component representation:
*Equipment backgrounds
*Manager view background
Equipment backgrounds
You can use background files such as maps or images. You can specify an equipment background through:
1. A URL
The background file is specified directly by its URL:
 
Backgrounds {
  background[i]: "URL";
}
For example:
 
Backgrounds {
  background[0]: "backgrounds/sf-bayarea.png";
}
2. A CSS bean
The background URL and its properties are specified through a CSS bean:
 
Backgrounds {
  background[i]: @+background0;
}
 
Subobject#background0 {
  class: "ilog.cpl.graph.background.css.IlpBackgroundCSSConfiguration";
 
  PROPERTY : PROPERTY_VALUE;
  ...
}
The bean IlpBackgroundCSSConfiguration encapsulates all the properties supported by the predefined background types. You should use it if want to use one of the predefined types.
For example:
 
Backgrounds {
  background[0]: @+background0;
}
 
Subobject#background0 {
  class: "ilog.cpl.graph.background.css.IlpBackgroundCSSConfiguration";
 
  //////////////////////
  //Background properties
  //////////////////////
  url : "backgrounds/sf-bayarea.png";
  loadOnDemand : "true";
  threaded : "false";
}
If you intend to use a custom background type that has additional properties, you can either subclass the default IlpBackgroundCSSConfiguration and use it with the additional bean properties or provide a bean that contains all the required properties to configure the IlpBackground implementation. All bean properties are automatically communicated and stored in the IlpBackground implementation through its IlpBackground.setProperty interface method.
For details on the properties available and supported for each IlpBackground implementation, see Background support.
You can mix and match options 1 and 2 by specifying some backgrounds as beans and some as straight URL strings.
In the case of the Image Tile background type ( IlpImageTileBackground), only the url property can be configured through CSS. For the other properties, use the XML configuration. See Background support.
Manager view background
This refers to the representation of the view as a background for your equipment backgrounds (the area that the equipment backgrounds do not cover).
You can configure the manager view background as follows:
 
Backgrounds {
  PROPERTY : PROPERTY_VALUE;
}
For example:
 
Backgrounds {
  backgroundColor : "white";
}
The following table lists the properties that allow you to customize the manager view background:
Properties of the view background
Property name
Type
Default
Sample
Description
backgroundColor
Color
null
backgroundColor:"black";
Specifies the color to be used to fill the background of the view.
backgroundPattern
String
null
backgroundPattern:"pattern.png";
Specifies the location of the pattern image to be used to fill the background of the view.
For more information on configuring the background in an equipment view, refer to class IlpBackgroundsRenderer.
The Positioning rule
The Positioning rule controls the type and converter of the user-defined IlpPosition.
The property positionClass denotes the Java class name of the class or interface that implements IlpPosition.
The property converterClass denotes a Java class name or CSS bean that implements the IlpPositionConverter interface and determines the conversion between business data coordinates and (x,y) coordinates in the view.
The following CSS sample shows how to customize the positioning:
 
Positioning {
  positionClass: 'my.package.MyPosition';
  converterClass: 'my.package.MyPositionConverter';
}
For more information on configuring the positioning in an equipment view, refer to class IlpPositioningRenderer.
The Adapter rule
The Adapter rule controls the configuration of the equipment adapter. The equipment adapter is responsible for converting the business objects in the data source to representation objects (equipment nodes) in the equipment component. It provides the following features:
*Filtering: applies a filter so that business objects currently in the data source are not mapped to representation objects in the equipment component.
*Origins: defines which objects become root nodes in the equipment.
*Link factory: defines how a link representation object will be created from its business object counterpart.
*Node factory: defines how a representation object that is not a link will be created from its business object counterpart.
*Expansion strategy: defines how the objects will be loaded in the equipment component, that is, either at initialization time or as the user interacts with the equipment nodes.
*Accepted classes: defines the list of business classes that are accepted by the equipment adapter. Only the business objects that match one of these business classes will be mapped to representation objects by the equipment adapter.
*Excluded classes: defines the list of business classes that are excluded by the equipment adapter. The business objects of these business classes will not be mapped to representation objects by the equipment adapter. By default, the IltAlarm business class is part of the list of excluded classes.
These equipment adapter features can be customized through CSS using the following properties:
CSS Properties of the equipment adapter 
Property name
Property type
filter
ilog.cpl.util.IlpFilter
origins
list of object identifiers
nodeFactory
ilog.cpl.equipment.IlpEquipmentNodeFactory
linkFactory
ilog.cpl.equipment.IlpEquipmentLinkFactory
expansionStrategyFactory
ilog.cpl.util.IlpExpansionStrategyFactory
acceptedClasses
list of IlpClass
excludedClasses
list of IlpClass
How to configure an equipment adapter in a CSS file
Prior to configuring the adapter, you need to configure the equipment component so that the adapter configuration is enabled:
 
Equipment {
  adapter: true;
}
After that, you can customize each adapter property in the Adapter rule as illustrated by the following code extract. Refer The CSS specification in the Styling documentation for details about the CSS syntax.
 
Adapter {
  filter: @+Filter;
}
 
Subobject#Filter {
  class: 'CustomFilter';
  rejectObject[0]: "NE1";
  rejectObject[1]: "Link5";
}
How to programmatically configure an equipment adapter using CSS
You can programmatically modify the CSS configuration of the default equipment adapter ( IlpEquipmentAdapter) by using mutable style sheets through the IlpMutableStyleSheet API.
Important The mutable style sheet is set to the adapter as a regular style sheet and is cascaded in the order in which it has been declared.
To use mutable style sheets:
1. Get the mutable style sheet.
You access the mutable style sheet through the getMutableStyleSheet() method in the equipment adapter API:
 
IlpMutableStyleSheet mutable = adapter.getMutableStyleSheet();
This method automatically registers the mutable style sheet into the adapter. You can manually instantiate an object of the class IlpMutableStyleSheet and register it yourself through the setStyleSheet() API:
 
IlpMutableStyleSheet mutable = new IlpMutableStyleSheet(adapter);
try {
  adapter.setStyleSheets(new String[] { mutable.toString() });
} catch (Exception x) {
  x.printStackTrace();
}
2. Set the CSS declarations.
Once you have the mutable style sheet, you can set the declarations you want:
 
mutable.setDeclaration("#myObjectId", "expansion", "NO_EXPANSION");
This creates the following CSS declaration into the mutable style sheet:
 
#myObjectId {
  expansion: NO_EXPANSION;
}
3. Register the mutable style sheet.
The mutable style sheet should be set to the adapter as a regular style sheet using the setStyleSheet() method:
 
try {
  adapter.setStyleSheets(new String[] { mutable.toString() });
} catch (Exception x) {
  x.printStackTrace();
}
4. Set and update the CSS declarations.
The mutable style sheet can be modified even after being registered to the adapter:
 
// Update the expansion type for 'myObjectId'
mutable.setDeclaration("#myObjectId", "expansion", "IN_PLACE");
// Add a new declaration
mutable.setDeclaration("#myOtherId", "expansion", "IN_PLACE");
NOTE Like any style sheet, the mutable style sheet is lost when the setStyleSheet() API is invoked and a new set of style sheets is applied to the adapter.
How to customize the mutable style sheet
Reapplying a CSS configuration may be a heavy task, as the adapter may be forced to review filters, origins, recreate representation objects, and so on. It is important to use the mutable style sheet with care and to customize it properly to reapply the CSS wisely. To do so, there are two methods available in the IlpMutableStyleSheet API: setUpdateMask() and setAdjusting().
1. setUpdateMask()
This method controls what should be recustomized once a declaration of the mutable style sheet has been updated. The CSS configuration of the adapter is divided into two parts: adapter customization and representation object customization.
The adapter customization handles the origins, filters, and so on:
 
Adapter {
  origins[0]: id0;
  origins[1]: id1;
  showOrigin: true;
  filter: @+myFilter;
}
The representation object customization handles the expansion type of a representation object:
 
#myObjectId {
  expansion: IN_PLACE;
}
The accepted values for setUpdateMask() are:
*IlpStylable.UPDATE_COMPONENT_MASK : Only the adapter part is recustomized.
*IlpStylable.UPDATE_OBJECTS_MASK : Only the representation object part is recustomized.
*IlpStylable.UPDATE_ALL_MASK : Bot the adapter and representation object parts are recustomized.
*IlpStylable.UPDATE_NONE_MASK : Nothing is recustomized.
For example, if you update the expansion type of a representation object through the mutable style sheet, it is recommended that you set the update mask to UPDATE_OBJECTS_MASK as there is no need to reapply the CSS configuration for the adapter part:
 
mutable.setUpdateMask(IlpStylable.UPDATE_OBJECTS_MASK);
mutable.setDeclaration("object", "expansion", "IN_PLACE");
2. setAdjusting()
This method is used when a series of declarations must be applied to the mutable style sheet. When the method is set to true, the mutable style sheet puts all the calls to setDeclaration() into a queue. When the method is set back to false, all the queued declarations are processed in a batch:
 
mutable.setAdjusting(true);
mutable.setDeclaration("#myObjectId", "expansion", "IN_PLACE");
mutable.setDeclaration("#myOtherId", "expansion", "IN_PLACE");
mutable.setAdjusting(false);
Configuring an equipment component through the API
For details of the classes involved in the architecture of the equipment component, see Architecture of the equipment component.
The following example shows how to configure the equipment view through the API. For programming details on the individual services, see Equipment component services.
How to configure the equipment view with the API
 
// Instantiates equipment component
IlpEquipment equipment = new IlpEquipment();
// Sets Toolbar visible
equipment.setToolBarVisible(true);
// Set overview window visible
equipment.setOverviewVisible(true);
// Set default view interactor
IlpSelectInteractor select = new IlpSelectInteractor();
select.setEditingAllowed(true);
equipment.setViewInteractor(select);
// Set zoom policy to mixed
IltMixedZoomPolicy mixed = new IltMixedZoomPolicy();
mixed.setZoomThreshold(2.0);
equipment.setZoomPolicy(mixed);
// Sets Horizontal Scroll Bar invisible
equipment.setHorizontalScrollBarVisible(false);
How to configure the equipment adapter with the API
The following example shows how to configure the equipment adapter through the API. See Equipment component services for programming details on the individual services.
 
IlpEquipmentAdapter adapter = equipment.getAdapter();
 
// Filter
IlpFilter myFilter = new MyFilter();
// (it is the same as equipment.setFilter(myFilter);)
adapter.setFilter(myFilter);
 
// Origin
List myOrigins = new ArrayList();
myOrigins.add(objectID_1);
myOrigins.add(objectID_2);
:
:
myOrigins.add(objectID_n);
// in this case we want to display the origins
boolean showOrigin = true;
adapter.setOrigins(myOrigins, showOrigin);
 
// Expansion Strategy Factory
// Usually the expansion strategy factory relies
// on the adapter to access the data source and
// to load/release objects
IlpExpansionStrategyFactory myExpFactory = new
  MyExpansionStrategyFactory(adapter);
adapter.setExpansionStrategyFactory(myExpFactory);
 
// Position Attribute
// Here, imagine that MyObject implements IlpObject
// interface and defines "Placement" as the
// IlpAttribute that defines the object position
IlpClass myObjectClass = MyObject.getIlpClass();
IlpAttribute myPosAttrib = MyObject.Placement;
adapter.setPositionAttribute(myObjectClass, myPosAttrib);
 
// Node Factory
IlpEquipmentNodeFactory myNodeFactory = new MyNodeFactory();
adapter.setNodeFactory(myNodeFactory);
Customizing the rendering of equipment nodes and links
Equipment nodes and links can be customized through CSS according to their business class. For details, see Customizing network and equipment nodes and Customizing network and equipment links.
Loading a project file
A project is a combination of style sheets that supply rendering information and a data source that supplies the data to be represented in an equipment component. A project is saved as an XML file with extension .itpr.
Loading a project file is the recommended way to configure a graphic component in Java™ as it is the fastest.
How to load a project file into an equipment component
The following code sample shows how to load a project file into an equipment component, using the method setProject.
 
IlpEquipment equipment = new IlpEquipment();
equipment.setProject(new URL("file:project.itpr");
The project is represented by the IlpTGOProject class, included in the package ilog.cpl.project. When a new project is created, the style sheet and data source are both null.
How to create a new project for the equipment component
The following code sample shows how to create a new project file by setting the style sheets and data source, then saving the project.
 
IlpTGOProject project = new IlpTGOProject();
project.setStyleSheet(new URL("file:example.css");
IltDefaultDataSource dataSource = new IltDefaultDataSource();
dataSource.setFileName("data.xml");
project.setDataSource(dataSource);
project.write(new URL("file:example.itpr");

Copyright © 2018, Rogue Wave Software, Inc. All Rights Reserved.