<?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:v="views.*"> <mx:Metadata> [Event(name="photoSelected",type="events.PhotoEvent")] </mx:Metadata> <mx:Script> <![CDATA[ import events.PhotoEvent; import valueObjects.Photo; import mx.collections.ArrayCollection; [Bindable] public var photoData:ArrayCollection; [Bindable] private var selectedPhoto:Photo; [Bindable] public var categoryData:ArrayCollection; public function displayDetails(selectedPhoto:Photo):void { currentState='details'; this.selectedPhoto=selectedPhoto; photoInState.load('assets/gallery/'+selectedPhoto.filename); photographerText.text=selectedPhoto.photographer; descText.text=selectedPhoto.desc; } private function purchasePhoto():void { var eventObj:PhotoEvent = new PhotoEvent(selectedPhoto,"photoSelected"); dispatchEvent(eventObj); } private function filterByCat(item:Object):Boolean { return categories.selectedItem.categoryId == item.categoryId; } private function filterPhotos():void { if (allPhotos.selected) { photoData.filterFunction = null; } else { photoData.filterFunction = filterByCat; } photoData.refresh(); } ]]> </mx:Script> <mx:states> <mx:State name="details"> <mx:RemoveChild target="{thumbnails}" /> <mx:AddChild relativeTo="{photoViewer}" position="lastChild"> <mx:Canvas> <mx:Image id="photoInState" x="55" y="15" width="400"/> <mx:Text id="photographerText" x="65" y="330" width="367" height="18" fontWeight="bold" color="#F8E5BB" /> <mx:Text id="descText" x="65" y="350" width="367" height="36" color="#F8E5BB" /> <mx:Button x="65" y="400" fillAlphas="[1,.8]" fillColors="[#F8E5BB, #F8E5BB]" label="return to gallery" click="currentState=''" /> <mx:Button x="200" y="400" fillAlphas="[1,.8]" fillColors="[#F8E5BB, #F8E5BB]" label="purchase photo" click="purchasePhoto()" /> </mx:Canvas> </mx:AddChild> </mx:State> </mx:states> <mx:VBox id="photoViewer" verticalGap="8" width="515"> <mx:HBox backgroundColor="#F8E5BB" width="100%" paddingBottom="3" paddingLeft="5" paddingRight="5" paddingTop="8" verticalAlign="middle" fontSize="11"> <mx:Label text="You are viewing:" /> <mx:CheckBox id="allPhotos" label="All Photos" selected="true" click="filterPhotos()"/> <mx:Label text="The Category" /> <mx:ComboBox id="categories" change="filterPhotos()" dataProvider="{categoryData}" labelField="category"/> </mx:HBox> <mx:TileList id="thumbnails" backgroundColor="#000000" backgroundAlpha="0" columnWidth="120" rowHeight="110" width="515" height="430" dataProvider="{photoData}" itemRenderer="views.DisplayImage" change="displayDetails(event.target.selectedItem as Photo)" rollOverColor="#63769E" borderThickness="0"/> </mx:VBox> </mx:HBox>