skip to main content
Gantt > Programmer's documentation > Developing with the JViews Gantt SDK > Styling > Styling Gantt chart and Schedule chart data
 
Styling Gantt chart and Schedule chart data
Describes the activities, classes and constraints used to style Gantt and Schedule chart data.
*Overview
*Explains how to use style sheets to specify the rendering attributes of activities and constraints in the Gantt sheet.
*Styling activities
*Explains in detail the model objects used to identify activities in the Gantt data model and how to use them.
*Styling constraints
*Describes the model object type identifier constraints in the Gantt data model that will be styled by the CSS engine.
Overview
Style sheets can also be used to specify the rendering attributes of activities and constraints in the Gantt sheet. The selector for each CSS rule specifies which activities or constraints are being rendered in the Gantt data model. The target object to which the CSS declarations are applied is usually an instance of IlvActivityRenderer or an instance of IlvConstraintGraphic respectively. This is explained in more detail in the following sections.
Styling Gantt data works best if you use data model implementation classes that implement the IlvUserPropertyHolder interface such as the general data model implementation classes, provided in the ilog.views.gantt.model.general (see Default data model implementation). These classes support user-defined properties. This allows the CSS engine to match properties of the data model objects against CSS attribute selectors and to perform model indirection when evaluating the CSS declarations. For information, see Selector and Model indirection.
NOTE If you do not use the IlvActivity and IlvConstraint data model implementations that implement the IlvUserPropertyHolder interface, you will not be able to use attribute selectors or perform model indirection in your style sheets.
Styling activities
Explains in detail the model objects used to identify activities in the Gantt data model and how to use them.
*Activity model objects
*Describes the object types used for styling.
*Activity renderer target objects
*Describes how to specify the required constructor arguments in the CSS declaration.
*Activity ID selectors
*Describes the things to look for when you use ID selectors in your style sheet.
*IlvGeneralActivity properties
*Describes the styling features available when you use an IlvGeneralActivity instance.
*IlvGeneralActivity CSS classes
*Describes how activity properties are used to list the CSS classes and object it belongs to.
*Activity CSS pseudoclasses
*Describes the activity pseudoclasses you can use in rule selectors.
*The formatDate and formatDuration functions
*Explains the predefined date and duration formatting functions you can use as part of an expression in your style sheet.
Activity model objects
The activity model object type identifies activities in the Gantt data model that will be styled by the CSS engine. The target object to which the CSS declarations will be applied can be an instance of IlvActivityRenderer, IlvActivityRendererFactory, or IlvGraphic. The class of the target object must always be specified and is declared in the style sheet using the reserved class property name. This is explained in more detail in Class name. The following extremely simple CSS rule will display all activities using an IlvBasicActivityBar renderer.
activity {
  class: 'ilog.views.gantt.graphic.renderer.IlvBasicActivityBar';
}
As shown previously, you can then add more declarations to the CSS rule that specify bean properties of the IlvBasicActivityBar target object you want to customize:
activity {
  class : 'ilog.views.gantt.graphic.renderer.IlvBasicActivityBar';
  thickness : 3;
  background : yellow;
}
The following table summarizes the CSS model objects, tokens, and functions that are applicable for styling activities. Each item of the table is further discussed in the subsequent sections.
Model object
An instance of IlvActivity.
An IlvGeneralActivity provides the most flexibility.
Model indirection
Properties of IlvGeneralActivity, or of IlvActivity implementations that implement the IlvUserPropertyHolder interface.
Not supported for other IlvActivity implementations.
Target object class
CSS model object type
activity
CSS ID
The ID property of the activity:
CSS declaration properties
Bean properties of the target object.
CSS classes
The tags property of IlvGeneralActivity, or of IlvActivity implementations that implement the IlvUserPropertyHolder interface:
IlvGeneralActivity.getProperty("tags")
Not supported for other IlvActivity implementations.
CSS pseudoclasses
parent
leaf
milestone
selected
CSS attribute selectors
Properties of IlvGeneralActivity, or of IlvActivity implementations that implement the IlvUserPropertyHolder interface.
Not supported for other IlvActivity implementations.
CSS custom functions
formatDate()
formatDuration()
Activity renderer target objects
As shown in Styling activities, the target object to which the CSS declarations are applied can be an instance of IlvActivityRenderer, IlvActivityRendererFactory, or IlvGraphic. If you specify an IlvGraphic class, it will be instantiated and then used in an IlvActivityGraphicRenderer wrapper by the Gantt CSS engine. Most IlvGraphic implementations provided in the JViews Gantt distribution have constructors with no arguments. However, for those IlvGraphic implementations that have no such zero-argument constructors, you need to specify the required constructor arguments in the CSS declaration. The following example shows how to specify a filled IlvRectangle graphic as an activity renderer.
NOTE The example below is in fact purely didactic and does not really apply to the class IlvRectangle since this class does have a constructor with no argument.
activity {
  class : 'ilog.views.graphic.IlvRectangle(definitionRect)';
  definitionRect : @=dummyRect;
  fillOn : true;
  background : lightseagreen;
}
 
