skip to main content
Gantt > Programmer's documentation > Developing with the JViews Gantt SDK > Styling > The resource data CSS example
 
The resource data CSS example
Describes how to run and customize this example application.
*Running the Example
*Explains where you find the source code for the Resource Data CSS sample and how to run it.
*Scheduling data
*Describes the classes used to handle the in-memory data used for this sample.
*Customizing a Resource Data style sheet
*Describes the contents of a simple style sheet and explains how it customizes a Resource Data chart.
*Two kinds of rules
*Explains the two kinds of rules used in the sample style sheet.
Running the Example
The Resource Data CSS sample is provided with JViews Gantt to show how you can use CSS to customize the appearance of your chart. This sample appears as Load Chart Rendering (CSS) in the sample summary page found in:
<installdir>/jviews-gantt/samples
The files and source code of the Resource Data CSS sample can be found in the directory:
<installdir>/jviews-gantt/samples/cssResourceData
To run the sample:
1. Ensure that the Ant utility is properly configured. If not, read Starting the samples for instructions on how to configure Ant for JViews Gantt.
2. Go to the directory where the sample is installed and type:
ant run
Scheduling data
The Resource Data CSS sample uses an in-memory data model that is created by the class:
<installdir>/jviews-gantt/samples/cssResourceData/src/shared/data/SimpleEngineeringProject.java
The SimpleEngineeringProject class implements a Gantt data model that simulates the scheduling of a typical engineering project. The Resource Data CSS sample instantiates the data model with factories that it uses to populate itself with instances of IlvGeneralActivity, IlvGeneralResource, IlvGeneralConstraint, and IlvGeneralReservation. As mentioned in The Gantt and Schedule CSS examples, although you can apply styling to any Gantt data model implementation, you can only reference user-defined properties in your style sheets if your data model objects implement the IlvUserPropertyHolder interface. The general implementations provided in the ilog.views.gantt.model.general package implement this interface.
Customizing a Resource Data style sheet
To customize a Resource Data chart:
1. Create an empty CSS file in the data directory of the Resource Data CSS sample. The file must have a .css extension:
<installdir>/samples/cssResourceData/data/my-first-stylesheet.css
2. Run the Resource Data CSS sample (see Running the Example) and your new style sheet will appear in the list of available style sheets. The Resource Data CSS sample makes all the style sheets available in the cssResourceData/data directory.
3. While the Resource Data CSS sample is running, load the empty CSS file into the text editor of your choice.
4. Every time you edit the CSS file in your text editor, save your changes.
You can then test the changes you have made by switching to the Resource Data CSS sample and reapplying the style sheet to the chart. Reselect your style sheet from the list of available style sheets.
5. In the CSS file, first specify some properties of the Resource Data chart:
chart {
  opaque : true;
  background : lemonchiffon;
  headerText : "My Chart";
}
This sets the background color of the chart and adds a header centered above it. The chart is transparent by default, so you must explicitly set its opaque property to true in order for the background color to display.
6. Add a CSS rule so that the time scale is transparent and the chart background color shows through:
#timeScale {
  opaque : false;
}
7. Add some CSS rules to give the plot area background a gradient fill and provide some insets surrounding the plot area:
chartArea {
  plotStyle : @#plotStyle;
  border : @#emptyBorder;
}
Subobject#plotStyle {
  class : 'ilog.views.chart.IlvStyle(strokePaint, fillPaint)';
  strokePaint : black;
  fillPaint : 'khaki\\lightyellow\\linen';
}
Subobject#emptyBorder {
  class : 'javax.swing.border.EmptyBorder(borderInsets)';
  borderInsets : 6,6,6,6;
}
The following figure shows how the Resource Data chart looks with this style sheet.
8.
9. Finally, style the charts data series by writing additional CSS rules:
series {
   lineWidth : 2.0;
}
series[name="Bob Robertson"] {
   color1 : "goldenrod";
}
series[name="Michael Smith"] {
   color1 : "mediumturquoise";
}
The following figure shows how the Resource Data chart looks now with the completed style sheet.
10.
Two kinds of rules
From the previous style sheet sample, you can distinguish two sets of CSS rules:
*Rules that customize the appearance of the chart and its constituent GUI components. These rules are applied to the properties of the chart and its child components.
*For IlvGanttChart and IlvScheduleChart objects, the child components are the table, the time scale, and the Gantt sheet. These rules are described in Styling Gantt and Schedule chart components.
*For the IlvResourceDataChart objects, the child components are the chart area, the legend, the scales, and the grids. These rules are described in Styling Resource Data chart components.
*Rules that control how Gantt data model entities, such as activities, constraints, and reservations, are rendered in the Gantt sheet of the IlvGanttChart and IlvScheduleChart, and are rendered as data series of the IlvResourceDataChart. These rules are described in Styling Gantt chart and Schedule chart data.

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