the Flexnaut

Extensible List Item Renderers

2009-10-19T06:49:00.000-07:00

For all of list-based components (DataGrid, HorizontalList, List, Menu, TileList, and Tree) you can implement custom item renderers to override the default rendering of data. For simple cases, you can just extend a component which implement IDropInListItemRenderer. For more complex controls, especially where the item renderers need to have varying heights, I have discovered that this approach becomes complicated. I have often run into layout issues with complex item renderers when used in List and Tree components where they have extra space between the renderers or the renderers overlap. This post will present a general approach to resolving these issues by using what I call an Extensible Item Renderer.

The approach involves first extending the default item renderer class for the particular ListBase component being used. In this post I will show implementations for the List and Tree components. The following code is for what I call the ExtensibleListItemRenderer:

package
{
  import mx.controls.listClasses.ListBase;
  import mx.controls.listClasses.ListItemRenderer;
  import mx.core.IDeferredInstance;
  import mx.core.UIComponent;
  import mx.events.FlexEvent;

  public class ExtensibleListItemRenderer extends ListItemRenderer
  {
    //We use a deferred instance to cause component instantiation
    //to be deferred until it is needed
    [InstanceType("mx.core.UIComponent")]
    public var contents:IDeferredInstance; 
    
    public function ExtensibleListItemRenderer()
    {
      super();
      
      addEventListener(FlexEvent.INITIALIZE, handleInitialize, false, 0, true );
    }
    
    private function handleInitialize( evt:FlexEvent ):void
    {
      //On initialize, add the custom contents to the renderer
      if ( contents ) addChild( UIComponent(contents.getInstance()) );
    }
    
    override protected function createChildren():void
    {
      super.createChildren();
      
      //hide the default label
      label.visible = false;
    }
    
    override protected function measure():void
    {
      super.measure();
      
      //The height of the renderer is set to the height of the contents
      if ( contents ) measuredHeight = measuredMinHeight = UIComponent(contents.getInstance()).getExplicitOrMeasuredHeight();
    }
    
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
      super.updateDisplayList( unscaledWidth, unscaledHeight );
      
      if( super.data ) 
      {        
        if ( contents )
        {
          //Position the contents using the position of the label
          UIComponent(contents.getInstance()).x = label.x;
          UIComponent(contents.getInstance()).y = label.y;
          
          //TForces the contents to calculate height by setting the width
          UIComponent(contents.getInstance()).width = width - UIComponent(contents.getInstance()).x;

          //This sets the components actual size to the calculated width & height
          UIComponent(contents.getInstance()).setActualSize( UIComponent(contents.getInstance()).getExplicitOrMeasuredWidth(), UIComponent(contents.getInstance()).getExplicitOrMeasuredHeight() );

          //This resolves an (apparent) bug in the ListBase component
          //If the calculated height of the renderer doesn't match what gets passed to this 
          //method, we need to tell the Tree to re-layout the renderers
          if ( unscaledHeight != measuredHeight && name != "hiddenItem" )  callLater( ListBase(owner).invalidateList );
        }
      }
    }
  }
}

In measure(), we are setting the height of the renderer based on the height of the contents. In updateDisplayList(), we position the component, force it to compute its size, and then size it using the computed size. If you do these things your item renderer will mostly work right, but there seems to be a bug in ListBase when the renderer changes size, it does not re-layout the renderers and they can overlap each other. This is what that looks like:

Unable to initialize flash content

The last bit of code in updateDisplayList() fixes this, by detecting that the unscaledHeight passed to the method is different than the calculated height and calling invalidateList on the ListBase component. We need to use callLater() to make the layout happen on the next render cycle since we are calling it from updateDisplayList(). The ExtensibleTreeItemRenderer is almost identical to the List version, except that it extends the default TreeItemRenderer to provide the open/close controls:

