NOTE: I’ve updated this component. To see the latest version click here.
One of the Flex applications I work on is a touch screen application primarily used to browse a product catalog. Because there is no keyboard physically attached to the touch screen display and it was necessary to have some input from users (primarily for signing up to a mailing list) I built a Qwerty keyboard component for flex.
The component displays a nearly full set of keys found on your standard Qwerty keyboard with a limited set of special characters. You can assign TextInput and TextArea controls to accept the output from the component and there is a handy method for changing focus to different input fields.
Click here to view the example application
Basic Usage
<mx:Form width="100%">
<mx:FormItem label="Field 1" width="100%">
<mx:TextInput id="field1" focusIn="myQwertyKeypad.newFocus(field1)" width="100%"/>
</mx:FormItem>
<mx:FormItem label="Field 2" width="100%">
<mx:TextInput id="field2" focusIn="myQwertyKeypad.newFocus(field2)" width="100%"/>
</mx:FormItem>
<mx:FormItem label="Field 3" width="100%">
<mx:TextInput id="field3" focusIn="myQwertyKeypad.newFocus(field3)" width="100%"/>
</mx:FormItem>
</mx:Form>
<claire:Qwerty id="myQwertyKeypad" inputControl="{field1}" width="100%"/>
While probably a pointless component for most Flex Applications this component is very handy for touch screen input requirements.
Thank you for the qwerty component, it’s really useful!!!
You’re welcome. Thanks for the comment. I’ve found the component useful as well. If you can think of any improvements, please let me know.
Thanks. I find the keyboard cool. Is there any way where I can create an ‘Enter’ button?
Hi, i find your soft keyboard useful! I had successfully able to filter a list of information by typing into a form from the physical keyboard. But how do i actually filter the list from the key input of the soft keyboard? thanks!
Thank you for the questions and comments. I’ve updated this component and posted a new example. I’ve also included instructions on how to add an ‘Enter’ or ‘Return’ button to the keyboard so that people have an idea how to customize it.
Great work! Most appreciated!
That’s quite a simple solution to a complex problem. I’m impressed. Thank you for posting this.
Hi.. I’m have used your component in my flex application and it worked like a charm!! Thanks for sharing your source codes!!
I have placed the on screen keyboard in a internal pop up in Flex, and currently i have trouble trying to get the focusManager to type in both fields. Can you give me some advise on how to do this? Thanks a million!!
@Wangi
When you set the focus to a specific field you need to call the method yourQwerty.setFocus( yourTextInput ); The Qwerty component won’t automatically know which field has focus, you’ll need to call this method each time the focus shifts. I hope that helps.
Hi Kerk,
I did try using that method, however, it only focuses on one field rather when i call that method.
public function setLoginFocus(com:UIComponent):void{
this.loginKeyPad.newFocus(com);
}
This component is exactly what I am looking for, but I am having trouble getting it to work. When I copy what is in the source file, I get the error:
Type was not found or was not a compile-time constant: Qwerty
Can you tell me how to fix this? I’m still kinda new to Flex.
Hello Beth,
It sounds like the Flex builder is not able to find the Qwerty component in your project. In the example notice in the application tag the property that reads xmlns:claire=”claire.com.*”. This tells the Flex builder that the ‘claire’ components are located in the folder src/claire/com/ This is where the Qwerty.mxml file should be located. If the file is in this folder and you have the necessary xmlns declaration in the application tag you shouldn’t get that error. I hope that helps. If not let me know.
Hi Kerk,
Thanks so much for your help by posting this component. Im having trouble using it in my app though. I have a search function which is called by using “change” in my text field. The touch keyboard displays text in my textfield, however ‘change’ does not recognise the input from the touch keyboard and does not call my search function. When I use my normal keyboard in the text field ‘change’ does recognise the key input and calls my search function. I dont know how to fix this and was hoping you could help.
Regards Ryan
Hi Anonymous,
We probably need to dispatch a CHANGE event ourselves from the Qwerty.mxml component on the inputControl property. Try adding this line to the method addToString.
inputControl.dispatchEvent(new Event(Event.CHANGE));
Hi, great stuff here.
I am using your keyboard for a rather long text entry and have come across the problem where I want to edit a word somewhere in the middle of my text, however I have discovered that it is impossible. Do you know of a way of determining where the I beam is in the text box or of programmatically doing a ‘keypress’ (since I know that the normal keyboard can do edits wherever the I beam is located)
This looks cool so far, what’s up people?
If it’s not just all bots here, let me know. I’m looking to network
Oh, and yes I’m a real person LOL.
See ya,