Home Tutorial Flex Flex-components Flex Accordion Menu

 
 

Share on Google+Share on Google+
Flex Accordion Menu
Posted on: March 15, 2010 at 12:00 AM
Advertisement
Accordion navigation container displays all its child containers in a series but displays only one at a time. Users can navigate from one to other just by clicking the corresponding button navigator.

Flex Accordion navigator container

Accordion navigation container displays all its child containers in a series but displays only one at a time. Users can navigate from one to other just by clicking the corresponding button navigator. This helps the user to navigate easily from one page to the other for a large and complex form.

This component is very useful when you want the user fill large information in a little space rather than navigating the user to multiple pages. Using Flex according container, you can relieve the user to float through multiple pages and also going back if he wants to change some information in the beginning of the form. User can easily navigate to multiple page of a form just clicking the corresponding navigation button.

Example: (accordionexample.mxml)

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Accordion x="110" y="44" width="246" height="248">

<mx:VBox label="User Information" width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">

<mx:Label text="User Name: "/>

<mx:TextInput/>

<mx:Label text="Password: "/>

<mx:TextInput displayAsPassword="true"/>

<mx:Label text="Confirm Password: "/>

<mx:TextInput displayAsPassword="true"/>

</mx:VBox>

<mx:VBox label="Contact Information" width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">

<mx:Label text="Enter Email Id: "/>

<mx:TextInput/>

<mx:Label text="Enter Contact Number: "/>

<mx:TextInput/>

</mx:VBox>

<mx:VBox label="Company Address" width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">

<mx:Label text="Enter Company Address: "/>

<mx:TextArea/>

<mx:Button label="Submit"/>

</mx:VBox>

</mx:Accordion>

</mx:Application>

This application displays the page like below. The accordion container displays all three child containers in a series but only first one is displaying.

When Contact Information button navigator is clicked, first child container disappears and second is displayed.

Clicking the third button navigator works the same as before.

You can see the live example below: Check how it works below:



Download the example
Advertisement

Related Tags for Flex Accordion Menu:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: March 15, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com