5 Replies Latest reply on Jan 25, 2007 11:06 AM by ur_dtrain

    Repeater and Accordion

    Level 7
      Hi..

      I am interested in creating a dynamic accordion based on XML data, such as
      is shown here

      http://www.powersdk.com/ted/2005/05/flex-example-accordion-repeater.php

      Unfortunately, the provided link to the source code at the bottom of the
      page is broken.

      Can anyone help me out? Basically I have a data list like this

      MENU A
      SUBA1
      SUBA2
      SUBA3
      MENUB
      SUBb1
      SUBB2
      SUBB3

      so I want an accordion tab for Menu A and Menu B and then the SUB's as
      buttons inside the appropriate accordion.

      Thanks

      Rich


        • 1. Re: Repeater and Accordion
          ntsiii Level 3
          Well, I am partway there. I can't figure out how to reference the text nodes of the xml. I have put the date in a label attribute for testing for now. Give this a try and see if it is approaching what you want.

          Tracy

          <?xml version="1.0" encoding="utf-8"?>
          <!-- There is a bug in Repeater that prevents XMLList from being used as a dataProvider -->
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
          layout="absolute"
          creationComplete="initApp()">
          <mx:Script><![CDATA[
          import mx.collections.ArrayCollection;

          [Bindable]
          private var _ArrayCollection:ArrayCollection = new ArrayCollection;
          private function initApp():void
          {
          var xmlAccordion:XML =
          <root>
          <item label="A">ITEM A
          <subitem label="A1">SUBA1</subitem>
          <subitem label="A2">SUBA2</subitem>
          </item>
          <item label="B">ITEM B
          <subitem label="B1">SUBb1</subitem>
          <subitem label="B2">SUBB2</subitem>
          <subitem label="B3">SUBB3</subitem>
          </item>
          </root>

          var xl:XMLList = xmlAccordion.item;
          _ArrayCollection = convertArrayCollection(xl)
          }//initApp

          //Converts an XMLList into an ArrayCollection
          private function convertArrayCollection(xl:XMLList):ArrayCollection
          {
          var ac:ArrayCollection = new ArrayCollection;
          for (var i:int=0;i<xl.length();i++) {
          ac.addItem(xl );
          }
          return ac;
          }
          ]]></mx:Script>

          <mx:Accordion width="300">
          <mx:Repeater id="r" dataProvider="{_ArrayCollection}">
          <mx:HBox label="{r.currentItem.@label}" width="100%">
          <mx:Repeater id="rsub" dataProvider="{convertArrayCollection(r.currentItem.subitem)}">
          <mx:Button label="{rsub.currentItem.@label}" />
          </mx:Repeater>
          </mx:HBox>
          </mx:Repeater>
          </mx:Accordion>
          </mx:Application>
          • 2. Re: Repeater and Accordion
            ntsiii Level 3
            I really hate that this forum has no way to post formatted code!
            • 3. Re: Repeater and Accordion
              Level 7
              Hi --

              I have been playing around some more and learned about creating new elements
              via ActionScript..


              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
              <mx:Script>
              <![CDATA[
              import mx.containers.Canvas;

              public var newCanvas : Canvas;

              public function clickUpdateAccordion():void {
              for (x = 0; x < 5; x++) {
              newCanvas = new Canvas()
              newCanvas.label = "Pane " + x.toString();
              holderAcc.addChild(newCanvas);
              }
              }

              ]]>
              </mx:Script>
              <mx:Accordion x="0" y="0" width="200" height="100%" id="holderAcc">
              </mx:Accordion>
              <mx:Button x="263" y="98" label="Add Accordion"
              click="clickUpdateAccordion()"/>

              </mx:Application>



              "ntsiii" <tspratt@lariatinc.com> wrote in message
              news:e8hvte$t5i$1@forums.macromedia.com...
              >I really hate that this forum has no way to post formatted code!


              • 4. Re: Repeater and Accordion
                DangerAhead Level 1
                YEP.... sure would be nice to be able to post some damn code in this forum.... wake up adobe. enable already. just like you do with the Flash Actionscript forum
                • 5. Re: Repeater and Accordion
                  ur_dtrain Level 1
                  Some good XML tips:
                  for each(var itemNode:XML in XMLList(myXML))
                  for each(var itemValueNode:XML in itemNode.children()){

                  also:
                  itemValueNode.name(); //node name
                  itemValueNode.text(); //text node content
                  itemValueNode.@myAttribute; //attrube value reference