Styling Gantt chart and Schedule chart data
Describes the activities, classes and constraints used to style Gantt and Schedule chart data.
Explains how to use style sheets to specify the rendering attributes of activities and constraints in the Gantt sheet.
Explains in detail the model objects used to identify activities in the Gantt data model and how to use them.
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.
Describes the object types used for styling.
Describes how to specify the required constructor arguments in the CSS declaration.
Describes the things to look for when you use ID selectors in your style sheet.
Describes the styling features available when you use an
IlvGeneralActivity instance.
Describes how activity properties are used to list the CSS classes and object it belongs to.
Describes the activity pseudoclasses you can use in rule selectors.
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:
Styling constraints
Describes the model object type identifier constraints in the Gantt data model that will be styled by the CSS engine.
Explains in detail the model objects used to identify constraints in the Gantt data model and how to use them.
Describes the bean properties of
IlvConstraintGraphic that can be customized with CSS styling.
Explains how the id property can be interpreted as the CSS ID attribute and used in ID selectors.
Explains how
IlvGeneralConstraint can be used to specify predefined and user-defined constraint properties as CSS attribute selectors.
Explains how the
tags property is interpreted by the Gantt CSS engine.
Explains how pseudoclass are defined so that you can use them in rule selectors.
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';
}
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.