<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" color="#000000"> <mx:Metadata> [Event("checkout")] </mx:Metadata> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var purchasedPhotos:ArrayCollection private function checkOut():void { dispatchEvent( new Event("checkout") ); } ]]> </mx:Script> <mx:states> <mx:State name="expandedCart"> <mx:SetProperty target="{cart}" name="height" value="472" /> <mx:AddChild relativeTo="{cart}" position="lastChild"> <mx:DataGrid x="10" y="60" height="340" dataProvider="{purchasedPhotos}" width="200"> <mx:columns> <mx:DataGridColumn headerText="Picture" width="100" dataField="filename"/> <mx:DataGridColumn headerText="Information" width="100"> <mx:itemRenderer> <mx:Component> <mx:VBox> <mx:Label text="{data.photographer}"/> <mx:Label text="{data.category}"/> </mx:VBox> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> </mx:AddChild> <mx:AddChild relativeTo="{cart}" position="lastChild"> <mx:Button label="delete" id="button3" x="10" y="410" /> </mx:AddChild> <mx:AddChild relativeTo="{cart}" position="lastChild"> <mx:Button id="button2" label="check out" x="131" y="408" click="checkOut()"/> </mx:AddChild> <mx:SetProperty target="{button1}" name="label" value="collapse details" /> <mx:SetEventHandler target="{button1}" name="mouseUp" handler="currentState=''" /> </mx:State> </mx:states> <mx:transitions> <mx:Transition id="expandingCart" fromState="" toState="expandedCart"> <mx:Resize target="{cart}" /> </mx:Transition> <mx:Transition id="collapsingCart" fromState="expandedCart" toState=""> <mx:Resize target="{cart}" duration="1000" /> </mx:Transition> </mx:transitions> <mx:Image id="woman" y="100" source="assets/fstop/woman.jpg" /> <mx:Panel id="cart" layout="absolute" width="225" height="90" title="Shopping Cart" borderAlpha="1" headerColors="[#63769E, #B5D2FA]" borderThicknessBottom="0" borderThicknessLeft="0" borderThicknessRight="0" paddingBottom="10"> <mx:Label x="10" y="8" text="You have {purchasedPhotos.length} item(s) in your cart." /> <mx:Button id="button1" x="10" y="30" label="expand details" mouseUp="currentState='expandedCart'" /> </mx:Panel> </mx:Canvas>