Representing table cells as business objects or labels with optional icons

The default table cell renderer ( IlpTableCellRenderer) generates two default types of graphic representation for table cells:

The predefined business objects representation, where the main attributes are displayed using labels and icons, and the object representation is displayed as a compact version of the standard JViews TGO look seen in the network component. This compact version is also known as the object tiny representation.
A simple representation, combining a label with an optional icon.

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

Predefined business objects for table cells

Objects of the IltNetworkElement class are represented as follows in the table:

Objects of the IltLink class are represented as follows in the table:

Objects of the IltShelf class are represented as follows in the table:

Objects of the IltCard class are represented as follows in the table. (Objects of classes IltPort and IltLed differ only by the icon in the column “Object.”)

Objects of class IltAlarm are represented as follows in the table:

Simple representation for table cells

The simple representation is the default representation for user-defined business objects.

Properties for customizing table cells

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

CSS properties for the table cells

Property Name	Type of Value	Default	Description
`focusBorderColor`	`Color`	`null`	Color to be used for the focus border of the cell. The focus border shows which cell has the focus. The default color is the same as in a `JTable` .
`focusBorderWidth`	`Integer`	`1`	Width of the focus border of the cell.
`horizontalAlignment`	`SwingConstants`	`Left`	Horizontal position of the label and icon in the cell. Possible values are: `Center` `Left` `Right` .
`icon`	`Image`	`null`	Icon to be displayed. By default, no icon is displayed.
`iconVisible`	`Boolean`	`true`	Determines whether the icon is displayed or not.
`labelBackground`	`Color`	`null`	Color to be used for the label background of a cell. By default, the color is white.
`labelFont`	`Font`	`null`	Font to be used for the label. By default, it is a sans serif font.
`labelForeground`	`Color`	`null`	Color to be used for the label foreground of a cell. By default, the color is black.
`labelInsets`	`Integer`	`1`	Space in pixels around the label and icon.
`labelPosition`	`IlvDirection`	`Right`	Position of the label relative to the icon. Possible values are: `Center` `Top` `Left` `Bottom` `Right` .
`labelSpacing`	`Float`	`4`	Spacing between the label and the icon.
`label`	`String`	`null`	Text to be displayed for the label. By default, no text is displayed.
`labelVisible`	`Boolean`	`true`	Determines whether the label is displayed or not.
`toolTipGraphic`	`IlvGraphic` or `JComponent`	`null`	This property accepts `IlvGraphic` and `JComponent` objects that are created in CSS using @+, @=, or @# constructors.
`toolTipText`	`String`	`null`	Tooltip text for the cell. By default, no tooltip string is displayed.
`verticalAlignment`	`SwingConstants`	`Center`	Vertical position of the label and icon in the cell. Possible values are: `Center` `Top` `Bottom` .

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

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

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

The following CSS extract can be found in a CSS file provided as part of the JViews TGO demonstration software at <installdir> /samples/table/styling/data/table.css.

This CSS extract configures the background of all the cells in the rows displaying objects of the business class Alarm according to the value of the perceivedSeverity attribute.

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

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

Current section

Customizing table cells