Flex : Communicate between the skin and the data model?

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

Answers


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


Need Your Help

takeScreenshot always returns false for uiautomator

android automation uiautomator uidevice

I am trying to automate 'taking a screenshot' on Galaxy S4 and Kindle HDX 8.9 and I am using the following code.

How to convert Greensock's CustomEase functions to be usable in CreateJS's Tween system?

createjs tween easing greensock easing-functions

I'm currently working on a project that does not include GSAP (Greensock's JS Tweening library), but since it's super easy to create your own Custom Easing functions with it's visual editor - I was