Accordian Examples

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

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

    horizontalAlign="center" backgroundGradientColors="[#651D1D, #651D1D]" paddingTop="0" viewSourceURL="srcview/index.html" backgroundGradientAlphas="[1.0, 1.0]">

   

    <mx:Panel title="Accordion Container" layout="vertical" color="0xffffff" borderAlpha="0.15" width="500" height="246"

         paddingTop="2" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center" x="10" y="10">

        

         <mx:Label width="100%" color="0x323232"

            text="Select an Accordion navigator button to change the panel."/>

        <mx:Accordion id="accordion" color="0x323232" width="100%" height="100%">

            <!-- Define each panel using a VBox container. -->

            <mx:VBox label="Accordion Button for Panel 1">

                <mx:Label text="Accordion container panel 1"/>

            </mx:VBox>

            <mx:VBox label="Accordion Button for Panel 2">

                <mx:Label text="Accordion container panel 2"/>

            </mx:VBox>

            <mx:VBox label="Accordion Button for Panel 3">

                <mx:Label text="Accordion container panel 3"/>

            </mx:VBox>

        </mx:Accordion>

        <mx:Label width="100%" color="0x323232"

            text="Programmatically select the panel using a Button control."/>

        <mx:HBox color="0x323232">

            <mx:Button label="Select Panel 1" click="accordion.selectedIndex=0;"/>

            <mx:Button label="Select Panel 2" click="accordion.selectedIndex=1;"/>

            <mx:Button label="Select Panel 3" click="accordion.selectedIndex=2;"/>

        </mx:HBox>

       

    </mx:Panel>

</mx:Application>

 

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#712F2F, #712F2F]">

            <mx:Accordion x="10" y="10" width="380" height="335">

                        <mx:Canvas label="Java Books" width="100%" height="100%">

                                    <mx:LinkButton x="10" y="22" label="JavaBeans: Developing Component Software in Java" width="358" textAlign="left" toolTip="{this.label}"/>

                                    <mx:LinkButton x="10" y="52" label="Java Secrets" width="195" textAlign="left" toolTip="{this.label}"/>

                                    <mx:LinkButton x="10" y="82" label="Java Network Programming" width="300" textAlign="left" toolTip="{this.label}"/>

                                    <mx:LinkButton x="10" y="112" label="The Java Developer's Resource" width="300" textAlign="left" toolTip="{this.label}"/>

                                    <mx:LinkButton x="10" y="142" label="The Java Handbook" width="195" textAlign="left" toolTip="{this.label}"/>

                                    <mx:LinkButton x="10" y="172" label="Concurrent Programming in Java" width="358" textAlign="left" toolTip="{this.label}"/>

                                    <mx:LinkButton x="10" y="202" label="The Java Virtual Machine Specification" width="358" textAlign="left" toolTip="{this.label}"/>

                                    <mx:LinkButton x="10" y="232" label="Java in a Nutshell" width="358" textAlign="left" toolTip="{this.label}"/>

                                    <mx:LinkButton x="10" y="262" label="Thinking in Java" width="195" textAlign="left" toolTip="{this.label}"/>

                        </mx:Canvas>

                        <mx:Canvas label="Oracle Books" width="100%" height="100%">

                                    <mx:LinkButton x="10" y="20" label="Oracle Database 11g Release 2 High Availability" width="358" textAlign="left" toolTip="{this.label}"/>

                                    <mx:LinkButton x="10" y="50" label="Pro Oracle Database 11g RAC on Linux " width="358" textAlign="left" toolTip="{this.label}"/>

                                    <mx:LinkButton x="10" y="80" label="Oracle Database Administration for Microsoft SQL Server DBAs " width="358" textAlign="left" toolTip="{this.label}"/>

                                    <mx:LinkButton x="10" y="110" label="Expert Oracle Database Architecture: Oracle Database 9i, 10g, and 11g Programming Techniques and Solutions" toolTip="{this.label}" width="358" textAlign="left"/>

                                    <mx:LinkButton x="10" y="140" label="Oracle Database 11g: The Complete Reference " width="358" textAlign="left" toolTip="{this.label}"/>

                                    <mx:LinkButton x="10" y="170" label="Oracle Database 11g: A Beginner's Guide " width="358" textAlign="left" toolTip="{this.label}"/>

                                    <mx:LinkButton x="10" y="200" label="Oracle 10g Database Administration Concepts &amp; Implementation Made Simple " width="358" textAlign="left" toolTip="{this.label}"/>

                        </mx:Canvas>

                        <mx:Canvas label="Flex Books" width="100%" height="100%">

                                    <mx:LinkButton x="10" y="10" label="Adobe Flex 4: Training from the Source, Vol. 1" width="358" textAlign="left" toolTip="{this.label}"/>

                                    <mx:LinkButton x="10" y="40" label="Learning Flex 4" width="358" textAlign="left" toolTip="{this.label}"/>

                                    <mx:LinkButton x="10" y="70" label="Flex 4 Cookbook" width="358" textAlign="left" toolTip="{this.label}"/>

                                    <mx:LinkButton x="10" y="100" label="Enterprise Development with Flex" width="256" textAlign="left" toolTip="{this.label}"/>

                        </mx:Canvas>

            </mx:Accordion>

           