package
{
  import mx.controls.listClasses.ListBase;
  import mx.controls.treeClasses.TreeItemRenderer;
  import mx.core.IDeferredInstance;
  import mx.core.UIComponent;
  import mx.events.FlexEvent;

  public class ExtensibleTreeItemRenderer extends TreeItemRenderer
  {
    //We use a deferred instance to cause component instantiation
    //to be deferred until it is needed
    [InstanceType("mx.core.UIComponent")]
    public var contents:IDeferredInstance;
    
    public function ExtensibleTreeItemRenderer()
    {
      super();
      
      //On initialize, add the custom contents to the renderer
      addEventListener(FlexEvent.INITIALIZE, handleInitialize, false, 0, true );
    }
    
    private function handleInitialize( evt:FlexEvent ):void
    {
      if ( contents ) addChild( UIComponent(contents.getInstance()) );
    }
    
    override protected function createChildren():void
    {
      super.createChildren();
      
      //hide the default label
      label.visible = false;
    }
    
    override protected function measure():void
    {
      super.measure();
      
      //The height of the renderer is set to the height of the contents
      if ( contents ) measuredHeight = measuredMinHeight = UIComponent(contents.getInstance()).getExplicitOrMeasuredHeight();
    }
    
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
      super.updateDisplayList( unscaledWidth, unscaledHeight );
      
      if( super.data ) 
      {
        if ( contents )
        {
          //Position the contents using the position of the label
          UIComponent(contents.getInstance()).x = label.x;
          UIComponent(contents.getInstance()).y = label.y;
          
          //TForces the contents to calculate height by setting the width
          UIComponent(contents.getInstance()).width = width - UIComponent(contents.getInstance()).x;

          //This sets the components actual size to the calculated width & height
          UIComponent(contents.getInstance()).setActualSize( UIComponent(contents.getInstance()).getExplicitOrMeasuredWidth(), UIComponent(contents.getInstance()).getExplicitOrMeasuredHeight() );
          
          //This resolves an (apparent) bug in the ListBase component
          //If the calculated height of the renderer doesn't match what gets passed to this 
          //method, we need to tell the Tree to re-layout the renderers
          if ( unscaledHeight != measuredHeight && name != "hiddenItem" )  callLater( ListBase(owner).invalidateList );
        }
      }
    }
  }
}

In both of these renderers we use a component template approach to make it simple to extend them using mxml.

We start by creating a simple item renderer in mxml which extends an HBox container which I call ActorRenderer:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:VBox>
    <mx:Image id="image" source="{data.image != null ? data.image : 'missing.jpg'}"/>
    <mx:Label id="name_label" fontWeight="bold" text="{data.name}"/>  
  </mx:VBox>
  <mx:Text htmlText="{data.bio}" width="{width - Math.max( image.width, name_label.width ) - 20}"/>
</mx:HBox>

The component consists of an image positioned on the left with a caption under it and a Text component on the right. For the example I use it display a photo of an actor with their name and biographical information. In order to get the Text component to wrap I explicitly set the width to an absolute value calculated from the width of the component.

I could drop this right into a List and it will mostly just work. My experience has been, though, that intermittently the List will not update the layout correctly due to the bug mentioned above. To get around it, we just wrap the ActorRenderer in the ExtensibleListItemRenderer:

<?xml version="1.0" encoding="utf-8"?>
<ExtensibleListItemRenderer xmlns="*" xmlns:mx="http://www.adobe.com/2006/mxml">
  <contents>
    <ActorRenderer data="{data}"/>
  </contents>
</ExtensibleListItemRenderer>

If we want to use our custom item renderer in a Tree, we wouldn't be able to just drop it directly into the Tree because we would then need to implement the item disclosure controls. We are pretty much forced to extend from the default TreeItemRenderer. Fortunately, by wrapping it inside of the ExtensibleTreeItemRenderer, it becomes super-simple to put the custom item renderer into a Tree:

<?xml version="1.0" encoding="utf-8"?>
<ExtensibleTreeItemRenderer xmlns="*" xmlns:mx="http://www.adobe.com/2006/mxml">
  <contents>
    <ActorRenderer data="{data}"/>
  </contents>
</ExtensibleTreeItemRenderer>

