Prompting TextInput with Flex 4

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.

    This entry was posted in Flex, Skinning. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

    10 Comments

    1. Posted June 17, 2009 at 4:27 am | Permalink

      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?

    2. Posted June 18, 2009 at 6:02 am | Permalink

      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/

    3. Posted June 23, 2009 at 5:04 pm | Permalink

      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.

    4. Doug in Paia
      Posted March 8, 2010 at 1:02 pm | Permalink

      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

    5. Posted May 13, 2010 at 3:46 pm | Permalink

      Doug in Paia <<

      you have to add this line into the .as file

      [SkinPart(required="true")]
      public var textView:RichEditableText;

      and in the .mxml use label instead of SimpleText

    6. Posted August 25, 2010 at 9:20 am | Permalink

      Andy: thanks for this example. Any chance you could put the MIT license on the source so others can freely use it?

    7. Aravindakumar
      Posted November 23, 2010 at 11:52 pm | Permalink

      Description Resource Path Location Type
      1119: Access of possibly undefined property textView through a reference with static type com.andymcintosh.controls:AdvancedTextInput.AdvancedTextInput.as/ElderSpinFx/src/com/andymcintosh/controls line 66 Flex Problem

    8. Joseph
      Posted November 26, 2010 at 1:36 pm | Permalink

      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

    9. Joseph
      Posted November 26, 2010 at 1:37 pm | Permalink

      ahhh, the TextView & PromptView is in the Skin ;)

    10. Posted February 23, 2011 at 7:34 am | Permalink

      thanks for the example. The s:SimpleText reference should be replaced with s:Label.

    2 Trackbacks

    1. By Flex 4 IconButton | [ andy.mcintosh ] on June 18, 2009 at 6:38 pm

      [...] [ andy.mcintosh ] Skip to content « Prompting TextInput with Flex 4 [...]

    2. [...] 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 [...]

    Post a Comment

    Your email is never published nor shared. Required fields are marked *

    *
    *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>