Flex: letting component know a button has been clicked in mxml

Hi all,

I suppose my problem is pretty basic but after searching for some time I can't find a solution. In my application I load 1 data file in the main mxml. After it loads some processing is done on it and the data is stored in an ArrayCollection. This collection holds data for three years. I want to visualise this year data by letting users click on a button labelled with that year. I call an eventhandler in the main mxml file that updates a variable named currentYear and passes this value on to a variable called year in an ItemRenderer which should then display the data from this specific year.

I notice that when I change currentYear by clicking on the button in the mxml file nothing happens in the itemRenderer. My question is how do I notify the ItemRenderer of the click event in the main mxml?

Thanks in advance for your help.

Hi all,

So far I've had no replies so I would like to explain a little more and add some code. I've been doing some more searching and I think I just need an eventlistener in my ItemRenderer but I don't know how to go about it.
In main.mxml I've got a variable that hold the current year, a button and a handler for the click event like this:

PHP Code:

---

<s:FormItem label="">
[Bindable] private var currentYear:String = "";

                <s:Button id="btn_1996" 
                          label="1996" 
                          click="btn96ClickHandler(event)"/>
            </s:FormItem>

protected function btn96ClickHandler(event:MouseEvent):void{
                currentYear = "1996";
                components.MenRowRenderer.year = currentYear;
            } 


---

As you can see the value for the current year is passed to the ItemRenderen "MenRowRenderer" which has a variable called year and a function setYear() to set that year. In the function override public function set data(value:Object) I use the setYear() function to populate the ArrayCollection "men" with the data from the current year. This array is then passed on to a child ItemRenderer "MenIconRenderer". MenRowRenderer.mxml:

PHP Code:

---

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" 
                autoDrawBackground="true">
    
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import valueObjects.YearPopulationSlice;
            
            [Bindable] private var men:ArrayCollection = new ArrayCollection();
            [Bindable] public static var year:String;
            private static const GRAIN:int = 10000;
            
            override public function set data(value:Object):void{
                super.data = value;
                
                if(value){
                    var people:YearPopulationSlice = new YearPopulationSlice();
                    people.pop = value["pop"+setYear()]/GRAIN;
                    people.immi = value["immi"+setYear()]/GRAIN;
                    people.emi = value["emi"+setYear()]/GRAIN;
                    people.death = value["death"+setYear()]/GRAIN;
                    men.addItem(people);
                }
            }
            
            private function setYear():String{
                
                if(year == "1996"){
                    yearSet = "96";
                }
                if(year == "2001"){
                    yearSet = "01";
                }
                if(year == "2006"){
                    yearSet = "06";
                }
                trace("year:"+yearSet);
                return yearSet;
            }
            
        ]]>
    </fx:Script>

    <s:DataGroup id="rowMenRenderer"  
                 dataProvider="{men}"  
                 itemRenderer="components.MenIconRenderer">
        <s:layout>
            <s:HorizontalLayout/>
        </s:layout>
    </s:DataGroup>
    
</s:ItemRenderer> 


---

So what I want is for the MenRowRenderer to refresh the data in the "men" ArrayCollection every time a year button is clicked in the main.mxml and pass that data on to the child ItemRenderer "MenIconRenderer" and update that visualisation. So far I've only been able to render one year and not change between years. How can I achieve this?
I hope I've explained my problem a little better this way and really hope someone can help as I've been struggling with it for days. Thanks very much in advance.

I wish I could tell you specifically but I haven't touched Flex in a few years. But I'll venture a guess and maybe that will shake something loose.

It appears that rowMenRenderer is bound to the ArrayCollection men. Meaning that when the contents of men change, your DataGroup will detect that and update. men is only changed by virtue of setting the data property of your custom renderer. I'm assuming that you only do that once once your parsed your loaded data.
In your button's event handler, all you do is update the year value on your renderer. But nothing is bound to that so the change doesn't trigger anything. As a quick fix, you might try simply setting data again after you set year. This would cause men to get repopulated thus triggering a change. Of course you'd have to clear out the existing men data before repopulating it.

Code:

---

protected function btn96ClickHandler(event:MouseEvent):void{
  currentYear = "1996";
  components.MenRowRenderer.year = currentYear;
  components.data = myData;
}

---

and edit set data

Code:

---

override public function set data(value:Object):void{
  super.data = value;
  men.removeAll();   
  if(value){
    var people:YearPopulationSlice = new YearPopulationSlice();
    people.pop = value["pop"+setYear()]/GRAIN;
    people.immi = value["immi"+setYear()]/GRAIN;
    people.emi = value["emi"+setYear()]/GRAIN;
    people.death = value["death"+setYear()]/GRAIN; 
    men.addItem(people);
  }
}

---

Hi JAQUAN,
Thanks for your input. I've updated function set data like you said and the eventHandler like this:

PHP Code:

---

protected function btn96ClickHandler(event:MouseEvent):void{ 
  currentYear = "1996"; 
  components.MenRowRenderer.year = currentYear;
  menRenderer.dataProvider = myProxy.populationMen; 
  // components.data = myData; this doesn't work
} 


---

But this doesn't trigger anything in the ItemRenderder. I suppose it just sets the "new" dataprovider but nothing happens with the data display. Any other suggestions are welcome. TIA.

You cannot change year this way unless you cause a datachange of the component, which you do not. Then you can use the dataChange event, which you declare in the header. One way around is to add a label to the component (itemrenderer), which you make invisible and then use an eventhandler:

<s:Label id="myImage" text = "{year}" activate="aHandler(event)" visible="false"/>

[Bindable]
public static var year:String;
private function aHandler(event:Event):void
{
setYear();
}

But this is of course not a nice method.

my mistake, it was supposed to say:
components.MenRowRenderer.data = myData; //where instead of myData, you would use the same data object you passed at startup.

Thanks for your help. This doesn't seem the right approach. I'm trying a custom event now but I'm encountering some problems with that, please view this thread if you want to help: http://board.flashkit.com/board/show...f-custom-event