Subobject#dummyRect {
  class : ilog.views.IlvRect;
}
Notice how a dummy IlvRect object is provided as an argument to the IlvRectangle constructor. The initial value of this rectangle is unimportant because the Gantt library will subsequently resize the graphic to represent the time duration of the activity.
If you specify an IlvActivityRendererFactory instance as your target object, the Gantt CSS engine will ask the factory to create the activity renderer. However, you are recommended not to use the renderer factories that are provided in the distribution because they are not well suited to CSS styling. This is because the provided factories create renderer instances that are shared among activities. In an application that does not use CSS styling, this minimizes object creation and memory usage. However, this also defeats the ability of the Gantt CSS engine to apply individualized rendering Customization. If you have written your own activity renderer factory that does not share renderer instances, then it should work well with CSS styling.
In most cases, you will simply specify an IlvActivityRenderer implementation as your target object. The following table lists the renderers provided in the distribution that provide the most flexibility when used with CSS styling:
The following table shows the renderers for CSS styling of activities.
Renderer
Bean properties
Type
background
Color
bottomMargin
float
font
Font
foreground
Color
label
String
style
enum
thickness
int
toolTipText
String
topMargin
float
background
Color
bottomMargin
float
font
Font
foreground
Color
horizontalAlignment
enum
label
String
offset
float
toolTipText
String
topMargin
float
verticalAlignment
enum
alignment
enum
background
Color
bottomMargin
float
foreground
Color
shape
enum
toolTipText
String
topMargin
float
renderer
Of course, other renderers provided in the distribution can also be specified in the style sheet, as well as any custom activity renderers that you may have written yourself.
The following code example shows how to use the class IlvActivityCompositeRenderer to create a more complex renderer from simpler ones:
Creating complex renderers
activity {
  class : 'ilog.views.gantt.graphic.renderer.IlvActivityCompositeRenderer';
  renderer[0] : @#bar;
  renderer[1] : @#startSymbol;
  renderer[2] : @#endSymbol;
}
 
Subobject#bar {
  class : 'ilog.views.gantt.graphic.renderer.IlvBasicActivityBar';
  background : powderblue;
  bottomMargin : 0.3;
}
 
Subobject#startSymbol {
  class : 'ilog.views.gantt.graphic.renderer.IlvBasicActivitySymbol';
  alignment : START;
}
 
