Styling > Using Cascading Style Sheets > Displaying the Same Attribute with Different Representations

This use case applies to the table component. It shows you how to add several columns to a table in which the same attribute is represented in different ways. To obtain this 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.

The following example shows you how to extend a table component with new attributes. It is taken from the sample:

<installdir>/samples/table/customAttributes

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

How to Extend a Table Component with New Attributes
      // 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.

Next, you configure each attribute to be properly displayed in the table component.

The following style sheet is taken from the sample:

<installdir>/samples/table/customAttributes

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

The first step is to customize the way the new attributes are to be displayed in the table header. This customization is created with a selector of type attribute followed by the name of the attribute.

How to Customize the Way New Attributes Are Displayed
attribute.shortSeverity {
    label: "S";
    toolTipText: "Perceived severity";
    preferredWidth: 20;
}
attribute.priority {
    label: "P";
    toolTipText: "Priority";
    preferredWidth: 20;
}

The next step is to configure how the table cells are to be displayed. Table cells are configured through a selector of type object.

How to Configure the Way the Table Cells Are Displayed
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";
}