Updated Flex Qwerty Component

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.

1. 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.
   
   
2. 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;

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