Subobject#endSymbol {
  class : 'ilog.views.gantt.graphic.renderer.IlvBasicActivitySymbol';
  alignment : END;
}
Activity ID selectors
As shown in Styling activities, the ID property of activities in the Gantt data model can be used as CSS ID selectors. For example, if your data model has an activity with an ID of “A7345”, you could specify a rule that customizes the rendering of that specific activity like this:
#A7345 {
  class : 'ilog.views.gantt.graphic.renderer.IlvBasicActivityBar';
  background : orange;
  label : 'I am a special activity';
}
There are several things you should be cautious of when you use ID selectors in your style sheet:
*Each activity should have an ID that is unique across all objects of the data model.
*Activity ID selectors can only be specified in the style sheet using alphanumeric characters. The activities defined in section Scheduling data have IDs that contain non-alphanumeric characters, such as the hyphen. Therefore, this data model is not suitable for use with CSS ID selectors.
*For performance reasons, the Gantt CSS engine assumes that CSS model object IDs are immutable. Therefore, if the ID of an activity in your data model changes, the Gantt CSS engine will not automatically re-interpret the ID selector rules. Although Rogue Wave® does not recommend that you create a data model implementation where the IDs of data objects change dynamically, you can overcome this limitation by reapplying the style sheet and thereby forcing its complete re-interpretation.
IlvGeneralActivity properties
If your Gantt data model uses the IlvGeneralActivity implementation, or IlvActivity implementations that implement the IlvUserPropertyHolderIlvUserProperty interface, you will have the most flexibility when you write CSS declarations to style activities. IlvGeneralActivity allows you to specify predefined and user-defined activity properties as CSS attribute selectors. It also allows you to perform model indirection in the value part of your CSS declarations. The samples provided, described in The Gantt and Schedule CSS examples, populate their data model with IlvGeneralActivity instances. You can therefore use these samples to test and experiment with the styling features described in this section.
IlvGeneralActivity CSS classes
The Gantt CSS engine interprets the “tags” property of an IlvGeneralActivity, or another IlvActivity implementation that implements the IlvUserPropertyHolder interface, as the space-separated list of the CSS classes it belongs to. For example, the default data model of the samples provided defines a tags value of “ critical ” for some of the activities:
<activity id="A-1.3" name="Requirements Defined" start="21-10-2000 0:0:0"
  end="21-10-2000 0:0:0">
  <property name="tags">critical</property>
</activity>
You can then specify the following rules that will highlight all activities that are members of the “critical” class in a different color:
activity {
  class : 'ilog.views.gantt.graphic.renderer.IlvBasicActivityBar';
  background : powderblue;
  label : '@id';
}
 
activity.critical {
  background : plum;
}
Activity CSS pseudoclasses
As shown in Styling activities, the Gantt CSS engine defines several activity pseudoclasses that you can use in your rule selectors.
The pseudoclasses are:
*parent - Indicates that the activity has at least 1 child activity.
*leaf - The opposite of parent, indicates that the activity has no children.
*milestone - Indicates that the activity has zero duration.
*selected - Indicates that the activity is selected.
Most of the previous CSS examples given so far use an IlvBasicActivityBar renderer for all activities. You may have already noticed that this renderer becomes nearly invisible when it attempts to render a milestone activity that has zero duration. The following rules illustrate how you can provide a symbol renderer for these activities by using the milestone pseudoclass in the selector:
activity {
  class : 'ilog.views.gantt.graphic.renderer.IlvBasicActivityBar';
  background : powderblue;
  label : '@id';
}
 
