Flex Mobile Development – Flex 4.6 Cool New Soft Keyboard Features – sample w/ source!

November 29, 2011By 85 Comments

Flex 4.6 (release going public TODAY – I will update this post with the link as soon as I have it) – includes some nice soft keyboard enhancements to be aware of, including setting a certain type of keyboard or setting the default return key lable, and even auto-correcting and auto-capitalizing text. This post will show how to use each of them along with some sample code. The sample application is basically just a bunch of text fields with labels identifying which feature or option is set on that particular field so when you tap to type into it you should see the effect of the setting on either the soft keyboard or the text. The src/ folder and fxp are included for reference or download so you can try it out yourself as well.

softKeyboardType
There’s a new softKeyboardType property on the TextInput and TextArea components that will allow you to set the different soft keyboard types available on mobile devices. The value for this property could be set to any one of the following number, email, punctuation, url, contact or default, and will invoke the native soft keyboard of that type on the given device.

For example, this snippet of code from the sample project I’m including with this post sets the keyboard type to number:

<s:VGroup verticalAlign="middle">
	<s:Label text="Soft Keyboard=Number"/>
	<s:TextInput softKeyboardType="number" width="180"/>
</s:VGroup>

Here’s how this looks on the iPad 2 with the above code when I tap into the text field:

And here we can see how it looks on the Android Galaxy Tablet:

On the iPhone 4, you would get this keyboard when it’s set to number:

Compare this to the default soft keyboard on the iPhone:

returnKeyLabel
There’s another new property for returnKeyLabel that can be used for customizing the label on the return key to one of the following: search, next, go, done (the default is simply return :))

Here’s a code snippet of how it’s used:

<s:TextInput returnKeyLabel="go" width="150"/>
<s:TextInput returnKeyLabel="search" width="150"/>

Here’s a screenshot of how it looks on the iPad 2 when set to search:

And on the Android Galaxy Tablet when set to go:

autoCapitalize and autoCorrect
You can also set an autoCapitalize property on a text field to automatically capitalize for you while your typing your text messages etc. The values for autoCapitalize are all, word, sentence and none.

Also, most people are familiar with mobile devices performing an auto-correction or suggestion for words while they’re typing a text message or email etc, and Flex 4.6 now has support for this. You can simply set the autoCorrect property to true and it will suggest fixes to your misspelled words.

It’s very easy to add these features to your code, here’s an example:

	<s:TextInput autoCapitalize="sentence" width="150"/>
	<s:TextInput autoCorrect="true" width="150"/>

Followed by a screenshot from it running on the iPad 2:

You will actually notice the Caps Lock button turn on while you’re typing on the keyboard and the rule calls for a capital letter. Here’s a screenshot of typing into a field on the Android Galaxy Tablet while I’m in a text field with the autoCapitalize set to all:

Note that you can combine these properties as needed so you could do something like:

<s:TextInput softKeyboardType="contact" autoCorrect="true" autoCapitalize="word" returnKeyLabel="search" width="150"/>

The sample source and fxp for this project is available HERE!

Filed in: Flash Builder 4.6Flex 4.5Flex 4.5/MobileFlex 4.6 Tags:

About the Author ()

Comments (85)

