flex: How to respond to change of data inside a component

I've created a custom component based on Image component. I want to teach it to respond to change of binded variable. E.g. if main class has a variable balance, I want the component to change image in case balance = 100 one image, in case balance = 50 to another.

Can somebody help to understand how to do that

I am using flex3 so don't see propertyWatcner there. Al开发者_开发知识库so I am using component2 from main mxml file this way

<MyComp:MyIcon left="15" top="20" width="60" height="60"
    id="tower" price="100" accountState="{accountMoney}"
    click="drawBuildingShadow(event)" />

And inside component MyIcon I want to be able to react changes of binded accountState variable.

Without any code to go by (please include a sample of both components if you can), there are a number of ways you could approach this.

You could add a ChangeWatcher which is bound to the variable in question, and invokes a method when the property changes. This method could change the image, based on whatever conditions apply to the property.

It would look something like this:

Component 1:
  [Bindable]
  public var yourVariable:Number;

Component 2:
  private var propertyWatcher:ChangeWatcher;
  //In some initialization method -- this is JUST an example method for how to create the property watcher
  public function init(): void {
      ...
      propertyWatcher = ChangeWatcher.watch(component1, "yourVariable", onVariableUpdate);
  }

  //Define this as a new method to handle when the property changes
  private function onVariableUpdate(event:PropertyChangeEvent):void {
     if(event.newValue == 50) {
       yourImage.source = newSource;
     }
     else if(event.newValue == 100) {
       yourImage.source = otherSource;
     }
  }

Obviously, this is very truncated and shorthand, but hopefully it will help get you started.

Edit: ChangeWatchers do exist in Flex 3, but it sounds like you should go in a different direction. Since the code snippet you posted is a bit small, I'm going to make a few assumptions on how you might do this :)

As alxx mentioned in his comment, you can change the property accountState in your component from an actual property, to a setter/getter. This will allow you to do more extensive processing when accountState gets updated.

It should look something like this:

MyComp:

//Inside your script tag:
private var _accountState:Number;

[Bindable]
public function get accountState():Number {
    return _accountState;
}
public function set accountState(state:Number):void {
    _accountState = state;
    switch(state) {
        case 50:
            yourIcon.source = "blahblahblah";
            break;
        case 100:
            yourIcon.source = "blahblahblah2";
            break;
        //And so on
    }
}

This won't change the code you posted: it should still work as you've written it. I haven't tested this, so it's possible I'm missing something, but hopefully this will help :)