activity:milestone {
  class : ‘ilog.views.gantt.graphic.renderer.IlvBasicActivitySymbol’;
  shape : DIAMOND;
  foreground : yellow;
  label : @;
}
NOTE The label line uses the special @ value to ignore the label property declaration that the milestone rule has inherited.
The formatDate and formatDuration functions
As shown in Styling activities, the Gantt CSS engine provides two predefined functions you can use as part of an expression in your style sheet: formatDate and formatDuration.
formatDate
The formatDate function lets you format a Date property value using a standard pattern string defined by the java.text.SimpleDateFormat class. The syntax of this function is.
formatDate(<SimpleDateFormat pattern>, <Date>)
The following example shows a declaration used to set the tooltip to the formatted start time of the activity:
toolTipText : '@|"Start: " + formatDate("MM/dd/yy",@startTime)';
formatDuration
Similarly, the formatDuration function lets you format an IlvDuration value using an IlvDurationFormat constant. The syntax of this function is:
formatDuration(<IlvDurationFormat constant>, <IlvDuration>)
The following example shows a declaration used to set the tooltip to the formatted duration of the activity:
toolTipText: '@|"Duration: " + formatDuration(LARGEST_UNIT_MEDIUM, @duration)';
You can see more complex usage of these functions by examining the standard-look.css style sheet that is provided in:
<installdir>/jviews-gantt/samples/cssGantt/data/standard-look.css
Styling constraints
Describes the model object type identifier constraints in the Gantt data model that will be styled by the CSS engine.
*Constraint model objects
*Explains in detail the model objects used to identify constraints in the Gantt data model and how to use them.
*Constraint graphic target objects
*Describes the bean properties of IlvConstraintGraphic that can be customized with CSS styling.
*Constraint ID selector
*Explains how the id property can be interpreted as the CSS ID attribute and used in ID selectors.
*IlvGeneralConstraint properties
*Explains how IlvGeneralConstraint can be used to specify predefined and user-defined constraint properties as CSS attribute selectors.
*IlvGeneralConstraint CSS classes
*Explains how the tags property is interpreted by the Gantt CSS engine.
*Constraint CSS pseudoclasses
*Explains how pseudoclass are defined so that you can use them in rule selectors.
*The activityProperty function
*Describes the predefined functions that you can use as part of an expression in your style sheet.
Constraint model objects
The constraint model object type identifies constraints in the Gantt data model that will be styled by the CSS engine. The target object to which the CSS declarations will be applied can be an instance of IlvConstraintGraphic or IlvConstraintGraphicFactory. The class of the target object must always be specified and is declared in the style sheet using the reserved class property name. The following example shows an extremely simple CSS rule that will render all constraints using the standard IlvConstraintGraphic class.
constraint {
  class: 'ilog.views.gantt.graphic.IlvConstraintGraphic';
}
You can then add additional declarations to the CSS rule that specify bean properties of the IlvConstraintGraphic target object that you want to customize:
constraint {
  class : 'ilog.views.gantt.graphic.IlvConstraintGraphic';
  foreground : green;
  lineWidth : 2;
}
The following table summarizes the CSS model object types, tokens, and functions that are applicable when styling constraints. Each item of the table is further discussed in the subsequent sections.
Model object
An instance of IlvConstraint.
An IlvGeneralConstraint provides the most flexibility.
Model indirection
Properties of IlvGeneralConstraint, or of IlvConstraint implementations that implement the IlvUserPropertyHolder interface.
Not supported for other IlvConstraint implementations.
Target object class
CSS model object type
constraint
CSS ID
The ID property of IlvGeneralConstraint: getProperty.
Not supported for other IlvConstraint implementations.
CSS declaration properties
Bean properties of the target object.
CSS classes
The tags property of IlvGeneralConstraint, or of IlvConstraint implementations that implement the IlvUserPropertyHolder interface: IlvGeneralConstraint.getProperty("tags").
Not supported for other IlvConstraint implementations.
CSS pseudo classes
selected
CSS attribute selectors
Properties of IlvGeneralConstraint, or of IlvConstraint implementations that implement the IlvUserPropertyHolder interface.
Not supported for other IlvConstraint implementations.
CSS custom functions
activityProperty()
formatDate()
formatDuration()
Constraint graphic target objects
As shown in Constraint model objects, the target object to which the CSS declarations will be applied can be an instance of IlvConstraintGraphic or IlvConstraintGraphicFactory. If you specify an IlvConstraintGraphicFactory as your target object, the Gantt CSS engine will ask the factory to create the constraint graphic. In most cases, you will simply specify an IlvConstraintGraphic as your target object. The following table lists the bean properties of IlvConstraintGraphic that can be customized with CSS styling:
The following table shows the bean properties for constraint graphics.
Bean properties
Type
Allowed values
arrowSize
float
 