Here is the code for the example Application which displays the same set of data in a Tree and List:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <mx:Script>
    <![CDATA[    
    [Bindable] private var actors:Array = [ { name:'Leonard Nimoy', image:'nimoy.jpg', bio:'Leonard Simon Nimoy (pronounced /ˈniːmɔɪ/; born March 26, 1931) is an American actor, film director, poet, musician and photographer. He is famous for playing the character of Spock on the original Star Trek series, and he reprised the role in various movie and television sequels.<br><br><b>Source:</b> wikipedia.org',
                                              children : [ { name:'Adam Nimoy', image:null, bio:'Adam B. Nimoy (born August 9, 1956) is an American television director. Nimoy is the son of actor Leonard Nimoy and his first wife, actress Sandra Zober.' } ] },
                                            { name:'William Shatner', image:'shatner.jpg', bio:'William Alan Shatner (born March 22, 1931)[1] is a Canadian actor and novelist. He gained worldwide fame and became a cultural icon for his portrayal of Captain James T. Kirk, captain of the starship USS Enterprise, in the television series Star Trek from 1966 to 1969, Star Trek: The Animated Series and in seven of the subsequent Star Trek feature films. He has written a series of books chronicling his experiences playing Captain Kirk and being a part of Star Trek as well as several co-written novels set in the Star Trek universe. He has also authored a series of science fiction novels called TekWar that were adapted for television.<br><br><b>Source:</b> wikipedia.org' },
                                            { name:'DeForest Kelley', image:'kelley.jpg', bio:'Jackson DeForest Kelley (January 20, 1920 – June 11, 1999) was an American actor known for his iconic role Dr. Leonard "Bones" McCoy of the USS Enterprise in the television and film series Star Trek.<br><br><b>Source:</b> wikipedia.org' } ];
    ]]>
  </mx:Script>
  <mx:HBox width="100%" height="100%" horizontalGap="5" minWidth="0" minHeight="0">
    <mx:Panel title="Tree" width="100%" height="100%">
      <mx:Tree minHeight="0" minWidth="0" variableRowHeight="true" itemRenderer="ActorTreeItemRenderer" dataProvider="{actors}" width="100%" height="100%"
         folderClosedIcon="{null}" folderOpenIcon="{null}" defaultLeafIcon="{null}"/>      
    </mx:Panel>
    <mx:Panel title="List" width="100%" height="100%">
      <mx:List minHeight="0" minWidth="0" variableRowHeight="true" itemRenderer="ActorListItemRenderer" dataProvider="{actors}" width="100%" height="100%"/>
    </mx:Panel>
  </mx:HBox>
</mx:Application>

We populate the data provider with some example data, set variableRowHeight='true' for the Tree & List, and disable the icons on the Tree.

Here is the demo:

Unable to initialize flash content

Source is hosted on google code.

New & Improved TreeItemRenderer Example

2009-10-16T06:40:00.000-07:00

I have written two posts (here and here) on creating variable size item renderers for List based components that size correctly. The example for the TreeItemRenderer mostly works, but still has some issues that have been plaguing me for a while. I decided to spend some time trying to figure out what the problem really is and made significant progress that I wanted to share.

TreeRenderer Example Version 2

I have made some changes to the original TreeRendererExample that significantly improve its behavior. The example code is hosted on the Flexnaut googlecode site under the TreeRendererExample2 project.

Enhancement 1

The original custom renderer was a lot more complicated than it needed to be. I was adding a resize event listener to the tree (for each renderer) that set the Text component's width/height to NaN. The measure() override looked like this:

override protected function measure():void
  {
    super.measure();
    
    description.width = explicitWidth - super.label.x;
    measuredHeight += description.measuredHeight;
  }

Then in updateDisplayList I would set the height of the Text component to it's measuredHeight. In the new version, I don't set any resize listener on the Tree component and I don't do set any properties on the Text component. I just use the Text component's size to calculate the size of the renderer:

override protected function measure():void
  {
    super.measure();
    
    measuredHeight = measuredMinHeight = measuredHeight description.getExplicitOrMeasuredHeight();
  }

Then, in updateDisplayList, I do the following to size the Text component:

//This forces the Text component to calculate it's height
  description.width = width - description.x;

  //This sets the Text component to the calculated width & height
  description.setActualSize( description.getExplicitOrMeasuredWidth(), description.getExplicitOrMeasuredHeight() );

