Flex Examples
In a previous post, “Toggling a Flex container’s visibility”, we looked at toggling a VBox container’s visibility by setting both the visible property and includeInLayout property. While the approach felt a little crude, we can build the same thing using the much more powerful view states. What are view states and how do we use them? Well, if you’re new to states, this should clear everything up: “Adobe – Flex Quick Start Basics: Creating States”.
Now, with that out of the way, lets look at some code and a basic example.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/24/toggling-a-flex-containers-visibility-using-states/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Parallel targets="{[vbox2]}">
<mx:WipeDown />
<mx:Fade />
</mx:Parallel>
</mx:Transition>
</mx:transitions>
<mx:states>
<mx:State name="expanded">
<mx:AddChild relativeTo="{vbox1}" position="after">
<mx:VBox id="vbox2"
width="120"
height="100%"
backgroundColor="haloGreen">
<mx:Label text="VBox 2" />
</mx:VBox>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Style>
VBox {
paddingLeft: 10;
paddingRight: 10;
paddingTop: 10;
paddingBottom: 10;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.effects.easing.*;
[Bindable]
[Embed(source="assets/help.png")]
private var helpIcon:Class;
private function toggleExpanded():void {
switch (currentState) {
case "expanded":
currentState = "";
break;
default:
currentState = "expanded";
break;
}
}
]]>
</mx:Script>
<mx:HBox width="100%" height="100%">
<mx:VBox id="vbox1"
width="120"
height="100%"
backgroundColor="haloOrange">
<mx:Label text="VBox 1" />
<mx:Button label="Help"
icon="{helpIcon}"
click="toggleExpanded()" />
</mx:VBox>
<mx:VBox id="vbox3"
width="100%"
height="100%"
backgroundColor="haloBlue">
<mx:Label text="VBox 3" />
</mx:VBox>
</mx:HBox>
</mx:Application>
View source is enabled in the following example.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Hey Peter, I just wanted to give you some kudos. This is one of the most high quality, fresh, and content rich Flex blogs out there! Actually I’d give it the #1 rating.
Thanks!
Me, too ;-)
This is great for starters, we have added your blog.
This should be the most usefull blog for flex developers after adobe’s flex website.You were added to favourites. Thanks and waiting for more :)
Exactly that i’m looking for. Thank for this example. Is it possible in a new example to add a VBox 4 witch appear between the VBox 2 and VBox 3 when you click on a new button put in the VBox 2. Thanks
Started working with Flex. got stuck in the beginning itself..
What I want is When you click on “Application Admin” Tab I want to show the “_tool_admin_que” State. And when I am in “_tool_admin_que” ( that is “Application Admin” tab) state and click on “Login” tab, I want to show “_login” state.
How do I do it? Any help please? click event does not work on canvas. want to make the header work like a URL link.
Great article, helped me a lot. I am stuck with a very odd problem though:
Inside a component, I got a VBox that removes all its childs when you click (anwhere) on the VBox and adds some other childs. It basically removes some text and adds a button. When you click on that button which is located inside the state, it should switch back to the base state, but that does not work. It fires the event, but it does not jump into the base state via
currentState=''. When the button is outside of the state, it works.Any help? Drives me mad… here is an extract of the code:
<mx:State name="changeContent"> <mx:RemoveChild target="{child1}"/> <mx:RemoveChild target="{child2}"/> ... <mx:AddChild relativeTo="{myVBox}"> <mx:Button id="changeAgain" label="close" click="currentState='';" /> ... </mx:AddChild> <mx:SetEventHandler target="{myVBox}" name="click" handler="{null}" /> <mx:SetEventHandler target="{changeAgain}" name="click" handler="currentState='';" /> </mxState> ... ... <mx:VBox id="myVBox" click="currentState='changeContent'" > ...</VBox>use the tag initially mentioning as .After that continue with ur original program as u have proceeded earlier.its work definitely.k
@Jules:
Have you tried using currentState=null? I know that’s supposed to be the Base State.
good aricle . Here i found another good article explaining use of states for creating a website using states in flex .
here is link :
http://askmeflash.com/tutorial_m.php?p=tutorial&tid=0
Very nice blog about view state.
I have also gone through following links which are also helpful in case of View State
http://jksnu.blogspot.com/2011/06/view-state-difference-between-flex3-and.html
http://jksnu.blogspot.com/2011/06/view-state-difference-between-flex3-and_24.html