Snook.ca

Hacking in International Keyboard Support in AIR beta 2

Sometimes you have to get crazy to pull something off. This is one of those times. I'm putting this together to share with other developers but also to demonstrate just how hackish I can get.

What's the problem?

Adobe AIR beta 2 has a bug where only the US keyboard layout is recognized within the HTML control. To go back a little further, AIR is essentially a Flash-based runtime that lets you create and run desktop applications (um, like Snitter). The cool thing about it is that AIR can actually create an HTML control that uses Webkit. From that HTML control, you can still do all the cool DOM stuff you'd expect but you can also access the Flash runtime and do some cool things from there, too.

The Sandbox

Further complicating matters is the security model within the HTML control. By default, everything runs within the application sandbox which has some restrictions. The rest of the application actually runs in the child sandbox which doesn't give you access to the runtime but you can create a bridge to the application sandbox.

Working through things

So, the HTML control only accepts the US keyboard layout. But the Flash runtime is perfectly fine (which meant Spaz doesn't do International but Tweetr does). My brilliant idea was to create a Flash input box and use it instead. Easier said than done...

Originally, I tried creating the a Flash-based text input and overlaying it where the regular text box would be. The problem there is that the box wouldn't resize with the window and if a theme moved the textbox to the bottom, I'd have to find a way to position it there. A few different ways of trying to get the size and position of the HTML text box proved fruitless.

I had all but given up on it but decided to tackle the problem again a couple weeks later. Snitter was getting linked up and one of the common complaints was the lack of international keyboard support.

The Solution

This time I thought to hide the text input and route key presses through the input. Finally, it all started to come together. Here's the magic:

Within the Application Sandbox

I created a text input handler which handles the conversion along with some event handlers.

Within the Child Sandbox

Within the child sandbox, there's the function to replace the value and the function to redirect the key press. The function to set the text was awkward because I had to rely on text selection to pull it off. I originally tried to rely on Ranges but for some reason, anytime I exited the textarea, the text would revert back as if I had hit undo on everything I typed. In the end, I ended up looking at how vBulletin was doing it to pull off a similar solution.

The key handling uses onkeydown. Luckily, I was able to shift focus and not lose the character from within the Flash text box. I did have to tweak things to make sure that normal keyboard functions like arrow keys, delete and whatnot still worked fine.

Being in Canada, I'm familiar with where the keys are on the French Canadian keyboard. So, I switch the keyboard layout and type away. To switch the keyboard layout in Windows, you go the Control Panel and add the other keyboards from Regional an Language Options.

I also put out a version for people to test before making it more widely available.

Heya Iam terrible with introductions but I figured I could adleast say hallo too you all. :) Not sure what to say here .... I live in France and plan on shifting to the states soon. In a matter of fact Iam leaving to Chicago tomorrow with my spouse. I will be back in a 7 days if any one want ill post some pictures:)

People, tell me please, I am now in Greece, and my parents are in Kiev how to help them so we could talk less? I found just such a an article, maybe someone has used a similar service, or heard of him? Tell me please is it real?

Sorry, comments are closed for this post. If you have any further questions or
comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested? Get in touch.