Flex: letting component know a button has been clicked in mxml
A Flash Developer Resource Site

Results 1 to 7 of 7

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

  1. #1
    Senior Member
    Join Date
    Mar 2001
    Location
    Breda, The Netherlands
    Posts
    522

    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.
    // Kind regards, Danielle.
    // specs: Flash CS5.5 | Flash Builder 4.6 | win xp pro

  2. #2
    Senior Member
    Join Date
    Mar 2001
    Location
    Breda, The Netherlands
    Posts
    522

    Explain more

    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.
    // Kind regards, Danielle.
    // specs: Flash CS5.5 | Flash Builder 4.6 | win xp pro

  3. #3
    Total Universe Mod jAQUAN's Avatar
    Join Date
    Jul 2000
    Location
    El Paso
    Posts
    2,429
    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); 
      } 
    }

  4. #4
    Senior Member
    Join Date
    Mar 2001
    Location
    Breda, The Netherlands
    Posts
    522
    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.
    Last edited by Danielle R; 11-15-2012 at 09:00 AM.
    // Kind regards, Danielle.
    // specs: Flash CS5.5 | Flash Builder 4.6 | win xp pro

  5. #5
    Mod cancerinform's Avatar
    Join Date
    Mar 2002
    Location
    press the picture...
    Posts
    13,437
    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.
    - The right of the People to create Flash movies shall not be infringed. -
    | www.Flashscript.biz | Flashscript Biz Classes/Components |

  6. #6
    Total Universe Mod jAQUAN's Avatar
    Join Date
    Jul 2000
    Location
    El Paso
    Posts
    2,429
    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.

  7. #7
    Senior Member
    Join Date
    Mar 2001
    Location
    Breda, The Netherlands
    Posts
    522
    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
    // Kind regards, Danielle.
    // specs: Flash CS5.5 | Flash Builder 4.6 | win xp pro

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width


HTML5 Development Center

Poll by Flashkit.com