Thursday, June 16, 2011

Control Bar in Flex

Today we will learn about something called a control bar.

A control bar is a gray (by default) bar at the top of your Flex applicaion, that you can put content into. Users are used to the fact that such bars contain some kind of navigation or other control tools in them, thats why they are called control bars.

Let's see how to make one. First of all, you need to specify a layout for the application's control bar. As we know from the previous tutorials, there are 4 possible layout types - BasicLayout, HorizontalLayout, VerticalLayout and TileLayout. Let's choose HorizontalLayout for this one.

To set a layout, we need to set the controlBarLayout property to a layout type class that we want. Note, that this is a property, so it starts with a lowercase "c".

<s:controlBarLayout>
<s:HorizontalLayout />
</s:controlBarLayout>

Now we need to put some content into our controlbar. We can do that using the controlBarContent property. Let's just add 4 buttons to it for now.

<s:controlBarContent>
<s:Button label="File" />
<s:Button label="Edit" />
<s:Button label="View" />
<s:Button label="About" />
</s:controlBarContent>

So the whole code would look something like this:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">

<s:controlBarLayout>
<s:HorizontalLayout />
</s:controlBarLayout>

<s:controlBarContent>
<s:Button label="File" />
<s:Button label="Edit" />
<s:Button label="View" />
<s:Button label="About" />
</s:controlBarContent>

</s:Application>

Let's see what results does this generate:



Now, let's change the layout to vertical and see what happens:

<s:controlBarLayout>
<s:VerticalLayout />
</s:controlBarLayout>

The control bar stretches to fit all the buttons in it:



The control bar doesn't have a fixed height and will always change its size so that all the content can fit in. This means that we can change the layout to BasicLayout, and then set the coordinates of each button as we like, and not worry about it being outside the control bar.

That is all for today.

Thanks for reading!

No comments:

Post a Comment