You can customize the following features in a CSS file:

How to Load a CSS File in a Network Component

There are three ways to apply a CSS configuration to a network component, depending on whether you have one or several configuration files:

How to Configure a Network Component in a CSS File

The following code represents an example of configuring a network in CSS. It is based on the CSS files located in

where <installdir> is the directory where you have installed JViews TGO.

// ***************************************************
// * COMPONENT CUSTOMIZATION                         *
// *                                                 *
// * This section is enclosed by                     *
// *    Network {                                    *
// *    }                                            *
// * and specifies which feature will be customized: *
// * - toolbar      (Network Component's toolbar)    *
// * - view         (Scrollbar configuration)        *
// * - overview     (Presence of an overview)        *
// * - interactor   (Default view interactor)        *
// * - zooming      (Zoom policy set in the view)    *
// * - graphlayout  (Layout for the nodes)           *
// * - linklayout   (Layout for the links)           *
// * - labellayout  (Layout for the labels)          *
// * - positioning  (Position policy for objects)    *
// * - backgrounds  (Backgrounds set in the view)    *
// * - adapter      (Network adapter customization)  *
// ***************************************************
Network {
    toolbar: true;
    interactor: true;
    zooming: true;
    adapter: true;
}
 

The Network 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 Network 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 Network rule. You will find detailed documentation for each of these properties in the ILOG JViews TGO Java API Reference Documentation, package ilog.cpl.network.renderer.

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 network 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:

How to Add a Toolbar Separator for the Network Component

You can add toolbar separators in specified positions of the network component toolbar. When configuring the network 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:

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.network.action.toolbar.IlpNetworkSelectButton.

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. They 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 of the javax.swing.Action object. Bean properties of this class are also customizable. Furthermore, the properties key and gesture can be set to specify when the action is to be executed. Please note that these two properties are not used in combination. For example, if you specify:

key: "control A";
gesture: "BUTTON1_CLICKED";

Please note that the following predefined actions are available:

Subobject#SelectButton {
    actionType: "Select";
    popupMenuFactory: @+popupMenuFactory;
  }
 
Subobject#popupMenuFactory {
    class: 'CustomPopupMenuFactory';
  }

How to Add a Predefined Toolbar Button to the Network Component

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 Network Component

public class CustomButtonAction extends IlpNetworkInteractorAction {
 
  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 View Rule

This rule controls the view.

You can customize the following properties of the view:

The following CSS sample shows how to customize the view:

View {
  horizontalScrollBarPolicy: AsNeeded;
  verticalScrollBarPolicy: Never;
  keepingAspectRatio: true;
}

The Overview Rule

This rule controls the overview window.

The property enabled controls the visibility of the overview window. The default value is false.

The following CSS sample shows how to customize the overview:

Overview {
  enabled: true;
}

The Interactor Rule

This rule controls the interactor associated with the view.

You can customize the following properties of the interactor:

How to Configure a Network Interactor in a CSS File

Prior to configuring the network view interactor, you need to configure the network component so that the interactor configuration is enabled:

Network {
  interactor: true;
}

How to Set the Default View Interactor from the Toolbar of the Network Component

You can customize the default view interactor to be one of the interactors present in the toolbar configured for the network component. In this case, the toolbar button is identified when the network 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 network 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 Network 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 Zooming Rule

This 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:

How to Customize the Zoom Policy in a Network Component

The following CSS sample shows how to customize the zoom policy in a network view:

Zooming {
  type: "Mixed";
  zoomThreshold: 1.0;
  subNetworkZoomFactor: 1.0;
}

How to Configure the Visibility of Decorations for a Specific Network Component

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

How to Control the Automatic Node Layout in the Network View

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 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.

How to Configure Multiple Node Layouts in a Network 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";
}

How to Configure Nonautomatic Node Layouts in the Network 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 Specify a Different Node Layout for Each Subnetwork

When the node layout is configured for a view, it is applied to the view and to all the subnetworks displayed in this network view.

However, you can specify different node layouts for subnetworks. The node layouts of subnetworks are configured in CSS using the same properties as for the view configuration (layouts and autoLayoutIndex).

When you configure the node layout for a specific subnetwork, you must declare the CSS selector with a specific pseudoclass that identifies the graph layout renderer. The pseudoclass must be graphLayoutRenderer, as illustrated below:

GraphLayout {
  layouts[0]: @+treeLayout;
  autoLayoutIndex: 0;
}
 
