4 Replies Latest reply on Aug 28, 2008 12:52 AM by almond0517

    nested repeater with custom component

    rkoe123
      Hi there,
      I am very new to Flex and would appreciate any help given.
      To start I have a simple external nested xml file for the data : "book.xml"
      <?xml version="1.0" encoding="UTF-8"?>
      <book>
      <section>
      <sectionnumber>s1</sectionnumber>
      <chapter>
      <chapternumber>c1</chapternumber>
      </chapter>
      <chapter>
      <chapternumber>c2</chapternumber>
      </chapter>
      </section>
      <section>
      <sectionnumber>s2</sectionnumber>
      <chapter>
      <chapternumber>c3</chapternumber>
      </chapter>
      </section>
      </book>

      I also have a main app(NestedRepeater.mxml) with a repeater control which contains a custom mxml component(Section.mxml):
      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:comps="component.*" layout="absolute">
      <mx:XML id="data" source="data/book.xml" />
      <mx:VBox>
      <mx:Repeater id="Repeater1" dataProvider="{data.section}">
      <comps:Section sectionNumber="{Repeater1.currentItem.sectionnumber}" xmlSection="{Repeater1.currentItem}" />
      </mx:Repeater>
      </mx:VBox>
      </mx:Application>

      And in my custom component(Section.mxml), I have another repeater which is for the chapters for each section.

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

      [Bindable]
      public var xmlSection:XML;
      [Bindable]
      public var sectionNumber:String;

      private function save(chapternumber):void {
      var a:Alert = Alert.show(chapternumber, "Confirmation", Alert.OK);
      }
      ]]>
      </mx:Script>
      <mx:XML id="data" source="../data/book.xml" />
      <mx:VBox>
      <mx:Panel id="panel1" layout="absolute" title="Section" width="166" height="70">
      <mx:VBox>
      <mx:Label text="{this.sectionNumber}"/>
      </mx:VBox>
      </mx:Panel>
      <mx:Repeater id="Repeater2" dataProvider="{xmlSection.chapter}">
      <mx:Panel layout="absolute" title="Chapter" height="100" width="166">
      <mx:Label text="{Repeater2.currentItem.chapternumber}" />
      <mx:Button x="0" y="26" label="Save" width="52" click="save(xmlSection.chapter.chapternumber)" />
      </mx:Panel>
      </mx:Repeater>
      </mx:VBox>
      </mx:Canvas>

      So the problem I am having is when I click on the button in the chapter panel of each children, I can't seem to pass the chapter label correctly to the Alert pop up window. If a section has only one chapter, when I click the Save button, the alert shows "c3" correctly, but if a section has more than one children, then in the alert pop up, it displays all the children instead of the targeted one:
      <chapternumber>c1</chapternumber>
      <chapternumber>c2</chapternumber>

      I think the problem is in the click event for the button:
      click="save(xmlSection.chapter.chapternumber)"
      But being new to Flex, I am unable to figure out why.

      If anyone can have any suggestion, would be greatly appreciated.
      Thanks