Extending our Picasa Gallery app

With the power you have from simple MXML tag-based code you won't even need to add any ActionScript for this basic functionality!

What we will do is to add a drop-down list to the UI which will list all the available layouts and on changing the selection in that list, the layout of our images will change.

This entail the following things:

1. We need to add a DropDownList component to our application
2. We need to create an array of layouts to display in the DropDownList
3. We need to associate each entry in the DropDownList with a layout object
4. We need change the layout with the selection

STEP 1: Add a DropDownList component to our application

This is simple, we just add the following after the list code in our previous application:

 <s:DropDownList> </s:DropDownList>

If you just add this and run the application, you will see the drop down list we have added will overlay the list we added earlier. Quite conveniently, this is a layout issue! Since we have not specified a layout for our application, it defaults to using BasicLayout. BasicLayout uses absolute positioning and layout, where you need to specify the position and size of every component added to the application.

This is quickly and simply remedied by adding a VerticalLayout component as the layout for the applications. We can do this by adding the following code inside the application tag:

<s:layout>
  <s:VerticalLayout />
</s:layout>

Let's make the width of this drop-down list 100% and give it an id so we can refer to it later. We are left with the following code:

<s:DropDownList id="layoutSelector" width="100%" >
</s:DropDownList>
  

STEP 2: Create an array of layouts to display in the DropDownList, AND associate each entry in the DropDownList with a layout object

To display the layouts in a list we need to have a name for the layout to display in the list, and a instance of that layout object. For this we will create an array of Object instances, with each having two properties, a name to display in the list, and a layout which has a layout object instance.

Here is a sample object:

<fx:Object name="Tiles">
  <fx:layout>
    <s:TileLayout />
  </fx:layout>
</fx:Object>

The Object class is the base of everything in Flex; it is a dynamic class, so you can attach properties – such as 'name' and 'layout' – to it at runtime. We will create an array with multiple of these objects and add it as the data source for our list.

Let us add VerticalLayout and HorizontalLayout. Note that you can configure the objects in these instances as you like. Here is the finished code of an ArrayCollection with these three layouts:

<s:ArrayCollection id="layouts">
  <fx:Object name="Tiles">
    <fx:layout>
      <s:TileLayout />
    </fx:layout>
  </fx:Object>
  <fx:Object name="Vertical">
    <fx:layout>
      <s:VerticalLayout gap="5" />
    </fx:layout>
  </fx:Object>
  <fx:Object name="Horizontal">
    <fx:layout>
        <s:HorizontalLayout gap="4" />
    </fx:layout>
  </fx:Object>
</s:ArrayCollection>

Note that this needs to be added inside the <fx:Declarations> tag in your applications code as it is not a visual component. We have given it an id of "layouts" so that it can be used as a source for the DropDownList.

The tutorial continues on the next page.

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.