2 Replies Latest reply on Nov 1, 2007 4:08 PM by ntsiii

    Repeater

    trycold
      Hi,

      I am using repeter in my app. Inside it I have some buttons in there. Based on what's the label of the button which changed depending on what data I get I want to either change the background of that button or color. Something to distinguish it. E.g for time1 I have 2 values: free and busy. For busy I want red color versus black. How do I do this.

      <mx:Repeater id="dateArray" width="100%" height="100%" >
      <mx:GridRow width="100%" height="100%"> <mx:GridItem >
      <mx:Button id="CalButton" styleName="myButton" label="{dateArray.currentItem.time1}" />
      </mx:GridItem>

      Thanks
        • 1. Re: Repeater
          Gregory Lafrance Level 6
          This code might help:

          <?xml version="1.0"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">
          <mx:Script>
          <![CDATA[
          import mx.controls.Button;
          public function createHandler(event:Event):void {
          var btn:Button = event.target as Button;
          if(btn.label == 'Free')
          btn.setStyle('fillColors', [0x000000, 0x000000]);
          else
          btn.setStyle('fillColors', [0xFF0000, 0xFF0000]);
          }
          ]]>
          </mx:Script>

          <mx:Model id="data">
          <color>
          <colorName>Free</colorName>
          <colorName>Busy</colorName>
          </color>
          </mx:Model>
          <mx:ArrayCollection id="myAC" source="{data.colorName}"/>

          <mx:Repeater id="myrep" dataProvider="{myAC}">
          <mx:Button color="0xFFFFFF" label="{myrep.currentItem}" creationComplete="createHandler(event)"/>
          </mx:Repeater>
          </mx:Application>
          • 2. Re: Repeater
            ntsiii Level 3
            When working with Repeater, I advise creating a custom component that you will repeat, and pass it the entire "currentItem". In the component, implement a "setter" function to receive the currentItem data.

            Now, in the component, you can code normally, binding to the data as you wish, without the hard to read currentItem references. You also avoid the binding warnings without the cast/conversion because the binding source is a true XML object.

            And, you can dispatch events normally. In the event handler, you can reference the component via the event.target property, and thus get a direct reference to the dataProvider item. This is easier to write and read than having to use getRepeaterItem().

            Here are some code snippets:

            In the main app or component (note how "clean" and readable this is):
            <mx:Application
            <mx:VBox ...>
            <mx:Repeater id="rp" dataProvider="{_xmlData}" ...>
            <mycomp:MyRepeatedComponent xmlItem="{rp.currentItem}" .../>
            </mx:Repeater
            </mx:VBox>

            And in the component, MyRepeatedComponent.mxml:
            <?xml version="1.0" encoding="utf-8"?>
            <mx:HBox ...
            <mx:Script><![CDATA[
            [Bindable]private var _xmlItem:XML;

            public function set xmlData(xml:XML):void
            {
            _xmlItem = xml;
            //do any special, non-bound ui stuff you want
            }//
            ]]></mx:Script>
            <!-- Now declare the Item UI -->
            <mx:Text id="lbDescription" text="{_xmlItem.@description}" width="100%" height="100%" />