Archive for the ‘Flex 3’ Category


Monday, February 8th, 2010

We built this component some time ago for use on a gaming/gambling site.

We required a way to alert the user that something important was going on in one of their games, but we didn’t want to use a popup, blocking the user from their current interaction. This was because the user may have been in the process of doing something important or timed.

Each game sat inside its own view component, and these were then housed in the AlertTabNavigator. It enabled use to show when a view required attention, without getting in the way.

Here’s a couple of examples. The first shows how dispatching an event from one of the children on the AlertTabNavigator updates the tab to show its alert styles, or resort back to its standard non alert styles. Selecting an alerted tab, always dismisses the alert.



Tuesday, January 5th, 2010

Here’s a little component I knocked out over the holiday period for use in a current project.

Its basically a rip of ComboBox (extends ComboBase due to private methods in ComboBox), that will filter the dataProvider depending on what the user enters into the TextInput, and select the text to show you where a match is found (can only select the first match in FP9). You can also set it to be case sensitive (false by default).

There’s a few other components out there with the same functionality (some you have to pay for some you don’t), most of which can be found doing a search for ‘AutoCompleteComboBox Flex’.

They either didn’t quite do what we wanted or were too complex for our needs.



Friday, November 13th, 2009

A couple of weeks ago I made a post about using Repeaters in ViewStacks and I mentioned in the post I’d put together a class called DataStack that worked in the same way as a ViewStack but was driven by a dataProvider.

I then realized that using a Repeater inside a ViewStack would achieve the same result, but one thing I didn’t mention is that the DataStack re-uses its children like itemRenderers.

This means that if you only add one child to a DataStack, but supply a dataProvider with 1000 items, it will only create the one child and re-use it, unlike the Repeater and ViewStack combination which would create 1000 instances of the same child.

In addition recently I added a little more code so that you can add more than a single child to the DataStack and it will cycle through through them as you change the selectedIndex. So if you supply 2 different children and a dataProvider of 1000 items, it will reuse each child 500 times, the child at index 0 for all the data at the even indices, and the child at index 1 for all the data at the odd indices.

Due to the fact that DataStack isn’t a ViewStack (i.e. it extends Container not ViewStack), it won’t work with the Efflex viewStackEffects, and therefore I created a dataStack effect for Efflex and an example that extends it.

DataStack Example (right click for source).

The source for DataStack can be downloaded from our Google Code repository.

Using Repeaters in ViewStacks

Friday, October 9th, 2009

Its very rarely I use Repeaters. I always thought of them as a way to get a list of items on the screen, yet they would always create all the items, therefore not being as optimized as a List that only creates just enough renderers, and re-uses them.

Recently on a job I required the children of a ViewStack to be driven by a dataProvider. The ViewStack required the same number of children as the number of items in the dataProvider. Each child should use its corresponding item in the dataprovdier to render its content, set via the data property.

I knew this could be handled with ActionScript, but ideally wanted a component that took care of it internally. To achieve this I built something called a DataStack, that had a dataProvider property. This worked fine but a couple of days later when building a custom container for tiling items I realized I’d been wasting my time, and a Repeater inside a ViewStack would have done the job I wanted.

What a donkey I am sometimes!

For good measure in the this example I added one of the new Efflex effects.


Wednesday, August 26th, 2009

Recently I was using Adobe’s AutoComplete component and a problem cropped up, it applies a filter to the original dataProvider assigned to it.

This was a problem because I was using the AutoComplete to give the user some sort of code completion on a list of classes, and I had multiple instances of this AutoComplete component in my application. When the user used an AutoComplete component, the original collection used as the dataProvider was filtered which meant that any previously selected items in other AutoComplete instances had a good chance of being removed from the list.

You can see this in the example by selected ‘United Kingdom’ in the first AutoComplete component, then typing the letter ‘A’ in the second, and you’ll see that the first component no longer retains its selectedItem, as it is no longer in its dataProvider.

