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.

var textHandler = {
	i18nText:null,
	init:function()
	{
		// make the text input
		textHandler.i18nText = new window.runtime.flash.text.TextField();
		textHandler.i18nText.type = window.runtime.flash.text.TextFieldType.INPUT;
		textHandler.i18nText.x = -80; // position it offscreen
		textHandler.i18nText.y = 80;
		textHandler.i18nText.width = 45;
		textHandler.i18nText.height = 45;
		textHandler.i18nText.text = "";
		textHandler.i18nText.multiline = true;
		textHandler.i18nText.visible = true;

		function flInputHandler(ev)
		{
			// give the HTML control focus again
			window.htmlControl.stage.focus = window.htmlControl.stage.getChildAt(0);
			// pass the text value back
			sandbox.changeText(ev.target.text);
		}

		this.i18nText.addEventListener(window.runtime.flash.events.Event.CHANGE, flInputHandler);

		window.htmlControl.stage.addChild(textHandler.i18nText);

	},
	setText:function(s)
	{
		document.body.focus();
		// reset the box before typing more stuff.
		textHandler.i18nText.text = ''; 
		// give focus to the flash input so the text shows up
		window.htmlControl.stage.focus = textHandler.i18nText;
	}
}

/* ===========================
   ONLOAD
*/
window.onload = function(){
	textHandler.init();
}

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.

var sandbox = {
	changeText:function(s){
			var tw = document.getElementById('tweetstatus');
			tw.focus();
			// use text selection to replace value
			var sel = window.getSelection();
			var start = Math.min(sel.anchorOffset, sel.focusOffset);
			var end = Math.max(sel.anchorOffset, sel.focusOffset);
			tw.value = tw.value.substr(0, start) + s + tw.value.substr(end);
			tw.setSelectionRange(start+1,start+1);
			}
}

/* ===========================
   handle key events
*/
document.getElementById('tweetstatus').onkeydown = function(e)
{
    // if the character shows up in the right range, redirect the input
	if((e.charCode > 31 && e.charCode < 127) || ( e.charCode > 159))
	{
		parentSandboxBridge.setText();
		return false;
	}
}

Hacky Sack

All of this will hopefully become a moot exercise as Adobe AIR marches on to a full 1.0 release. But when you jump on a beta platform, you have to be ready for beta-level workarounds.