dynamic image gallery

[stinasius]

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>

[stinasius]

any help guys?....

[stinasius]

someone please help point out what am doing wrong in the code. would really appreciate it.

[Sam Lai]

Add a Label to thumbnail.mxml and show the image path to see that it
is getting that. Then hard-code an image path in thumbnail.mxml. This
will help you isolate the problem.

2009/7/6 stinasius <stinasius@...>:

> someone please help point out what am doing wrong in the code. would really appreciate it.
>
>
>
> ------------------------------------
>
> --
> Flexcoders Mailing List
> FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
> Alternative FAQ location: https://share.acrobat.com/adc/document.do?docid=942dbdc8-e469-446f-b4cf-1e62079f6847
> Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.comYahoo! Groups Links
>
>
>
>

[stinasius]

i have tried to do as you asked, added a label to the thumbnail.mxml and the labels show up as expected. still haven't seen why those images cant show in the Horizontal list.

[Sam Lai]

Does an image appear if you hardcode the image source in thumbnail.mxml?

2009/7/6 stinasius <stinasius@...>:

> i have tried to do as you asked, added a label to the thumbnail.mxml and the labels show up as expected. still haven't seen why those images cant show in the Horizontal list.
>
>
>
> ------------------------------------
>
> --
> Flexcoders Mailing List
> FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
> Alternative FAQ location: https://share.acrobat.com/adc/document.do?docid=942dbdc8-e469-446f-b4cf-1e62079f6847
> Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.comYahoo! Groups Links
>
>
>
>

[stinasius]

i hard-code an image path in imgGallery.mxml and it shows up perfectly bt i can't hard-code an image path in thumbnail.mxml coz its used as an item renderer for the horizontal list in imgGallery.mxml. but the image path work perfectly.

[thomas parquier-2]

Maybe you should use {} in the list' itemRenderer attribute as :

> itemRenderer="{components.Thumbnail}"
>

thomas
---
http://www.web-attitude.fr/
msn : thomas.parquier@...
softphone : sip:webattitude@... <sip%3Awebattitude@...>
téléphone portable : [phone]


2009/7/3 stinasius <stinasius@...>

>
>
> 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>
>
>  
>

[stinasius]

nop that doesn't work, but when i hard-code the image path in the array the images show up but when i use a dynamic path, no image shows up. below is the hard-coded array of images and the same array of images but with a dynamic path....
"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>

[thomas parquier-2]

I think parentDocument from itemRenderer is horizontalList not gallery.mxml.

thomas
---
http://www.web-attitude.fr/
msn : thomas.parquier@...
softphone : sip:webattitude@... <sip%3Awebattitude@...>
téléphone portable : [phone]


2009/7/6 stinasius <stinasius@...>

>
>
> nop that doesn't work, but when i hard-code the image path in the array the
> images show up but when i use a dynamic path, no image shows up. below is
> the hard-coded array of images and the same array of images but with a
> dynamic path....
> "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>
>
>  
>

[stinasius]

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....

[thomas parquier-2]

Maybe "home_img" in "imgGallery.mxml" is not refreshed when "homeImages" is
updated or not bindable too.

thomas
---
http://www.web-attitude.fr/
msn : thomas.parquier@...
softphone : sip:webattitude@... <sip%3Awebattitude@...>
téléphone portable : [phone]


2009/7/6 stinasius <stinasius@...>

>
>
> 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....
>
>  
>

[Tracy Spratt-2]

Implement you renderer using a set data override function so that you can
debug the path.

 

Tracy Spratt,

Lariat Services, development services available

  _____  

From: flexcoders@... [mailto:flexcoders@...] On
Behalf Of stinasius
Sent: Monday, July 06, 2009 12:27 PM
To: flexcoders@...
Subject: [flexcoders] Re: dynamic image gallery

 






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. <http://www.adobe.com/2006/mxml>
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. <http://www.adobe.com/2006/mxml>
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. <http://www.adobe.com/2006/mxml>
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.img
1}" />
<mx:Object label="img2"
fullImage="assets/homeprofile_pics/extra_pics/{parentDocument.homeImages.img
2}" />
<mx:Object label="img3"
fullImage="assets/homeprofile_pics/extra_pics/{parentDocument.homeImages.img
3}" />
<mx:Object label="img4"
fullImage="assets/homeprofile_pics/extra_pics/{parentDocument.homeImages.img
4}" />
</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_int
erior_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. <http://www.adobe.com/2006/mxml>
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....

[stinasius]

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>

[thomas parquier-2]

Hi,

