MXML graphics Item renderer
The OrgChart is a component that is present since version 1.0. And even if it's still a halo component, it can use MXML graphics to render the item renderers.
The following sample shows this item renderer in action (right-click -> "View Source" to download code):
Have a look at the sources, you will notices two main classes:
In IBM ILOG Elixir 3.0, new interesting features have been added:
It is now built in the component. At contrary to a previous blog post there is no need for a filter, this all managed internally. By default all the node are open (same behavior as previous releases), but you can select the nodes to be opened at initial time as shown on this code sample:
<fx:Script> <![CDATA[ import mx.c
The default item renderers now have a dedicated button to expand or collapse it.
The operation can be animated using the item
The stroke (color, weight, etc.) of the link that associates two nodes can now be specified at the node level using the linkStrokeFunction property.
Another property (lin
The nice thing with Flex UI framework is that as soon as you comply with its paradigms you can very easily integrate pieces of components coming from various origins. I've just tried to style ILOG Elixir TaskChart with Degrafa by replacing regular TaskChart renderers (both tasks and constraints) based on Flex/Flash APIs by custom renderers build on top of Degrafa graphics framework and it was just as easy as setting two properties on the TaskChart.
You can see below the result of this experiment, all tasks and constraints are drawn using Degrafa. You will notice that constraints are using dashed lines that are provided through the decorator pattern of the Degrafa framework. Having dashed lines drawn is a common requirement in such displays, so you finally have an easy solution for this by leveraging Degrafa in ILOG Elixir components.As Degrafa is a declarative graphics framework, you can define the rendering of your tasks & constraints inline in your ILOG Elixir application as shown below:
In a similar manner this older post shows how to use Gumbo (Flex 4) FXG to customize an ILOG Elixir gauge. Customizing ILOG Elixir Gauge with Degrafa is easily doable too, I'll try to come up with another post on this subject later on. There is still a little detail I need to sort out about a shifted drawing that occurs with Degrafa in some cases and that looks like a Degrafa bug to me. Stay tuned!
The default item renderers are designed to answer most of the usual use cases. They can extended to add fields (see documentation).
But sometimes we want a completely different rendering or we may reach some limitations of default item renderers.
In this case, the solution is to create custom item renderer.
First of all let's elaborate on how these item renderers are used by the OrgChart layout.
<p name="root"> <p name="p1"/> <p name="p2"/> <p name="p3"/> </p>
If the item renderers that represent p1, p2 and p3 are respectively 100, 200, and 100 pixels wide, all the item renderers width will be set to 200px.
As you have understood, it's very important to return a correct measured width and a constant height.
Now, let's concentrate on the main subject.
Here are the main apects of an item renderer:
In this article, we will start from a base class that extends the
Let's review the main aspects and describe what will be done in this custom item renderer:
Our item renderer will be made of:
Let's start by the MXML part of our renderer:
<?xml version="1.0" encoding="utf-8"?> <Org
Note the use of an embedded font named "MyFont" to have a better rendering and smooth zooming animation.
Then we add a
Firstly, let's override the
override protected function conf
override protected function upda
Here is the result:here.
Now that you know the secrets of item renderers, I let you do the following item renderer as exercise ;)