I’ve made some updates and improvements to my Flex Qwerty Keyboard Component.
This version of the component is a little more tailored for a touch screen kiosk and is modled a little after the soft-touch keyboard you see on Apples’ iPhone. The main new features are shortcut buttons for typing ‘.com’ and ‘.ca’ (cause I’m Canadian) as well as a ‘Tab’ button for tabbing through form fields.
You can view a demo of the updated component here.
You can view the source code for the updated component here.
How to Customize this Component
I’ve had a few comments and questions about how to customize this component. It should be fairly straight forward to do if all you want to do is add or modify how a button works. Here are instructions on how to add an ‘Enter’ or ‘Return’ button to the keyboard.
- First step is to physically add the button to the keyboard. This can be done by adding a new object to one of the keyRow arrays in the qwerty.mxml file. Adding the following object to the end of the keyRowC array will add the button to the end of row 3 of the keyboard.
{label:'Return',w:100}The property ‘w’ specifies that the button should be 100 pixels wide. Alternatively you could set the property ‘flex’ to ‘true’ which would make the button take up as much available space as is available.
- Next you need to instruct the component on how to handle the click event for this new button. You do this by adding a condition to the switch statement in the function handleKeyClick(). Add the following condition for the new Return button.
case 'Return': this.inputControl.text += "n";break;
- Finally we need to modify the function which handles toggling between Upper and Lower case on the keyboard. We don’t want our new button to be affected by this toggling so we will adjust this function to bypass our new button.
In the function toggleUpperLower() edit the following line from this…
if ( kidLabel == 'Tab' || kidLabel == 'Delete' ) continue;
to this…
if ( kidLabel == 'Tab' || kidLabel == 'Delete' || kidLabel == 'Return' ) continue;
There you go, you should have a functional return button. If you have any problems with this example please let me know in the comments.
Hey,
Thanks for the updated component. It helps much. But do you think the comment form can make it workable such as it will send to your email?
Thanks.
@Shellen, It is certainly possible to use a similar form to send an email. This would be a little out of scope for this example. The Basic premise would be to take the results from the form and send it to a server side script such as a php script which would actually send the email.
Do some googling for a ‘ Flex HTTPService ‘ example and an example on how to send email with PHP.
This is a great example, thanks for sharing. How possible is it to make this a component you can drag in from the list?
Thank’s for the comment. To be honest I don’t know who to make something show up in Flex Builder as an object you can just drag from the list.
Great example!! I wanted to know how you would do to make the keyboard usable with the four arrows of a keyboard (I’m trying to build an application that works on a tv with only the four arrows and an ok button to navigate). If I find a good solution I will send you the code if you want it!! Thanks again!!
This example is fabulous. I was just wondering if there’s a way to insert a character/text only at the caret position.
Nice component ever , Hey i am having problem for the component to work. I try to link one component to another component , with keyboards in them …to proceed from the first keyboard to the next keyboard is via “OK” button in alert box but a problem came up. “TypeError: Error #1009: Cannot access a property or method of a null object reference”
at claire.com::qwerty3/addToString()[src\claire\com\qwerty3.mxml:122]
at claire.com::qwerty3/handleKeyClick()[src\claire\com\qwerty3.mxml:111]
hey , may i know how the keyboard link to the text input?
Hope reply asap thanks!
Woops, posted this in the wrong place. Here is my original post:
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)