8 Replies Latest reply on Apr 17, 2008 1:18 PM by jinx82002

    Help! Help! Help!  TileList Problem

    evware77
      Hello,

      I am trying to get my TileList to show the image in my catalog site. I am using an XML that contains the images and an itemRenderer to display the images. However, the images are not showing up and I have turned over everything I know to do. Can anyone help me straighten this out?

      Thanks!
        • 1. Re: Help! Help! Help!  TileList Problem
          jinx82002
          evware77,
          I don't see your itemRender. But first off, I would use an XMLListCollection for this one most likely instead of ArrayCollection, but that's just preference. On your HTTPService, you don't specify a resultFormat, if aquaData = event.result.aquariums.model; points to the model node in your xml doc, I'd specify e4x for your resultFormat. Also, specify a faultHandler for the HTTPService so you can see what's going on better. Try those first.
          • 2. Re: Help! Help! Help!  TileList Problem
            Garyl Woolworth Level 1
            It sounds stupid but I'd also check to make sure your image even exists. You could do this by a simple alert inside of your displayDetails method. Your path is obviously a relative one but if you do Alert.show(your domain + 'BD2U_sm_aqua/'+selectedPhoto.filename+'_sm.png'); and copy that into a browser, you better see an image. :smile;
            • 3. Re: Help! Help! Help!  TileList Problem
              evware77 Level 1
              Hi again,

              Well, I adjusted the code to accomodate the changes that were suggested by jinx82002. I think I got it right, however, there is no change. I am still getting no images. Additionally, I did check to make sure that the images exist. They do. I reinserted that itemRenderer. Where do I go from here? Haven't a clue. Here is the new code.

              <?xml version="1.0" encoding="utf-8"?>
              <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%" height="100%" creationComplete="aqua.send()"
              horizontalScrollPolicy="off" verticalScrollPolicy="off" xmlns:comp="components2.*">

              <mx:Script>
              <![CDATA[
              import mx.rpc.events.ResultEvent;
              import mx.collections.ArrayCollection;

              [Bindable]
              public var aquaData:XMLList;

              private function resultHandler(event:ResultEvent):void {
              aquaData = event.result.aquariums.model;
              }

              [Bindable]
              public var selectedPhoto:Object;
              private function displayDetails(event:Event):void{
              currentState='AquaDetails';
              selectedPhoto = new Object();
              selectedPhoto=event.currentTarget.selectedItem;
              photoInState.load('BD2U_sm_aqua/'+selectedPhoto.filename+'_sm.png')
              }


              ]]>
              </mx:Script>

              <mx:HTTPService id="aqua"
              url="XMLFiles/Aqua_small.xml"
              result="resultHandler(event)"
              resultFormat="e4x"/>


              <mx:states>
              <mx:State name="AquaDetails">
              <mx:AddChild>
              <mx:Image id="photoInState"/>
              </mx:AddChild>


              </mx:State>
              </mx:states>

              <mx:TileList id="Photos" dataProvider="{aquaData}" width="100%" height="100%" change="displayDetails(event)"
              itemRenderer="itemViews.aquaRendererSm"/>

              </mx:HBox>

              The XML structure that I am using is:

              <aquariums>
              <model id="2">
              <name>Walnut Grove</name>
              <descr>Large Decrorative Aquarium</descr>
              <image>BD2U_sm_aqua/aqua_100_sm002.png</image>
              </model>
              <model id="3">
              <name>Walnut Grove</name>
              <descr>Large Decrorative Aquarium</descr>
              <image>BD2U_sm_aqua/aqua_100_sm003.png</image>
              </model>
              <model id="4">
              <name>Walnut Grove</name>
              <descr>Large Decrorative Aquarium</descr>
              <image>BD2U_sm_aqua/aqua_100_sm004.png</image>
              </model>
              aquariums
              • 4. Re: Help! Help! Help!  TileList Problem
                jinx82002 Level 1
                Hey evware77,
                I whipped up a quick sample for you just to run through the steps and troubleshoot. I put your HBox on the main application in my sample like so:

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%" height="100%" creationComplete="aqua.send()"
                horizontalScrollPolicy="off" verticalScrollPolicy="off" xmlns:comp="components2.*">

                <mx:Script>
                <![CDATA[
                import mx.collections.XMLListCollection;
                import mx.rpc.events.ResultEvent;
                import mx.collections.ArrayCollection;
                import components2.*;

                [Bindable]
                public var aquaData:XMLListCollection;

                private function resultHandler(event:ResultEvent):void {
                aquaData = new XMLListCollection(event.result..model as XMLList);
                }

                [Bindable]
                public var selectedPhoto:Object;
                private function displayDetails(event:Event):void{
                currentState='AquaDetails';
                selectedPhoto = new Object();
                selectedPhoto=event.currentTarget.selectedItem;
                photoInState.load('BD2U_sm_aqua/'+selectedPhoto.filename+'_sm.png')
                }


                ]]>
                </mx:Script>

                <mx:HTTPService id="aqua"
                url="XMLFiles/Aqua_small.xml"
                result="resultHandler(event)"
                resultFormat="e4x"/>


                <mx:states>
                <mx:State name="AquaDetails">
                <mx:AddChild>
                <mx:Image id="photoInState"/>
                </mx:AddChild>


                </mx:State>
                </mx:states>

                <mx:TileList id="Photos" dataProvider="{aquaData}" width="500" height="800" change="displayDetails(event)"
                itemRenderer="components2.AquaRendererSm"/>

                </mx:Application>


                Then for the itemRenderer, a separate MXML component (just for a quick test, but you build it how you want it to look). Make sure it's uppercase AquaRendererSm.mxml and inside the folder components2 (or wherever you declare it in your xml namespace). My quick sample code for the AquaRendererSm is this:

                <?xml version="1.0" encoding="utf-8"?>
                <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="200" height="150" horizontalScrollPolicy="off" verticalScrollPolicy="off">
                <mx:Label text="{data.descr}" />
                <mx:Image source="{data.image}" />
                </mx:VBox>

                aquaData is now an XMLListCollection (that way it's props are bindable), the HTTPService specifies a resultFormat of e4x so you can refer to the nodes easily.

                In the result handler for the HTTPService, I set:

                aquaData = new XMLListCollection(event.result..model as XMLList);

                The event.result..model is the e4x way to point to a list of all the <model> nodes in your xml, then it builds an XMLListCollection from the result cast as an XMLList.

                The itemRenderer itself is a whole separate MXML file that grabs your descr and image path from the data property of the dp, which it'll get from the TileList.

                Worked fine for me, not sure of the whole structure of your app or what the problem is exactly, but most likely it's just a messed up path.

                Dave

                • 5. Re: Help! Help! Help!  TileList Problem
                  evware77 Level 1
                  Hi Dave,

                  Thank you so much for the info. This did answer the problem and it was a lot simpler than what I was trying to do. Again thank you so much1 I had been stuck for days.

                  There is just one mor issue that I am now stuck on. Your solution worked GREAT - except that I still don't have any detail pictures when the state changes to the AquaDetails state. Can you possibly help with this last matter? I think I am still confused about that.

                  Thanks so much,
                  Ellzie
                  • 6. Re: Help! Help! Help!  TileList Problem
                    jinx82002 Level 1
                    Hey Ellzie,
                    No problem, glad I could help.

                    Here's a quick sample for the states to work properly. It looked like you were trying to create a new Object in the state change before. Object class itself isn't bindable, but a better way to do it is this:

                    First, I made another quick sample component called AquaDetails, and put it inside the components2 folder:

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%" height="100%" horizontalAlign="center" >

                    <mx:Metadata>
                    [Event(name="onClose",type="mx.events.CloseEvent")]
                    </mx:Metadata>

                    <mx:Script>
                    <![CDATA[
                    import mx.events.CloseEvent;

                    [Bindable]
                    private var _itemXML:XML;


                    public function set itemXML(item:XML):void {
                    this._itemXML = item;
                    }
                    public function get itemXML():XML {
                    return this._itemXML;
                    }

                    private function doClose() : void {
                    var e:CloseEvent = new CloseEvent("onClose");
                    dispatchEvent(e);
                    }

                    ]]>
                    </mx:Script>

                    <mx:Label id="nameLabel" text="{_itemXML.name}" />
                    <mx:Label id="descriptionLabel" text="{_itemXML.descr}" />
                    <mx:Image source="{_itemXML.image}" click="doClose()"/>
                    </mx:VBox>

                    Best method to separate the code and make it easier to work with is to create your own component (like AquaDetails) and simply add that to the stage during your state change. So in the main file, the states would look something like this:

                    <mx:states>
                    <mx:State name="AquaDetails">
                    <mx:AddChild>
                    <comp:AquaDetails id="aquaDetails" onClose="this.currentState=''"/>
                    </mx:AddChild>
                    <mx:RemoveChild target="{Photos}"/>
                    </mx:State>
                    </mx:states>

                    That will remove the TileList for that state, show your custom AquaDetails component, which also dispatches a close event when you click on the image. In the AquaDetails component, you'll see the onClose event sets the currentState back to base.

                    Here's the Main.mxml code I used to work this fix:

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%" height="100%" creationComplete="aqua.send()"
                    horizontalScrollPolicy="off" verticalScrollPolicy="off" xmlns:comp="components2.*">

                    <mx:Script>
                    <![CDATA[
                    import mx.collections.XMLListCollection;
                    import mx.rpc.events.ResultEvent;
                    import mx.collections.ArrayCollection;
                    import components2.*;

                    [Bindable]
                    public var aquaData:XMLListCollection;

                    private function resultHandler(event:ResultEvent):void {
                    aquaData = new XMLListCollection(event.result..model as XMLList);
                    }

                    private function displayDetails(event:Event):void{
                    currentState='AquaDetails';
                    trace(event.currentTarget.selectedItem);
                    aquaDetails.itemXML = event.currentTarget.selectedItem;

                    }


                    ]]>
                    </mx:Script>

                    <mx:HTTPService id="aqua"
                    url="XMLFiles/Aqua_small.xml"
                    result="resultHandler(event)"
                    resultFormat="e4x"/>


                    <mx:states>
                    <mx:State name="AquaDetails">
                    <mx:AddChild>
                    <comp:AquaDetails id="aquaDetails" onClose="this.currentState=''"/>
                    </mx:AddChild>
                    <mx:RemoveChild target="{Photos}"/>
                    </mx:State>
                    </mx:states>

                    <mx:TileList id="Photos" dataProvider="{aquaData}" width="500" height="800" itemClick="displayDetails(event)"
                    itemRenderer="components2.AquaRendererSm"/>

                    </mx:Application>

                    I also traded out the TileList's change event to itemClick to ensure you get the correct item, you could use change but it's just a matter of pref. This code should give a good example of how the states could work in your app.
                    • 7. Re: Help! Help! Help!  TileList Problem
                      evware77 Level 1
                      Hello jinx82002,

                      Again, thank you for your help. i tried to make adjustments in the code to reflect your suggestions. However, I am getting an error that says:

                      ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
                      at flash.display::DisplayObjectContainer/getChildIndex()
                      at mx.managers::SystemManager/getChildIndex()[E:\dev\3.0.x\frameworks\projects\framework\src \mx\managers\SystemManager.as:1286]
                      at mx.managers::SystemManager/mouseDownHandler()[E:\dev\3.0.x\frameworks\projects\framework\ src\mx\managers\SystemManager.as:2620]

                      Don't seem to be able to straighten it out. Do you have any suggestions as to what may be wrong? The resulting error look like a mix of two foreing languages to me. (smile)
                      Ellzie
                      • 8. Re: Help! Help! Help!  TileList Problem
                        jinx82002 Level 1
                        That's a pretty broad error, not sure exactly what it's pointing to. If you change your states on the main file to something like:

                        <mx:states>
                        <mx:State name="AquaDetails">
                        <mx:AddChild>
                        <comp:AquaDetails id="aquaDetails" onClose="this.currentState=''"/>
                        </mx:AddChild>
                        <mx:RemoveChild target="{Photos}"/>
                        </mx:State>
                        </mx:states>

                        and make sure the handler functions are pointing to the correct data for the HTTPService result and the displayDetails() function:

                        private function resultHandler(event:ResultEvent):void {
                        aquaData = new XMLListCollection(event.result..model as XMLList);
                        }

                        private function displayDetails(event:Event):void{
                        currentState='AquaDetails';
                        trace(event.currentTarget.selectedItem);
                        aquaDetails.itemXML = event.currentTarget.selectedItem;

                        }

                        also, make sure uses itemClick (thats what I used in my little sample code)

                        <mx:TileList id="Photos" dataProvider="{aquaData}" width="500" height="800" itemClick="displayDetails(event)"
                        itemRenderer="components2.AquaRendererSm"/>

                        If you want, I can send you over the entire code I used yesterday. My email is dave AT pxldesigns DOT com