13 Replies Latest reply on Jan 5, 2007 4:20 PM by ntsiii

    XMLListCollection

      I can't seem to figure out how to get obtain a list of child nodes given a specific parent node. For example, say I have the following XML data
      <groups [list of properties]>
      <albums[list of properties]>
      <photos[list of properties]/>
      <photos [list of properties]/>
      </albums>
      </groups>

      Now I put this XMLListCollection into a TileList. The list of groups is displayed and when the user clicks on a group then the TileList needs to be changed to display only the albums that are a child of the group that was clicked on. I can't seem to figure out how to do this with the documentation provided.

      I've made it thus far but seem to be at an impasse. When the itemClick event is dispatched on the TileList the following code runs:

      var isMatch:Boolean = false
      // PicList is the id for the TileList
      var node:XML = XML(PicList.selectedItem)

      // Run the filter
      if(item.attribute("title").toLowerCase().search(node.attribute("title").toLowerCase()) != -1){
      isMatch = true
      }
      PicList.itemRenderer=rAlbums;
      return isMatch;

      Now without the [PicList.itemRenderer=rAlbums;] code, the TileList will display just the group that was clicked. Which is good that it does something but it really needs to display the child album nodes under that group node that was clicked. The line described above actually causes an error. The line is supposed to assign a new item renderer specific to the Album node where as the previous one was set up in the <mx:TileList itemRenderer="Thumbnail"...>. But since I can't seem to get this to work I'm at an impasse. I'm not sure if I'm approaching this the wrong way or if I'm just missing something small here. If anyone has any ideas then by all means...
        • 1. Re: XMLListCollection
          I left out a function it seems, let me correct myself. When the itemClick event is dispatched on the TileList the following code runs
          myXMlist.filterFunction = searchforit;
          myXMlist.refresh();

          Where myXMlist is the XMLListCollection containing the predescribed xml data and the searchforit function contains the code beginning with "var isMatch:Boolean = false" also listed in the previous post
          • 2. Re: XMLListCollection
            ntsiii Level 3
            To "..obtain a list of child nodes given a specific parent node..", do something like this:
            var myXMLList:XMLList = myNode.children();

            Is the TileList dataProvider bound to myXMLList?

            You have a lot going on at once. Simplify your conditions to make debugging easier.

            Tracy
            • 3. Re: XMLListCollection
              Alright, your answer makes sense logically but when I do it the TileList goes empty which makes me think it doesn't like the structure of my XML children that I fed it. So I'm trying to figure how to assign the same child nodes I am assigning to the TileList dataprovider to some sort of text block so I can visually make sure the code is doing what I want. Any ideas how I can display the children? I have tried:
              txtArea.data = nodes.children();
              txtArea.text = nodes.children();
              where txtArea is a text area obviously, but nothing shows in the text area

              Also I am still wondering how I am going to tackle the item renderer issue once I fix this problem. Because while I want title and caption information for a gallery and album I don't want either for the actual list of photos which is the final destination of the tilelist and it doesn't seem to want to allow me change the tilelist item renderer in a function...
              • 4. Re: XMLListCollection
                ntsiii Level 3
                txtArea.text = nodes.children().toXMLString();
                Tracy
                1 person found this helpful
                • 5. Re: XMLListCollection
                  thanks, that worked to get the text box populated
                  So now the problem seems to be the code to change the data provider of the TileList is crashing the flex program without actually crashing the program...if that makes sense

                  1) PicList.dataProvider=node.children();
                  2) testtext.text=node.children().toXMLString();

                  When line 1 is commented out and an item is clicked in the TileList the text box is populated with the correct data. When line 1 is not commented out and an item is clicked in the TileList then the TileList goes blank and the text box is not populated with any data. My only guess is that the TileList just doesn't like the xml I am passing to it. I have included an example below of what is being assigned as the data provider once a TileList item is clicked. Any thoughts?

                  <albums title="Random" caption="Random test" folder="random_1" created="10/24/2006 7:29:41 PM" last_update="10/24/2006 2:27:29 PM" thumbnails="random_1.jpg">
                  <photos size="86646" thumb="thmb_VT2.JPG" full_picture="VT2.JPG" type=".JPG"/>
                  <photos size="89034" thumb="thmb_VT.JPG" full_picture="VT.JPG" type=".JPG"/>
                  <photos size="74192" thumb="thmb_VT side view.JPG" full_picture="VT side view.JPG" type=".JPG"/>
                  <photos size="42031" thumb="thmb_Turning it up.JPG" full_picture="Turning it up.JPG" type=".JPG"/>
                  <photos size="66565" thumb="thmb_03 Superbowl.JPG" full_picture="03 Superbowl.JPG" type=".JPG"/>
                  <photos size="44836" thumb="thmb_03 Superbowl 2.JPG" full_picture="03 Superbowl 2.JPG" type=".JPG"/>
                  </albums>
                  • 6. XMLListCollection
                    Hugo_Core Level 1
                    Hi boondocks5, how are you?

                    Hey listen, i don't know if this will help, or if can or can not use this system, but recently i use the following way to filter a tileList and work very well in fact :D

                    1-Have a HTTPService to give my XMLArrayCollection of products.
                    1.5-Have a HTTPService to give my XMLArrayCollection of categories.
                    2-After creating the collection i use it to be my dataProvider of my TileList (XMLArrayCollection of products.)
                    3-On my tileList i have a VBox Render.
                    4-Beside the tileList i create a comboBox (dataProvider XMLArrayCollection of categories.) to Filter the "TileList" (in fact filter the dataprovider of the TileList/XMLArrayCollection of products) by a FilterFunction.

                    Situation, user is seeing all the products in the tileList.
                    The user change the selectedItem of the comboBox, that triggers a change function() wicth is the function that will activate a filterFunction to your ArrayCollection of products .

                    Example:

                    TileList:
                    [Name] Watch - [Categorie]Toy
                    [Name] Car - [Categorie]Toy
                    [Name]Mouse - [Categorie]HiTech

                    ComboBox:
                    Toy
                    Hitech
                    Another
                    And Another

                    The User chose TOY from comboBox and tileList only show products with the TOY categorie, in this case are only 2 :P

                    The filterFunction basicly is a "temporary eraser" of items, like.. if this item isn't in accord with the filter hide/"erase" it.
                    I leave you with a sample code.

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



                    [Bindable]
                    private var myData:ArrayCollection;

                    [Bindable]
                    private var categorias:ArrayCollection;



                    private function lidarResultados(event:ResultEvent):void {
                    categorias = event.result.db.cat;
                    }

                    private function resultHandler(event:ResultEvent):void {
                    myData = event.result.db.data;

                    }

                    public function filtrarArray():void {
                    myData.filterFunction=filtrarTile;
                    myData.refresh();
                    }

                    public function filtrarTile(item:Object):Boolean{

                    /// item.categoria because on my XML i have <categoria>

                    if (item.categoria == comboBoxemus.selectedItem) {
                    return true; // True ITEM REMAINS
                    } else if (comboBoxemus.selectedItem == "All") {
                    return true;
                    } else {
                    return false; // False ITEM HIDE
                    }

                    }
                    • 7. Re: XMLListCollection
                      ntsiii Level 3
                      Hard code that xml into the app and assign it to the tile list, make sure that works before you start changing it dynamically.
                      1 person found this helpful
                      • 8. Re: XMLListCollection
                        Hugo_Core - I like the idea and see how that could work well. However I have a conflict with my ultimate goal of this app. I have a tree that is populated with a XMLListCollection of the Groups and Albums and as described previously a TileList populated with a XMLListCollection of groups, albums and pictures. The final product should allow for the user to click either on the tilelist or the tree to get to the desired album (for the tree) and picture (for the tilelist). A click on the group in the tilelist should display the container albums in the tilelist and expand the tree to display the albums in the group that was clicked in the tilelist and visa versa. I'm obviously still a good ways away from that functionality. I'll have to keep your design in mind though and see if there isn't anything I can pull from your code to help me out. Appreciate you taking the time to write all that.

                        ntsiii - I'll try that, see what the deal is and get back to you. Thanks also for taking the time to help me out on this one.
                        • 9. Re: XMLListCollection
                          Alright here's what I have found…and it’s not good:
                          Populating the TileList with an XML object (hard coded into the program) containing the following data works fine

                          var doc1:XML = <albums [property elements]>
                          </albums>;

                          But when you add multiple albums it crashes, for example:
                          var doc1:XML = <albums [property elements]>
                          </albums>
                          <albums [property elements]>
                          </albums>;

                          It gives this error: 1086: Syntax error: expecting semicolon before title.

                          So I would expect the groups with multiple albums to crash the flex program given the discovery I made above with the runtime error. We have already found that XML with only one album works when hard coded into the program. And it just so happens that one of the groups I have contains only one album. I would not expect the program to crash when a group with only one album is clicked on but it does (it doesn’t give a runtime error since its being done dynamically but the flex site just stops responding). So from a dynamic perspective it doesn't look like this is going to work even if I were to conquer the multiple album problem. I feel like the problem is in my XML structure. The full XML used for this app can be found here ( http://www.candiddan.com/candiddan/CandidDan_db2.xml) in case anyone wants to have a look at what we are working with. There has got to be some way to do this and I really believe it’s not overly involved because this is a relatively simple functionality. Any thoughts would be greatly appreciated.


                          • 10. Re: XMLListCollection
                            ntsiii Level 3
                            No, you are jumping to a conclusion. Your xml simply has no root node.

                            Fix that and try again. You must get the tile list working before you move on.

                            There is nothing wrong with the xml that I can see. Or imagine. If the xml has the structure to fit the business logic then Flex can handle it.

                            Tracy
                            • 11. Re: XMLListCollection
                              I did a little more testing and playing around with it and here's what I found is main reason the thing is crashing: It is because the VBox item renderer needs to be changed ever so slightly depending on which XML level we are on in the TileList. The first level displaying the groups in the tilelist has worked from the very beginning because it was semi-personalized to go with the group node in the XML file.

                              Ex.
                              The itemrenderer is Thumbnail2.mxml as shown below:
                              <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="250" height="190" horizontalAlign="center">
                              <mx:Label text="{data.@title}" />
                              <mx:Image source="{data.@thumbnail}" width="120" height="100" />
                              <mx:Text text="{data.@caption}" width="150" />
                              <mx:Label text="Last Update: {data.@last_update}" />
                              </mx:VBox>

                              The TileList defines the itemrenderer:
                              itemRenderer="Thumbnail2"

                              The TileList dataprovider is defined as:
                              dataProvider="{myXMlist}"

                              The XMLListCollection myXMlist source is defined as:
                              source="{get_groups.lastResult.groups}"

                              Now compare this to the XML file and notice we are passing the TileList the list of <groups> node which have no root node. Now here, passing no root node is allowed but when we try to assign the albums dynamically with no root node the thing crashes. So I modified the XML to include a <albumList> node which encompasses all <albums> nodes within the parent group node. If we modify the itemrenderer to point to the sub node under the root, ex:
                              <mx:Label text="{data.albums.@title}" />
                              Then the flex program runs just fine with no problems assuming you assign a static variable of <albumList> nodes and bypass the <groups> nodes (just as a testing move). So what is this telling us? It's telling us that the itemrenderer is looking in the same place each time but we are passing it a different structure of XML for groups then we are albumList. So as I see it we can handle this one of two ways.
                              1) Fix myXMlist to have a source of source="{get_groups.lastResult}"
                              and then change the item renderer to go one level deeper on its own
                              ex: <mx:Label text="{data.[some generic thing that tells the label to look one level deeper].@title}" />
                              2) Change the itemrenderer on the TileList depending on what we are passing it

                              To me option 2 seems the best one because I am going to have to change the itemrenderer when I get to the picture level anyway so it doesn't show captions, titles and the such. Thoughts anyone….


                              • 12. Re: XMLListCollection
                                Of course another way to do it would be to have 3 TileLists (groups, albums, pictures) and assign the visible and dataprovider property as needed. That way we could have a different itemrenderer for each TileList...although I'm sure this would be a somewhat inefficient way to go about it. But I'm 99% sure it would get the job done.
                                • 13. Re: XMLListCollection
                                  ntsiii Level 3
                                  Any of your options should be ok.

                                  Manipulating the data is maybe the best.

                                  If you use the multiple TileList option, use a ViewStack to switch between them. I don't think you have a big efficiency issue, and you might make maintainence easier that way.

                                  Tracy
                                  1 person found this helpful