18 Replies Latest reply on Sep 25, 2008 4:46 AM by B_Shack

    Horizontal List DataProvider

      Hello,
      I am new to Flex but very proficient in Flash.

      I have a model imported from an xml file. This model has 6 sections of video items. A horizontal tile displays each section's items with a custom item renderer.

      I have the tile bound to the first section like this: videoData.line1.video. All items render normally.

      Now, I need the user to change sections and then update the tile list. I am trying to set the tile list dataProvider to the selected section like this: videoThumbs.dataProvider = videoData.line2/3/4/etc.video.

      After setting the DP, I try to refresh the tile list, but cannot find the method for it or the dataProvider. In flash, I can call the dataProvider's updateAll event and that refreshes the bound list.

      What is the equiv for Flex?

      Thanks,
      Shack
        • 1. Re: Horizontal List DataProvider
          Level 7

          "B_Shack" <billy.shackelford@us.army.mil> wrote in message
          news:garif8$ee1$1@forums.macromedia.com...
          > Hello,
          > I am new to Flex but very proficient in Flash.
          >
          > I have a model imported from an xml file. This model has 6 sections of
          > video
          > items. A horizontal tile displays each section's items with a custom item
          > renderer.
          >
          > I have the tile bound to the first section like this:
          > videoData.line1.video.
          > All items render normally.
          >
          > Now, I need the user to change sections and then update the tile list. I
          > am
          > trying to set the tile list dataProvider to the selected section like
          > this:
          > videoThumbs.dataProvider = videoData.line2/3/4/etc.video.
          >
          > After setting the DP, I try to refresh the tile list, but cannot find the
          > method for it or the dataProvider. In flash, I can call the
          > dataProvider's
          > updateAll event and that refreshes the bound list.
          >
          > What is the equiv for Flex?

          myHorizontalList.dataProvider.refresh()

          You might be better off using an XMLListCollection instead of a model, since
          that will generate the events you need.

          HTH;

          Amy


          • 2. Re: Horizontal List DataProvider
            Level 1
            Amy,
            Thanks much! Worked like a champ.

            Any reference on how to use XMLListCollection vice model?

            Regards,
            Shack
            • 3. Re: Horizontal List DataProvider
              Level 7

              "B_Shack" <billy.shackelford@us.army.mil> wrote in message
              news:garn1a$jq3$1@forums.macromedia.com...
              > Amy,
              > Thanks much! Worked like a champ.
              >
              > Any reference on how to use XMLListCollection vice model?

              If you post the code you're already using, I can show you how to modify it,
              or you can look up XMLListCollection in the Help :-)


              • 4. Re: Horizontal List DataProvider
                Level 1
                Amy,
                Here is what I have:

                <mx:Model id="videoData" source="/xml/videos.xml"/>

                for(var i:Number=0;i<mx.utils.ArrayUtil.toArray(videoData.line1.video).length;i++){
                var l1btn:LinkButton = new LinkButton();
                l1btn.label = videoData.line1.video .videoTitle;
                l1btn.data = videoData.line1.video
                .videoURL;
                l1btn.addEventListener(MouseEvent.CLICK, navBoxLinkButtonHandler);
                l1btn.setStyle("textAlign","left");
                l1btn.width = navBox.width;
                navBox.addChild(l1btn)
                }
                videoThumbs.dataProvider = videoData.line1.video;
                videoThumbs.dataProvider.refresh();

                <mx:HorizontalList
                id="videoThumbs"
                height="100%"
                borderStyle="none"
                width="100%"
                backgroundColor="#1e1e1e"
                styleName="lightBoxBg"
                columnWidth="100"
                horizontalScrollPolicy="on"
                horizontalScrollBarStyleName="trayScrollBar"
                dataProvider="{videoData.line1.video}"
                itemRenderer="imageRender">
                </mx:HorizontalList>

                Each menu item will switch the section of the model.

                Regards,
                Shack
                • 5. Re: Horizontal List DataProvider
                  Level 7

                  "B_Shack" <billy.shackelford@us.army.mil> wrote in message
                  news:gatdpd$ncp$1@forums.macromedia.com...
                  > Amy,
                  > Here is what I have:
                  >
                  > <mx:Model id="videoData" source="/xml/videos.xml"/>
                  >
                  > for(var
                  > i:Number=0;i<mx.utils.ArrayUtil.toArray(videoData.line1.video).length;i++){
                  > var l1btn:LinkButton = new LinkButton();
                  > l1btn.label = videoData.line1.video .videoTitle;
                  > l1btn.data = videoData.line1.video
                  .videoURL;
                  > l1btn.addEventListener(MouseEvent.CLICK, navBoxLinkButtonHandler);
                  > l1btn.setStyle("textAlign","left");
                  > l1btn.width = navBox.width;
                  > navBox.addChild(l1btn)
                  > }
                  > videoThumbs.dataProvider = videoData.line1.video;
                  > videoThumbs.dataProvider.refresh();
                  >
                  > <mx:HorizontalList
                  > id="videoThumbs"
                  > height="100%"
                  > borderStyle="none"
                  > width="100%"
                  > backgroundColor="#1e1e1e"
                  > styleName="lightBoxBg"
                  > columnWidth="100"
                  > horizontalScrollPolicy="on"
                  > horizontalScrollBarStyleName="trayScrollBar"
                  > dataProvider="{videoData.line1.video}"
                  > itemRenderer="imageRender">
                  > </mx:HorizontalList>

                  Try something like this:

                  <mx:XML id="videoSource" source="/xml/videos.xml" format="e4x" />
                  <mx:XMLListCollection id="videoData" source="{videoSource.line1.video}" />
                  <mx:HorizontalList
                  id="videoThumbs"
                  height="100%"
                  borderStyle="none"
                  width="100%"
                  backgroundColor="#1e1e1e"
                  styleName="lightBoxBg"
                  columnWidth="100"
                  horizontalScrollPolicy="on"
                  horizontalScrollBarStyleName="trayScrollBar"
                  dataProvider="{videoData}"
                  itemRenderer="imageRender">
                  </mx:HorizontalList>

                  <mx:Box id="navBox">
                  <mx:Repeater id="btnRepeater" dataProvider="{videoData}">
                  <mx:Button id="repeatedButton"
                  label="{btnRepeater.currentItem.videoTitle}"
                  data="{btnRepeater.currentItem.videoUrl}" textAlign="left"
                  width="100%"
                  click="navBoxLinkButtonHandler"/>
                  </mx:Repeater>
                  </mx:Box>

                  HTH;

                  Amy


                  • 6. Re: Horizontal List DataProvider
                    Level 1
                    Amy,
                    Thank you for the code, but i can't seem to generate any values for the repeater buttons. How does an XMLListCollection construct the data model?

                    Anyway, I have another issue that I can't resolve. I made a custom itemRenderer for the HorizTile and wrap that inside a <mx:itemRenderer> tag. I am trying to set a variable in the custom itemRenderer like this <local:imageRender connection="{nc}"/>. I get an error for undefined property.

                    The nc is a netConnection object created in the main application called after creationComplete.

                    Any help is greatly appreciated.

                    Thanks,
                    Bill
                    • 7. Re: Horizontal List DataProvider
                      Level 7

                      "B_Shack" <billy.shackelford@us.army.mil> wrote in message
                      news:gb0c45$fco$1@forums.macromedia.com...
                      > Amy,
                      > Thank you for the code, but i can't seem to generate any values for the
                      > repeater buttons. How does an XMLListCollection construct the data model?
                      >
                      > Anyway, I have another issue that I can't resolve. I made a custom
                      > itemRenderer for the HorizTile and wrap that inside a <mx:itemRenderer>
                      > tag. I
                      > am trying to set a variable in the custom itemRenderer like this
                      > <local:imageRender connection="{nc}"/>. I get an error for undefined
                      > property.
                      >
                      > The nc is a netConnection object created in the main application called
                      > after
                      > creationComplete.

                      http://www.returnundefined.com/2006/11/creating-truly-reusable-renderers-with-classfactory


                      • 8. Re: Horizontal List DataProvider
                        Level 7

                        "B_Shack" <billy.shackelford@us.army.mil> wrote in message
                        news:gb0c45$fco$1@forums.macromedia.com...
                        > Amy,
                        > Thank you for the code, but i can't seem to generate any values for the
                        > repeater buttons. How does an XMLListCollection construct the data model?

                        An XMLListCollection takes an XMLList as it source in the same way that an
                        ArrayCollection takes an Array.

                        I would normally use something more like:

                        <mx:XMLListCollection id="videoData" source="{videoSource.children()}" />

                        or

                        <mx:XMLListCollection id="videoData"
                        source="{videoSource.child('line1'.children()}" />

                        But without knowing more about what's in the XML file, I tried to duplicate
                        what you were doing already as closely as I could.

                        HTH;

                        Amy


                        • 9. Re: Horizontal List DataProvider
                          Level 1
                          Amy,
                          Thanks for the link. I thought I was a little confused, but after reading that articel, I am now totally confused.

                          I will try and digest this somehow, maybe by reading other sources about ClassFactory.

                          The xml data is rather simple:

                          <videos>
                          <line1>
                          <video videoURL="" videoID="" />
                          </line1>
                          </videos>

                          Thanks,
                          Shack
                          • 10. Re: Horizontal List DataProvider
                            Level 7

                            "B_Shack" <billy.shackelford@us.army.mil> wrote in message
                            news:gb0r2t$457$1@forums.macromedia.com...
                            > Amy,
                            > Thanks for the link. I thought I was a little confused, but after reading
                            > that articel, I am now totally confused.
                            >
                            > I will try and digest this somehow, maybe by reading other sources about
                            > ClassFactory.
                            >
                            > The xml data is rather simple:
                            >
                            > <videos>
                            > <line1>
                            > <video videoURL="" videoID="" />
                            > </line1>
                            > </videos>

                            It seems a bit silly to be using a Repeater and a HorizontalList when you
                            only have one item to display.


                            • 11. Re: Horizontal List DataProvider
                              Level 1
                              Amy,
                              That was just the structure. I have 54 videos in the library broken into sections.

                              I ran across outerDocument in another example. Does that act like _parent in flash? Does it point to the HorizTile container or the root application?

                              Regards,
                              Shack
                              • 12. Re: Horizontal List DataProvider
                                Level 7

                                "B_Shack" <billy.shackelford@us.army.mil> wrote in message
                                news:gb0tgh$70n$1@forums.macromedia.com...
                                > Amy,
                                > That was just the structure. I have 54 videos in the library broken into
                                > sections.

                                I'm actually trying to figure out whether each and every video is encased in
                                a line1 element (which strikes me as odd). If not, this may be your issue.
                                Please remember that you're always better off providing more information
                                rather than less. Even if people trying to help you didn't eventually get
                                tired of trying to extract relevant information, you're going to get a delay
                                each time you go through a question/answer cycle.


                                • 13. Re: Horizontal List DataProvider
                                  Level 1
                                  Amy,
                                  Just wanted to say thanks for taking the time to help.

                                  The xml file contains sections of videos. Each section contains the video references. For example:

                                  <videos>
                                  <line1>
                                  <video videoID="" videoTitle="" videoURL="" />
                                  <video videoID="" videoTitle="" videoURL="" />
                                  ...
                                  ...
                                  </line1>
                                  <line2>
                                  <video videoID="" videoTitle="" videoURL="" />
                                  <video videoID="" videoTitle="" videoURL="" />
                                  ...
                                  ...
                                  </line2>
                                  <line3>
                                  <video videoID="" videoTitle="" videoURL="" />
                                  <video videoID="" videoTitle="" videoURL="" />
                                  ..
                                  ... etc

                                  Regards,
                                  Bill
                                  • 14. Re: Horizontal List DataProvider
                                    Level 7

                                    "B_Shack" <billy.shackelford@us.army.mil> wrote in message
                                    news:gb7v8u$mb5$1@forums.macromedia.com...
                                    > Amy,
                                    > Just wanted to say thanks for taking the time to help.
                                    >
                                    > The xml file contains sections of videos. Each section contains the video
                                    > references. For example:
                                    >
                                    > <videos>
                                    > <line1>
                                    > <video videoID="" videoTitle="" videoURL="" />
                                    > <video videoID="" videoTitle="" videoURL="" />
                                    > ...
                                    > ...
                                    > </line1>
                                    > <line2>
                                    > <video videoID="" videoTitle="" videoURL="" />
                                    > <video videoID="" videoTitle="" videoURL="" />
                                    > ...
                                    > ...
                                    > </line2>
                                    > <line3>
                                    > <video videoID="" videoTitle="" videoURL="" />
                                    > <video videoID="" videoTitle="" videoURL="" />
                                    > ..
                                    > ... etc

                                    I've lost track of exactly where you are in the process. Are you still
                                    having problems with the HorizontalList not refreshing? Could you post a
                                    status of your current code and point out where it's not working?


                                    • 15. Re: Horizontal List DataProvider
                                      Level 1
                                      Amt,
                                      The HL is working just fine. We were discussing XMLListCollection vs Model and how to access the data.

                                      Regards,
                                      Shack
                                      • 16. Re: Horizontal List DataProvider
                                        Level 7

                                        "B_Shack" <billy.shackelford@us.army.mil> wrote in message
                                        news:gbaj86$23q$1@forums.macromedia.com...
                                        > Amt,
                                        > The HL is working just fine. We were discussing XMLListCollection vs
                                        > Model and how to access the data.

                                        And where were you not clear? I'm not sure how to answer the question,
                                        since I don't really know where you're confused.


                                        • 17. Re: Horizontal List DataProvider
                                          ntsiii Level 3
                                          Shack, it is always a mistake to tack an unrelated question onto a thread. It confuses EVERYONE. Stick to one question and start a new topic when needed.

                                          Model is a tree of dynamic objects. It is rarely the best type to use. You access its elements by dotting down to the desired level and by using array[] syntax.

                                          XMLListcollection is a collection of XML nodes, You access the nodes using the collection API, including getItemAt(). Once you have a node, you use e4x expressions.

                                          Tracy
                                          • 18. Re: Horizontal List DataProvider
                                            Level 1
                                            Tracy,
                                            Thanks for the clarification and forum etiquette tip.

                                            Amy,
                                            Thanks for al lyour help.

                                            Regards,
                                            Shack