Custom DataGrid Cell Roll Over Example

Posted on March 9, 2009 by Tony Fendall.
Categories: Adobe, Components, Flex.

A few days ago I was asked this question via a previous blog post:


Came to this blog searching for a specific issue, which might be nothing for you guys, but have been hitting head for almost two days now.

I have a DataGrid of numbers. All I want to do is that when a mouse rolls over a specific cell, that cell gets highlighted with say, green color, not the whole row.

I have not gotten past this, but as a next step would like to increase the font of the text in that cell as well.. so to emphasize it.

I will appreciate any help or pointers in the right direction.


I responded with a brief explanation at the time, but this afternoon I decided to see if I could whip up an example application showing how this could be done.  I managed to come up with some code that is both quite simple and reusable. You can check out my demo application here.

 Cell RollOver Example
Right click on the application to View Source


Flex LoadingImage Component

Posted on May 19, 2008 by Tony Fendall.
Categories: Adobe, Components, Flex.

My LoadingImage component takes a regular Flex Image component, and adds a self contained ProgressBar to it to show its own loading progress.  I have wanted a nice simple component like this a few times now, so having nothing better to do this evening,  I decided to whip one together.

Check out the demo by clicking on the image below. Full source code is available by right clicking on the application.

LoadingImage Component Example

My Degrafa Derby Entry – PostACard

Posted on February 22, 2008 by Tony Fendall.
Categories: Adobe, Components, Flex.

For the last several weeks I have been busy building PostACard, which is a ePostcard service built in Flex and leveraging the Degrafa library.


FlashPaper Sizing Problem – Revisited

Posted on November 8, 2007 by Tony Fendall.
Categories: Adobe, Bugs/Fixes, Components, Flash Player, Flex.

imagesA few weeks ago I wrote about a solution I had found for making flash paper assets behave correctly inside Flex applications.  I have been using this solution within my current Flex project, and it works quite well in simple cases.  In some more complex cases it simply didn’t work however, and I spent a lot of time tacking down the solution.

The problem can occur when you manipulate the FlashPaperLoader component at runtime (e.g. resize and/or change source).  Often when things are changing, the FlashPaperLoader swf isn’t initialized and ready to receive the calls through external interface.  This means it can’t relay the sizing instructions to the FlashPaper.


Flex FlowBox Container

Posted on November 5, 2007 by Tony Fendall.
Categories: Adobe, Components, Flex.


In a recent project of mine, I needed a container which would lay its child components out in a horizontal manner like an HBox, but unlike an HBox, it needed to wrap the child components into a new row when they exceeded the available width.  If the available height was exceeded, the container should then grow downwards if the height property has not been set to a constrained value.  If the height is constrained, then scrollbars should appear. (more…)

Intelligent Video Buffering Component – Final

Posted on September 16, 2007 by Tony Fendall.
Categories: Adobe, Components, Flex, Technology.

Update 20/11/07: Due to the large amount of interst in this post, I’ve had to replace the example with a shorter video. I found another cool one though.

Here’s the final version of my BufferingVideoDisplay component. I mentioned that I was playing around with this a while ago in a previous post but got stuck trying to get the bitrate of the loading FLV file. It turns out that there isn’t a way to get the bitrate of a FLV from within flex (not that I could find at least), so I approximate it by dividing the size of the video file by its duration.

Click on the image to view the application. Right click on the application to view the source.


Adding "Multiple sets of visual children" to custom components

Posted on August 30, 2007 by Tony Fendall.
Categories: Adobe, Components, Flex.

Flex doesn’t support adding child components to containers at multiple levels. I.e. it’s not possible to create an mxml component of type HBox with some components declared in mxml inside it, and then use that component somewhere else and put another set of components inside it there also. If you try to do this then you get a runtime error saying:

“Multiple sets of visual children have been specified for this component”

The reason that this isn’t supported in flex is that there’s not really any way for the mxml compiler to know what to do with the additional components. Any option taken would result in numerous possible conflicts and special cases.

There are several possible ways to avoid this issue however:

  1. Only declare mxml components in ‘leaf’ classes (ie. Have no descendants)
  2. Declare all components in action script rather than mxml
  3. Explicitly handle the passing in of the mxml components within the container class and place the components in their correct position.

Option 3 is by far the most flexible/useful, and the following example explains how to implement components which can be used in this way.

Putting functions inside objects at runtime

Posted on August 13, 2007 by Tony Fendall.
Categories: Adobe, Components, Flex.

All functions within Flex are objects of type Function. This means you can do fun things with them like pass them around within your application. You can even pass a private function to another class and have it invoke it for you. There are lots of examples around on the net where people use this functionality to define call-back functions for asynchronous methods etc.

The documentation for the Function class says that the ‘call’ function (which invokes the function represented by this object) takes as its first parameter the ‘thisObject’. The ‘thisObject’ being the object which is referred to by the keyword ‘this’ from inside the function.

thisObject:Object — An object that specifies the value of thisObject within the function body., 1, 2, 3);

The first thing I thought of when I read that was, surely then you could make the ‘thisObject’ something other than the object which originally held the function. If that were possible, there are a lot of ways in which this could go wrong, but there are also a lot of interesting use cases for such functionality. On my current project at work I got a chance to play with this functionality, and I can confirm that it does work, but it’s a little trickier than the docs imply. (more…)

Flex Intelligent Video Buffering Component – Part 1

Posted on July 31, 2007 by Tony Fendall.
Categories: Adobe, Components, Flex, Technology.

Recently at work I have been working on a project which involves streaming large amounts of video using progressive download.  If you use Flash Media Server (has a new name now doesn’t it?), then it will automatically figure out how large the video buffer should be for you, but I wanted to implement the same functionality for progressive downloads within a flex component.

To determine the correct buffer size, you need three bits of information:

  • The available bandwidth that the user has
  • The size of the video to be played, and
  • The bitrate of the video to be played


DataGrid Header Styles

Posted on June 26, 2007 by Tony Fendall.
Categories: Adobe, Components, Flex.

The other day I was working on a project, and I needed to create a datagrid which would show the backgroud of the underlying container through.  Much to my suprise, you can set the background alpha value of an Adobe Flex 2 DataGrid, but not the alpha value of the headers.

After much searching I found that the DataGrid class has method:
protected function drawHeaderBackground(headerBG:UIComponent):void

Once you know that, it’s a fairly simple matter to extend the DataGrid class and set the properties of the header as you wish.  Below is a demo of the class I whipped up with source included incase anyone else comes up against the same problem.

Click on the image to view the application. Right click on the application to view source. (more…)