In a small Flex app, I have two viewstates, <start> and <spreadView>. In <start> I have a Tile with VBoxes and HBoxes, when the user click on a thumbnail <mx:image>, I'd like it to set the source of the image on <spreadView> and then swithc to that view.
Here's my code, propably very messy, but this i my first ever Flex project - so please provide any helpers if needed :-) Thanks, Mark <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute" creationComplete="xmlEdition.send();xmlSales.send();xmlRegion.send();xmlInsertion.send();xmlPages.send();"> <mx:states> <mx:State name="spreadView"> <mx:SetProperty target="{vbox1}" name="visible" value="false"/> <mx:SetProperty target="{tile1}" name="visible" value="false"/> <mx:AddChild relativeTo="{pageCanvas}" position="lastChild"> <mx:HBox id="spreadImages" horizontalGap="0" click="this.currentState=''"> <mx:Image id="bigLeft" showEffect="Fade" source="" scaleX="1" scaleY="1"/> <mx:Image id="bigRight" showEffect="Fade" source="" scaleX="1" scaleY="1"/> </mx:HBox> </mx:AddChild> </mx:State> </mx:states> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.rpc.events.ResultEvent; import mx.events.ListEvent; import mx.controls.Alert; [Bindable] private var editions:ArrayCollection = new ArrayCollection(); [Bindable] private var salesPeople:ArrayCollection = new ArrayCollection(); [Bindable] private var regions:ArrayCollection = new ArrayCollection(); [Bindable] private var insertions:ArrayCollection = new ArrayCollection(); [Bindable] private var pages:ArrayCollection = new ArrayCollection(); private function insertionHandler(event:ResultEvent):void { insertions = event.result.action.item; } private function regionHandler(event:ResultEvent):void { regions = event.result.action.item; } private function salesHandler(event:ResultEvent):void { salesPeople = event.result.action.item; } private function editionHandler(event:ResultEvent):void{ editions = event.result.action.item; } private function pageHandler(event:ResultEvent):void { pages = event.result.action.pageset; } private function itemClickEvent(event:ListEvent):void { Alert.show( String(event.currentTarget.selectedItem.materialno), "Materiale Nr.", mx.controls.Alert.OK); } ]]> </mx:Script> <mx:HTTPService id="xmlEdition" url="http://flex2.dk/mark/xml/ddt/xmlEdition.xml"; result="editionHandler(event)" /> <mx:HTTPService id="xmlSales" url="http://flex2.dk/mark/xml/ddt/xmlSales.xml"; result="salesHandler(event)" /> <mx:HTTPService id="xmlRegion" url="http://flex2.dk/mark/xml/ddt/xmlRegion.xml"; result="regionHandler(event)" /> <mx:HTTPService id="xmlInsertion" url="http://flex2.dk/mark/xml/ddt/xmlInsertion.xml"; result="insertionHandler(event)" /> <mx:HTTPService id="xmlPages" url="http://flex2.dk/mark/xml/ddt/xmlPages.xml"; result="pageHandler(event)" /> <mx:SoundEffect id="mySounds" source="@Embed(source='bin/sound2.mp3')"/> <mx:ApplicationControlBar x="0" y="0" width="100%" height="50"> <mx:HBox width="100%" height="100%"> <mx:Label x="9" y="8" text="Udgave :" width="58"/> <mx:ComboBox id="edition" dataProvider="{editions}" x="70" y="6" labelField="title" /> <mx:Label x="209" y="8" text="Region :"/> <mx:ComboBox id="region" dataProvider="{regions}" labelField="pub" /> <mx:Label x="384" y="8" text="Sælger :"/> <mx:ComboBox id="sales" x="265" y="6" dataProvider="{salesPeople}" labelField="person"/> </mx:HBox> </mx:ApplicationControlBar> <mx:Canvas width="100%" height="100%" x="0" y="51"> <mx:DividedBox direction="vertical" width="100%" height="100%"> <mx:Panel width="100%" height="100%"> <mx:DividedBox direction="horizontal" width="100%" height="100%"> <mx:Panel width="250" height="100%" backgroundColor="0xCCCCCC"> <mx:TabNavigator width="100%" height="100%"> <mx:Canvas label="Annoncer" width="100%" height="100%"> <mx:DataGrid id="dginsertions" dataProvider="{insertions}" x="0" y="0" width="100%" height="100%" showScrollTips="true" showDataTips="true" itemClick="itemClickEvent(event);"> <mx:columns> <mx:DataGridColumn headerText="Firma" dataField="advertiser" dataTipField="materialno" /> </mx:columns> </mx:DataGrid> </mx:Canvas> <mx:Canvas label="Artikler" width="100%" height="100%"> <mx:DataGrid id="articles" dataProvider="" x="0" y="0" width="100%" height="100%"> <mx:columns> <mx:DataGridColumn headerText="" dataField=""/> </mx:columns> </mx:DataGrid> </mx:Canvas> </mx:TabNavigator> </mx:Panel> <mx:DividedBox direction="vertical" width="100%" height="100%"> <mx:Panel height="100%" width="100%" backgroundColor="0xCCCCCC"> <mx:Canvas id="pageCanvas" x="0" y="0" width="100%" height="100%" showEffect="wipeUp" hideEffect="wipeDown" visible="true"> <mx:Tile id="tile1"> <mx:Repeater id="myRepeater" dataProvider="{pages}"> <mx:VBox backgroundColor="gray" width="100%" id="vbox1"> <mx:HBox horizontalGap="0" click="this.currentState='spreadView';{mySounds}"> <mx:Image showEffect="Fade" source="{myRepeater.currentItem.images.imgThumb_left}" scaleX="1" scaleY="1"/> <mx:Image showEffect="Fade" source="{myRepeater.currentItem.images.imgThumb_right}" scaleX="1" scaleY="1"/> </mx:HBox> <mx:HBox width="100%"> <mx:Canvas backgroundColor="white" width="50%"> <mx:Label textAlign="left" text="{myRepeater.currentItem.left.page.pageno} {myRepeater.currentItem.left.page.pagetitle}" width="100%" /> </mx:Canvas> <mx:Canvas backgroundColor="white" width="50%"> <mx:Label textAlign="right" text="{myRepeater.currentItem.right.page.pageno} {myRepeater.currentItem.right.page.pagetitle}" width="100%" /> </mx:Canvas> </mx:HBox> </mx:VBox> </mx:Repeater> </mx:Tile> </mx:Canvas> </mx:Panel> </mx:DividedBox> </mx:DividedBox> </mx:Panel> <mx:Canvas width="100%" height="120" id="thumbbar" backgroundColor="#ffffff" backgroundAlpha="1.0"> <mx:HBox width="100%" height="100%" left="0" top="0" horizontalGap="10"> <mx:Repeater id="myRepeater2" dataProvider="{pages}"> <mx:HBox horizontalGap="0" > <mx:Image showEffect="Fade" source="{myRepeater2.currentItem.images.imgThumb_left}" scaleX="0.5" scaleY="0.5"/> <mx:Image showEffect="Fade" source="{myRepeater2.currentItem.images.imgThumb_right}" scaleX="0.5" scaleY="0.5"/> </mx:HBox> <mx:HBox width="100%"> <mx:Canvas backgroundColor="black" width="50%"> <mx:Label textAlign="left" text="{myRepeater2.currentItem.left.page.pageno} {myRepeater2.currentItem.left.page.pagetitle}" width="100%" /> </mx:Canvas> <mx:Canvas backgroundColor="black" width="50%"> <mx:Label textAlign="right" text="{myRepeater2.currentItem.right.page.pageno} {myRepeater2.currentItem.right.page.pagetitle}" width="100%" /> </mx:Canvas> </mx:HBox> </mx:Repeater> </mx:HBox> </mx:Canvas> </mx:DividedBox> </mx:Canvas> </mx:Application>
