Adobe Flex toggle a component full screen

I have 5 components on my Flex application(actual view) and they are:

1. x = main panel
2. y = bottom panel
3. z = left panel
4. a = right panel
5. b = 开发者_Go百科top panel

I have a toggle full screen button. When clicked I want the main panel(x) to become full screen. At this point only main panel(x) should be visible. when I click on the toggle button again, it should become normal displaying all 5 components(the actual view).

I am not sure how to approach this requirement. Any help is greatly appreciated.

thank you Firemonkey

You can use states to define different layouts for different scenarios. See http://livedocs.adobe.com/flex/3/html/help.html?content=using_states_3.html for details.

I would place/size the panels within HGroups and VGroups, then toggle between the two states using flex States. If you are using Flex 4, you do this by simply setting the includeIn or excludeFrom properties for each of your panels, then in the handler for your toggle button, toggle between the two states by setting the currentState property. Here's a good intro article on states in both Flex 3 and Flex 4:

http://www.artima.com/articles/flex_4_states.html

For going full screen, you just need to change the displayState property of the stage. Here's an example:

http://blog.flexexamples.com/2009/03/15/creating-full-screen-flex-applications-in-flex-gumbo-swfobject-edition/

Hope that helps.