A Better Prompting TextInput with Flex 4

There are two ways to share data between a Flex 4 Spark component and its skin: you can either pull the data from the component into the skin or you can push the data to the skin from the component. It’s a subtle difference, but the latter approach is recommended because it does not rely on data binding, and it promotes encapsulation.

A while back I shared an example of using Flex 4 to create a text input that supports displaying a prompt when it is not focused and no text has been entered. In that example the skin pulled the value of the promptText property from the hostComponent and applied it to a SimpleText component with the id “promptView”. The logic for whether or not the promptView was visible was based on the current state of the skin (focused or normal) and whether or not the hostComponent's text property was an empty string. This is fine, sort of, but since a good component should be easy to skin, it would be better if the person creating the skin didn’t have to set the label on the promptView or replicate the logic to hide/show it. Because components are aware of the data type of each skin part, it is possible to push data into the skin from the component and encapsulate more of the logic.

I was getting a little tripped up there trying to explain that, but hopefully looking at the two examples side by side will make it more clear.

Example 1 is basically the same as the example created in my earlier post, but cleaned up a little. In this example the skin pulls data from the component.

Example 2 pushes the data from the component into the skin. You’ll see there’s a bit of added complexity in the component now, but the skin is much simpler. I believe this is a better approach and allows developers to use the skin in their own applications much easier.

Both examples have view source enabled, and you can grab also grab the source at github.

git://github.com/andymcintosh/SparkComponents.git