CollectionClone can be used to duplicate a collection before assigning it as a dataProvider, leaving the original dataProvider unfiltered, and only filtering the clone. It will keep an eye on the original collection for any changes, and make sure that they are all reflected in the cloned collection.

CollectionClone Example

The source for CollectionClone and be downloaded from our Google Code repository


Thursday, May 21st, 2009

Not so long ago I was working with the XIFF library again and I needed to show a list of contacts.

The contact datum is represented in XIFF as an ArrayCollection containing ArrayCollections.

Roster extends ArrayCollection and contains a property called ‘groups’ which also extends ArrayCollection.
The ‘groups’ ArrayCollection contains RosterGroup items, which also extend ArrayCollection, and each of these contain RosterItemVO’s (the actual contact).

The RosterGroup ArrayCollection represent the groups that you arrange your contacts in, including an offline group, and a RosterItemVO represents an individual contact.

So we have something like…



I took a look at what they were doing in SparkWeb, but they had, what seemed to me, an extremely complicated way of displaying the data, when a Tree control should be able to do the job, the only problem being that a Tree didn’t want to work with ArrayCollections. To the rescue ArrayCollectionDataDescriptor!

ArrayCollectionDataDescriptor Example (right click for example source)

As you can see in the example, the objects passed into the Tree as the dataProvider need to have a property to be used at the label, so you can’t use an ArrayCollection as it is (if you do, it’ll do toString() on it for the label of the folder and you’ll get a list of your objects), so you just need to extend ArrayCollection (as they have in XIFF) and give it a property to use for the label.

The source for the ArrayCollectionDataDescriptor can be found in our Google Code Library.


Tuesday, March 17th, 2009

A PanelStack is an combination of a ViewStack and Panel.

It extends ViewStack, and adds the panel features to it (NOTE you can’t treat the children as if they are in a Box, they are treated as if they are in a ViewStack).

Although you could put one of these together pretty easily by add a ViewStack as the only child to a Panel and making its width and height 100%, we recently required this functionality and this was a much cleaner approach for what we required, instead of overriding all the display list methods. Because it’s a ViewStack you can also use the Efflex viewStackEffects in there as you can see in the example.


The source for the example is available on right-click, but the source for the PanelStack itself is in our Google Code Library.


Monday, January 5th, 2009

Recently we were required to align the text in a DataGrid’s header at the bottom. Here’s the result.


This works by roughly calculating how many spare lines there would be in the TextField when its size is set, and then adding blank lines to force the text to the bottom. It should work in most cases, although if there are lots of lines of text it may begin to add too many blank lines.

The source for the example is available on right-click, but the source for the renderer is in our Google Code Library.

SuperAccordian Updates

Friday, October 24th, 2008

At the request of a few I’ve added the ability to close the SuperAccordian.

To be able to close the SuperAccordian you must set it’s ‘closable’ property to true. This is ‘false’ by default.

When closed you have a couple of styles…

1. verticalAlign:String – “top”, “middle”, “bottom”. default is “top”.
This defines the position of the headers when closed.

2. verticalAlignOffset:Number – default is 0.
This number of pixels to offset the headers from their verticalAlign position.

Note: Closing the SuperAccordian doesn’t change its height, it only changes the height and position of the children/headers inside it.

Again, any bugs, probs give me a shout in the comments.

Updated SuperAccordianExample

The updated source for the component is in our Google Code Library.


Wednesday, October 22nd, 2008

Here’s a SuperAccordian. What makes it so super I hear you ask??

1. It lets you select more than one index at at time. Clicking on a deselected child’s header selects it and click on a selected child’s header deselects it, unless it is the only remaining selected child.

2. It lets you use a ViewStack as a child, splitting the Accordian’s header using the children in the ViewStack (like a TabNavigator).

I’d be ineterested to know if anyone uses it, or there’s any bugs, improvements etc.


The source for the component is in our Google Code Library.