Flex Mobile Development – Flex 4.6 Cool New Soft Keyboard Features – sample w/ source!
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.6 • Flex 4.5 • Flex 4.5/Mobile • Flex 4.6
About the Author (Author Profile)
Subscribe
If you enjoyed this article, subscribe to receive more just like it.
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!
That is a long awaited for feature.
Thanks !
That’s awesome! Was waiting for it for a long time. Thanks!
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…
Hi there, yes Flex 4.6 will be available later tonight on the open source site (http://opensource.adobe.com/wiki/display/site/Home) and Flash Builder 4.6 should be available at a link like the following: http://www.adobe.com/go/try_flashbuilder/). Thanks! Holly
@Holly,
If we build with FB 4.6, will our apps still work on the Playbook or will there need to be an update to the Playbook SDK?
How do we go about getting the update from Flash Builder 4.5 to Flash Builder 4.6?
Holly, Is this final version from adobe?
They wont focus hereafter?
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
Finally got it. T’was released at midnight 11/29/11.
Nice Stuff!
Are all these properties supported with the non StageText skin as well?
Regards
Pulkit
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.
It’s amazing and awaiting since long time. Thanks Flex
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
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.
How did you take the screen captures from your tablets?
in iOS: hold the shutdown button and press the home button -> screenshot will be created
Okay, what about Android tablets? I have an Asus EEE Pad Transformer.
You should turn on this feature somewhere in the settings (I sold mine, don’t remember exact place). Than you’ll be able to do this holding Switch Task button.
Actually here’s a link with more information on how to get and use that ddms tool for taking screenshots -> http://www.addictivetips.com/mobile/how-to-take-screenshots-of-android-device/
Hi David! What Marcus said for iPad and using the android DDMS tool (part of the android toolset) for my Galaxy tablet. Got to Device -> Screen Capture. Cheers! Holly
Thanks Holly, a much anticipated release. Can’t wait to give it a test drive.
Off topic but, will there be a LaunchPad update to match the Flex 4.6 release?
Thanks
Hi Lionel, yes, I’m working on that! Hopefully coming soon
. Thanks!! Holly
Cool.Thanks for share.
Thx for the tutorial!
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 ?
Hugo, why not put this sort of specific question on StackOverflow.com
I have not think about that but fortunately I already solved all the problems of migration from Flex 4.5.1 to Flex 4.6 and also have my app updated in several marketplaces (with AIR 3.1 embebed that its great
): https://market.android.com/details?id=air.com.softbycloud.personalfinances.demo
Hi All,
Anybody know of to get the softkeyboard height in pixels ?
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!
Same Problem here. Did you figure it out?
This option is just setting the label. You need to it yourself. You need to define the enter event of your input and set it to stage.focus = null.
enter=”stage.focus = null”
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?
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/
Another screenshot.
http://imageshack.us/photo/my-images/842/error1ox.png/
Hi – I had the same problem and solved it by changing the skinClass of the TextInput Controll to skinClass=”spark.skins.mobile.TextInputSkin” .
Regards
Chris
Thanks! It works!!!
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.
Anyone have any insight into this???
Hi Chris,
I’m having the same issue, did you get this work, if so I’d love to know how.
Haven’t figured it out.
I hope there’s a way at some point.
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.
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.
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.
@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
Hey Jeremy,
Thanks a dozen. Seems to be a lucky day. Another issue was resolved in the app I was developing.
Thanks.
@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.
Thank you! I’ve been looking at this problem for 5 hours now!
Thanks for the fix.
@ 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?
Hi Fash 4.6 is not supporting for as3corelib for JSON parsing
Hi I am using softkeyboard number
i have selected resizesoftkeyboard as false but then also screen is resizing ???
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.
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
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?
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
@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.
Great Feature, long awaited. Was waiting for it for a long time. Thanks!
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!
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?
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.
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
hi
how do i type “.” when using the numeric option?
I need an tab key to allow user navigate from one field to another field. Is that possible ?
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 !!
No way to achieve this in pure ActionScript?
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:
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 !!
prompt=”Email”
widthInChars=”51″ autoCapitalize=”sentence” softKeyboardType=”email”
returnKeyLabel=”go” needsSoftKeyboard=”true”
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
assets/icon-57×57.png
assets/icon-72×72.png
This should be the format- the size of icon should be be matching the size specified in tags
Chao !!
”
assets/icon-57×57.png
assets/icon-72×72.png
“
i’m sorry, the tags are getting interpreted
icon
image57x57 – assets/icon-57×57.png -/image57x57
image72x72 – assets/icon-72×72.png – /image72x72
/icon
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
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.
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
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.
Hello, does any one know when FP 4.6 for php will be released
HI
How can I give decimal option on iphone4 number type softkeyboard
Is there already a solution for textarea scrolling in combination with keyboardtype number?
No solution yet, but you can vote on the bug: https://bugbase.adobe.com/index.cfm?event=bug&id=3302441
…but Adobe isn’t in charge of it anymore. It’s “Apache” Flex now. Completely open sourced and not their concern (so much). The bug would probably be better filed on apache.org where the group/project is. =)
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