14 Replies Latest reply on May 2, 2008 10:06 AM by ntsiii

    TileList Item Renderer

    sandwicense Level 1
      In my Item Renderer for my Tilelist component, I want to know how to set the source of the image and label components. I am having trouble because the link to the XML file is brought into Flex using actionScript 3 and made Bindable.

      Thanks for any help.
        • 1. Re: TileList Item Renderer
          ntsiii Level 3
          Why is that a problem? More detail please.
          Tracy
          • 2. Re: TileList Item Renderer
            sandwicense Level 1
            I need to know how to properly call the xml tag(s) i nthe external xml file, which is stored in a variable. I have to call it from a separate mxml file, because that is how to create an item renderer.
            • 3. Re: TileList Item Renderer
              ntsiii Level 3
              You are not making any sense at all. You do not "call tags". If the data is in a variable, it is not in an external file. "external file" has no meaning without more context. "Files" are not truly relevant anyway. What matters is the run-time dom architecture. There are many ways to create an itemRenderer.

              If english is not your native language, then I apologize, and will try to help. If english IS your native language, use it, please.

              Tracy
              • 4. Re: TileList Item Renderer
                sandwicense Level 1
                I know english very well, but I am new to flex, and am having trouble explaining what I am trying to do. So below are the parts of my code that involve my problem.


                This is the current ActioNScript COde from my main application's MXML file:

                private var externalXML:XML;
                private function collectionSelect(event:Event):void {
                //This loads the @xmlLink attribute from the XML file that populates the Tree Control.
                //The URL to the other XML file that contains the data to fill the tileList component depends upon which node is //selected.
                loadMyXML(event.currentTarget.selectedItem.@xmlLink);
                }


                private function loadMyXML(xmlname:String) : void {
                var loader:URLLoader = new URLLoader();
                var request:URLRequest = new URLRequest(xmlname);
                loader.load(request);
                loader.addEventListener(Event.COMPLETE, onComplete);
                }

                //Below is the bound variable that contains the URL to the XML file that was stored as the @xmlLink attribute.
                [Bindable]
                public var tileListASDP:XMLList;

                public function onComplete(event:Event):void {
                navAccordion.selectedIndex = 2;
                var loader:URLLoader = URLLoader(event.target);
                externalXML = new XML(loader.data);
                tileListASDP = new XMLList(externalXML);
                }
                The current (separate) ItemRenderer MXML file:
                I get errors by trying to load the data from the bound variable in the AS3 code above like I did in the curly braces below.


                <?xml version="1.0" encoding="utf-8"?>
                <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle">
                <mx:SWFLoader width="100%" height="100%" source="{tileListASDP.imageDataSet.thumbnail}"/>
                <mx:Label text="{tileListASDP.imageDataSet.title}" color="#000000" styleName="yflexskin.css" fontFamily="Lucida Grande" fontSize="11"/>

                </mx:VBox>


                I hope you get a clearer understanding of what I am trying to do.
                • 5. Re: TileList Item Renderer
                  ntsiii Level 3
                  First, what errors?

                  Second, XMLList is not bindable. It does not dispatch the necessary events to support binding. Leave the data as XML, which is bindable

                  Third, do not use "new" with XML(). instead do:
                  externalXML = XML(loader.data); //XML() is a top-level function

                  then in your onComplete() handler, trace(externalXML.toXMLString())

                  Do you see your XML? is it what you expect?

                  If so, then do:
                  trace(externalXML.imageDataSet.toXMLString());

                  Do you see what you expect? if so, then do:
                  trace(externalXML.imageDataSet.thumbnail.toXMLString());

                  Is that the string you need? if so, then that espression will work for your binding.

                  Tracy

                  • 6. Re: TileList Item Renderer
                    sandwicense Level 1
                    by putting curly braces around the tileListASDP.imageDataSet.title} part of the code, I get Error 1120: Access of undefined property. Do those trace statements print infor to the debug panel of Flex builder? If so, I do not get any results.
                    • 7. Re: TileList Item Renderer
                      ntsiii Level 3
                      Yes, trace() prints to the FB debug panel. You may need to configure the mm.cfg file. See the Developers Guide for insructions on how to do this.

                      That error implies one of the issues I noted above. Do those things, and if you still have a problem, post some of the results from the first trace(). Note, you can use Alert instead of trace, or inspect the variable in the debugger, but if you are serious about developing, then you need to be able to trace.

                      Tracy
                      • 8. Re: TileList Item Renderer
                        sandwicense Level 1
                        Those trace statements work and they traced the XML file as I wanted, but how do I get the ItemRenderer to use this data?
                        • 9. Re: TileList Item Renderer
                          ntsiii Level 3
                          What is your itemRenderer supposed to do?

                          A couple initial problems:
                          1) itemRenderers run in their own scope. the renderer does not know anything about members in its parent, like "tileListASDP". You can use DOM traversing properties, like parentDocument, and Application.application to reference members of their respective scopes.

                          2) itemrenderers need to be data driven. You need to override the set data() function, store the data in a var, and call invalidateProperties(). Then in the override commitProperties() method, use that stored data to update the visal UI elements of the renderer.

                          So we are back to my first question.

                          Also, what errors are yo getting? I suspect they involve scope reference issues.

                          Tracy
                          • 10. Re: TileList Item Renderer
                            sandwicense Level 1
                            In My Application I have three major components. They are a Tree, a TileList component and an SWFLoader.

                            What I want to happen:

                            1) The Flex App populates the tree from an XML file.
                            2) When a user clicks a node (not a folder), the actionScript code will determine which node was selected and it will get the URL to a separate XML file. The link to the separate XML file is contained in the XML file that populates the tree and is structured as an attribute called 'xmlLink'. The attribute is placed inside the same tag as the label attribute. The label attribute is the text the Tree component uses as the node and folder names. After it does what I described above, the value of the 'xmlLink' attribute (which would be http://example.com/data.xml), will become the TileList's data provider.
                            3) Then the TileList component will load the ItemRenderer. The ItemRenderer will load the .jpeg thumbnails (In my case it is the <thumbnail> tag) for the image component and it will also load the title of the image into a label component of the ItemRenderer. (In my case it is the <title> tag.)

                            I just added this part for extra info:

                            When a user clicks on an item in the TileList component, the full size image will load in an SWFLoader.

                            I only get the Access of Undefined Property. I don't get any others, even the scope reference error you mentioned.
                            • 11. Re: TileList Item Renderer
                              ntsiii Level 3
                              Access of an undefined property IS a scope error. The property you attempted to reference is not defined within your scope.

                              You say you are now getting the data. The next step is to display it in a TileList without a renderer. Display the label and the URL from the dataProvider items.

                              Post back when you can do that.

                              Tracy

                              • 12. Re: TileList Item Renderer
                                sandwicense Level 1
                                So it will not show the image without the renderer? Do I bring the xmlLink attribute value into an <mx:XML> tag first and then use the ID of that <mx:XML> tag as the TileList DataProvider?
                                • 13. Re: TileList Item Renderer
                                  sandwicense Level 1
                                  I was successful at making the TileList control display the label of each item. In my case, the label was the <title> tag. What did you mean by getting the URL to display? Which URL?
                                  • 14. Re: TileList Item Renderer
                                    ntsiii Level 3
                                    No, you do not need an XML tag decdlared at all. Your data is the externalXML variable. Just set the dataProvider="{externalXML.children()}". Or externalXML.imageDataSet, if that is the name of the item nodes.

                                    The url to your image, what you will be using to assign the source property. Looks like it is stored in the "thumbnail" node.

                                    Once you have displayed the url, start up with the renderer again. I'd advise commenting out the image, and get the labe displaying first.

                                    Also, if you are just displaying an immage, you can ue the Image tag instead of SWFLoader. They are nearly identical, but Image is optimized a little for images, whil SWFLolader is for more interactive content.

                                    Tracy