Displaying the same attribute with different representations

TGO > Programmers documentation > Styling > Using Cascading Style Sheets > Displaying the same attribute with different representations

To obtain the desired result, you need to extend the table component with new attributes. The new attributes refer to attributes of the business class represented in the table component. You configure each attribute to be properly displayed in the table component.

How to extend a table component with new attributes

The following example shows you how to extend a table component with new attributes.

The following application is provided as part of the JViews TGO demonstration software at <installdir> /samples/table/customAttributes/index.html.

// Create a table component

IlpTable tableComponent = new IlpTable();

// Get the Alarm class

IlpClass alarmClass = context.getClassManager().getClass("Alarm");

// Set the datasource to the component, and show instances

// of the Alarm class

tableComponent.setDataSource(dataSource, alarmClass);

// Add custom attributes

// Get the existing severity attribute

IlpAttribute severity = alarmClass.getAttribute("perceivedSeverity");

// Create a 'Short severity' attribute that represents the severity

// in a concise way

IlpAttribute shortSeverityAttribute =

new IlpReferenceAttribute("shortSeverity", severity);

tableComponent.addAttribute(shortSeverityAttribute);

IlpReferenceAttribute models an attribute instance that is a reference to another attribute. In this example, the value returned from querying perceivedSeverity and shortSeverity is the same.

The following CSS file is provided as part of the JViews TGO demonstration software at <installdir> /samples/table/customAttributes/index.html.

How to customize the way new attributes are displayed

To customize the way the new attributes are to be displayed in the table header, use a selector of type attribute followed by the name of the attribute.

attribute.shortSeverity {

label: "S";

toolTipText: "Perceived severity";

preferredWidth: 20;

}

attribute.priority {

label: "P";

toolTipText: "Priority";

preferredWidth: 20;

}

How to configure the way the table cells are displayed

To configure how the table cells are to be displayed, use a selector of type object.

object.priority {

labelVisible: false;

iconVisible: true;

}

object.priority[priority=0] {

icon: '';

toolTipText: '@|format(@#priorityFormat, "Low")';

}

object.priority[priority=10] {

icon: '@|image("ilog/tgo/ilt_bundle.png")';

toolTipText: '@|format(@#priorityFormat, "Medium")';

}

object.priority[priority=20] {

icon: '@|image("ilog/tgo/ilt_busy.png")';

toolTipText: '@|format(@#priorityFormat, "High")';

}

Subobject#priorityFormat {

class: 'ilog.cpl.util.text.IlpMessageFormat';

pattern: "{0} priority";

}