Our Dream

We admit v0.5 is not much to look at but imagine a future where a huge number of robust, well tested layouts (both 2D and 3D) exists and is readily available with both sample code and exceptional documentation. You could just slap together some vanilla Flex components, drop in an awesome custom layout (like Gilles’ CoverFlowLayout), and ka-BOOM, you have an awesome custom component that impresses co-workers, bosses, and clients equally. That’s the dream: to take one of the most portable, re-usable pieces of the Flex framework, make a massive library, and empower the next generation of custom components.

Ransom Note

I whipped together a quick sample application using FlowLayout that I’m calling Ransom Note. It pulls together a list of images of letters that look as if they were cut out of a magazine or newspaper and pasted together. It follows one of the most common custom layout patterns which is: List + ItemRenderer + custom layout. The actual implementation uses the lighter weight version: DataGroup + DataRenderer + custom layout, because I don’t need any of the list selection stuff.

Check out the finished product:

» RansomNote (view source enabled)

Files

• RansomNote (download)

Another one of my favorite improvements that found its way into Flex 4 is the separation of layouts from containers. The fact that layouts can customized and simply plugged into any container is pretty sweet. It’s a real developer benefit because it makes me faster. I can quickly develop a custom component by leveraging a stock layout. Alternately, I can develop a “new” component by creating a custom layout and plugging it into a stock container.

Layout References

Here’s a short list of useful Flex 4 layout references I was able to dig up. If you have anything to add, please leave a comment, and I’ll update this list.

• Easy Flex – Evtim’s blog (one of Adobe’s layout engineers)
• Spark Layouts in Flex 4 – various iterations on the Flow layout by Evtim
• Flex 4 Custom Layouts – a nice circular layout
• 5 3D Layouts for Flex 4 – an awesome collection of 3D layouts

My FlowLayout

I started with Evtim’s FlowLayout and made a few modifications of my own. I added a single gap parameter that controls both the horizontal and vertical separation of elements, and a border parameter that controls the padding around the outside of all the elements. The other major difference is how my version of the Flow layout handles the very first element.

I make sure the first element (when i = 0) is never shifted down, with a simple if (i > 0) check:

//does the element fit on this line, or should we move to the next line?
if (x + elementWidth > containerWidth) {
    //start from the left side
    x = _border;
 
    //move to the next line, and add the gap
    if (i > 0) { //never shift the first element down
        y += elementHeight + _gap;
    }
}

Here it is (view source enabled):

Files

• FlowLayoutSimple (download)

NOTE: All code was built with Flash Builder 4 Beta 1.