FlexLayouts

More Samples

justin — Wed, 04 May 2011 17:19:27 +0000

We added two additional samples to the gallery. A clock face powered by CircleLayout. And a monopoly-esque gameboard powered by RectangleLayout. Please see our recent article The Power of Layouts in RIA Rock Stars for more details or check out the gallery if you just want to see the samples. Also in the news, you can now find all your favorite custom layouts in the Tour de Flex (just go to Other Componets > Layouts).

Release v0.7

justin — Sun, 03 Apr 2011 21:44:51 +0000

A somewhat minor update, but it produces excellent visuals. Release v0.7 includes the addition of a rotateElements parameter to both CircleLayout and RectangleLayout. As always, the latest FlexLayouts library is available for immediate download. All code is MIT and available on github.

Setting rotateElements to true makes all of the elements in the layout point outwards. For example, you could use two separate CircleLayout‘s to construct a clock. One with rotateElements="false" for the numbers on the face (because they always point upwards). And another with rotateElements="true" for the tickmarks (a bunch of rotated rectangles).

Release v0.6.1

justin — Sat, 08 Jan 2011 05:26:15 +0000

A nice Oops release to fix a minor bug in RectangleLayout. This is what we get for releasing too fast. The latest FlexLayouts library is available for immediate download. All code is MIT and available on github.

Additionally, all layout samples (and sample code) in the gallery were updated to include the libs folder. Most importantly, this folder contains the latest flexlayouts.swc, but it also contains a useful helper library, aptly named flexlayoutshelper.swc. This library has a Drawer container and some other convenience classes and components that are used to build the samples. Nothing too interesting, and very customized to the needs of FlexLayouts, but everyone is welcome to check it out. The helper library is on github here along with everything else, and is also MIT.

Release v0.6

justin — Fri, 07 Jan 2011 05:18:33 +0000

Hot on the heels of v0.5.1 comes release v0.6, with two new custom Flex 4 layouts for your pleasure: CircleLayout and RectangleLayout. As always, the latest FlexLayouts library is available for immediate download. All code is MIT and available on github.

We’ve delivered the goods as promised. But there’s still lots more to come.

RectangleLayout

justin — Fri, 07 Jan 2011 04:53:58 +0000

RectangleLayout is a custom layout that arranges visual components in a rectangle along the inside border of their parent container. For example, RectangleLayout could be used to arrange the tiles of a board game like Monopoly (but you’d need to set rotateElements="true").

Usage

>
    ...
    >
         horizontalGap="2" verticalGap="6" rotateElements="true" />
    >
>

Params

horizontalGap: The horizontal space between the items in pixels.
verticalGap: The vertical space between the items in pixels.
rotateElements: If true, then all elements in the layout will be rotated to point outwards. If false (the default), then the elements are un-rotated (aka they all point upwards).

Sample

NOTE: watch what happens as you move the num boxes slider.

Flash is required. Get it here!

full screen | view source | download

More Samples

MonopolyBoard

full screen | view source | download

Author

Layout & sample by Justin.

CircleLayout

justin — Fri, 07 Jan 2011 04:46:58 +0000

CircleLayout is a custom layout that arranges visual components in a circle so that they fit entirely inside their parent container. For example, CircleLayout could be used to arrange the numbers in a clock.

Usage

>
    ...
    >
         rotation="-90" rotateElements="true" />
    >
>

Params

rotation: The extra angular offset (in degrees) from zero.
rotateElements: If true, then all elements in the layout will be rotated to point outwards. If false (the default), then the elements are un-rotated (aka they all point upwards).

Sample

Flash is required. Get it here!

full screen | view source | download

More Samples

ClockFace

full screen | view source | download

Author

Layout & sample by Justin.

Release v0.5.1

justin — Wed, 05 Jan 2011 05:01:19 +0000

Here’s a small maintenance release to fix some bugs in FlowLayout and SnakeLayout. The FlexLayouts library v0.5.1 is available for immediate download. All code is MIT and available on github.

Status Update

We’ve taken a lengthy break since the initial v0.5 release, but now it’s on like Donkey Kong. We expect some beta layout code will arrive in github in the very near future. Additionally, we hope to show up in Tour De Flex in the coming months (alongside samples from the The Godfather himself!).

Release v0.5

justin — Mon, 16 Aug 2010 02:19:06 +0000

Our first public release is out. Woo hoo! The FlexLayouts library v0.5 is available for download. All code is MIT and available on github.

After a lot of hard procrastinating, we are happy to finally deliver our initial public release with two custom layouts for your pleasure: FlowLayout and SnakeLayout. Documentation and sample code are included in The Gallery.

Our Mission

Our mission is to simplify and accelerate custom component creation in Flex 4 by providing an open source library of custom Flex 4 layouts. Layouts are easily one of the most portable and re-usable pieces of code from project to project. They are also amazingly powerful and flexible. Thus we feel it only makes sense to package a set of high quality, well tested, Flex 4 layouts into a ready-to-use layout library.

The Future

We decided to start small with just two custom layouts in the initial release. The plan was to make something available as soon as possible, open the doors to community involvement, and then worry about filling in the gaps. We expect to be adding a more great layouts to the library on a regular basis.

Please download and enjoy,

— Justin & Gilles

SnakeLayout

justin — Fri, 13 Aug 2010 21:18:49 +0000

SnakeLayout is a custom layout that arranges visual components in order, row by row, just like FlowLayout, but flops the direction and starting point with each successive row. For example, the first row is left-to-right starting at the left edge of the container, the second row is right-to-left starting at the right edge, and so on.

Usage

>
    ...
    >
         horizontalGap="4" verticalGap="8" />
    >
>

Params

horizontalGap: The horizontal space between the items in pixels.
verticalGap: The vertical space between the items in pixels.

Sample

NOTE: watch what happens as you move the num boxes slider.

Flash is required. Get it here!

full screen | view source | download

Author

Layout & sample by Justin, based on FlowLayout, which is in turn based on example code by Evtim The Godfather Georgiv.

FlowLayout

justin — Fri, 13 Aug 2010 21:10:59 +0000

FlowLayout is a custom layout that arranges visual components in order, left-to-right, row by row, just like the words in a book. It works best arranging items with different widths (but the same height). When used with uniformly sized items, FlowLayout degenerates into a basic TileLayout.

Usage

>
    ...
    >
         horizontalGap="4" verticalGap="8" />
    >
>

Params

horizontalGap: The horizontal space between the items in pixels.
verticalGap: The vertical space between the items in pixels.
padding: The spacing in pixels between all the boundaries of the container and the items within the container.

Sample

Flash is required. Get it here!

full screen | view source | download

Author

Layout & sample by Justin, based on example code by Evtim The Godfather Georgiv.