Advanced customization of tree nodes

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

Use an IlvGraphic to generate an arbitrarily complex graphic representation ( IlvCompositeGraphic). For more information about composite graphics, see the section on graphic objects in Architecture of graphic components.
Use a JComponent to generate a graphic representation and customize it using CSS.
Create your own renderer (which should implement the Swing TreeCellRenderer interface) to generate an arbitrary Swing Component.

How to use an IlvGraphic to generate a tree node representation

IlvGraphic instances can be used to represent tree nodes through the property 'class' . The given class must follow the JavaBeans™ pattern; its properties can be directly customized in CSS.

The following example illustrates the use of IlvCompositeGraphic to represent tree nodes.

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;
}

For information about how to use JavaBeans in CSS and how to use the class property, refer to Class property.

How to use a JComponent to generate a tree node representation

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

The following CSS file is provided as part of the JViews TGO demonstration software at <installdir> /samples/tree/customClasses/data/tree.css.

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.

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

For information about how to use JavaBeans in CSS and how to use the class property, refer to Class property.

Creating your own renderer

You may want to replace the JViews TGO tree node representation by your own representation. To do so, you need to create your own implementation of the Swing TreeCellRenderer interface. For details, refer to Using an arbitrary TreeCellRenderer.

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

For information on how to set a new tree cell renderer through CSS, refer to The View rule.

For information on how to set a new tree cell renderer through the API, refer to Configuring the tree component.

Current section

Customizing tree nodes