Flex : Communicate between the skin and the data model?

Question

How to send to the skin some value which have changed?

Answer 1

There are two approaches to this: one uses binding and is easier, the other is more complex but better for performance.

Using binding

Suppose your view class looks like this:

public class MyClass extends SkinnableComponent {
    [Bindable] public var myValue:String;
}

then you can bind to that value in your skin like this:

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Metadata>
        [HostComponent("MyClass")]
    </fx:Metadata>

   <s:Label id="myLabel" text="{hostComponent.myValue}" />

</s:Skin>

Overriding commitProperties

Assume the same skin without the binding, then you can set the label's text property by using a skinpart and overriding commitProperties in the host component. The skinpart's name must be exactly the same as the id of the component in the skin (in this case 'myLabel').

public class MyClass extends SkinnableComponent {

    [SkinPart(required="true")]
    public var myLabel:Label;

    public var myValue:String;

    override protected function commitProperties():void {
        if (myLabel) myLabel.text = myValue;
        super.commitProperties();
    }
}

Of course you would have to call invalidateProperties() whenever you want to apply the new value (for instance in a setter function for 'myLabel'). Also notice that 'myLabel' no longer needs to be bindable, unless you would want to be able to bind on it externally.

---

edit: which approach to choose?

I have just answered a question that is closely related to this one in which I elaborate on the pro's and cons of each approach in different situations. You can find it here: Flex: Additional label in ButtonBarButton