3 Replies Latest reply on Jun 20, 2008 12:21 PM by ntsiii

    Repeater accessing elements

    Solerous
      I need to access a label element in a repeater but I can't figure out how. In the code below, I want to change the chName.text color when an Image is clicked on:

      <mx:Repeater id="rp" dataProvider="{chartArray}" >
      <mx:VBox id="chartBox" width="100%" horizontalAlign="center" addedEffect="Fade" removedEffect="Fade"
      horizontalScrollPolicy="off">
      <mx:Image source="{(ChartObject(rp.currentItem)).getIconURL()}" useHandCursor="true" buttonMode="true"
      mouseDownEffect="Glow" click="markChart(ChartObject(event.currentTarget.getRepeaterItem()))"/>
      <mx:Label id="chName" fontSize="10" text="{(ChartObject(rp.currentItem)).getName()}" color="#ffffff" />
      </mx:VBox>
      </mx:Repeater>
        • 1. Re: Repeater accessing elements
          matthew horn Level 3
          I think you might be getting caught up in the fact that you can't give each repeated item its own event handler (described in the "Event handlers in Repeater components" section here: http://livedocs.adobe.com/flex/3/html/repeater_3.html#176119).

          I put together an example that shows how you would change a style property of a repeated label when the button is clicked on. I think you should be able to apply it to your app.

          <?xml version="1.0"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns="*">

          <mx:Script>
          <![CDATA[
          [Bindable]
          public var myArray:Array=[1,2,3,4];

          private function changeColor(s:String):void {
          var n:Number = Number(s) - 1;
          Button1[n].setStyle("color","red");
          //trace(s);
          }
          ]]>
          </mx:Script>

          <mx:ArrayCollection id="myAC" source="{myArray}"/>
          <mx:Repeater id="myrep" dataProvider="{myAC}">
          <mx:Button id="Button1" label="Click Me" click="changeColor(event.currentTarget.getRepeaterItem());"/>
          <mx:Label id="Label1" text="{myrep.currentIndex}"/>
          </mx:Repeater>
          </mx:Application>

          hth,
          matt horn
          flex docs
          • 2. Re: Repeater accessing elements
            Solerous Level 1
            Thanks for the reply. I can see how you're doing it, but since my Array is of custom ActionScript objects, I don't see anyway to turn

            event.currentTarget.getRepeaterItem()

            into an index in the array of Buttons (in your case) or Images (in my case):

            Button1[n].setStyle("color","red");

            I just don't know how to get the index of the clicked item. Your case seems to me specifically designed to do this since you are using numbers for the labels. But I don't see how to do this with regular labels. Even if I did a string comparison, it's possible to actually create two different labels with the same name and so you can't guarantee you will get the right index.
            • 3. Re: Repeater accessing elements
              ntsiii Level 3
              Create a custom component with all of your repeated controls in it. Pass in the entire currentItem. Then you can code normally within that component, without the crazy getRepeaterItem stuff. You can assign and reference ids and use events normally.

              But the key to Matts post is that Repeater automatically makes an array containing references to any repeated element, so you can reference a repeated instance like myControl[n] where "n" is the indes of the dataProvider item.

              But that is still crazy complicated just to set a label with a button. Do the custom component. Really. You will never go back.

              Tracy