<?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>

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

    <mx:Panel>
        <mx:LinkBar 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>