« Return to Thread: dynamic image gallery

Re: dynamic image gallery

by stinasius :: Rate this Message:

Reply to Author | View in Thread

You dont get it. the parentDocument is the main application where the horizontal list is loaded. here is the complete 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();
                        }
                       
                ]]>
        </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()">
        <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:Script>
                <![CDATA[
                        import mx.collections.*;
                       
                        [Bindable]
                        private var home_img1:ArrayCollection = new ArrayCollection(home_img);

                ]]>
        </mx:Script>
       
        <!--<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: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="{home_img}" labelField="label" iconField="fullImage" 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" text="{data.label}"/>
       
        <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>


please any flex expert out there help me....



 « Return to Thread: dynamic image gallery