In our last tutorial we created an application using the Flex SDK in Flash Builder 4 for browsing an image gallery exported from Picasa. In this tutorial we will continue from there and add some features to our previous application to make it better.

In this tutorial we will explore the concept of layouts in Flex 4, and how we can take advantage of them.

What are Flex "spark" layouts?

In a Flex application, we usually have multiple components which are arranged in some layout in our applications. They may be horizontally laid out, or vertically, or in a combination of horizontal and vertical layouts, with groups of vertically laid out elements interspersed between horizontally laid out elements. This is accomplished by having different containers which have different layouts, and by placing one container within another very complicated layouts can be accomplished.

In the earlier version of the Flex SDK (v3 with the "halo" component set), one could use containers such as VBox for vertical layouts, and HBox for horizontal layouts etc. These both derived from the Box component. Flex 3 also supported a Canvas component which used absolute positioning, where instead of laying out components according to a particular layout, each component would be given a fixed position.

In the new component architecture called "spark" which has been adopted in Flex 4, the layout mechanism of containers is kept separate. So while the Group container, TitleWindow container, List container all have different features, and looks they can be assigned any layout we want, and the way they place components will be derived from that. So while the Group and Panel components are simply for displaying components, and the List component is for displaying and navigating through data, they can use the same layout. In our last example we used a TileLayout with a List to display our gallery.

You can write your own layout mechanisms if you want to control how components are placed. You could for example take a list and create a iTunes-like coverflow, or a 3D carousel etc.

Let us take our list of images from the last tutorial:

<s:List id="imagesList" dataProvider="{index}" 
  width="100%" height="100%" 
  click="imagesList_clickHandler(event)" >
  <s:layout>
      <s:TileLayout />
  </s:layout>
  <s:itemRenderer>
    <fx:Component>
      <mx:Image source="{data.itemThumbnailImage}" />
    </fx:Component>
  </s:itemRenderer>
</s:List>

Here within "layout" property we have added the TileLayout component which manages the layout for the objects in our List. The TileLayout component manages the arrangement of the images we load from the Picasa gallery. We can very easily swap this out and put in <s:VerticalLayout /> instead which will lay out items in a vertical orientation. We can configure out layouts as well, the TileLayout class for example allows for configuring the horizontal and vertical gaps and alignments, the number of columns or rows, we can choose a row or column oriented layout and more.

Another interesting concept is that of virtual layouts. With a virtual layout you can have a list display hundreds or even thousands of elements, and Flash Player will render only as many items as required. This will allow you to display a very large amount of data in Flex containers.

Due to this flexible architecture, it is not only possibly for you to experiment with different layouts by changing just a single tag in your code, but you can also change the layout of containers in your project at runtime!

That is what we will do in this tutorial, we will add a drop-down list to our previous project which allows us to pick form a list of different layouts.

The tutorial continues on the next page.

You can download a free trial of Adobe Flash Builder 4 from the Adobe website.

Want more? Subscribe to Digit and get the month's most relevant news, feature articles, DVDs with latest softwares and a learning guide called Fast Track.