Both of these representations can be customized through the use of style sheets.

The following table lists the properties involved in the table cell rendering.

How to Customize the Object Column for Predefined Business Objects in Table Cells

In the case of predefined business objects for managed objects, an Object column displays the value of the attribute graphicRepresentation. It shows the tiny representation of the business object displayed in the table row. To customize this tiny representation, you can use the same CSS properties as for the symbolic representation of the specific predefined business class (for example, foreground, background, label, labelPosition). The following code extract:

object."ilog.tgo.model.IltNetworkElement" {
  foreground: green;
}

changes the foreground color used in the tiny representation of network elements.

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

How to Customize Table Cells

This use case shows you how to customize the cells of the table. The CSS selectors used to customize the table cells are formed by the CSS type object and the CSS class <business class name/attribute name>, as illustrated in the following example.

This example is based on the CSS file located in

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

object."Alarm/perceivedSeverity"[perceivedSeverity=0] {
  labelBackground: '#FFFFFF';
  label: Cleared;
  toolTipText: "Cleared alarm";
}
 
object."Alarm/perceivedSeverity"[perceivedSeverity=1] {
  labelBackground: '#C0C0C0';
  label: Indeterminate;
  toolTipText: "Indeterminate alarm";
}

The example illustrates a table cell configuration based on the value of the attribute perceivedSeverity.

By means of cascading style sheets, you can also customize the table cell representation according to the focus and selection states. To do so, you use the pseudoclasses focus and selected, as follows:

object."ilog.tgo.model.IltObject/name":selected {
  labelForeground: red;
}
 
object."ilog.tgo.model.IltObject/name":focus {
  labelForeground: blue;
}
 
object."ilog.tgo.model.IltObject/name" {
  labelForeground: black;
}

How to Customize Multiple Table Cells using Wildcards

This use case shows you how to customize multiple cells of a table. The CSS selectors used to customize the table cells are formed by the CSS type object and the CSS class <business class name/attribute name>, as illustrated in the previous example. However, you can use the * wildcard to indicate that multiple attributes of a given business class should be configured using a single selector.

The following example illustrates how you can configure all cells of business class ilog.tgo.model.IltNetworkElement to have a blue background:

object."ilog.tgo.model.IltNetworkElement/*" {
  labelBackground: blue;
}

You can also specify that all columns related to alarms should have a bold font:

object."ilog.tgo.model.IltObject/*larm*" {
  labelFont: "arial-bold-12";
}

object."Alarm/*"[perceivedSeverity] {
  labelBackground: '@|valuemap(@=perceivedSeverityBackgroundMap, @perceivedSeverity)';
}
 
object."Alarm/*"[perceivedSeverity]:selected {
  labelBackground: '@|valuemap(@=perceivedSeveritySelectionBackgroundMap, @perceivedSeverity)';
}

Advanced Customization

To further customize the table cell rendering, you may also:

Using an IlvGraphic

How to Use an IlvGraphic to Generate a Table Cell Representation

object."Service/type" {
  class: 'ilog.views.sdm.graphic.IlvGeneralNode';
  label: @name;
  labelPosition: Right;
  labelColor: black;
  labelSpacing: 4;
  shapeType: RECTANGLE;
  shapeWidth: 12;
  shapeHeight: 12;
}
object."Service/type":selected {
  labelColor: red;
}

Using a JComponent

In the following example, table cells are represented using a simple JLabel whose properties text, icon and foreground are customized according to the business attribute and the selection state of the table cell.

How to Use a JComponent to Generate a Table Cell Representation

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

As illustrated in this example, JComponent instances can be used to represent table cells 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 table cell renderer in the table 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 Table Component by Rendering Predefined Business Objects as Static Images

The graphicRepresentation attribute of predefined business objects can be configured with the useDefaultCellRenderer CSS property so that predefined business objects are rendered as static images in the table component. This technique will improve performance as static images are faster to render than the alarm colored tiny 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/graphicRepresentation" {
  useDefaultCellRenderer: true;
  icon: '@|image("resource/myImage.png")';
  iconVisible: true;
}