Tonight I built a component that I’m sure most of us have built a half-dozen times before – a text input that displays a prompt inside of the component when no text has been entered and the component is not focused. The difference this time is that I built it as a Flex 4 Spark component, and I have to say I am pretty delighted by how simple it was.
Here are the basic steps I followed:
- Extended spark.components.TextInput to add promptText property and focused state
- Copied spark.skins.default.TextInputSkin as a new skin and added a SimpleText component (promptView) to display the promptText
- Used a binding function to dynamically set the visibility of the promptView
View Example (view source enabled)
Once it was working properly, it was super easy to add a fade in/out when the prompt is shown and hidden.
A while back I built a suite of text input components that provide type-ahead functionality, suggestions, an inline button to clear the text, etc. I’m looking forward to building those as Spark components, possibly with a couple of different skins.
Thanks to the Flex team for making an awesome new Flex and to Andy Hulstkamp for some great Flex 4 examples.