With these changes, everything almost works correctly. The item renderers all size correctly, but the problem is that the renderers seem to overlap each other now. This condition can be detected in the renderer updateDisplayList by comparing the unscaledHeight parameter to the measuredHeight parameter. It looks like there is a bug in ListBase which causes it to not detect changes in the height of the renderers. Fortunately, the fix is simply to add this line to updateDisplayList:

if ( unscaledHeight != measuredHeight ) callLater( ListBase(owner).invalidateList );

This causes the protected property itemsSizeChanged on ListBase to be set to true, and invalidates the display list. The callLater is necessary, because updateDisplayList can't be called while the current updateDisplayList is running.

With these changes, we now have a much simpler and functional TreeItemRenderer with a Text component. The following demonstrates the improved behavior:

Unable to initialize flash content

Original Broken Version - Scroll and click around to see broken behavior

Unable to initialize flash content

New Version - Scroll and click works as expected

Check out the source!

More ItemRenderer Woes

2009-04-14T07:22:00.000-07:00

Update: Ok, I am officially frustrated. It seemed like adding the validateNow() was working, but as I ran through more test cases, it definitely wasn't. The final solution that seems to work consistently is to NOT use a percentWidth on the Text component. You can bind the width of the Text component to the parent's width, and you get the benefit of setting an explicitWidth on the Text component which fixes the incorrect sizing problems and it fits properly in the parent container.

I have been struggling recently with getting a custom ItemRenderer in a List to display correctly. It basically consists of a small Image component used as an icon, a Text field used for a title to the right of the icon, and a Text field used as a description below the title. I arranged these on a Canvas and sized them using percent widths. When I scrolled the list, the sizes of the renderers would vary dramatically, sometimes only displaying the title, sometimes displaying with too much whitespace. I found what seems to be a solution on Kalen Gibbons blog. Basically, you need to get the Text fields validated before the size of the renderer is calculated. So, for each Text component, I am calling validateNow() on it in my commitProperties() method. This is a little different than Kalen's solution. When I called validateNow() on the renderer and not on the Text components, it did not fix the problem.

