If you are trying to use IBM ILOG Elixir with a Flex 4 build from Adobe Open Source, you might have noticed that recent builds are breaking our components. Basically most components will get dark colors and things that. Even if we did not officially support Flex 4 with Elixir 2.0 everything was actually working fine (we even already had samples about using Elixir with Flex 4 on the very early builds that were working perfectly) until the new decision from Adobe to drop the Fx Prefix and introduce more namespaces and especially dealing with them in CSS.
This CSS namespace scoping is actually the thing that is breaking our components. Indeed as we do not use that as we are Flex 3 components, the compiler is not anymore matching the default styling rules against our components. Fortunately Matt provided us with a simple workaround. You can just use the compatibility flag in the compiler to make sure it behaves correctly. Basically add:
either to the command line compiler or in Flex Builder "Additional compiler arguments" field.
That said, it allows you to use IBM ILOG Elixir in Flex 4, however there is a drawback, it then prevents you to use new stuff added to the compiler in 4.0 like new bi-directional binding.
Let us know if you find more issues with Flex 4, that would help us improving future releases with respect to new Flex version compatibility!
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"?>
The second step was to create a Gaug
<?xml version="1.0" encoding="utf-8"?>
You can note several things:
Finally I just had to set the
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 18.104.22.1684 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.