Describes the activities, classes and constraints used to style Gantt and Schedule chart data.

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.

Explains in detail the model objects used to identify activities in the Gantt data model and how to use them.

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.

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:

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.

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.

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.

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:

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:

There are several things you should be cautious of when you use ID selectors in your style sheet:

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:

You can then specify the following rules that will highlight all activities that are members of the “critical” class in a different color:

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:

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:

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.

The following example shows a declaration used to set the tooltip to the formatted start time of the activity:

formatDuration

Similarly, the formatDuration function lets you format an IlvDuration value using an IlvDurationFormat constant. The syntax of this function is:

The following example shows a declaration used to set the tooltip to the formatted duration of the activity:

You can see more complex usage of these functions by examining the standard-look.css style sheet that is provided in:

Describes the model object type identifier constraints in the Gantt data model that will be styled by the CSS engine.

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.

You can then add additional declarations to the CSS rule that specify bean properties of the IlvConstraintGraphic target object that you want to customize:

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.

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.

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:

You could then specify a rule that customizes the rendering of that specific constraint like this:

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:

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 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.

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:

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.

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.