Detecting changes to an Object using the Flex ObjectProxy class at Flex Examples

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.

September 2007
M	T	W	T	F	S	S
« Aug		Oct »
	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

September 2007

« Aug

Oct »

10 Responses to “Detecting changes to an Object using the Flex ObjectProxy class”

Feed for this Entry View blog reactions

1 Jamie Sep 28th, 2007 at 12:22 pm

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 Ali Sep 28th, 2007 at 7:13 pm

Man, this rocks…didn’t know about that objectProxy….very tight!!!
3 Antonis Oct 11th, 2007 at 5:19 am

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
4 peterd Oct 11th, 2007 at 8:14 am

Antonis,

Sorry, I think I only tested using the Flex 3 Beta.

Peter
5 Antonis Oct 12th, 2007 at 1:53 am

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.
6 peterd Oct 12th, 2007 at 7:56 am

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
7 Antonis Oct 15th, 2007 at 1:20 am

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.
8 Radek Oct 29th, 2007 at 7:24 am
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.
9 Gabe Nov 6th, 2007 at 4:40 am

The above works on Flex Builder 2 also. You don’t need to use ObjectProxy. In JavaScript 1.5 the equivalent is Object.watch().
10 titouille Nov 20th, 2007 at 6:02 am

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