Archive for December, 2008|Monthly archive page

Reusable Custom HeaderRenderer for AdvancedDataGrid control

Problem Statement:

Create a custom headerRender for the AdvancedDataGrid column with a checkbox control embeded and adhering to the following functional requirements

  • support(retain) the column sort functionality
  • must be a reusable component (no tight coupling)
  • easy to extend and plugin to use in any other grid control

Use Case:

Provide the Select All rowItems functionality for the grid column. Each row item will have a checkbox to allow its (un)selection.


The Select All functionality for all the row items in the grid is a very common requirement for any application, but however before implementing we need to be clear about the dataProvider as well.

Will the dataProvider for the grid have dataFields, which can be binded to the state of the checkbox in the column header and for each of the row items?

If the dataProvider contains dataFields which can be binded to the UI it is fairly simple to handle the use case, but if the SelectAll is purely a UI operation for populating the list of selected items for further processing, then it becomes little more challenging.

One more challenge here is to preserve the sort functionality for the column, as any custom implementation of the headerRenderer or any component being used as the headerRenderer will strip off the sort functionality for the column. Check it out for yourself if you dont believe it.

Here is the approach that I followed to address the constraint on

>ReUsability: Program to an interface and avoid tight coupling with the parentDocument while handling the communication and binding with the grid.

>Extensibility: Encapsulate the behaviour in the class as a separate .as file extending UIComponent and provide the customizable behaviour in the  virtual methods which cane be overriden if required by the derived classes.

There are two approaches to implement the checkbox headerRenderer

Appraoch 1: Specify any implementation of UIComponent (say CustomCheckbox) as a headerRenderer for the grid column

But then you need to be prepared to handle the layout and rendering of the sortItemRenderer inorder to provide the sort functionality on the column. Also you need to be prepared to hook onto the instance of the headerRenderer for communication with the grid as you will be stumped to discover that the grid creates a new instance of the headerRenderer every now and then. Possible work around for this is to create the instance of the headerRenderer as an instance of the classFactory and store it as a bindable value in the parentDocument. After managing all of it you still need to be able to differentiate between a click to Sort and click to SelectAll by putting in vague logic based on the position of mouse click. I hope you agree that it cant get simpler than this 🙂

Approach 2: Implement the custom headerRenderer by extending the default AdvancedDataGridHeaderRender implementation and specify it in the grid column

This approach looks the obvious natural choice but then you need to know how and where to insert the custom implementation. Refer to my post on creating custom Flex controls for more info on it. Also you need to be able to differentiate between a click to Sort and click to SelectAll, which I managed it by controling the sort property of the column in response to mouse hover 😉 . Look below for the OnMouseRollOver method.

Show me the source code: Continue reading


Creating a custom component in Flex

In this post I intend to provide pointers to appropriate methods in order to customize a specific UIComponent implementation.
As all controls extend the UIComponent class,  hence some of the common methods you might want to override are

createChildren(): Add the child controls in the custom control here. More Info

commitProperties(): Update/Bind the properties of the child controls in the custom control here. This is the last method to be called before rendering, hence it is a good place to update the properties of the child controls to acheive the binding . More Info

measure(): Handle the computation of the min/max values of the width, height and other dimensions of the custom component here. More Info

updateDisplayList(): Specify the location(co-ordinates) of the child controls and handle the programmatic drawing here. More Info

We would not require to make an explict call to any of the methods above as they are called by the Flex framework itself, we only need to plugin in the custom code in the invocation sequence appropriately. Refer to the link “More Info” for a comprehensive documentation of the usage of the methods.

We may not need to override all of them, but it is important to know the appropriate method to be overriden. Also do not forget to call the implementation of the base class unless you are really sure to do so.

Let’s master the Flex Controls

All Flex controls extend the UIComponent, hence understanding the initialization and rendering of the UIComponent will be very useful for customizing and making all other flex controls work for you.

The first obvious step would be to look at the source code implementation located at <Flex 3.1.0 SDK Installation Directory\frameworks\projects\framework\src\mx\core\>

In my opinion the most effective approach for creating your own custom controls is to extend them from the base controls and customize by overriding and digging into the source code of the base controls.

Some of the common methods, that you might want to override in your custom component are

Refer to the next post for creating the custom flex UIComponent

Getting started with Flex development

Best Practices related to :

  • Flex project and workspace:

  • Flex Development:

  • Coding Conventions:

If you are new to Flex and coming from a .NET background, you might want to map the coding guidelines and FlexBuilder(eclipse) environment to that of the msdn guidelines and VS IDE.

Best Practices help you in getting the fundamentals right and are extremely useful especially when you are just getting started with flex. Also clarity in concepts related to workspace and flex project environment  will save you a lot of effort in overcoming the small yet annoying problems.

Source Code for Flex 3

You might want to check out Flex opensource

If you have the FlexBuilder already installed, you would be pleasantly surprised to discover it on your hard disk 🙂

All the action script files for flex controls can be found at

  • <FlexBuilder installation directory\ Flex Builder 3\sdks\3.1.0\frameworks\projects\framework\src\mx\controls>
  • <FlexBuilder installation directory\Flex Builder 3\sdks\3.1.0\fbpro\projects\datavisualization\src\mx\controls>

If you want to start using and customizing the flex controls, the source code of the base controls is your saviour.

In my opinion, reference to the source code of the base controls must be the first step for anybody trying to customize the base controls. It was really surprising that I have not come across any documentation or pointers for locating the source code of the flex controls or probably I havent spent enough time in exploring what packages along with the flex sdk.

Building RIA using Flex 3

I had an opportunity to explore Adobe Flex 3 for a couple of weeks. I would be sharing my experience and findings in the posts to follow here…

Initial feeling is that it is really cool technology for web development because

>of its very rich UI

>its open source, the entire source code is available

>development is independent of the browser, as the Flash player takes care of all the issues relating to the  browser

But then the not so attractive things are

>its not as developer friendly as the tools from Microsoft

>Flex 3 doesnt have the strong type casting

>the UI controls are not as intutive and object oriented as the windows controls. Dont be surprised to find out that the Tree control doesnt really have any nodes and the Grid doesnt have any rows.

>the documentation and IDE, when compared to msdn and VS.NET IDE

But the availability of the source code makes it comforting for you to dig down and get the job done.