Flex Snippet Tutorial - View Stack Component

The Flex framework has a few different components to modify the layout on the page. This small tutorial is going to go over one of those options, the ViewStack component. This component is a fairly simple component that lets the programmer have multiple ui layers on one panel, but flip between which one is visible cleanly and easily. Basically Flex stacks multiple containers on top of each other and when one of them is selected the others are invisible. It should be noted that when one container is selected the others still exist - they are just not visible.

Also the ViewStack component does not offer any visual navigation for the user. It is the job of the programmer to provide this navigation. So lets look at the working example below. This is a very simple way to use a viewStack. We initially show the user a login page, but if they don't have a username they can click the "Need to Register?" LinkButton. This switches the view to the register page. And on the register page if they already have a username they can click the LinkButton "Already Registered?" to switch the view back.

Now lets see how easy it is to actually do this type of swap.

So you will notice that we have an application and a panel, just like almost any normal Flex application. Then we add the <mx:ViewStack> tag and we specify an id, size, and initial position. Now that we have this tag we can start adding client containers inside the ViewStack. Each client container we have (in this case cnvLogin and cnvRegister) we can treat like a normal container and add UI components to it.

The only other major thing we need to do in this simple example is provide the navigation, which we do by using a couple LinkButtons. You can see that in both the cnvRegister and cnvLogin canvases we have a LinkButton, and on the On the click event for these buttons, we have the code to swap the view. All this code consists of is setting the vsMain.selectedChild to the child container that we now want to show.

The second example in this tutorial shows off using a navigation component supplied in flex to do the navigation. As you can see in the example below we have three different links at the top of the panel. Each one of these links to a different UI view in our ViewStack. Instead of having to do any fancy actionscript calls in click events on our LinkButtons we can use the dataProvider of the LinkBar. This technique works for the LinkBar, TabBar and ToggleButtonBar control components.

As we look at the code below we will notice a similar setup to the first example. This time, though, we have added a <mx:LinkBar> component to our panel, which is our navigation control.

Here, the link bar automatically lists the available child canvases in the ViewStack because we have set the dataProvider property of the link bar to the ViewStack. Because Flex understands how to handle this binding it will show links to all our main child containers of our ViewStack and handle changing the UI view on the stack appropriately when one is clicked. The text of each of the links is taken from the label field of the appropriate child canvas. If you would like to know more about how to use the link bar, the Adobe Flex documentation is a good place to look.

Hope you enjoyed this quick look at the ViewStack and LinkBar components. If you have any questions/concerns please just drop us a comment.