<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundColor="#FFFFFF"
    backgroundAlpha="0">

    <mx:Panel>
        <mx:TabBar dataProvider="{viewstack1}" />

        <mx:ViewStack id="viewstack1"
            x="30" y="32"
            width="452" height="339"
            selectedIndex="0">
            <mx:Form label="Store"
                width="100%" height="100%">
                <mx:FormItem label="Acme Widget 1.0">
                    <mx:NumericStepper id="num"
                        value="1" />
                    <mx:Button label="Add to Cart"
                        click="viewstack1.selectedIndex=1" />
                </mx:FormItem>
            </mx:Form>
             <mx:Form label="Shopping Cart"
                width="100%" height="100%">
                <mx:FormItem label="Acme Widget 1.0">
                   <mx:Text text="Quantity: {num.value}" />
                   <mx:Text text="Total: ${num.value * 15.00}" />
                    <mx:Button label="Checkout"
                        click="viewstack1.selectedIndex=2" />
                </mx:FormItem>
            </mx:Form>
            <mx:Form label="Checkout"
                width="100%" height="100%">
                <mx:FormItem label="Name on Credit Card"
                    required="true">
                    <mx:TextInput id="ccname" />
                </mx:FormItem>
                <mx:FormItem label="Credit Card Number">
                    <mx:TextInput id="ccnum" />
                    <mx:Button id="buyButton"
                        label="Buy" />
                </mx:FormItem>
            </mx:Form>
            <mx:Form label="Thank You!"
                width="100%" height="100%">
                <mx:Text text="Thanks for your purchase!" />
            </mx:Form>
        </mx:ViewStack>
    </mx:Panel>

</mx:Application>
