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.
4 Comments
Nice component. I’ve heard some complaints that Flex 4 is much more verbose for doing what was simple in 3. One example is adding an icon to a button. Thoughts on that?
Andrew,
Check out Juan’s post. He’s got a nice looking button with two icons and a glowing label and it’s all less than 75 lines of generously spaced MXML.
http://scalenine.com/blog/2008/07/17/jumping-into-skinning-with-flex-4/
Andy – thanks for the talk at Flex camp. I was the guy who came to talk to you after about my efforts to solve this for a Catalyst created app I was trying out. I had tried to use a click handler with a “firstTime” flag to set the text to “” if firstTime was true and then set the flag false. This cleared the text alright but I lost the cursor and couldn’t enter anything else. I tried using focus with the same result but actually got it to work ok with mouseOver. That would clear the text and then I could click in for focus and enter my text.
I tried doing the same thing in a Flex3 app and the click handler worked fine so it seems like a “feature” of the Spark TextInput. It’s also interesting that if you don’t specify a text property in 4, you get “(text)” as a default which seems a bit weird.
One other thing I noticed is that the FlashBuilder auto complete doesn’t seem to bring up the old Halo components unless they’re ones that aren’t available in Spark yet. At first I thought I wasn’t going to be able to use a Halo TextInput but I just had to type it fully.
Description Resource Path Location Type
1119: Access of possibly undefined property textView through a reference with static type com.andymcintosh.controls:AdvancedTextInput. AdvancedTextInput.as AdvancedTextInputDemo/src/com/andymcintosh/controls line 66 Flex Problem
2 Trackbacks
[...] [ andy.mcintosh ] Skip to content « Prompting TextInput with Flex 4 [...]
[...] 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 [...]