Hi guys I have a problem with an image gallery am trying to do. This is the scenario. In my application I have the main application file "gallery.mxml" and three custom components namely "imageName.mxml", "imageGallery.mxml" and "Thumbnail.mxml". what am trying to do is have a dynamic image gallery where "imageName.mxml" loads image names from a database and is used to point to a path to get corresponding images on the server. So am using events to tell the main application that image source has changed so that whenever someone clicks on the list of image names, different images are loaded in the horizontal list. Everything works perfectly well except the images are not showing up in the horizontal list component. Yet when I test the path to images everything is good and event the events are dispatched well. Please help me understand what is causing the images not to show in the horizontal list. Below is my codeĀ . Thanks in advance. "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(); } ]]> </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> <!--<mx:Array id="home_img"> <mx:String>assets/homeprofile_pics/extra_pics/{homeImages.img1}</mx:String> <mx:String>assets/homeprofile_pics/extra_pics/{homeImages.img2}</mx:String> <mx:String>assets/homeprofile_pics/extra_pics/{homeImages.img3}</mx:String> <mx:String>assets/homeprofile_pics/extra_pics/{homeImages.img4}</mx:String> </mx:Array> --> <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()"> <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> "imageGallery.mxml" <?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"; xmlns:local="as_logic.*" width="100%" height="100%" xmlns="components.*"> <mx:Array id="home_img"> <mx:Object label="img1" fullImage="assets/homeprofile_pics/extra_pics/{parentDocument.homeImages.img1}" /> <mx:Object label="img2" fullImage="assets/homeprofile_pics/extra_pics/{parentDocument.homeImages.img2}" /> <mx:Object label="img3" fullImage="assets/homeprofile_pics/extra_pics/{parentDocument.homeImages.img3}" /> <mx:Object label="img4" fullImage="assets/homeprofile_pics/extra_pics/{parentDocument.homeImages.img4}" /> </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="{home_img}" itemRenderer="components.Thumbnail" columnCount="4" width="98%"/> </mx:VBox> <!--image used to test if "parentDocument.homeImages" actually loads an image and the result was a success. it loads an image--> <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"/> <mx:Canvas id="imageBox" width="95%" height="90" borderStyle="solid"> <mx:Image source="{data.fullImage}" width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" /> </mx:Canvas> </mx:VBox>
