Flex 4 skins & binding

Question

I love skins in Flex 4 - they offer a really nice separation between logic and styling.

I was wondering how people use binding in skins. The easiest way is to just bind in the skin:

label="{ hostComponent.model.buttonLabel }"

you can also use 2 way bindings:

selectedItem="@{ hostComponent.model.selectedItem }"

but you could argue that this is logic so it should really be handled in the component. You don't really want to re-create all the bindings each time you create a new skin. That seems fragile and prone to creating bugs.

So what are the alternatives? Creating a bucket load of event listeners I suppose. The adobe observe and observeValues tags could be useful as well I suppose.

How do others handle this?

Answer 1

I think it's a good and interesting question. There are a couple of alternatives. I suppose you could inject the model into the skin and bind directly, but that seems wrong because I think the skin should be intimately connected with the component - if the component changes its reference to the model, it automatically changes in the skins. And anyway it only exaggerates the problem you mentioned.

You can create ids in the skin and operate on them from the model. For example

SKIN: label id="infoLabel"
COMPONENT: [SkinPart] var infoLabel:Label
creationComplete {
  BindingUtils.bindProperty(this, 'infoLabel', model, 'infoLabel');
}

This solves your problem. No repetitive maintenance between skins of the same component. However using BindingUtils comes at a cost. Firstly it's not as evident what is bound to what - using the {} way is just so much more obvious. Secondly (I suppose this is actually just part of the first point) you might confuse less-able developers that have to read your code and figure out what's going on.

EDIT: This assumes your component is in AS3. If your component is in MXML, I guess you can just bind as you normally would in MXML.