Accordion Button Navigation

      

<!--
Code from Flex 4 Documentation "Using Adobe Flex 4".

This user guide is licensed for use under the terms of the Creative Commons Attribution 
Non-Commercial 3.0 License. 

This License allows users to copy, distribute, and transmit the user guide for noncommercial 
purposes only so long as 
  (1) proper attribution to Adobe is given as the owner of the user guide; and 
  (2) any reuse or distribution of the user guide contains a notice that use of the user guide is governed by these terms. 
The best way to provide notice is to include the following link. 
To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/

-->



<!-- containers\navigators\AccordionButtonNav.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark">
    <mx:Accordion id="accordion1" height="250">
        <mx:Form id="shippingAddress" label="1. Shipping Address">
            <mx:FormItem id="sfirstNameItem" label="First Name">
                <s:TextInput id="sfirstName" />
            </mx:FormItem>
        </mx:Form>
        <mx:Form id="billingAddress" label="2. Billing Address">
            <s:Button id="backButton" label="Back"
                click="accordion1.selectedIndex=0;" />
            <s:Button id="nextButton" label="Next"
                click="accordion1.selectedIndex=2;" />
        </mx:Form>
        <mx:Form id="creditCardInfo" label="3. Credit Card Information">
        </mx:Form>
    </mx:Accordion>
</s:Application>

Related examples in the same category

1.	Creating an accordion navigator
2.	Register an event listener in MXML for Accordion change event
3.	Accordion container, IndexChangedEvent
4.	Define an event listener for Accordion initialize event
5.	Creating and removing children of an Accordion container
6.	Put Form inside an Accordion container
7.	Creating an Accordion container
8.	Open last panel in the Accordion container
9.	Set a different text color for each Accordion buttons
10.	Register an event listener in MXML that is processed when you change views in an Accordion container.
11.	History management is Enabled for this Accordion
12.	History management is disabled for this Accordion
13.	Define an event listener for the initialize event, which is dispatched when the user first navigates to Pane 2 of an MX Accordion navigator container
14.	Using the Spark NavigatorContent container as a child of an Accordion container
15.	Set a different text color for each of the Accordion buttons
16.	Set Accordion creationPolicy to all, which instructs the container to instantiate all controls for every panel in the navigator container when the application starts
17.	Accordion is opened to the panel corresponding to the value of the index fragment
18.	Use selectedChild property

Accordion Button Navigation : Accordion « Components « Flex

Related examples in the same category