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.
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:
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!