Update: For the final version of the PagedLayout source, please visit Part 3.

I am intrigued by the possibilities of the new layout architecture in the Flex 4 framework (currently in beta, code named Gumbo). I have seen some really neat stuff materializing already: Evtim’s WheelLayout and FlowLayout, Andrew Trice’s CircularLayout, and Ryan Campbell’s collection of 3D Layouts.

Inspired by the great Javascript widgets on Apple’s Get A Mac web page and Google’s new Fast Flip, I decided to get my feet wet with Flex layouts.  This layout is similar to a horizontal layout in that it positions children from left to right along the same Y-axis.  It differs in that it compares the width of child elements on the container and when the combined of width of the child elements exceeds the width of the container it creates a new “page” for the extra elements.

Since this is my first experience with the new layout architecture I’m not sure if I’m doing everything to protocol – that is to say, it works, but is it the most optimal way to do it?  Thoughts, opinions, ideas, and criticism is desired.  I have 3 iterations of this layout and I’ll be posting one each day.  The first contains no animation, it is simply layout logic with some convenience methods for moving between pages.  Which leads me to my first question – Is it appropriate to have methods that modify the layout inside of the custom layout class?  I couldn’t really think of another way to do it so my next() and previous() paging functions are included in the actual layout class.

Below is the movie, you can view the source by right-clicking and going to “View Source”.  I have also linked the project so you can view it in a full browser window and really get a feel for the container in larger screen dimensions.  Tomorrow I’ll be posting the animated version.

In this version there are 15 buttons added to a DataContainer on startup.  You can use the sliders to control the container’s width and the padding between buttons.  The current page number and number of pages is displayed below.  Use the “Prev” and “Next” buttons to move between pages.

View the Project in Action
Explore the Source Code

As with most code I post, feel free to use this code in your personal projects.  If you do wish to use this in a commercial project you are free to do so as long as you drop me line and let me know.