Friday, June 17, 2011

View States in Flex

Today we're going to learn about view states in Flex.

View states are basically the different pages of an application. They can be compared to frames in Flash. For example, if we were making a Feedback gadget with Flex, that would allow users to send emails to the webmaster, it would have at least 2 view states. The first state would be when all the forms are displayed, such as Subject, Feedback text, etc. When the user clicks Submit, all the forms would disappear and a message like "Thank you, your feedback has been sent." would be displayed - that would be view state 2.

In this tutorial we will make a simple application that has 2 buttons for switching between 2 pages, which would contain text and buttons.

Firstly, we need to define our states. This is done using the s:states property. Let's call them Page1 and Page2.

<s:states>
<s:State name="Page1" />
<s:State name="Page2" />
</s:states>

Now let's add 2 buttons that we can use for switching between pages. I'm going to put them into the control bar.

When a button is clicked, we need to perform an AS3 action to change the current state. This can be done using the this.currentState property.

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

<s:controlBarContent>
<s:Button label="Page 1" click="this.currentState='Page1'" />
<s:Button label="Page 2" click="this.currentState='Page2'"/>
</s:controlBarContent>

Now let's add 2 Group containers with the same coordinates, but different content. Each group will be the content of a page. But, thanks to view states, they will not be displayed both at the same time.

Let's just add some text and buttons into them.

We can set the includeIn property of our group containers to the state name at which we want to display this group. We want the first group to be displayed when the view state is Page1, so we set this property to Page1. We want the second group to be displayed when the view state is Page2, so we set this property of that group to Page2.

<s:Group y="10" x="10" includeIn="Page1">
<s:layout>
<s:VerticalLayout />
</s:layout>

<s:Label text="This is some text that will be shown on view state 1. Here are some buttons too." />
<s:Button label="Button 1" />
<s:Button label="Button 2" />
</s:Group>

<s:Group y="10" x="10" includeIn="Page2">
<s:layout>
<s:VerticalLayout />
</s:layout>

<s:Label text="Now, this is a different Label with different Buttons shown on view state 2." />
<s:Button label="Button 3" />
<s:Button label="Button 4" />
<s:Button label="Button 5" />
</s:Group>

The full code:

<?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:states>
<s:State name="Page1" />
<s:State name="Page2" />
</s:states>

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

<s:controlBarContent>
<s:Button label="Page 1" click="this.currentState='Page1'" />
<s:Button label="Page 2" click="this.currentState='Page2'"/>
</s:controlBarContent>

<s:Group y="10" x="10" includeIn="Page1">
<s:layout>
<s:VerticalLayout />
</s:layout>

<s:Label text="This is some text that will be shown on view state 1. Here are some buttons too." />
<s:Button label="Button 1" />
<s:Button label="Button 2" />
</s:Group>

<s:Group y="10" x="10" includeIn="Page2">
<s:layout>
<s:VerticalLayout />
</s:layout>

<s:Label text="Now, this is a different Label with different Buttons shown on view state 2." />
<s:Button label="Button 3" />
<s:Button label="Button 4" />
<s:Button label="Button 5" />
</s:Group>

</s:Application>

Now if you test your application and try clicking the Page 1 and Page 2 buttons, you'll see that you're changing view states and different content is displayed at each page.

View state 1:



View state 2:


Note: The Page 1 button in the first picture and the Page 2 buttons in the second pictures are gray because I hovered my mouse over them. I did this to show what each of these buttons changes the view state to.

Here are some more things to note.

If you want an item to appear in all view states, simply dont set its includeIn property to anything.

If you want an item to be displayed in, for example, 2 out of 3 view states, you can pass the state names to the includeIn property with a comma:

includeIn="Page1,Page2"

That's all for today.

Thanks for reading!

No comments:

Post a Comment