Taking Control of the Flex Soft Keyboard
steveonjava | July 14, 2011This is part 2 of my Flex Mobile series. Please see my first post for information on getting started.
When using the text components, the Android soft keyboard will automatically trigger upon focus as you would expect. However, sometimes you need finer grained control over when the soft keyboard gets triggered and what happens when it gets activated.
The soft keyboard in Flex is controlled by the application focus. When a component that has the needsSoftKeyboard property set to true is given the focus, the soft keyboard will come to the front and the stage will scroll so that the selected component is visible. When that component loses focus, the soft keyboard will disappear and the stage will return to its normal position.
With the understanding of the focus, you can control the soft keyboard by doing the following:
- To show the soft keyboard declaratively – Set needsSoftKeyboard to true for your component
- To show the soft keyboard programmatically – Call requestSoftKeyboard() on a component that already has needsSoftKeyboard set.
- To hide the soft keyboard – Call setFocus() on a component that does not have needsSoftKeyboard set.
This works fine for components that do not normally trigger the soft keyboard; however, for components that automatically raise the keyboard, setting needsSoftKeyboard to false has no effect. A workaround to prevent the keyboard from popping up on these components is to listen for the activating event and suppressing it with code like the following:
<fx:Script>
<![CDATA[
private function preventActivate(event:SoftKeyboardEvent):void {
event.preventDefault();
}
]]>
</fx:Script>
<s:TextArea text="I am a text component, but have no keyboard?"
softKeyboardActivating="preventActivate(event)"/>
This code catches the softKeyboardActivating event on the TextArea component and suppresses the default action of raising the soft keyboard.
In addition to getting events on activation, you can also catch softKeyboardActivate and softKeyboardDeactivate events in order to perform actions based on the soft keyboard status.
The following is the full code listing for a soft keyboard sample application that demonstrates all these techniques used together to take complete control over the soft keyboard.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
splashScreenImage="@Embed('ProAndroidFlash400.png')">
<fx:Script>
<![CDATA[
[Bindable]
private var state:String;
[Bindable]
private var type:String;
private function handleActivating(event:SoftKeyboardEvent):void {
state = "Activating...";
type = event.triggerType;
}
private function handleActivate(event:SoftKeyboardEvent):void {
state = "Active";
type = event.triggerType;
}
private function handleDeactivate(event:SoftKeyboardEvent):void {
state = "Deactive";
type = event.triggerType;
}
private function preventActivate(event:SoftKeyboardEvent):void {
event.preventDefault();
}
]]>
</fx:Script>
<s:VGroup left="20" top="20" right="20" gap="15"
softKeyboardActivating="handleActivating(event)"
softKeyboardActivate="handleActivate(event)"
softKeyboardDeactivate="handleDeactivate(event)">
<s:HGroup>
<s:Label text="Keyboard State: " fontWeight="bold"/>
<s:Label text="{state}"/>
</s:HGroup>
<s:HGroup>
<s:Label text="Trigger Type: " fontWeight="bold"/>
<s:Label text="{type}"/>
</s:HGroup>
<s:Button id="needy" label="I Need the Keyboard" needsSoftKeyboard="true" emphasized="true"/>
<s:TextArea text="I am a text component, but have no keyboard?"
softKeyboardActivating="preventActivate(event)"/>
<s:HGroup width="100%" gap="15">
<s:Button label="Hide Keyboard" click="{setFocus()}" width="50%"/>
<s:Button label="Show Keyboard" click="{needy.requestSoftKeyboard()}" width="50%"/>
</s:HGroup>
</s:VGroup>
</s:Application>
This code creates several controls and attaches actions to them so that you can hide and show the soft keyboard at will, as well as see the current soft keyboard state as reported by the events that trickle up. When you run the application it should look like this:
Notice that the TextArea control, which normally triggers the soft keyboard no longer brings it up, while the highlighted button immediately raises the soft keyboard whenever it gets focus. The two buttons at the bottom to show and hide the keyboard merely play focus tricks to get Flash to show and hide the keyboard at will.
You can use the same techniques in your own application to take full control over the soft keyboard.
