As you may know Adobe has released on its open-source web site the first nightly builds of Flex 4 aka Gumbo release. You can download them here. If you want to give it a try, go ahead, but carefully read the instructions and be cautious as these are very early builds.

One of the nice thing that Adobe has already introduced in these early builds is the FXG extension to MXML that allows you to define in MXML the graphical representation of an object instead of relying on external (SWF, rasters…) assets or on programmatic ActionScript drawings. This is pretty handy because in a few lines of FXG you are able to draw something that would have required much less flexible code to be written in Flex 3.

I couldn’t resist to give it a try, and defining the graphical representation of an ILOG Elixir Gauge using Gumbo FXG. ILOG Elixir Gauges being Flex 3 based I was a bit anxious on the ability to mix FXG with them, but it actually ended up being quite simple. After setting up a Flex Builder project for Gumbo and Flash Player 10 (see here), I added ILOG Elixir SWCs to the library path and was able to start coding.

As it was my first try, I wanted to start with the simplest example possible. So I decided to just draw the background of an horizontal gauge in FXG.

For that I first created a skeleton of Gumbo application in a main.mxml file with an simple gauge, emptied of any pre-existing background elements:

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://ns.adobe.com/mxml/2009"
                    xmlns:ilog="http://www.ilog.com/2007/ilog/flex">
  <ilog:SimpleHorizontalGauge showTrack="false" editable="true" value="33"
     minimum="0" maximum="100" backgroundElements="[]"/>
</Application>

The second step was to create a GaugeBackgroundSkin.mxml file that contains the background skin of my gauge in FXG:

<?xml version="1.0" encoding="utf-8"?>
<Group xmlns="http://ns.adobe.com/mxml/2009"
             xmlns:ns="library:adobe/flex/gumbo">
  <Rect width="480" height="100" radiusX="7" radiusY="7">
    <filters>
      <ns:DropShadowFilter/>
    </filters>
    <fill>
    	<SolidColor color="0x0000aa"/>
    </fill>
    <stroke>
    	<SolidColorStroke color="0xaa0000" weight="3"/>
    </stroke>
  </Rect>
</Group>

You can note several things:

• I have used a new class named Group to group my drawings. This is a specific container in charge of managing FXG content. A more specialized subclass called Skin exist but I didn’t need it here.
• I have used a Rect object to draw a round rectangle, however you have many other tags available such as the ability to draw lines (LineSegment) and curve segments (CubicBezierSegment).
• The Stroke class is replaced by SolidColorStroke which is more consistent with the fill version.
• The FXG tags are in a new namespace: http://ns.adobe.com/mxml/2009 different from Flex 3 namespace.
• Probably due to a bug, I was not able to use the ShadowDropFilter in the above namespace so I had to use the library:adobe/flex/gumbo namespace.

Finally I just had to set the backgroundSkin style property of my gauge to the GaugeBackgroundSkin FXG content:

  <ilog:SimpleHorizontalGauge showTrack="false" editable="true" value="33"
         minimum="0" maximum="100" backgroundElements="[]"
  	 backgroundSkin="GaugeBackgroundSkin"/>

And that was it! You can see the result below, the blueish background with some drop shadow comes from FXG:

(you can also note that the FXG round rectangle apparently suffers from some glitches in the corners)

Of course it is not yet too impressive but you can see how easy it is to use FXG for customizing your components. Next steps would be to use it for rendering the value marker of the gauge and then the ticks of the scale. All of this should be possible as the mechanism would be the same as for the background.

If you want to give it a try and experience ILOG Elixir with Gumbo, you can find the Flex Builder project corresponding to this investigation here. This has been tested with Flex 4.0.0.2514 build. As I said Flex 4 is still very early stage, so I don’t promise this project will still work in future builds

In summary, even with Flex 3 aka Halo components such as ILOG Elixir ones, you can perfectly leverage FXG tags when working with Flex 4. Of course longer term components should be migrated to Gumbo model to fully benefit from Flex 4 features.

Tags: custom gauge, fxg, gumbo, skin

Posted by Christophe Jolif in Flex, Flex SDK, Gauges and Dials, ILOG Elixir. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.