hi i have changed the dataprovider of the gallery from an array to an arraycollection, what an trying to archive is that when someone clicks on the list a different set of images is loaded in the gallery, that mean i would like to update the arraycollection with a new set of images when an item in the list is clicked. i still have failed to get the images to load dynamically but when i hard-code the image path in the collection the images loaded. but i think am making progress but i need help on what to do to update the collection with dynamic image paths. here is my new code.
"gallery.mxml" <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute" xmlns:ns1="components.*"> <mx:Script> <![CDATA[ import mx.rpc.events.ResultEvent; import mx.controls.Alert; import mx.managers.CursorManager; import mx.collections.ArrayCollection; [Bindable] private var dataAr1:ArrayCollection; private function concernOriginalReceived(event:ResultEvent):void { dataAr1 = event.result as ArrayCollection; } private function imageListHandler(event:Event):void{ trace("Someone clicked on the Large Green Button!"); remoteObj.gallery.send(); addimg(); } [Bindable] public var home_img1:ArrayCollection = new ArrayCollection([ {source:"assets/homeprofile_pics/extra_pics/bedroom-decorations.jpg"},{source:"assets/homeprofile_pics/extra_pics/Interior_Classical_bedroom_interior_005016_.jpg"}, {source:"assets/homeprofile_pics/extra_pics/clean-livingroom.jpg"},{source:"assets/homeprofile_pics/extra_pics/regreen-interior-design-ideas-remodeling-green-kitchen.jpg"}]); public function addimg():void { if (home_tiles.selectedItem !== null) { home_img1.setItemAt({source:"assets/homeprofile_pics/extra_pics/{homeImages.img1}"},0); home_img1.setItemAt({source:"assets/homeprofile_pics/extra_pics/{homeImages.img2}"},1); home_img1.setItemAt({source:"assets/homeprofile_pics/extra_pics/{homeImages.img3}"},2); home_img1.setItemAt({source:"assets/homeprofile_pics/extra_pics/{homeImages.img4}"},3); } } ]]> </mx:Script> <mx:RemoteObject id="remoteObj" destination="ColdFusion" source="gallery.cfcs.gallery"> <mx:method name="gallery" result="concernOriginalReceived(event)" fault="Alert.show(event.fault.faultString,'Error');"> <mx:arguments> <imgid_home>{imgid_home.text}</imgid_home> </mx:arguments> </mx:method> </mx:RemoteObject> <mx:Model id="homeImages"> <images> <img1>{dataAr1.getItemAt(0).img1}</img1> <img2>{dataAr1.getItemAt(0).img2}</img2> <img3>{dataAr1.getItemAt(0).img3}</img3> <img4>{dataAr1.getItemAt(0).img4}</img4> </images> </mx:Model> <ns1:imageName id="home_tiles" x="0" y="140" addImageEvent="imageListHandler(event)"/> <ns1:imgGallery x="170" y="140"/> <mx:Text id="imgid_home" text="{home_tiles.selectedItem.imgid_home}"/> <mx:Label id="img1" x="254" y="0" text="{dataAr1.getItemAt(0).img1}"/> <mx:Image x="499" y="0"> <mx:source>assets/homeprofile_pics/extra_pics/{homeImages.img4}</mx:source> </mx:Image> </mx:Application> "imageName.mxml" <?xml version="1.0" encoding="utf-8"?> <mx:List xmlns:mx="http://www.adobe.com/2006/mxml"; dataProvider="{dataAr}" labelField="location" creationComplete="Init()" change="ClickEventHandler()" selectedIndex="0"> <mx:Script> <![CDATA[ import mx.rpc.events.ResultEvent; import mx.controls.Alert; import mx.managers.CursorManager; import mx.collections.ArrayCollection; public function Init():void{ homeSvc.load(); } [Bindable] private var dataAr:ArrayCollection = new ArrayCollection; public function displayResult(event:ResultEvent):void{ dataAr = new ArrayCollection( (event.result as ArrayCollection).source); } private function ClickEventHandler():void{ trace("Ouch! I got clicked! Let me tell this to the world."); dispatchEvent(new Event("addImageEvent", true));// bubble to parent } ]]> </mx:Script> <mx:RemoteObject id="homeSvc" destination="ColdFusion" source="gallery.cfcs.homes1" showBusyCursor="true" fault="CursorManager.removeBusyCursor();Alert.show(event.fault.message)"> <mx:method name="load" result="displayResult(event)" /> </mx:RemoteObject> <mx:Metadata> [Event(name="addImageEvent", type="flash.events.Event")] </mx:Metadata> </mx:List> "imgGallery.mxml" <?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"; width="100%" height="100%"> <!--<mx:Array id="home_img"> <mx:Object label="img1" fullImage="assets/homeprofile_pics/extra_pics/bedroom-decorations.jpg" /> <mx:Object label="img2" fullImage="assets/homeprofile_pics/extra_pics/Interior_Classical_bedroom_interior_005016_.jpg" /> <mx:Object label="img3" fullImage="assets/homeprofile_pics/extra_pics/clean-livingroom.jpg" /> <mx:Object label="img4" fullImage="assets/homeprofile_pics/extra_pics/regreen-interior-design-ideas-remodeling-green-kitchen.jpg" /> </mx:Array> --> <mx:Label text="Title:" width="100%" textAlign="center" y="88" fontSize="12"/> <mx:Text width="100%" text="Mable tiled walls, spacious kitchen with well furnished furniture" y="115" textAlign="center" fontSize="12"/> <mx:Label x="190" y="143" id="home_id" text="{parentDocument.home_tiles.selectedItem.imgid_home}"/> <mx:VBox width="100%" verticalGap="2" horizontalAlign="center" borderStyle="solid" cornerRadius="10" bottom="0"> <mx:HorizontalList id="photoList" dataProvider="{parentDocument.home_img1}" labelField="label" iconField="fullImage" itemRenderer="components.Thumbnail" width="98%"/> </mx:VBox> <mx:Image x="348.5" y="169" source="assets/homeprofile_pics/extra_pics/{parentDocument.homeImages.img4}"/> </mx:Canvas> "Thumbnail.mxml" <?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"; width="100" height="110" paddingTop="0" paddingBottom="0" verticalScrollPolicy="off" horizontalScrollPolicy="off" verticalGap="0" horizontalAlign="center" > <mx:Label id="position" width="100" height="20" text="{data.label}"/> <mx:Canvas id="imageBox" width="95%" height="90" borderStyle="solid"> <mx:Image source="{data.source}" width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" /> </mx:Canvas> </mx:VBox>
