4 Replies Latest reply on Feb 7, 2010 7:04 AM by _Natasha_

    Problem with releater and event handling

    M_a_s_P

      Hi Flex genius,

      I have been struggling for the whole day with a problem connected to repeater.

       

      I have a text field:

      <mx:Text id="shortText" width="300"  text="{newTeaser.currentItem.shortDescription}" styleName="Scandinavian" fontSize="12"  />

       

      and a label:

      <mx:Label   id="readMoreLabel" x="13" text="{newTeaser.currentItem.readMore}" color="#3C4593" />

       

      both inside a  Repeater which fetches from an XML:

      <mx:Repeater id="newTeaser" dataProvider="{eventsData}">

       

      The Repeater works fine, but I need to add a click on the label id="readMoreLabel" that replace the shortText.text with  {newTeaser.currentItem.longDescription} instead of {newTeaser.currentItem.shortDescription}.

       

      i am quite new in Flex, so I guess I miss some fundamentals.

       

      Thanks for your help.

       

      Max

        • 1. Re: Problem with releater and event handling
          _Natasha_ Level 4

          Hi,

          you cann't create many labels and texts with the same id. You can create them, but you cann't use it.

           

          The easiest variant is to create in dataProvider for repeater special field to identify items (for example, numbers). Call this field, for example id.

          And

          <mx:Text id="shortText{newTeaser.currentItem.id}" width="300"  text="{newTeaser.currentItem.shortDescription}" styleName="Scandinavian" fontSize="12"  />

          <mx:Label   id="readMoreLabel{newTeaser.currentItem.id}" x="13" text="{newTeaser.currentItem.readMore}" color="#3C4593" click="this['shortText'+event.currentTarget.getRepeaterItem().id].text = event.currentTarget.getRepeaterItem().longDescription"/>

          • 2. Re: Problem with releater and event handling
            M_a_s_P Level 1

            Hi Natasha,

            and thanks for you precious advise.

            Yeah, I have tried that approach, but for some reason I can not set the ID of an element like that. i.e. id="shortText{newTeaser.currentItem.itemId}"

            It's getting me an error   shortText{newTeaser.currentItem.itemId} is not a valid identifier.

             

             

             

            Thank you for more inputs.

            Max

            • 3. Re: Problem with releater and event handling
              Gregory Lafrance Level 6

              This code works, and notice the trace(), you CAN have IDs for the controls in the repeater, and you can access them as an array, though I do not make use of this capability in my solution.

               

              If this post answers your question or helps, please mark it as such.


              Greg Lafrance - Flex 2 and 3 ACE certified

              www.ChikaraDev.com

              Flex / AIR Development, Training, and Support Services

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                creationComplete="dataService.send();">
                <mx:Script>
                  <![CDATA[
                    import mx.rpc.events.ResultEvent;
                    import mx.collections.XMLListCollection;
                    import mx.controls.Text;
                    
                    [Bindable] private var eventsData:XMLListCollection;
                    
                    private function dataHandler(evt:ResultEvent):void{
                      eventsData = new XMLListCollection(evt.result..item as XMLList);        
                    }
                    
                    private function clickHandler(evt:MouseEvent):void{
                      var txt:Text = VBox(evt.currentTarget.parent).getChildAt(0) as Text;
                      for each(var xml:XML in eventsData){
                        if(xml.shortDescription == txt.text){
                          txt.text = xml.longDescription; 
                        }          
                      }
                      for each(var obj1:Text in shortText){
                        trace("shortText: " + obj1.text);
                      }
                    }
                  ]]>
                </mx:Script>
                <mx:HTTPService id="dataService" url="data.xml" resultFormat="e4x" result="dataHandler(event);"/>
                <mx:Repeater id="newTeaser" dataProvider="{eventsData}">
                  <mx:VBox width="100%">
                    <mx:Text id="shortText" width="100%"  text="{newTeaser.currentItem.shortDescription}"/>
                    <mx:Label id="readMoreLabel" text="{newTeaser.currentItem.readMore}" color="#3C4593"
                      click="clickHandler(event);"/>    
                  </mx:VBox>
                </mx:Repeater>
              </mx:Application>
              
              

               

               

              <?xml version="1.0" encoding="utf-8"?>
              <teasers>
                <item>
                  <shortDescription>This is short desc one.</shortDescription>
                  <readMore>Read More One</readMore>
                  <longDescription>This is long desc one.</longDescription>
                </item>
                <item>
                  <shortDescription>This is short desc two.</shortDescription>
                  <readMore>Read More two</readMore>
                  <longDescription>This is long desc two.</longDescription>
                </item>
                <item>
                  <shortDescription>This is short desc three.</shortDescription>
                  <readMore>Read More three</readMore>
                  <longDescription>This is long desc three.</longDescription>
                </item>
              </teasers>
              
              • 4. Re: Problem with releater and event handling
                _Natasha_ Level 4

                Really... sorry. So another variant.

                 

                <mx:Text id="shortText{newTeaser.currentItem.id}" width="300"  text="{newTeaser.currentItem.shortDescription}" styleName="Scandinavian" fontSize="12"  />

                <mx:Label   id="readMoreLabel{newTeaser.currentItem.id}" x="13" text="{newTeaser.currentItem.readMore}" color="#3C4593"click="this['shortText'][event.currentTarget.repeaterIndex].text =event.currentTarget.getRepeaterItem().longDescription"/>

                 

                 

                Another variant is to create a special field in dataProvider to be shown, for example visibleData. And init this field with shortDescription.

                In any event you can change the value of this field to any other data (longDescription or any other). This way you can know what you see without inspecting properties from Text