Styling Activities

INDEX PREVIOUS NEXT

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. Here is an extremely simple CSS rule that 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;
}

Table 3.6 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
• Activity ID Selectors
• IlvGeneralActivity Properties
• IlvGeneralActivity CSS Classes
• Activity CSS Pseudoclasses
• The formatDate and formatDuration Functions

As shown in Table 3.6, Styling Activities With CSS, 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 thoseIlvGraphic implementations that have no such zero-argument constructors, you need to specify the required constructor arguments in the CSS declaration. Here is an example that shows how to specify a filled IlvRectangle graphic as an activity renderer.

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. Table 3.7 lists the renderers provided in the distribution that provide the most flexibility when used with CSS styling:

Code Sample 3.13 shows how to use the class IlvActivityCompositeRenderer to create a more complex renderer from simpler ones:

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;
}

As shown in Table 3.6, 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';
}

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

If your Gantt data model uses the IlvGeneralActivity implementation, or IlvActivity implementations that implement the IlvUserPropertyHolder 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.

An introduction to CSS model indirection is provided in Model Indirection. If your Gantt data model uses instances of IlvGeneralActivity or another IlvActivity implementation that implements the IlvUserPropertyHolder interface, you can use the @ construct on the right side of your declarations to reference properties of the activity. As an example, here is a rule that labels the IlvBasicActivityBar renderer with the ID of the activity. The tooltip is rendered using HTML formatting and displays the activity name and ID on separate lines, bold, and centered:

activity {
  class : 'ilog.views.gantt.graphic.renderer.IlvBasicActivityBar';
  background : powderblue;
  label : '@id';
  toolTipText : '@|"<html><center><b>"+@id+"<br>"+@name+"</b></center></html>"';
}

An introduction to CSS attribute selectors is provided in Selector. Properties of the IlvGeneralActivity instances in your data model, or instances of other IlvActivity implementations that implement the IlvUserPropertyHolder interface, can be used to match against attribute values in your CSS rule selectors.

activity {
        class       : 'ilog.views.gantt.graphic.renderer.IlvBasicActivityBar';
        label       : '@id';
        background  : firebrick;
        foreground  : burlywood;
}

activity[completion > '0'] {
        label       : '@|@id+", "+@completion';
}

activity[completion >= '0.25'] {
        background  : coral;
        foreground  : black;
}

activity[completion >= '0.5'] {
        background  : lightsalmon;
}

activity[completion >= '0.80'] {
        background  : khaki;
}

activity[completion >= '0.9'] {
        background  : lemonchiffon;
}

activity[completion >= '0.95'] {
        background  : honeydew;
}

activity[completion >= '1'] {
        background  : lawngreen;
}

The first rule establishes the default rendering for all activities to be an instance of IlvBasicActivityBar that is labeled with the ID of the activity. As explained in Scheduling Data, the default data model of the samples provided defines a numeric "completion" property for some of the activities. The style sheet uses the value of the completion property to select which of the subsequent rules will be cascaded and will further refine the rendering of the activity. If the completion value of the activity is greater than zero, the label will contain the activity ID and the completion value. The remaining rules set the background color of the activity bar based upon how the activity matches against several completion threshold levels.

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>

activity {
  class : 'ilog.views.gantt.graphic.renderer.IlvBasicActivityBar';
  background : powderblue;
  label      : '@id';
}
 
activity.critical {
  background : plum;
}

As shown in Table 3.6, Styling Activities With CSS, the Gantt CSS engine defines several activity pseudoclasses that you can use in your rule selectors. These 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  : @;
}

As shown in Table 3.6, the Gantt CSS engine provides two predefined functions you can use as part of an expression in your style sheet: formatDate and formatDuration.

formatDate(<SimpleDateFormat pattern>, <Date>)

toolTipText : '@|"Start: " + formatDate("MM/dd/yy",@startTime)';

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

formatDuration(<IlvDurationFormat constant>, <IlvDuration>)

toolTipText: '@|"Duration: " + formatDuration(LARGEST_UNIT_MEDIUM, @duration)';