Detecting changes to an Object using the Flex ObjectProxy class

The following example shows how you can detect changes to an Object object by listening for the propertyChange event on the ObjectProxy instance.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/27/detecting-changes-to-an-object-using-the-flex-objectproxy-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.events.PropertyChangeEvent;
            import mx.utils.ObjectProxy;

            private var object:Object = {};
            private var objectProxy:ObjectProxy;

            private function init():void {
                objectProxy = new ObjectProxy(object);
                objectProxy.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, updateChange);
                objectProxy.name = "My Object";
                objectProxy.id = 31;

                /* Note: Any assignments made directly to the "object"
                   Object do not dispatch the propertyChange event. */
                object.isDebug = false;
                object.id = 33;

                /* Note: Even though the earlier assignment to the "id"
                   property  didn't dispatch the propertyChange event,
                   the "oldValue" property is still displayed as 33. */
                objectProxy.id = 45;
            }

            private function updateChange(evt:PropertyChangeEvent):void {
                arrColl.addItem(evt);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:DataGrid dataProvider="{arrColl}"
            sortableColumns="false"
            draggableColumns="false"
            width="100%"
            height="100%">
        <mx:columns>
            <mx:DataGridColumn dataField="type" />
            <mx:DataGridColumn dataField="property" />
            <mx:DataGridColumn dataField="newValue" />
            <mx:DataGridColumn dataField="oldValue" />
            <mx:DataGridColumn dataField="source" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

0 thoughts on “Detecting changes to an Object using the Flex ObjectProxy class

  1. Sweet! Will this work for custom classes (like below) as well?

    package Classes{
    	[Bindable]
    	public class Users{
    		public var UserBadgeID:String = "";
    		public var UserEmail:String = "";
    
    		public function Users(){
    		}
    	}
    }
    
  2. I copied and pasted the above code in a new flex application and i get the following error:

    1137: Incorrect number of arguments. Expected no more than 0.

    Even i search in help about the constructor of ObjectProxy class and this it should working, it doesn’t leave to put any arguments in new ObjectProxy object creation.

    I ‘m using Flex 2.0.1

  3. I also download and install flex builder 3 (Flex 3 M3 (Beta 2)) and same error occured.

    1137: Incorrect number of arguments. Expected no more than 0.

  4. Antonis,

    I just double checked with Beta 2 and didn’t see any errors at compile-time or run-time.
    Are you sure you’re publishing with the beta 2 SDK and not an earlier version? Also, which version of Flash Player are you using? (if you aren’t sure, I recently added an “About you” page to this site at http://blog.flexexamples.com/about-you/).

    Peter

  5. I finnally found the cause of the error.

    I had created a new project with name ObjectProxy and the applacation name was ObjectProxy too.

    So there was a name conflict when the ObjectProxy object was created.

    Thanks for your time.

  6. Actually I think you don’t have to use ObjectProxy for that.
    Try this:

    public class Test
    {
        [Bindable] public var test:Boolean;
    }
    

    var t:Test = new Test();
    t.addEventListener("propertyChange", Handler.onPropertyChange);
    t.test = true;
    

    You will get and event also… even if your object doesn’t extend event dispatcher. I’ve tested this code Flex Builder 3 Beta 2.

  7. The above works on Flex Builder 2 also. You don’t need to use ObjectProxy. In JavaScript 1.5 the equivalent is Object.watch().

  8. Hello,

    I have coupled this method with an editable datagrid to submit each change, and no problem, it rock’s !
    But now I have another datagrid with a combobox cellRenderer column (like in this example : http://philflash.inway.fr/flex/dgRendererSimple/srcview/index.html) but the cellRenderer doesn’t fire the PropertyChangeEvent… maybe the affectation is made programmatically ?? I have tried to simulate the event (in the onChange method of the cellRenderer) but no way… any idea to solve that ?

    Thanks in advance for any suggestion