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).
This picture shows the default out-of-the-box glossy skin on the left and the custom discrete skin covered by this article on the right.
> START DEMO <
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:
- Components with a defined number of required and/or optional parts in their skins,
- Components with an arbitrary number of item renderers created based on dynamic data.
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
GaugeElementBase in its
elements Vector. Each
GaugeElementBase has a
partId property used to associate the
GaugeElementBase and its skin part in the MXML skin of the gauge component.
The following illustration recaps the "partId" mechanism.
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 RectangularGaugeMarker in our case) is responsible for moving/resizing its skin part according to its associated scale.
Question. How do I write rectangular gauge skins which support resizing with no deformation?
Answer. There are two main approaches to write resizable skins:
- Use graphic elements such as
<s:Ellipse/> with constrained definition (ie. top, left, right, bottom, width and height in expressed as percentage). The
com.ibm.ilog.elixir.skins.spark package contains skins of this type.
- Use sub components in you skin which leverage the scale-9 capabilities of FXG. Note that there are some limitations to scale-9 in FXG, see this page for a detailed description of these limitations. The
com.ibm.ilog.elixir.skins.glossy package contains skins of this type.
It's time to see how to build this discrete marker bar using a mask. The idea is to associate to the
<s:Group/> which defines a mask. To do that, the
<s:Group.id/> properties have to be the same. The default value is
<s:Group top="0" bottom="0">
<s:Group top="0" left="0" right="0" bottom="0" id="markerPart">
The underlying marker bar filled with a gradient green/orange/red
<s:Rect id="bar" width="29" 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
DiscreteMask class, which draws discrete segments. These segments size and shape are controlled by
Click here to start the sample, and start playing with the VU meter, you will need a http mp3 URL, Google is your friend... :)
> START DEMO <