Tree nodes are graphically represented with a graphic object or icon and a label, as illustrated in the following example.

Although the graphic representation is similar, tree nodes are customized differently depending on whether the business objects represented in the tree are predefined or user-defined objects.

The following table lists the properties that are common to both predefined and user-defined business objects represented in a tree component.

Predefined Business Objects

By default, the predefined business objects for managed objects are displayed in the tiny representation. The tiny representation is controlled by the CSS property tiny. It can be customized using the same CSS properties as for the symbolic representation (for example, foreground, background, label, labelPosition).

For a list of the properties that you can customize per type of predefined business object, please refer to the following sections:

Some properties for the graphic representation of predefined business objects in a tree component have a default value that is different from the network and equipment components. These properties and their default values are the following:

User-Defined Business Objects

The default representation for user-defined business objects is a simple representation which combines a label with an optional icon, overlapping icon and tooltip.

How to Customize Tree Nodes

The following example shows you how you can customize the tree nodes. It is based on the CSS file located in

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

The CSS selectors used to customize the nodes of the tree component are formed by the CSS type object and the CSS class <business class name>, as illustrated below:

object."NetworkElement" {
  label : @name;
  labelForeground : black;
  iconVisible : true;
  toolTipText : @name;
}
 
object."NetworkElement":selected {
  labelForeground: red;
}

The example above illustrates a tree node configuration using pseudoclasses: the graphic representation of the nodes is based on the pseudoclass "selected", so that the label foreground color changes whether the object is selected or not in the tree component.

Besides the selection state, you can also customize tree nodes according to the focus state or to custom pseudoclasses. The following example shows tree nodes whose label foreground color changes according to the focus and selection state:

object:selected {
  labelForeground: red;
}
 
object:focus {
  labelForeground: blue;
}
 
object {
  labelForeground: black;
}

How to Customize an Overlapping Icon

You can define an overlapping icon to be displayed over the default tree node icon.

To set an overlapping icon for all instances of a given business class, use the following style sheet extract:

object."Domain" {
    overlapIcon: '@|image("overlap.png")';
    overlapIconVisible: true;
}

Advanced Customization

To further customize the tree node rendering, you may also:

Using an IlvGraphic

How to Use an IlvGraphic to Generate a Tree Node Representation

object."Workstation" {
  class: 'ilog.views.graphic.composite.IlvCompositeGraphic';
  layout: @+attachmentLayout;
  children[0]: @+wsBase;
  children[1]: @+wsLabel;
  constraints[1]: @+wsLabelConstraint;
}
 
Subobject#attachmentLayout {
  class: 'ilog.views.graphic.composite.layout.IlvAttachmentLayout';
}
Subobject#wsBase {
  class: 'ilog.views.graphic.IlvIcon';
  image: '@|image("workstation.png")';
}
Subobject#wsLabel { 
  class: 'ilog.views.graphic.IlvText';
  label: @name;
  foreground: black;
  font: 'arial-bold-12';
}
Subobject#wsLabel:selected { 
  foreground: red;
}
Subobject#wsLabelConstraint {
  class: 'ilog.views.graphic.composite.layout.IlvAttachmentConstraint';
  hotSpot: Left;
  anchor: Right;
  offset: 3,0;
}

Using a JComponent

The following example shows how to define a JComponent to generate a tree node representation. It is based on the CSS file located in

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

In this example, tree nodes are represented using a simple JLabel whose properties text, icon and foreground are customized according to the business attributes and the selection state of the tree node.

How to Use a JComponent to Generate a Tree Node Representation

object."Workstation" {
  class: 'javax.swing.JLabel';
  icon : @=icon;
  text: @name;
  foreground: black;
}
object."Workstation":selected {
  foreground: red;
}
Subobject#icon {
  class: 'javax.swing.ImageIcon';
  image: '@|image("workstation.png")';
}

As illustrated in this example, JComponent instances can be used to represent tree nodes through the property 'class'. The given class must follow the JavaBeans pattern; its properties can be customized directly in CSS (icon, text, foreground).

Creating Your Own Renderer

You will then be able to register the new tree cell renderer in the tree component through CSS or through the API.

Improving Performance

You can improve the rendering performance of predefined business objects by replacing their graphic representation with a static image.

How to Improve Performance in the Tree Component by Rendering Predefined Business Objects as Static Images

The useDefaultCellRenderer CSS property enables the default tree node renderer, normally used for user-defined objects, to work with predefined objects. This technique will improve performance as the default renderer is based on static images instead of the dynamic alarm colored representation of predefined objects.

The following CSS example configures all ilog.tgo.model.IltObject business objects to be represented by the image myImage.png:

object."ilog.tgo.model.IltObject" {
  useDefaultCellRenderer: true;
  icon: '@|image("resource/myImage.png")';
  iconVisible: true;
}