6 Replies Latest reply on Nov 15, 2010 3:57 PM by SashaKeith

    Listening for the PropertyChangeEvent events dispatched by bound objects

    JoshBeall Level 1

      Hi All,

       

      It's my understanding that when you bind some two objects together (in my case, with two-way binding--but I think it would be the same with one-way binding), the Flex compiler generates code that will dispatch a PropertyChangeEvent when an object that you bound to is updated.

       

      I'm wondering how I can manually bind to this event.  Here's my particular use case:  Each time my value-object is updated, I want to inspect it and see if the user has submitted a complete set of data for this particular value-object.  If they have, I want to fire off an event that will be handled elsewhere in my app.  This event says "user entered a complete set of data for value-object {whatever}".

       

      I'm trying to do this inside a component.  Here's the code for my component.  The user enters information on an applicant, and I was hoping that the function "changeEventListener" would fire whenever something in my value-object is updated, but it doesn't ever fire.  However, my value-object (this.applicant:Applicant) is getting the data from the input controls, so the binding must be working.

       

      My guess is that I need to addEventListener somewhere else, rather than on the component itself?  But where?

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
                 xmlns:s="library://ns.adobe.com/flex/spark" 
                 xmlns:mx="library://ns.adobe.com/flex/mx" width="650" height="90"
                 creationComplete="group1_creationCompleteHandler(event)"
                 >
           <fx:Script>
                <![CDATA[
                     import valueObjects.Applicant;
                     
                     import mx.controls.Alert;
                     import mx.events.FlexEvent;
                     import mx.events.PropertyChangeEvent;
                     
                     import spark.events.TextOperationEvent;
                     
                     [Bindable]
                     public var label:String;
                     
                     [Bindable]
                     public var applicant:Applicant = new Applicant();
      
      
                     protected function group1_creationCompleteHandler(event:FlexEvent):void
                     {
                          addEventListener(PropertyChangeEvent.PROPERTY_CHANGE,changeEventListener);
                     }
                     
                     protected function changeEventListener(arg1:Object,arg2:Object,arg3:Object):void{
                          Alert.show("I got called");
                     }
                     
      
                ]]>
           </fx:Script>
           <fx:Declarations>
                <!-- Place non-visual elements (e.g., services, value objects) here -->
           </fx:Declarations>
           <s:Label x="0" y="10" text="{this.label}" fontWeight="bold"/>
           <s:DropDownList x="0" y="62" width="60" id="TitleDropDownList" selectedItem="@{applicant.title}" />
           <s:TextInput x="73" y="62" id="firstname" text="@{applicant.firstname}"/>
           <s:TextInput x="213" y="62" id="middlename" text="@{applicant.middlename}"/>
           <s:TextInput x="353" y="62" id="lastname" text="@{applicant.lastname}" />
           <s:DropDownList x="493" y="62" width="60" id="SuffixDropDownList" selectedItem="@{applicant.suffix}" />
           <s:DropDownList x="565" y="62" width="60" id="UsCitizenDropDownList" selectedItem="@{applicant.usCitizen}">
                <s:dataProvider>
                     <s:ArrayList source="{[true,false]}"/>
                </s:dataProvider>
           </s:DropDownList>
           <s:Label x="0" y="47" text="Title"/>
           <s:Label x="73" y="47" text="First"/>
           <s:Label x="213" y="47" text="Middle (optional)"/>
           <s:Label x="351" y="47" text="Last"/>
           <s:Label x="494" y="47" text="Suffix"/>
           <s:Label x="565" y="47" text="US Citizen?"/>
      </s:Group>