Symmetri Developer Blog

Does adding the same event listener multiple times to a Flex object cause multiple, duplicate postbacks? I didn’t know for sure, but I just tried it and the answer is (thankfully) no. Let the good times carry on, then.

We just joined UBank and I noticed that their secure online banking site uses Flex within the HTML page as the most important and functional part of the interface. You can’t see what I mean unless you are a customer and have a valid login … and I realize this is hardly exciting to anyone else but me. But having created a series of real-world Flex applications over the last year I was happy to see that the most”serious” type of online applications are now starting to move in the direction of becoming RIAs.

I thought I would document this as I think the error message is rather unhelpful and even misleading. In Flex, say you add the same child DisplayObject to a Container:

// container is of type Container
// child is of type DisplayObject
container.addChild(child);
container.addChild(child);

you get the error message “Error #2006: The supplied index is out of bounds.” That’s not a particularly helpful message, because it’s a very general error that is generated inside the Container.addChildAt() method; even though you are not explicitly defining a child index, the error is related to indexing of the array that holds children of the container. You would get the same error if you tried to use container.addChildAt() and specified an invalid index.

A better error message for this case would be something like “Duplicate child object not allowed in single instance of Container”.

This is just a little thing, but I have noticed that it isn’t widely understood. When using CSS in Flex to style components, the font-family property can be case sensitive on some operating systems. For example, the following CSS will not work on my Safari browser with Flash Player 10:

.content{font-family: arial;}

but this will work:

.content{font-family: Arial;}

I have been looking for a way to layout elements (child components) within a Flex container that is flexible, resizable, draggable and visually impressive. The main requirements are that a) the individual child elements can be reordered with drag-and-drop, b) elements can be maximized/minimized, c) elements can expand to fill the available space and d) elements can be given a default width and height.

Unfortunately, none of the native Flex components have layout algorithms that are suitable. They mostly implement absolute positioning or a simple vertical or horizontal “flow” layout which can fit elements into the parent container, but without any resizing.

Recently I have found a really nice implementation of layout within Flex called the Adobe Flex 3 Dashboard sample. It implements a “pod layout” which handles all my requirements EXCEPT for the fact that the individual elements (”pods”) cannot be given an initial/default width and height - they simply scale to each take up an equal amount of space within the parent container. The drag and drop functionality also has some nice animated effects.