A recurrent use case when using timelines is to colorize some ranges in the background to represent for example an era, a king's reign or even a quarter. By color code the background, it' easy to see that a given event occurs during a particular range.
We will how to use the API provided and the notion of skinning of the new Spark components to build this feature.
The idea is to develop a component that will draw rectangles using as input a list of ranges.
The first problem is to be able to convert the start and end values into positions in pixels. This is possible by using the TimelineAxisBase class API (see getPosition() method), the implementation class is TimeAxis (when values are Date objects) or NumericAxis (when number are managed).
The second problem is to update the drawing when the timeline is scrolled or zoomed. Again the axis is the answer. It dispatches events when the timeline visible range is changed.
So our class takes the axis as property and also takes a vector of FilledRange. The FilledRange class defines a range: start, end and fill. A bit of code later and we have our component (source is available on the demo; right click -> View Source menu item).
Usage in Timeline skins
Now we need to use this component in the timeline itself. It needs to be in front of the background but behind the grid and the events.
This is where the Spark architecture shows its strength. A timeline is made of two timeline bands (main band and overview band). The band skin is defining the look of the band using FXG and the sub components that are composing the band (grid, axis, data group etc.). So we will create a custom skin of these bands to customize them.
Using Flash Builder 4, it's pretty simple:
The skins are available in the <INS
In the skins, it's just fine to put the component declaration after the 'background' rectangle and before the 'grid' component to be at the desired location in the display list.
This is shown in the following skin excerpt:
[...] <!--- @private --> <s:Rect width="100%" height="100%" id="background"> <s:fill> <!--- @private --> <s:SolidColor color="0x000000" id="bgFill"/> </s:fill> </s:Rect> <comTo use the custom skins instead of the default ones in the main application, several options are available, like using styling:
<fx:Style> @namespace ibm "htt
As a sample is worth a thousand words, you can run the sample by clicking the following link: Launch sample
To view the source, right click on the sample and select "View source" menu item.
Comments (7) Visits (6916)
As Adobe Flex 4 (on which is based IBM ILOG Elixir 3.0 beta) requires Flash Player 10, Adobe had the good idea to leverage the Flash Player 10 3D API and made part of it available through some properties on the core
Actually doing so is just a few properties on the components. So let's have a look at it.
By default the IBM ILOG Elixir Timeline is created as follows:
And will render front facing (click on the image to get the live example):
As any standard Flex component you can use 3D rotation on the Timeline as the corresponding properties are available on the
Note that in addition to
Finally for the event renders in the Timeline to be easily readable we want them to be front facing and not subject to perspective, that's why on the
Using this the result is now the following (click on the image to get the live example):
This same strategy can be applied to any Flex standard component like Spark Button or any IBM ILOG Elixir component. However this is not always as meaningful as for the Timeline so don't forget to apply this wisely