Back to the simple application I started building yesterday. Let's take it a bit further and add some more elements and lay them out like a more normal application -- header, navigation and main content area. This is the layout of the app.

First we'll create the header area. To do this we'll drag an <mx:VBox> element in to the design area and give it a width and height of 100%. The VBox is a layout element which stacks its child elements vertically. We're going to add two <mx:HBox> elements as direct children of it. The HBox does the opposite and arranges its children horizontally.

Using these two layout containers it's a doddle to do what with HTML is often a frustrating nightmare. Consider the code below:

First we have a VBox. Consider this a bit like a "container" DIV that takes up the whole page. Inside it are two HBoxes. Consider these as being like two rows of a table. Anything we put in these "rows" will be arranged horizontally, just like TD table cells would be.

The really clever bit with Flex is the way it works out sizes. Notice that the first HBox (the "header" area) has a fixed height of 60 pixels. But the HBox below it has a height of 100%. How can that work!? Don't the two conflict? Well, no. Flex is intelligent about it and makes the second HBox equal to the full height of the browser minus 60px. As you resize the browser the header's height remains fixed as the region below it resizes to take up the remaining height.

The same happens with widths. Notice I've added an <mx:Tree> element as the first child of the second HBox. This is our "navigation" area. It has a width of 25% while the DataGrid to the right of it has a width of 100%. Again Flex knows the second element should just take up all of the remaining horizontal space. We could just as well have made the width of the grid 75% but I wanted to make a point.

That's all you have to do for the layout! Yep, no CSS required. Just a few width and height settings and you've created a cross-browser (all Flex apps are by nature anyway) layout that adjusts to the browser size and looks something like this:

How simple was that!?

Now let's look at another really nice element -- <mx:Spacer>. Let's say we want to add a "Login" button to the right-most side of the header area. To do this with HTML and CSS involves understanding the intricacies of floating elements. Not so Flex. Consider this code:

We've added two new elements to the header - a <mx:Spacer> and a <mx:LinkButton>. Again we've given an element a width of 100% but Flex knows not to take this literally. It knows we merely want it to take up all the space not taken up by the other elements it's in line with. In this case it pushes the login button to the very right of the screen.

Notice also that I've told the HBox that makes up the header to align child element in the middle of it. The result looks something like this:

You can see the end result here. Still nothing fancy, but, hopefully, you're starting to see how easy Flex makes things?

Your challenge for today is to take the updated source dode (right-click the demo app and "View Source") and compile it in Flex Builder. Then update the NSF I made available yesterday with the new SWF. Do it!

More tomorrow...