Listing 1: AccordionForm.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" pageTitle="Job Application">
    <mx:Accordion id="complexForm" width="500" height="400">
        <mx:Form id="personalInfo" label="1. Personal Information">
            <mx:FormItem id="firstNameItem" label="First Name" required="true">
                <mx:TextInput id="firstName" width="300" />
            </mx:FormItem>

            <mx:FormItem id="lastNameItem" label="Last Name" required="true">
                <mx:TextInput id="lastName" width="300" />
            </mx:FormItem>

            <mx:FormItem id="addressItem" label="Address" required="true">
                <mx:TextInput id="address" width="300" />
            </mx:FormItem>

            <mx:FormItem id="cityItem" label="City" required="true">
                <mx:TextInput id="city" width="300" />
            </mx:FormItem>

            <mx:FormItem id="stateItem" label="State" required="true">
                <mx:TextInput id="state" width="30" />
            </mx:FormItem>

            <mx:FormItem id="zipItem" label="Zip" required="true">
                <mx:TextInput id="zip" width="60" />
            </mx:FormItem>

            <mx:FormItem id="phoneItem" label="Phone" required="true">
                <mx:TextInput id="phone" width="200" />
            </mx:FormItem>

            <mx:FormItem id="dobItem" label="Date of Birth" required="true">
                <mx:DateField id="dob" />
            </mx:FormItem>

            <mx:FormItem id="ssnItem" label="SSN" required="true">
                <mx:TextInput id="ssn" width="300" />
            </mx:FormItem>

            <mx:FormItem id="citizenItem" label="U.S. Citizen" required="true">
                <mx:CheckBox id="citizen" />
            </mx:FormItem>
        </mx:Form>

        <mx:Form id="employmentHistory" label="2. Employment History"></mx:Form>

        <mx:Form id="education" label="3. Education History"></mx:Form>

        <mx:Form id="references" label="4. References"></mx:Form>
    </mx:Accordion>

    <mx:HBox horizontalAlign="right" width="500">
        <mx:Button id="submitButton" label="Process Application"  />
    </mx:HBox>
</mx:Application>


Listing 2: Chart.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
    <mx:Script>
        <![CDATA[
            // data for chart
            // month data
            var jawsDroppingByMonth = [
   {Month: "Jan 2004", Jaws:20000, monthNum:1}, {Month: "Feb 2004", Jaws:30000,
	monthNum:2}, {Month: "Mar 2004", Jaws:40000, monthNum:3}, {Month: "Apr 2004",
	Jaws:50000, monthNum:4}, {Month: "May 2004", Jaws:60000, monthNum:5}, {Month: "Jun
	2004", Jaws:70000, monthNum:6}, {Month: "Jul 2004", Jaws:80000, monthNum:7},
	{Month: "Aug 2004", Jaws:90000, monthNum:8}, {Month: "Sep 2004", Jaws:100000,
	monthNum:9}, {Month: "Oct 2004", Jaws:120000, monthNum:10}, {Month: "Nov 2004",
	Jaws:130000, monthNum:11}, {Month: "Dec 2004", Jaws:140000, monthNum:12}
            ]

            // detail data--initial value
            var jawsDroppingByDay = new Array();

            // function to get detail data (December only for sample purposes)
            function getDetails(theMonth:Object) {
                if (theMonth.monthNum == 12) {
                    jawsDroppingByDay = [
   {Day: "1", Jaws:3000}, {Day: "2", Jaws:5000}, {Day: "3", Jaws:7500}, {Day:
	"4", Jaws:9000}, {Day: "5", Jaws:11500}, {Day: "6", Jaws:14000}, {Day: "7",
	Jaws:17000}, {Day: "8", Jaws:19500}, {Day: "9", Jaws:21700}, {Day: "10",
	Jaws:22500}, {Day: "11", Jaws:25000}, {Day: "12", Jaws:28000}, {Day: "13",
	Jaws:32000}, {Day: "14", Jaws:40000}, {Day: "15", Jaws:42500}, {Day:
	"16", Jaws:45500}, {Day: "17", Jaws:49000}, {Day: "18", Jaws:51000},
	{Day: "19", Jaws:53700}, {Day: "20", Jaws:57000}, {Day: "21",
	Jaws:60000}, {Day: "22", Jaws:68000}, {Day: "23", Jaws:75000}, {Day:
	"24", Jaws:80000}, {Day: "25", Jaws:90000}, {Day: "26", Jaws:95000},
	{Day: "27", Jaws:100000}, {Day: "28", Jaws:110000}, {Day: "29",
	Jaws:120000}, {Day: "30", Jaws:130000}, {Day: "31", Jaws:140000}
                  ]
                } else {
                    jawsDroppingByDay = new Array();
                }
            }
        ]]>
    </mx:Script>

    <mx:Panel title="People Awed By Flex" width="80%" height="100%">
        <mx:Label text="Jaws Dropping By Month" fontWeight="bold" />

        <mx:ColumnChart dataProvider="{jawsDroppingByMonth}" width="100%" height="60%"
		 showDataTips="true" mouseClickData="getDetails(event.hitData.item)">
            <mx:horizontalAxis>
                <mx:CategoryAxis dataProvider="{jawsDroppingByMonth}" name="Month"
				 categoryField="Month" />
            </mx:horizontalAxis>

            <mx:verticalAxis>
                <mx:LinearAxis name="Number Awed" />
            </mx:verticalAxis>

            <mx:series>
                <mx:Array>
                    <mx:ColumnSeries xField="Month" yField="Jaws" name="Jaws Dropping" />
                </mx:Array>
            </mx:series>
        </mx:ColumnChart>

        <mx:Label text="Jaws Dropping By Day" fontWeight="bold" />

        <mx:ColumnChart dataProvider="{jawsDroppingByDay}" width="100%" height="40%"
		 showDataTips="true">
            <mx:horizontalAxis>
                <mx:CategoryAxis dataProvider="{jawsDroppingByDay}" name="Day" categoryField="Day"
				 />
            </mx:horizontalAxis>

            <mx:verticalAxis>
                <mx:LinearAxis name="Jaws" />
            </mx:verticalAxis>

            <mx:series>
                <mx:Array>
                    <mx:ColumnSeries xField="Day" yField="Jaws" name="Jaws Dropping" />
                </mx:Array>
            </mx:series>
        </mx:ColumnChart>
    </mx:Panel>
</mx:Application>