Log In  
  Getting Started  
----------------------------------------

Resources

 

Accordion

  • An Accordion is a navigator container that displays its children containers as a series of panels
  • Only one panel or pleat displays at a time
  • Users navigate by clicking a pleat
  • The selectedIndex property contains the current active panel index
  • Accordion containers are only sized once to fit the size of the first child container by default. Set the resizeToContent property to true to force the Accordion to resize to the child container content size.
  • Accordion used with Form containers allow the user to navigate though the form.
  • The Accordion container can also organize information such that a single Submit button submit the entire form.
previous page next page

User rating?

Recipe.mxml

<?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 title="Chocolate Cake">

        <mx:Accordion id="ac"
            width="335"
            selectedIndex="0"
            historyManagementEnabled="false">

            <mx:VBox label="Yummy!"
                horizontalAlign="center"
                verticalAlign="middle"
                width="300" height="300">
                <mx:Image source="assets/dessert_decadent_cake.jpg" />
                <mx:Button label="Order - $5.00"
                    click="ac.selectedIndex=5" />
            </mx:VBox>

            <mx:VBox label="Equipment Needed"
                height="300">
                <mx:TextArea width="300" height="100%"
                    borderThickness="0">
                    <mx:htmlText>
                        <![CDATA[
 - Mixer
 - Measuring cups
 - Measuring spoons
 - Mixing Bowls
 - Mixing spoons
 - Cake pans
                        ]]>
                    </mx:htmlText>
                </mx:TextArea>
            </mx:VBox>

		    <mx:VBox label="Ingredients"
                height="300">
                <mx:TextArea width="300" height="100%"
                    borderThickness="0">
                    <mx:htmlText>
                        <![CDATA[
 - Eggs
 - Butter
 - Flour
 - Salt
 - Chocolate
 - Vanilla
 - Baking Powder
 - Milk
                        ]]>
                    </mx:htmlText>
                </mx:TextArea>
            </mx:VBox>

            <mx:VBox label="Instructions"
                height="300">
                <mx:Text text="1. Mix all dry ingredients in mixing bowl" />
                <mx:Text text="2. Mix all wet ingredients in another mixing bowl" />
                <mx:Text text="3. Mix wet and dry ingredients with mixer until smooth." />
                <mx:Text text="4. Melt chocolate, add to mixture and mix until even." />
                <mx:Text text="5. Pour into cake pan and bake at 350 for 40 minutes." />
                <mx:Text text="6. Let cool then frost." />
            </mx:VBox>

            <mx:VBox label="Nutritional Information"
                height="300">
                <mx:Text text="Servings: 1" />
                <mx:Text text="Calories: 10,000" />
                <mx:Text text="Fat: 10 grams" />
            </mx:VBox>

            <mx:VBox label="Order Form">
                <mx:Form>
                    <mx:FormItem label="Name">
                        <mx:TextInput id="customer" />
                    </mx:FormItem>
                    <mx:FormItem label="Address">
                        <mx:TextInput id="address" />
                    </mx:FormItem>
                    <mx:FormItem label="City">
                        <mx:TextInput id="city" />
                    </mx:FormItem>
                    <mx:FormItem label="State">
                        <mx:TextInput id="state" />
                    </mx:FormItem>
                    <mx:FormItem label="Zip">
                        <mx:TextInput id="zip" />
                    </mx:FormItem>
                    <mx:FormItem label="Credit Card">
                        <mx:TextInput id="cc" />
                    </mx:FormItem>
                    <mx:FormItem>
                        <mx:Button label="submit" />
                    </mx:FormItem>
                </mx:Form>
            </mx:VBox>

        </mx:Accordion>

    </mx:Panel>

</mx:Application>

Rendered Application

previous page next page

Added by Mark Nichoson , last edited by Randy Nielsen on Jul 20, 2009  (view change)
Labels: 
(None)

Powered by Atlassian Confluence 2.7.1, the Enterprise Wiki. Bug/feature request - Atlassian news - Contact administrators