Menu
   
Charlie Key
posted 4 years ago K
BEGINNER

Flex Snippet - Using ChangeWatcher

One of the many features in Flex is Binding and it is a very important one at that. A feature that I feel is closely related (but that we have not yet covered here on the blog) is the ChangeWatcher class. The ChangeWatcher class does pretty much what the name says - it watches for changes on objects. Note that the properties that can be watched by the ChangeWatcher must be bindable - hence the connection to binding. Today I am going to give a quick rundown on how it works.

The first thing we are going to take a look at it is how to check if a property is actually watchable. This is done with the canWatch static function and returns a boolean (true if can be watched, false otherwise). The parameters we need to pass to the function are the host to watch (target object) and the property name as a string. So the code should look something like.

var canWatch:Boolean = ChangeWatcher.canWatch(myCoolObject, "coolProperty");

There is another static function on ChangeWatcher that is worth a mention, it is watch. This is the bread and butter function of the class. This function allows you to watch a property and then run a function each time the property changes. The first two function parameters are same as the canWatch parameters, but we add add one more argument - the function we want to be called when the watcher sees a change. This can be the name of a defined function or you can pass in an anonymous function:

ChangeWatcher.watch(myCoolObject, "coolProperty", coolPropertyChanged);

// or

ChangeWatcher.watch(myCoolObject, "coolProperty", 
    function(e:Event):void { trace(e.target); })

The watch function also returns a ChangeWatcher instance which we can then use to do other things. The most important of these other tasks is stopping the ChangeWatcher. To stop watching we use a function named unwatch. We would end up doing something like:

var cw:ChangeWatcher = ChangeWatcher.watch(myCoolObject, "coolProperty", 
    coolPropertyChanged);

//when you want to stop watching
cw.unwatch();

That brings this little tutorial to an end. I am happy to field any questions anyone has on using the ChangeWatcher class or really anything else. Until next time, keep programming.

Post a Comment

Comments ()

  • Frederic Vandenplas posted

    Sir, I have a lot of respect for the way you publish simple solutions for complex problems. I have a problem, i solved my way, but i guess you might be a lot better than I :) I have a tree list with clients(klanten) wich have one or more projects (projecten), wich have one or more details(details). the idea is to be able to add clients, and for each client to add projects, after selecting a client and a project from the comboboxes, you can add a detail, wich once uploaded lets you add images. I've been working to let the tree work toghether with the comboboxes, wich works. But i think i may be possible to do it with less code A working system with a few flaws can be seen at www.delmeco.nl/bin/projectY.html where i work with classes for the tree and comboboxes I got a lot of code inthere, and it is not working as i would like it to be so i changed the whole concept to working with XML I've been searching on the internet be never found a similar problem or solution I mainly use flex for backend solutions sincerely yours fréderic vandenplas, belgium, near bruges infoATconexxion.be

    >>> include "urlFile.as";== (http://www.delmeco.nl/php/)

    public function setComboFromTree(event:ListEvent):void
{
  selectedNode=Tree(event.target).selectedItem as XML;
  if(!treeList1.dataDescriptor.isBranch(
      event.currentTarget.selectedItem))
  {
    klantenCb.selectedIndex = selectedNode.@klasse0P;
  }
  else
  {
    klantenCb.selectedIndex = 0;
  }

  var index:Number = 
      leesComboBox1(Number(selectedNode.@klasse0P))
  klantenCb.selectedIndex = index;

  projectenCb.selectedIndex =
     leesComboBox2(index,Number(selectedNode.@klasse1P))            
  box_2.text=klantenCb.selectedItem.@idnumberP;
  box_3.text=projectenCb.selectedItem.@idnumberP;
}

public function leesComboBox1(_number:Number):Number
{       
  var _x:Number=0;
  for(var i:Number=0;i
    • Brandon Cannaday

      Sorry frederic, the comment system doesn't like source code very well. Check out this post on how to put code in the comments and try to post the code again.

  • Speed posted

    I’m trying to bind to a boolean variable. Is this possible using Changewatcher or BindingUtils? I don’t know what property to specify in the ChangeWatcher construct for a boolean. Thanks for any insight on this.

    i Reply
  • Srikrishna posted

    Thanks for the post, it is simple and to the point :) - SK

    i Reply
  • Anonymous posted

    Hi,

    Is it possible to add the HTML Textfiled in the ChangeWatcher.watch function

    i Reply