</mx:Application>

<?xml version="1.0"?>

<!-- containers\navigators\AccordionButtonNav.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#642222, #642222]" layout="absolute" height="100%">

    <mx:Accordion id="accordion1" height="333" width="650" x="5" y="44">

        <mx:Form id="shippingAddress" label="1. Shipping Address">

            <mx:FormItem id="sfirstNameItem" label="First Name">

                <mx:TextInput id="sfirstName"/>

            </mx:FormItem>

            <mx:FormItem label="Last Name">

                <mx:TextInput/>

            </mx:FormItem>

            <mx:FormItem label="Email Id">

                <mx:TextInput/>

            </mx:FormItem>

            <mx:FormItem label="Phone No">

                <mx:TextInput/>

            </mx:FormItem>

        </mx:Form>

        <mx:Form id="billingAddress" label="2. Billing Address">

            <mx:Button id="backButton"

                label="Back"

                click="accordion1.selectedIndex=0;"/>

            <mx:Button id="nextButton"

                label="Next"

                click="accordion1.selectedIndex=2;"/>

        </mx:Form>

        <mx:Form id="creditCardInfo" label="3. Credit Card Information">

            <mx:Image>

                <mx:source>file:///C|/Users/My Server/Documents/Flex/payment.PNG</mx:source>

            </mx:Image>

            <mx:FormItem label="Label">

            </mx:FormItem>

        </mx:Form>

    </mx:Accordion>

    <mx:Label x="10" y="10" text="Accordian Example" width="338" height="24" color="#FEFEFE" fontSize="15"/>

</mx:Application>

<?xml version="1.0"?>

<!-- containers\navigators\AccordionStyling.mxml -->

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

    width="600"

    height="600"

    creationComplete="setButtonStyles();" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#683131, #683131]" layout="absolute">

    <mx:Script>

        <![CDATA[

            public function setButtonStyles():void {

                comp.getHeaderAt(0).setStyle('color', 0xAA0000);

                comp.getHeaderAt(1).setStyle('color', 0x00AA00);

            }

        ]]>

    </mx:Script>

    <mx:Accordion id="comp" x="10" y="48" width="202" height="175">

        <mx:VBox label="First VBox">

            <mx:TextInput/>

            <mx:Button label="Button 1"/>

        </mx:VBox>

        <mx:VBox label="Second VBox">

            <mx:TextInput/>

            <mx:Button label="Button 2"/>

        </mx:VBox>

    </mx:Accordion>

    <mx:Label x="10" y="10" text="Accordian Skin Control" width="219" height="32" color="#FDFFFF" fontSize="15"/>

</mx:Application>