Release Notes > JTGO 4.0 Release Notes > New Features > Styling

The following improvements have been added to the JTGO styling feature:

Mutable Style Sheets

You can create dynamic CSS files in an easier way by using the support provided by IlpMutableStyleSheet. This class allows you to define selectors and manage declarations using an API. The following example illustrates how you can create a mutable style sheet and use it to modify dynamically the configuration of your component:

IlpNetworkView view = networkComponent.getView();
IlpMutableStyleSheet stylesheet = new IlpMutableStyleSheet(view);
String[] current = view.getStyleSheets();
int index = current.length;
view.setStyleSheets(index, stylesheet.toString());
...
stylesheet.setDeclaration(selector, declaration, value);
...
stylesheet.removeDeclaration(selector, declaration);
...

Label Configuration

Predefined business objects, and custom business objects using the default representation have now a more complete support for label configuration. The following CSS properties are available to all objects:

Table 3.14 Label Configuration
CSS Property 
Description 
Type 
Default 
labelWrappingMode  
Defines the wrapping mode of the object label representation. The following values are available:  
-None 
-Word Wrap 
-Truncate  
-Wrap and Truncate. 
short 
None. 
labelWrappingWidth 
Defines the label width above which the label will be truncated or wrapped according to the wrapping mode. 
float  
-1 
The width is automatically defined by JTGO according to the object base dimensions. For off-page connectors, the default value is set to 60 pixels. 
labelWrappingHeight  
Defines the label height above which the label will be truncated.  
float 
-1 
The height is automatically defined by JTGO according to the object base dimensions.  
labelMargin 
Defines the margin between the label and the edge of the shape when performing wordwrapping or truncation  
float  
0: for all objects.  
35: for IltShelfItem.  
lineSpacing 
Defines the distance between lines when the label is on several lines. 
float 
-1: The label will use the default TextLayout leading. 
labelAlignment 
Defines the alignment of the label when it has several lines. 
int 
-1: The label alignment is automatically computed based on the label position: 
- If the label position is Bottom or Top, the alignment will be Center. 
- If the label position is Left, the alignment is Right. 
- If the label position is Right, the alignment is Left.  
labelSpacing  
Defines the distance between the label and the object base. 
float 
2: For custom business objects.  
0: For predefined business objects. Predefined business objects also support the property labelOffset, that allows to define the X and Y distance between the label and the base. Both properties can be set. However, the property set last is the one that is considered when creating the object representation. 
labelScaleFactor 
Defines a scale factor that is applied to the label so that it can be adjusted independently from the object base.  
float 
1  
minLabelZoom 
Defines the minimum label zoom below which the label becomes invisible. 
float  
0.6  
maxLabelZoom 
Defines the maximum label zoom above which the label becomes invisible. 
float 
500 

Note
Properties labelWrappingMode, labelWrappingWidth, labelWrappingRight and labelMargin do not affect labels that are created with the property verticalLabelStacksGlyphs, for example shelf item vertical labels. In case of vertical labels, you can customize the distance between the characters by setting the property lineSpacing.

Tooltip Properties

Besides property toolTipText, the following properties are now available to customize tooltips in the objects and attributes displayed in the JTGO components:

Table 3.15 Tooltip Properties
CSS Property 
Description 
Type 
Default 
toolTipGraphic  
Defines a graphic object to be displayed as a tooltip. This property has precedence over property toolTipText
IlvGraphic 
null  
toolTipFont  
Defines the font to be used when creating text tooltips. 
Font  
null (the default tooltip font defined in the Java environment is used)  
toolTipForeground  
Defines the foreground color to be used when creating text tooltips.  
Color  
null (the default tooltip foreground color defined in the Java environment is used) 
toolTipBackground  
Defines the background color to be used when creating text tooltips.  
Color  
null (the default tooltip background color defined in the Java environment is used)  

The following example shows you how to customize your component to display tooltips with a specific font on the objects:

object."ilog.tgo.model.IltObject" {
  toolTipText: @name;
  toolTipFont: "arial-plain-12";
}

Other Properties

In the network and equipment components, it is now possible to specify whether a given object can be moved or not by the user through interactors. This configuration is achieved by setting the value of the property movable. The following example sets all objects to not movable:

object {
  movable: false;
}

Value Map Support

You can now create value map instances in CSS files to store complex types created either using the beans support provided by CSS or CSS functions. The following example illustrates this feature:

#perceivedSeverityBackgroundMap {
   class: 'ilog.cpl.service.IlpIndexedValueMap';
   keyClass: 'java.lang.Integer';
   valueClass: 'java.awt.Color';
   keys[0]: 0;
   keys[1]: 1;
   keys[2]: 2;
   keys[3]: 3;
   keys[4]: 4;
   keys[5]: 5;
   values[0]: '@|blinkingcolor("#FFFFFF")';
   values[1]: '@|blinkingcolor("#C0C0C0")';
   values[2]: '@|blinkingcolor("#FFCC00")';
   values[3]: '@|blinkingcolor("#FFB200")';
   values[4]: '@|blinkingcolor("#FF0000")';
   values[5]: '@|blinkingcolor("#FF0000")';
}

While IlpOrderedValueMap is a value map implementation in which the keys and values can be created in a CSS using a single-line comma-separated string, IlpIndexedValueMap supports any type of object created using all the CSS features such as bean support and CSS functions. According to your customization needs, you can use one implementation or the other.

Pattern Support

The pattern support has been improved and extended. In addition to the predefined patterns and to the two methods for customizing patterns (IltPattern.NewSkewGridPattern and IltPattern.NewGridPattern), it is now possible to use the pattern types defined by ilog.views.util.java2d.IlvPattern class.

The following example shows how to specify the IlvPattern.BRICKS_HORIZONTAL pattern type in CSS:

object {
  fillStyle: PATTERN;
  pattern: '@|pattern("BRICKS_HORIZONTAL")';
}

Alarm State Selectors

Following the introduction of impact alarms and their distinction from raw alarms, the CSS selectors for alarm states have changed.

The following type of selector is deprecated:

object."ilog.tgo.model.IltObject"["objectState.Alarm.Critical.New"] {
  // Matches all objects that have new raw alarms with the severity critical.
}

Use instead:

object."ilog.tgo.model.IltObject"["objectState.Alarm.Raw.Critical.New"] {
  // Matches all objects that have new raw alarms with the severity critical.
}

The corresponding selector for new impact alarms with a severity of critical high is:

object."ilog.tgo.model.IltObject"["objectState.Alarm.Impact.CriticalHigh.New"] {
  // Matches all objects that have new impact alarms with the severity critical high.