connectionType
enum
TIME_INTERVAL_CONNECTION
BOUNDING_BOX_CONNECTION
endCap
int
ilog.views.IlvStroke.CAP_BUTT
ilog.views.IlvStroke.CAP_ROUND
ilog.views.IlvStroke.CAP_SQUARE
foreground
Color
 
horizontalExtremitySegmentLength
float
 
lineJoin
int
ilog.views.IlvStroke.JOIN_BEVEL
ilog.views.IlvStroke.JOIN_MITER
ilog.views.IlvStroke.JOIN _ROUND
lineStyle
float
 
lineWidth
float
 
oriented
boolean
 
toolTipText
String
 
Constraint ID selector
Constraints in the Gantt data model do not define an ID property as part of the basic IlvConstraint interface. However, if you are using the IlvGeneralConstraint implementation, or an IlvConstraint implementation implementing the IlvUserPropertyHolder interface, the id property will be interpreted as the CSS ID attribute and can be used in ID selectors. For example, if your data model defines the following constraint in its XML data file:
<constraint from="A723" to="A39" type="End-Start">
  <property name="id">C86</property>
</constraint>
You could then specify a rule that customizes the rendering of that specific constraint like this:
#C86 {
  class : 'ilog.views.gantt.graphic.IlvConstraintGraphic';
  foreground : magenta;
  toolTipText : 'I am a special constraint';
}
NOTE The same limitations discussed in Activity ID selectors apply to constraint ID selectors.
IlvGeneralConstraint properties
If your Gantt data model uses the IlvGeneralConstraint implementation, or an IlvConstraint implementation implementing the IlvUserPropertyHolder interface, you will have the most flexibility when you write CSS declarations to style constraints. IlvGeneralConstraint allows you to specify predefined and user-defined constraint properties as CSS attribute selectors. It also allows you to perform model indirection in the value part of your CSS declarations. The samples provided, described in The Gantt and Schedule CSS examples, populate their data model with IlvGeneralConstraint instances. You can therefore use these samples to test and experiment with the styling features described in this section.
IlvGeneralConstraint CSS classes
The Gantt CSS engine interprets the tags property of an IlvGeneralConstraint, or another IlvConstraint implementation that implements the IlvUserPropertyHolder interface, as the space-separated list of the CSS classes it belongs to. This is identical in concept to IlvGeneralActivity CSS classes. For example, let us set the tags property of a constraint in our data model so that the constraint belongs to the delay and critical classes:
anIlvGeneralConstraint.setProperty("tags", "delay critical");
You can then add a rule to the style sheet that highlights all constraints that are both delayed and that are critical in a different color:
constraint.critical.delay {
  foreground : red;
  lineWidth : 5;
}
Constraint CSS pseudoclasses
As shown in Constraint model objects, the Gantt CSS engine defines the selected pseudoclass that you can use in your rule selectors. The following example shows some rules that increase the width of the constraint graphic to indicate when it is selected.
constraint {
  class : 'ilog.views.gantt.graphic.IlvConstraintGraphic';
  foreground : green;
  lineWidth : 1;
}
 
constraint:selected {
  lineWidth : 3;
}
The activityProperty function
As shown in Constraint model objects, the Gantt CSS engine provides three predefined functions that you can use as part of an expression in your style sheet. Section The formatDate and formatDuration functions already discusses two of the functions. The activityProperty function lets you refer to a property of the constraint from activity or to activity. The syntax of this function is:
activityProperty(<IlvGeneralActivity>, <property name>)
The following example shows a declaration used to set the tooltip of the constraint graphic to contain the names of the constraint’s from and to activities.
toolTipText : '@|"<html>From: "+activityProperty(@fromActivity,"name")+"<br>To:
                             "+activityProperty(@toActivity,"name")+"</html>"';
You can see more complex usage of this function by examining the standard-look.css style sheet that is provided in the <Installdir>samples/gantt/css/data directory.

Copyright © 2018, Rogue Wave Software, Inc. All Rights Reserved.