In this post, I’ll show you how to customize the look of an Organization Chart item renderer. The item renderer is the flex component that represents a data item (i.e. the “box”).

You can customize the background of an item renderer by specifying a skin on the provided item renderers.

Here’s the comparison between the default skin and the skin we will have by the end of this post.

The rendering we aim for is a rounded rectangle filled by two gradients a light one at the top and a dark one at the bottom.

Now, it’s time to work!

Let’s extend the provided skin and override the drawBackground method.

public class OrgChartGradientBorder extends OrgChartItemRendererBorder {  

  override protected function drawBackground(color:uint,radius:Number,
                                                              width:Number, height:Number):void {
    …
  }

}

This method is where the magic happens.

The next thing to understand is that the name property of the skin describes the current state of the item renderer. So we will use different colors to render the background depending of this state.

var fillColors:Array;
var fillColors2:Array;

switch (name) {

  case "selectedSkin":

  case "selectedOverSkin":

    fillColors = [0xCEDBEA, 0x52637E];
    fillColors2 = [0x121417, 0x173146];
    break;

  case "overSkin":

  default:

    fillColors = [0xBABABA, 0x4F5050];
    fillColors2 = [0x0C0D0D, 0x282828];
    break;

}

Note that in practice you should expose style property to customize these colors. For simplicity sake, we just use here static colors.

The next step is to define the top gradient.

We must take into account the border thickness:

var bm:EdgeMetrics = borderMetrics;
var w:Number = width - (bm.left + bm.right);
var h:Number = (height - (bm.top + bm.bottom))/2;

Then, we define a vertical gradient that takes the entire width and half of the height.

var matrix:Matrix = verticalGradientMatrix(bm.left, bm.top, w, h);
graphics.beginGradientFill(GradientType.LINEAR, fillColors, [1.0, 1.0],
                                          [0, 0xFF], matrix);

Then comes the drawing itself with rounded corners or not. If the corners are rounded, as we are doing only the top half of the box, only the top left and top right corners are rounded here.

if (radius == 0 )  {
  graphics.drawRect(bm.left, bm.top, w, h);
} else {
  GraphicsUtil.drawRoundRectComplex(graphics,bm.left, bm.top, w, h,
                                                             radius, radius, 0, 0);
}

graphics.endFill();

The bottom part is exactly the same with different colors.

matrix = verticalGradientMatrix(bm.left, bm.top+h, w, h);
graphics.beginGradientFill(GradientType.LINEAR, fillColors2,
                                          [1.0, 1.0], [0, 0xFF], matrix)

if (radius == 0 )  {
  graphics.drawRect(bm.left, bm.top+h, w, h);
} else {
  GraphicsUtil.drawRoundRectComplex(graphics, bm.left, bm.top+h,
                                                             w, h, 0, 0, radius, radius);
}

graphics.endFill();

Finally, we will render the highlight differently than the default skin.
Let’s do a light blue halo at the bottom.

It’s a radial gradient where the center is at the bottom center of the item renderer.

if (name.toLowerCase().indexOf("over") != -1) {

  fillColors = [0xFF0000, 0x96E8FF, 0x2C3446];
  matrix = new Matrix();
  matrix.createGradientBox(w, 2*h, 0, 0, height-h/2);
  graphics.beginGradientFill(GradientType.RADIAL, fillColors,
                                            [1.0, 0.7, 0.5], [0, 127, 255], matrix);
  graphics.moveTo(radius, height-bm.bottom);
  graphics.curveTo(width/2, h, width-radius, height-bm.bottom);
  graphics.moveTo(radius, height-bm.bottom);
  graphics.endFill();
}

That’s done!

Here is how to use this skin in MXML:

<ilog:OrgChart width="100%" height="100%" linkRadius="10">
  <ilog:itemRenderer>
    <mx:Component>
      <ilog:OrgChartItemRenderer borderSkin="{OrgChartGradientBorder}"
                                                    color="#ffffff" />
    </mx:Component>
  </ilog:itemRenderer>
</ilog:OrgChart>

And here’s the result:

You can have a look at the full source code of the demo by downloading the Flex Builder project here.

Tags: ILOG Elixir, Org Chart, skin

Posted by Damien Garbarino in Flex, ILOG Elixir, Org Chart. 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.