I think "addImg()" in "imageListHandler" should be in
"concernOriginalReceived".
And I'm not sure source strings in "addImg()" are expanded ("such as
assets/homeprofile_pics/extra_pics/{homeImages.img1}"), I think expansion of
vars in {} only occurs in tags not in as.

But your code is much complicated, to simplify a little I would

   - add a public "data" array in "imgGallery", bound to "photoList" 's
   dataprovider
   - add an id to imgGallery
   - set gallery's "data" directly in "concernOriginalReceived"


thomas
---
http://www.web-attitude.fr/
msn : thomas.parquier@...
softphone : sip:webattitude@... <sip%3Awebattitude@...>
téléphone portable : [phone]


2009/7/9 stinasius <stinasius@...>

>
>
> 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>
>
>  
>

[stinasius]

hi, care to show how to do that, kinda confused

[thomas parquier-2]

Sorry didnt mean to be offensive, but the difficulty to read the code is
probably also the problem : the array of paths to images is build three
times item by item and <mx:Model> may not dispatch event on item update.
In dataAr1, homeImages and home_img. dataAr1 is bindable so you could build
the dataprovider here, in "concernOriginalReceived" :

> public var dataAr:ArrayCollection = new ArrayCollection;
> private function concernOriginalReceived(event:ResultEvent):void {
>     dataAr1 = new ArrayCollection( [
>                                                   {label:"img1",
> fullImage:"assets/homeprofile_pics/extra_pics/"+lastResult[0].img1},
>                                                   {label:"img2",
> fullImage:"assets/homeprofile_pics/extra_pics/"+lastResult[0].img2},
>                                                   {label:"img3",
> fullImage:"assets/homeprofile_pics/extra_pics/"+lastResult[0].img3},
>                                                   {label:"img4",
> fullImage:"assets/homeprofile_pics/extra_pics/"+lastResult[0].img4}

                                                 ] );
> }
>

you could either "push" dataAr1 here into imgGallery (assuming below
imgGallery's id is gallery ) (so bindable would not be usefull for
imageGallery) :

> gallery.home_img = dataAr1;
>
or modify imgGallery's horizontalList to use dataAr1 (which has to be
public) as dataProvider :

> <mx:HorizontalList id="photoList" dataProvider="{parentDocument.dataAr1}"
> itemRenderer="components.Thumbnail" columnCount="4" width="98%"/>
>

thomas
---
http://www.web-attitude.fr/
msn : thomas.parquier@...
softphone : sip:webattitude@... <sip%3Awebattitude@...>
téléphone portable : [phone]


2009/7/9 stinasius <stinasius@...>

>
>
> hi, care to show how to do that, kinda confused
>
>  
>

[stinasius]

Hi you were not being offensive, sorry if i gave you the idea you were, as a matter of fact you are trying to help and i am grateful for it. now i cant use lastResult because i am using a remote object and there is no resultFormat property on RemoteObject methods. so am still stuck, plus where you suggesting i do away with the <mx:Model> completely?

[thomas parquier-2]

oops, read "event.result.getItemAt(0)" instead of "lastResult[0]"...
I think you should keep one data holder (<mx:Model> or arrayCollection)
which would be bound to gallery and whatever has to get images path and
label.
You may keep <mx:Model> (because easier to read than AS)  to store data
usefull for gallery component :

> <mx:Model id="homeImages">
>    <gallery>

      <title>title</title>

>       <label>{home_tiles.selectedItem.data.imgId_home}</label>
>       <images>
>
> <img><label>img1</label><fullImage>{dataAr1.getItemAt(0).img1}</fullImage></img>
>
> <img><label>img2</label><fullImage>{dataAr1.getItemAt(0).img2}</fullImage></img>
>
> <img><label>img3</label><fullImage>{dataAr1.getItemAt(0).img3}</fullImage></img>
>
> <img><label>img4</label><fullImage>{dataAr1.getItemAt(0).img4}</fullImage></img>
>
>       </images>

   </gallery>
> </mx:Model>
>
then use "parentDocument.homeImages.images.img" as data provider for
gallery's horizontalList, and "parentDocument.homeImages.label" for
gallery's label.

thomas
---
http://www.web-attitude.fr/
msn : thomas.parquier@...
softphone : sip:webattitude@... <sip%3Awebattitude@...>
téléphone portable : [phone]


2009/7/10 stinasius <stinasius@...>

>
>
> Hi you were not being offensive, sorry if i gave you the idea you were, as
> a matter of fact you are trying to help and i am grateful for it. now i cant
> use lastResult because i am using a remote object and there is no
> resultFormat property on RemoteObject methods. so am still stuck, plus where
> you suggesting i do away with the <mx:Model> completely?
>
>  
>