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.

• An OrgChart item renderer has the constraint to have a fixed height for any data it represents.
• The OrgChart will measure the item renderer that represents the root data item and will affect its height to all the item renderers.
• The size of an item renderer is the same for every level of detail.
• The final width of an item renderer is the width of the widest item renderer of a branch level.
• The size of each item renderer is computed by the layout and can not be changed afterwards.

  <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:

• Sub components : An item renderer is usually an aggregation of other components like Image, Label etc…
• Measure: The item renderer must have a correct natural size (measuredWidth, measuredHeight properties).
• Layout: The item renderer has to layout its sub components. This could be either programmatically or using layout controls.
• Level of details (LOD): An item renderer should have different levels of details for readability and performance reasons.
• Style: An item renderer can expose styling properties to customize its rendering.
• Skin: An item renderer can delegate some rendering parts to skin components to allow deeper customization.

In this article, we will start from a base class that extends the Canvas class.

Let’s review the main aspects and describe what will be done in this custom item renderer:

• Sub components: We will use some labels and an image.
• Measure: the base class is a container and we will use layout controls for the sub components.
• Layout: As said in previous point, we will use layout containers.
• LOD: The base class provides API to specify which sub component is visible at a specific level.
• Style: For simplicity sake, we will not expose new style properties.
• Skin: As the base class is a Canvas, you can set the borderSkin property to specify a different background and/or border.

Our item renderer will be made of:

• At level 0: The background only.
• At level 1: The centered name of the person.
• At level 2: A picture at the left side and at the right side his/her name, position and location.

Let’s start by the MXML part of our renderer:

<?xml version="1.0" encoding="utf-8"?>

<OrgChartItemRendererBase xmlns="*" xmlns:mx="http://www.adobe.com/2006/mxml" >

  <!-- the first layer with the name of the person centered -->
  <mx:VBox id="layer1" width="100%" height="100%"
           horizontalAlign="center" verticalAlign="middle"
           paddingLeft="10" paddingRight="10" paddingTop="6"
           paddingBottom="6">
    <mx:Label id="nameLabel" truncateToFit="false" fontSize="20"
                  fontFamily="MyFont" fontGridFitType="none" fontAntiAliasType="advanced" />
  </mx:VBox>

  <!-- the second layer with the picture on the left and labels at the right.-->
  <mx:HBox id="layer2" verticalAlign="middle" paddingLeft="10"
                paddingRight="10" paddingTop="6" paddingBottom="6">

    <mx:Image id="image" width="50" height="70"/>

    <mx:VBox verticalAlign="middle">
      <mx:Label id="nameLabel2" truncateToFit="false" fontFamily="MyFont"
		   fontGridFitType="none" fontAntiAliasType="advanced"/>
      <mx:Label id="positionLabel" truncateToFit="false" fontFamily="MyFont"
		   fontGridFitType="none" fontAntiAliasType="advanced"/>
      <mx:Label id="locationLabel" truncateToFit="false" fontFamily="MyFont"
                   fontGridFitType="none" fontAntiAliasType="advanced"/>
    </mx:VBox>

  </mx:HBox>

</OrgChartItemRendererBase>

Note the use of an embedded font named “MyFont” to have a better rendering and smooth zooming animation.

Then we add a script tag and override some methods.

Firstly, let’s override the configureLevelOfDetails method of the base class to define which sub component is visible at which level of detail.

override protected function configureLevelOfDetails():void {
  setLevelsOfDetails(layer1, [1]);
  setLevelsOfDetails(layer2, [2]);
}

Then let’s change the background color depending on the selection and highlight state of the data item.

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
  super.updateDisplayList(unscaledHeight, unscaledWidth);

  var theData:OrgChartItem = data as OrgChartItem;

  if (theData != null) {

    var isHightlighted:Boolean = theData.orgChart.isItemHighlighted(theData);
    var isSelected:Boolean = theData.orgChart.isItemSelected(theData);

    var color:uint;
    if (isHightlighted) {
      color = isSelected ? 0x8695FF: 0xFEFBBA;
    } else {
      color = isSelected ? 0x637DFF: 0xEAF1F6;
    }
    setStyle("backgroundColor", color);
  }
}

Here is the result:

The complete flex project can downloaded here.

Now that you know the secrets of item renderers, I let you do the following item renderer as exercise

Tags: item renderer

Posted by Damien Garbarino in 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.