Stephen Chin is a technical expert in RIA technologies, and Chief Agile Methodologist at GXS. He coauthored the Apress Pro JavaFX Platform title, which is the leading reference for JavaFX, and is lead author of the Pro Android Flash title. In addition, Stephen runs the very successful Silicon Valley JavaFX User Group, which has hundreds of members and tens of thousands of online viewers, and also is co-organizer for the Flash on Devices User Group. Finally, he is a Java Champion, chair of the OSCON Java Conference and an internationally recognized speaker featured at Devoxx, Jazoon and JavaOne, where he received a Rock Star Award. Steve can be followed on twitter @steveonjava and reached via his blog http://steveonjava.com Stephen is a DZone MVB and is not an employee of DZone and has posted 30 posts at DZone. You can read more from them at their website. View Full User Profile

Taking Control of the Flex Soft Keyboard

08.20.2011
| 9525 views |
  • submit to reddit

This 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.

 

From http://flash.steveonjava.com/taking-control-of-the-flex-soft-keyboard/

Published at DZone with permission of Stephen Chin, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags:

Comments

Khent Johnson replied on Tue, 2011/09/06 - 1:14am

Hi! This is what I am looking for a long time. I am developing my project and I am now in the controlling the soft keyboard in Flex Mobile applications part. And this pahse truly gives me a headache because I am not yet familiar with the process. The guidelines you've shared there sonehow makes my job easy. Thank you so much! ReputationAdvocate

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.