Comments (2) Visits (7709)
The new Spark gauges module available in IBM ILOG Elixir 3.0 lets you customize the look and feel of your gauge by writing your own skin in FXG and MXML graphics.
In this blog post, we will focus on the skinning of rectangular gauges with a bar marker (like a progress bar).
Let's start with a quick and short Q&A on gauges skinning.
Question. GaugeBase defines only one skin part (titleDisplay). Where are skin parts for scales, markers and tracks?
Answer. The Spark component model provides two types of components:
A gauge component is neither fitting exactly -1- nor -2-. Indeed a generic gauge in a framework does have a skin like in -1- defined by the end user, and does have an arbitrary number of parts (scales, markers, tracks) like in -2- but there are not created based on dynamic data, there are created when skinning the gauge.
In order to solve this, we have implemented a specific mechanism which lets you define "dynamic skin parts": A gauge (which inherits from
The following illustration recaps the "partId" mechanism.
Question. What happens to the skin when setting the value of the gauge?
Answer. When you set the value of a gauge, the marker class (a Rect
Question. How do I write rectangular gauge skins which support resizing with no deformation?
Answer. There are two main approaches to write resizable skins:
It's time to see how to build this discrete marker bar using a mask. The idea is to associate to the
<s:Group top="0" bottom="0">
When the value of the gauge changes, the mask is resized and makes the background rectangle partially visible.
To define the mask, we use the
Click here to start the sample, and start playing with the VU meter, you will need a http mp3 URL, Google is your friend... :)
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.
And of course don't forget for any question about the product that you can reach us is through our forum on developerworks.
I think this could be of interest for other customers so I decided to improve the sample I provided on this forum and post it on this blog.
In its initial post Tucsonjhall is mentioning a nice implementation of marching ants selection marquee: http
I added this component to the sample. Another improvement is that the renderer bounds are used instead start/end time to determine if an item is selected, ie. the item renderer must be entirely in the selection rectangle to be selected.
To use the sample, just click in the background of the calendar sheet while maintaining the Ctrl key and drag the selection. The Ctrl modifier is used to keep the time slot based selection, but you can disable it (all
The selected items are displayed in real time.
The source code is available here and you will need the Marc
Of course more improvements can be added like auto-scrolling for example but I think it's already quite nice.