Subobject#treeLayout {
  class: 'ilog.views.graphlayout.tree.IlvTreeLayout';
  flowDirection: Bottom;
}
 
#SubNetwork:graphLayoutRenderer {
  layouts[0]: @+hierarchicalLayout;
  autoLayoutIndex: 0;
}
 
Subobject#hierarchicalLayout {
  class: 'ilog.views.graphlayout.hierarchical.IlvHierarchicalLayout';
  flowDirection: Top;
}

The property autoLayoutIndex, when used in an object selector with the graphLayoutRenderer pseudoclass, specifies the automatic node layout that is applied to the subnetwork.

You can also specify nonautomatic node layouts for subnetworks. This configuration is achieved in the same way as for the view configuration (layouts property with multiple node layouts and the autoLayoutIndex set to -1).

When you call the method performAttachedLayout(int index), it is applied recursively in the model hierarchy. Therefore if a node layout is configured for the given index in the subnetwork, this specific layout is performed. Otherwise, the node layout configured for the parent network is executed.

How to Set Node or Link Parameters on Graph Layout Objects in the Network 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;
}

Each layout algorithm supports a set of per-object parameters. Please refer to package ilog.cpl.graph.css.renderer.graphlayout for more information on the parameters supported by each layout algorithm.

In addition to the properties that are specific to the layout algorithms, the graph layout renderer also supports the following properties:

How to Disable the Per-Object Layout Parameters for Node Configuration in the Network View

You can also disable the per-object layout parameters configuration through CSS as follows:

GraphLayout {
  layouts[0]: @+hierarchicalLayout;
  usePerObjectParameters: false;
}

The LinkLayout Rule

This 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 Network View

The following CSS sample shows how to customize the link layout:

LinkLayout {
    class: "ilog.views.graphlayout.link.IlvLinkLayout";
    globalLinkStyle: MIXED_STYLE;
}

How to Specify a Different Link Layout for Each Subnetwork

When the link layout is configured for a view, it is applied to the view and to all the subnetworks displayed in this network view.

However, you can also specify different link layouts for subnetworks. The link layout is configured in CSS using the property linkLayout and the pseudoclass linkLayoutRenderer, as illustrated below:

LinkLayout {
  class:'ilog.views.graphlayout.link.IlvLinkLayout';
}
 
#SubNetwork:linkLayoutRenderer {
  linkLayout: @+shortLinkLayout;
}
 
Subobject#shortLinkLayout{
  class: 'ilog.tgo.graphic.graphlayout.IltShortLinkLayout';
}

How to Specify Per-Object Parameters for Link Layouts in the Network 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;
}

How to Disable Per-Object Layout Parameters for Link Configuration in the Network View

You can also disable the per-object layout parameters configuration through CSS as follows:

LinkLayout {
  class: 'ilog.views.graphlayout.link.IlvLinkLayout';
  usePerObjectParameters: false;
}

The LabelLayout Rule

This rule controls the automatic label layout in the view.

The following CSS sample shows how to customize the label layout:

LabelLayout {
    class: 'ilog.tgo.graphic.graphlayout.labellayout.IltAnnealingLabelLayout';
    obstacleOffset: 10;
    labelOffset: 15;
}

The Backgrounds Rule

This rule allows you to configure two kinds of background that affect the network component representation:

Network Backgrounds

This refers to background files such as maps or background images. You can specify a network background through:

You can mix and match options 1 and 2 by specifying some backgrounds as beans and some as straight URL strings.

Manager View Background

This refers to the representation of the view as a background for your network backgrounds (the area that the network 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:

The Positioning Rule

The property positionClass denotes the Java class name of the class or interface that implements IlpPosition.

The following CSS sample shows how to customize the positioning:

Positioning {
  positionClass: 'my.package.MyPosition';
  converterClass: 'my.package.MyPositionConverter';
}

The Adapter Rule

This rule controls the configuration of the network adapter. The network adapter is responsible for converting the business objects in the data source to representation objects (network nodes) in the network component. It provides the following features:

These network adapter features can be customized through CSS using the following properties:

How to Configure a Network Adapter in a CSS File

Prior to configuring the adapter, you need to configure the network component so that the adapter configuration is enabled:

Network {
  adapter: true;
}

Adapter {
  filter: @+Filter;
}
 
Subobject#Filter {
  class: 'CustomFilter';
  rejectObject[0]: "NE1";
  rejectObject[1]: "Link5";
}

How to Programmatically Configure a Network Adapter using CSS

To use mutable style sheets:

How to Customize the Mutable Style Sheet