As an aside, in my attempts at fixing this issue, I re-implemented the renderer by extending mx.controls.listClasses.ListItemRenderer. When I did this, the Text components didn't display at all. The reason for this isn't totally clear, but I did discover part of the cause. The Text component, when you either set left/right constraints or a percentWidth (and don't set a height) the Text component does a special two pass calculation of the height. On the first pass the component will bypass measure() and wait until updateDisplayList() is called to get it's unscaledWidth. It then calls invalidateSize() which causes measure() to get called again and then uses the width obtained from updateDisplayList to calculate the height of the component. The problem is that when you add a Text component to the ListItemRenderer and specify the percent width, the updateDisplayList() for the Text component always gets called with a width = 0. I don't know why this is happening, but because of this it causes the 2 pass calculation to fail. So basically, don't use a Text component in ListItemRenderer or you will need to set it's size explicitly.

Transparent List

2008-07-11T10:28:00.000-07:00

I often run into situations where I want to use a List but I want to have the rollOver and selection highlights disabled. This often occurs when I want a completely transparent list. There is a style which controls whether the rollOver highlight is displayed, called useRollOver, but it doesn't disable the selection highlight. In addition, even though Tree extends List, the useRollOver style has no effect for the Tree component. Fortunately, due to a good api design, there is a simple solution. You just create a new component class which extends List:


package
{
  import mx.controls.List;
  import mx.controls.listClasses.IListItemRenderer;
  
  public class TransparentList extends List
  {
    override protected function createChildren():void
    {
      super.createChildren();
      
      setStyle( "backgroundAlpha", "0" );
      setStyle( "borderStyle", "none" );
    }
    
    override protected function drawItem( item:IListItemRenderer, 
                                          selected:Boolean=false, 
                                          highlighted:Boolean=false, 
                                          caret:Boolean=false, 
                                          transition:Boolean=false):void
    {
      super.drawItem(item, false, false, caret, transition);
    }
  }
}

In createChildren() set the border and background alpha styles. Then override the protected drawItem() function and always pass false to the selected and highlighted parameters of the parent function. You can do the same thing for the Tree component.

A Reusable Flex Hover Details Window

2008-06-18T12:36:00.000-07:00

Update: The source code for this is now hosted on googlecode.

An increasingly common feature in rich web interfaces is when hovering over some piece of information, a window pops up providing more details about that item. An example of this is in the Gmail interface. If you hover over a name in your chat list, you get a popup which displays more details about the person, such as their name, photo and email address. In this short tutorial, I will go over how to do something similar in Flex in a reusable way.

First we start with our simple demo Application.

<?xml version="1.0" encoding="utf-8"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">
  <mx:Script>
  <![CDATA[
    import mx.collections.ArrayCollection;
    [Bindable] 
    private var dataProvider:ArrayCollection = 
                  new ArrayCollection( [ { name: "Leonard Nimoy", image: "nimoy.jpg" }, 
                                         { name: "William Shatner", image: "shatner.jpg" }, 
                                         { name: "Deforest Kelley", image: "kelley.jpg" },] );
  ]]>
  </mx:Script>
  <mx:Panel title="Famous Actors: Hover Over For More Details">
    <mx:List dataProvider="{dataProvider}" 
                labelField="name" 
                itemRenderer="PersonRenderer" 
                width="100%"/>
  </mx:Panel>
  </mx:Application>

In this case we are just displaying a set of names in a List component. We create a dataProvider for the list which is a set of persons where each person has a name and image property. We specify the labelField for the List as the name property of a person. Next we create a simple ItemRenderer called PersonRenderer which is used by the List component to display the items.

<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
  <![CDATA[
    import mx.binding.utils.BindingUtils;

    override protected function createChildren():void
    {
      super.createChildren();

      //Instance the ImageHover object and attach it to
      //the item renderer
      var imageHover:ImageHover = new ImageHover();
      imageHover.parentComponent = this;

      //Create a binding between the image property of the data object
      //and the source property of the ImageHover so it knows which image to display
      BindingUtils.bindProperty( imageHover, "source", this, ["data","image"] );

      //Create a binding between the name property of the data object
      //and the title property of the ImageHover so it knows which title to display
      BindingUtils.bindProperty( imageHover, "title", this, ["data","name"] );        
    }
  ]]>
  </mx:Script>
  </mx:Label>

This renderer is based on the Label component. Since it implements IDataRenderer we can use it almost 'as is' in the List. We override createChildren() where we attach our ImageHover component to the renderer. This component is what actually displays the details window when we hover over the renderer. There are only three properties we set on this component, the title and the source, which we bind to the name and image properties of our person, and the parentComponent which is the component that we want the hover detail window to appear over. Let's look at the ImageHover component to see how it works:

<HoverComponent xmlns="*" xmlns:mx="http://www.adobe.com/2006/mxml">
  <!-- Simple extension of the HoverComponent to display
    an image specified by the source property with a title -->

  <mx:Script>
  <![CDATA[
    [Bindable] public var source:String;
    [Bindable] public var title:String;
  ]]>
  </mx:Script>

  <mx:Panel paddingBottom="5"
               paddingLeft="5"
               paddingTop="5"
               paddingRight="5"
               backgroundAlpha="1"
               title="{title}">
    <mx:Image id="image" source="{source}"/>
  </mx:Panel>
  </HoverComponent>

This component is very simple and only consists of a Panel with a title and an Image component inside the Panel. The key thing is that it extends HoverComponent, which provides the hover capabilities. You can modify the ImageHover to do just about anything as long as it extends the HoverComponent. So, finally let's look at the HoverComponent class:

package
  {
    import flash.events.MouseEvent;
    import flash.events.TimerEvent;
    import flash.geom.Point;
    import flash.utils.Timer;

    import mx.containers.Canvas;
    import mx.core.UIComponent;
    import mx.managers.PopUpManager;

    public class HoverComponent extends Canvas
    {
      public var delay:Number = 1000;
      private var _parentComponent:UIComponent;

      private var timer:Timer;
      private var popped:Boolean = false;

      public function set parentComponent( parentComponent:UIComponent ):void
      {
        _parentComponent = parentComponent;
        if ( _parentComponent != null )
        {
          var thisComponent:UIComponent = this;

          //Detects mouse overs and starts a timer to display the hover
          parentComponent.addEventListener( MouseEvent.MOUSE_OVER, function( evt:MouseEvent ):void
          {
            //Initialize the timer to trigger one time after delay millis
            timer = new Timer( delay, 1 );

            //Wait for the timer to complete
            timer.addEventListener(TimerEvent.TIMER_COMPLETE, function( tevt:TimerEvent ):void
            {
              //move to a position relative to the mouse cursor
              thisComponent.move( evt.stageX + 20, evt.stageY + 20 );

              //Popup the hover component
              PopUpManager.addPopUp( thisComponent, parentComponent );

              //Set a flag so we know that a popup actually occurred
              popped = true;
            });

            //start the timer
            timer.start();
          });

          parentComponent.addEventListener( MouseEvent.MOUSE_OUT, function( evt:MouseEvent ):void
          {
            //If the timer exists we stop it
            if ( timer )
            {
              timer.stop();
              timer = null;
            }

            //If we popped up, remove the popup
            if ( popped )
            {
              PopUpManager.removePopUp( thisComponent );
              popped = false;
            }
          });
        }
      }

      public function get parentComponent():UIComponent
      {
        return _parentComponent;
      }  
    }
  }

The HoverComponent class extends the Canvas component. It adds a delay property, which is the amount of time in milliseconds that you need to hover over an item before the window displays. It also adds the parentComponent property which is the item that you want the hover to appear over. The default delay is 1 second. When you set the parentComponent, a mouseOver and mouseOut listener get added to the parentComponent. When you mouseOver, a timer gets started. When the timer completes, the hover component gets positioned and uses PopUpManager to display itself. When you mouseOut, the timer will get cancelled if it is not completed, and the hover window is removed, if it was displayed.

So with the HoverComponent class we have a simple and re-usable way to create custom hover detail windows. Just create your window by extending the HoverComponent and attach it to the component you want it to appear over like we did in the PersonRenderer.

Here is a demo and the source code.

Demo:

Unable to initialize flash content

Object Leaks & The Dangers of ArrayCollection.removeItemAt

2008-03-21T07:25:00.000-07:00

I have been using the new Profiler in Flex Builder 3 to fix some performance issues in my flex apps and discovered a bit of an anti-pattern in several places in my code. I like to use object pools to re-use my custom renderer objects. To do this I first have my renderers implement the IFactory interface. Which is basically just adding this function:

public function newInstance():*

In the class that I will be using the renderers, I create some code to manage the pool of renderers, which is basically just two methods:

protected function getRenderer():MyRenderer
protected function freeRenderers():void

Calling getRenderer() will check the pool of "free" renderers and return one if available, or if not, create a new one and add it tool the pool of renderers currently in use. The freeRenderers() method just takes all of the in-use renderers and moves them to the free pool. The discovered my anti-pattern here in the freeRenderers() method:

for ( var I:int i = 0; i < usedRenderers.length; i++ )
{
  freeRenderers.addItem( usedRenderers.removeItemAt(i) );
}

This code will fail to copy all of the used renderers from the in-use pool to the free pool. The reason is that as we remove items, we are changing the length of the collection that we are indexing across. The proper way to do this is:

while ( usedRenderers.length > 0 )
{
  freeRenderers.addItem( usedRenderers.removeItemAt( 0 ) );
}

There is another variation of this issue which needs to be handled differently. If you are only wanting to transfer some of the items out of the collection, you might do something like this:

var key:String = "foo";
for ( var i:int i = 0; i < collection.length; i++ )
{
  if ( MyObject(collection.getItemAt( i )).id == key )
    collection.removeItemAt( i );
}

Doing this will cause problems similar to the first example. This is basically like a ConcurrentModificationException that you might get in Java. The problem is that in Flex's ArrayCollection you don't get any exception when you do this, so it is real easy to think you are doing the right thing when you are not. Here is one possible fix for this:

var key:String = "foo";
var removes:ArrayCollection = new ArrayCollection();
for ( var i:int = 0; i < collection.length; i++ )
{
  if ( MyObject(collection.getItemAt( i )).id == key )
    removes.addItem( collection.getItemAt( i ) );
}

for ( i = 0; i < removes.length; i++ )
{
  collection.removeItemAt( collection.getItemIndex( removes.getItemAt( i ) ) );
}

This is pretty simple but it is definitely something worth remembering

What's Missing In Flex Builder 3

2008-02-28T14:47:00.001-08:00

I have been using a beta version of the new Flex Builder 3 for a while now. I am pretty happy with the new features added to it, but there is something missing that I would really expect to be there. There is no code formatting functionality for the ActionScript 3 or MXML editors. For a $249 IDE plugin, I am amazed by this.

Reformatting your code by hand is an extremely tedious and error prone task. It also seems that with FB I am especially prone to writing badly formatted code. I did a google search for ActionScript code formatter and basically came up with very little. There is a PHP cut and paste formatter hosted on Senocular, but it isn't really usable for reformatting code in the IDE. I did learn today that IntelliJ IDEA has just added Flex functionality, including code formatting and a nice set of refactorings (Copy, Move, Safe delete, Introduce variable, Migrate). I think I will have to check it out.

Adding the mx.controls.Text component to a custom TreeItemRenderer

2007-11-19T04:53:00.000-08:00

Update: This post has a much improved example of how to do this properly. I highly recommend going there now. :)