Trackback URL | Comments RSS Feed

  1. DarkStone says:

    Very nice fast tip for Flex 4.6

    I believe Flex will become much more powerful when it’s part of the Apache Open Source Project

    Time will prove!

  2. Lionel says:

    That is a long awaited for feature.
    Thanks !

  3. Eugene says:

    That’s awesome! Was waiting for it for a long time. Thanks!

  4. Hi,

    When and where can I download Flex 4.6 production release? I heard from the pre-release that it will be available today, 11/29/2011.

    Thanks…

  5. vasu says:

    Holly, Is this final version from adobe?
    They wont focus hereafter?

  6. XKGmedia says:

    Hi Holly,
    Just downloaded Flash Builder 4.6
    from http://www.adobe.com/go/try_flashbuilder/
    but got this file, FlashBuilder_4_5_LS10.dmg.
    This is not Flex 4.6.

    There must me some mistake.
    Please update tnx

  7. Pulkit Gupta says:

    Nice Stuff!

    Are all these properties supported with the non StageText skin as well?

    Regards
    Pulkit

    • Chaos7703 says:

      You probably already figured out the answer to this, but for others who may be looking. No, they’re not.

      Also, keep in mind that there’s a problem with the 4.6 text input components. They’re not in the display stack in the same way as the old ones & as a result; if you have inputs in a scrolling area, the words that go *in* the text input often end up *on* the wrong part of the screen after scrolling.

      This scrolling glitch can be fixed by applying the older StageText skin, but you lose the “auto*” abilities.

  8. It’s amazing and awaiting since long time. Thanks Flex

  9. Joel T. says:

    Hi,

    I went to this page (http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.6) to download the 4.6 SDK, but the download link for Adobe Flex SDK the page was NOT FOUND!?

    BTW, what is the difference between Adobe Flex SDK and Adobe Add-ons?

    Joel

  10. Ankit says:

    Wow!
    I was eagerly waiting for these features from past 20 days. very easy implementation.
    Hope adobe continue like that even if its open source in Apache foundation.

  11. David Jumeau says:

    How did you take the screen captures from your tablets?

  12. Thanks Holly, a much anticipated release. Can’t wait to give it a test drive.

  13. Lionel says:

    Off topic but, will there be a LaunchPad update to match the Flex 4.6 release?

    Thanks

  14. sloppy says:

    Cool.Thanks for share.

  15. Odie says:

    Thx for the tutorial!

  16. Hugo says:

    Hello Holly,

    I tried to migrate a Flex 4.5.1 mobile project to Flex 4.6.

    Now boot 50% more faster (4s -> 2s), the navigation to views more faster (2s -> 1s) and the scroll in the lists are much more smoth.

    The new DateSpinner and Callout are just great.

    But I founded several issues that some of them already workarounded and others have to investigate.

    One of the new bugs is that the TextInput event Click was broken in the release of the Flex 4.6. Tried other events and only the focusIn seems to work (but that could no be used as workaround because I press the TextInput, call the new Callout component, in the Callout component have a button to close and the TextInput auto gain focus again, lol).

    What are my other options for the click event in the TextInput or there is samething that I’m missing to enable the click event again ?

  17. Alexis Desmarais says:

    Hi All,

    Anybody know of to get the softkeyboard height in pixels ?

  18. Francesco says:

    Thanks Holly!
    I’ve a problem. On my iPod touch when soft keyborad is opened and i click on “Done” key, the softkeyboard does not disappears!

  19. Ankit Goyal says:

    Hi Holly, Nice post.
    I am wondering about one more feature in text input –
    when we click on the email address field and start typing the name it will list similar address from the address book in the phone.
    Is there any way we can do this in flex app?

  20. Kedar says:

    Hi,

    I downloaded the fxp, I put a scroller around the groups that you have in SoftKeyboardType.mxml. There is a bug with the rendering of text when the page scrolls. Is anyone else facing the same issue ? the issue is when you scroll (make the verticalScrollPolicy=”on”) the text does not move with the textfields. It is a big issue. Sometimes the text stays outside the text field. This is seen on simulator/mobile devices, desktop apps.

    Here is the link to screenshot I’m talking about. Can someone help ?

    http://imageshack.us/photo/my-images/812/errorpx.jpg/

  21. Chris Turner says:

    Holly,

    Is there any way to capture what is pressed on the soft keyboard? I’m looking to be able to close the soft keyboard when the user presses the Return key.

    Thanks in advance.

    • Chris Turner says:

      Anyone have any insight into this???

    • Dave says:

      Hi Chris,

      I’m having the same issue, did you get this work, if so I’d love to know how.

      • Chris Turner says:

        Haven’t figured it out. :-( I hope there’s a way at some point.

        • Dave says:

          Thanks for the reply. I’ve had to make do with
          softKeyboardDeactivate=”myAction(event)”
          instead.

          I think they’re may be a bug in FB4.6 cause as soon as you change to returnKeyLabel the function works but it no longer closes the softkeyboard.

    • Sebastien says:

      You can use the keyUp and keyDown event, but for this you need to use spark.skins.mobile.TextInputSkin skin, which will make you lose all cool stuff describe in this article.

  22. Raja says:

    Hi, i have successfully installed FB 4.6 and I’m getting compilation errors–
    Can not resolve a multiname reference unambiguously. JSON (from /Applications/Adobe Flash Builder 4.6/sdks/4.6.0/frameworks/libs/air/airglobal.swc(JSON, Walker)) and com.adobe.serialization.json:JSON don’t know how to solve this. Can any one help me?

    Thanks,
    Raja.

  23. Jeremy Keczan says:

    @Kedar

    That is a know issue and can be solved by setting the skinClass of the Text Input or Text Area to use the mobile skin.

    The default in 4.6 is to use StageText which does not support scrolling. so skinClass=”spark.skins.mobile.TextInputSkin” will do the trick

    • Kedar says:

      Hey Jeremy,

      Thanks a dozen. Seems to be a lucky day. Another issue was resolved in the app I was developing.

      Thanks.

    • Gareth Arch says:

      @Jeremy Keczan,
      You are a lifesaver! Thank you so much. That saved me quite a few headaches. Been trying to figure out what’s wrong with my Playbook app. Your simple fix was exactly the solution I needed. Thanks again.

    • Mihai Joldes says:

      Thank you! I’ve been looking at this problem for 5 hours now!
      Thanks for the fix.

    • Mihai Joldes says:

      @ Jeremy
      Your suggestion worked great for the problem, but when using the new skin, the softKeyboardType property is broken.
      It seems that the new skin uses a StyleableTextField component for the textDisplay property, which does not implement ISoftKeyboardHintClient.

      Do you have any suggestions?

  24. Ganesh says:

    Hi Fash 4.6 is not supporting for as3corelib for JSON parsing :)

    • Ganesh says:

      Hi I am using softkeyboard number

      i have selected resizesoftkeyboard as false but then also screen is resizing ???

    • Twan says:

      Ganesh, JSON is built in to Flex. The following is from the pre-release message board from Adobe:

      Hi Frank,

      It is actually a pretty easy fix, what happens is that the new SDK has native JSON support.
      So when you import as3corelib, you basically let flex builder choose between 2 options for a class of the same name “JSON”.

      Flex doesn’t know which one to select, 2 options here:

      1)Remove the as3corelib swc from your project and any reference, and rely on the new JSON implementation in the SDK.

      2)Keep the as3corelib, and in every place you referenced it, for example:\
      JSON.decode(source)
      JSON.enconde(source)

      Change it to:
      com.adobe.serialization.json.JSON.decode(source)
      com.adobe.serialization.json.JSON.encode(source)

      and you are set to go.

  25. Salvador says:

    Thanks for a great post it was very helpfull. However, i’ve been searching everywhere for the following and i’m hoping you can share some insight on the issue…

    Is there a way to set the keyboard type to the default number view (not the dial type)?

    Im asking this because I need the user to be able to use the “.” key to put in decimal numbers. IE: “95.01″

    Thank you so much

  26. Fullabeatz says:

    This is awesome thanks!

    Is there any way to get the Previous, Next and Back buttons to go at the top of an iOS keyboard?

  27. thiago says:

    Hi, I download this sample, but when I open it on flash builde 4.6 it cames with this error: An unknown item is declared as the root of your MXML document.

    I tried to create a new flex mobile project on flash builder 4.6, but When I try to bring components on desgin mode, it is not allowed.

    Can you help me?

    regards,
    thiago

  28. Alexander says:

    @Mihai Joldes

    There seems to be a problem with the viewport inside StyleableStageText. You can fix the problem by modifying the source.

    At these three lines at line 2915 inside spark.components.supportClasses.StyleableStageText

    var viewPort:Rectangle = stageText.viewPort;
    viewPort.width += 1; stageText.viewPort = viewPort;

    This is an ugly workaround, but it works.

  29. Great Feature, long awaited. Was waiting for it for a long time. Thanks!

  30. Rajesh says:

    hey, i have created a mobile application which run smooth in androids but in iPad the soft keyboard in auto raised. what can be the issue? Thanks for reading!

  31. rasmi says:

    Great Article, saved me alot of the bugs I encountered in 4.6..

    Anyone can shed light on why my textinput doesnt display databind values correctly?

    ex: firstview with databind

    it displays normally
    and i push a new view.
    then pop it.
    the firstview loads again, initially displaying the binded variable, but then it vanishes..

    any thoughts on this?

  32. Gs says:

    Hi,
    Thanks for the details on the softkeyboard types.

    I have a text input accepting numbers. I have configured the softkeyboard type “number”. In IOS (Iphone) there are two problems with the softkeyboard type number:
    a.) There is no Enter key available to dismiss/close the softkeyboard
    b.) No decimal point (.) to enter decimal numbers.

    Is there a way to bring these elements to the softkeyboard (or) are there any other work arounds available.

    Thanks.

  33. Rahul Joshi says:

    Hi, Thanks for the post. I am trying this on an iPod Touch with iOS 5 but the retrunkeylabel property doesn’t work. Any idea what might be the issue?

    Thanks

  34. maayan says:

    hi
    how do i type “.” when using the numeric option?

  35. Kevin says:

    I need an tab key to allow user navigate from one field to another field. Is that possible ?

  36. Rajesh says:

    I guess there is a provision in FB 4.6 for this thing. If you have ever used an android device, u may guess the idea.
    There is no tab button to jump to next field, however u have an option of NEXT button which does the same thing. A little bit of programming is required for this it.
    Try it, All The Best !!

  37. Pablo Cabana says:

    No way to achieve this in pure ActionScript? :(

  38. Ayantika says:

    HI

    I am building a mobile app for iphone4 in flashbuilder 4.6. I am using the softkeyboard features for textinput but its not working on iphnoe. Does anyone has any idea why this is happening?
    I am also attaching code snippet which I am using:

    • Rajesh says:

      Hi,

      Please remove any skins that you have applied to textinput boxes. If the problem still remains try to copy the skins from flex 4.5 text input skins class file.

      Chao !!

  39. Ayantika says:

    prompt=”Email”
    widthInChars=”51″ autoCapitalize=”sentence” softKeyboardType=”email”
    returnKeyLabel=”go” needsSoftKeyboard=”true”

  40. Ayantika says:

    HI

    I am facing a problem for giving an icon to the app in iphone4 in flashbuilder 4.6. Its giving me an error while I am generating an IPA.

    Error occurred while packaging the application:

    C:\Users\PAPRI~1.DUT\AppData\Local\Temp\AOT1341579503873\ClearMountain_iphone-app.xml: error 303: Icon assets/images/icon-final57.png is missing from package

  41. Chaos7703 says:

    I’m not sure about the keyboard. You’re not applying a skinClass to it are you? (inline or in a stylesheet) If you are, that could be removing the “autoFeatures.”

    You’re compiler error looks like the icon is not marked to be included in the release package. You can check this by: right(command) click the project,
    Properties->Flex Build Packaging->Package Contents (tab)

    You can then browse through the files and folders that are marked to be included in the build ipa/apk. Make sure “assets/images/icon-final57.png” is marked to be included.

    This is a good idea to do anyway, since you may find that you are including things that you forgot to remove or aren’t using (& bloating your package).

    Check this when building the final release also, it is stored separately from the the project properties. So it can have different items marked to be included.

    Project(from menu)->Export Release Build,
    Next(button), Package Contents (tab)

    I hope this will help you and others out! =)
    Todd

    • Ganesah says:

      Hi Guys,

      when I changed the SDK from 4.5.1 to 4.6,vertical Scrollpolicy in TextArea is not working properly,can any One help,how to solve this issues.

      regards
      Ganesh.

  42. PMD says:

    Hello,
    Nice feature.
    But it seems soft keyboard is not implementing “International Keyboard” feature of iPad.
    To be clear, on iPad you can configure more than one keyboard among which for example Thai or Korean keyboards:
    - http://support.apple.com/kb/HT4509

    But it seems current implementation of Flex 4.6/ Air (3.3 nor 3.4) do no propose the “Globe” button to switch to the added keyboards. So only occidental Keyboard are proposed to user. Even if you switch the device to Thai or Korean and have only 1 thai or Korean device then you always stay with the Occidental keyboard.

    It seems strange to me but is it possible that Flex/AIR mobile application cannot propose Thai or Korean keyboards ?

    Hope someone can help me on this.
    Regards
    Philippe

  43. Ayantika says:

    HI

    I am building a mobile app for iphone 4 in flex 4.6. I want to browse an image and save the path of that image. The browsing is working on iphone but I am not getting the path.

  44. Ash says:

    Hello, does any one know when FP 4.6 for php will be released

  45. Ayantika says:

    HI

    How can I give decimal option on iphone4 number type softkeyboard

  46. Starlover says:

    Is there already a solution for textarea scrolling in combination with keyboardtype number?

  47. In my recently installed Flash Builder 4.6, the soft keyboard does not show at all when I debug in the emulator, with a configuration for the Apple iPad! I gave up on my own application and am experiencing the same lack of behavior with Holly’s demo application.
    The only thing out of the totally ordinary that I can think of is that I have also installed Java EE into Flash Builder.
    Any ideas? I appreciate the help –
    Peter

Leave a Reply