| | {section} |
| | {column:width=80%} |
| | |
| | h2. ViewStack |
| | |
| | * A ViewStack is a navigator container that contains other child containers stacked on top of each other like a deck of cards. |
| | * Only one child container can be visible or active at a time |
| | * There is no built-in mechanism to switch between child containers |
| | * You can create your own logic to manage active views or use a LinkBar, TabBar, ButtonBar, or ToggleButtonBar control |
| | * The ViewStack's child containers are indexed from 0 to n-1 |
| | * The selectedIndex property contains the index of the active container |
| | {column} |
| | {column} |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/TabNavigator} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/3f.+Customizing+components} |
| | {rate:title=User rating|theme=dynamic|key=focal|display=default} |
| | {column} |
| | {section} |
| | |
| | h3. ViewStackDemo.mxml |
| | |
| | {code} |
| | <?xml version="1.0" encoding="utf-8"?> |
| | <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" |
| | backgroundColor="#FFFFFF" |
| | backgroundAlpha="0" |
| | horizontalAlign="left" |
| | verticalGap="15" horizontalGap="15"> |
| | |
| | <mx:Panel> |
| | |
| | <mx:ViewStack id="vs" |
| | x="30" y="32" |
| | width="452" height="339" |
| | selectedIndex="0"> |
| | |
| | <mx:Canvas backgroundColor="#FFFFCC"> |
| | <mx:Text text="This is Area 1" |
| | fontWeight="bold" |
| | paddingTop="10" paddingLeft="10" /> |
| | </mx:Canvas> |
| | |
| | <mx:Canvas backgroundColor="#D7D7D7"> |
| | <mx:Text text="This is Area 2" |
| | fontWeight="bold" |
| | paddingTop="10" paddingLeft="10" /> |
| | </mx:Canvas> |
| | |
| | <mx:Canvas backgroundColor="#CCCCFF"> |
| | <mx:Text text="This is Area 3" fontWeight="bold" paddingTop="10" paddingLeft="10" /> |
| | </mx:Canvas> |
| | |
| | </mx:ViewStack> |
| | |
| | </mx:Panel> |
| | |
| | <mx:HBox> |
| | <mx:Button label="Area 1" |
| | click="vs.selectedIndex=0" /> |
| | <mx:Button label="Area 2" |
| | click="vs.selectedIndex=1" /> |
| | <mx:Button label="Area 3" |
| | click="vs.selectedIndex=2" /> |
| | </mx:HBox> |
| | |
| | </mx:Application> |
| | {code} |
| | |
| | h2. Rendered Application |
| | |
| | | {test-flash:400|250|ViewStackExample.swf}ViewStackExample{test-flash} |
| | | {test-flash:250|400|ViewStackExample.swf}ViewStackExample{test-flash} |
| | |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/TabNavigator} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/3f.+Customizing+components} |