I recently had to build a custom TreeItemRenderer which displayed an icon and a label. I found Mac Martine's example to be quite helpful in implementing it successfully. More recently I needed to extend this work to add a mx.controls.Text component to the renderer, to display a variable length description under the label. I initially believed that this would be a simple task, but it turns out to be quite a challenge.

My first strategy to accomplish this was to implement a new TreeItemRenderer from scratch without extending mx.controls.treeClasses.TreeItemRenderer. I wanted to do this because I believed I could very quickly lay it out in MXML. The problem is, that the default TreeItemRenderer implements the expand/collapse controls for the item and does so by accessing a property (isOpening) and method (dispatchTreeEvent) which are both scoped mx_internal. So without some extra gymnastics, I am better off extending the default TreeItemRenderer.

I reverted back to my modified implementation of Mac Martine's custom renderer. I had to modify the existing updateDisplayList() method override and implement the measure() method override. In updateDisplayList(), I basically just need to position the Text component under the existing Label component. In measure(), I need to make the renderer taller to accomodate the height of the additional Text component. The problem is that the Text component renderering code is complex and a seemingly inconsistent in how it behaves. If you don't set the width and height properties in just the right order, it won't render correctly. After several hours of trial and error, I was able to get it to behave properly. Here is basically what I did.

1) In measure(), I set the width property of the Text component to the width of the item renderer less the x position of the label. Then I read the measuredHeight property of the Text component which is calculated based on the length of the text/htmlText property of the component and the explicit width of the component, and I add that to the measuredHeight of my renderer.

2) In updateDisplayList, after positioning all of my components, I explicitly set the height of the Text component to the measuredHeight property of the Text component. This seems like an odd thing to have to do, but if I don't do it, the text doesn't display at all.

If you do these things, your Text will display and your renderer will be sized properly. There is one other important thing to do if your renderers are going to be different sizes, which is to set the variableRowHeight property on the Tree to true.

Additionally, if your Tree component will need to be resizable, there is something else that needs to be done to get the Text component to resize correctly. When the width and height of a Text component are both explicitly set, the component doesn't call measure() anymore, so it won't resize. To fix this, we need to set the explicitWidth & explicitHeight on the Text component to NaN. So we add a listener to the parent Tree to listen for ResizeEvents, and when they occur, set the explicitHeight and explicitWidth to NaN. This will then cause Text component to resize properly.

I have created an example application with source code (right click the example and select View Source). It consists of an MXML application and a custom renderer. Hopefully this will save you so some time.