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.

Published November 01, 2007
Categorized as Adobe AIR
Short URL: https://snook.ca/s/852

Conversation

18 Comments · RSS feed
Antonio Touriño said on November 01, 2007

Thanks for the workaround. Now Snitter is usable for a ton of other peeps like myself. :D Great work!

Lim Chee Aun said on November 01, 2007

Just wondering, how do you actually test the code? Having additional non-US keyboards?

Jonathan Snook said on November 01, 2007

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.

Takeshi S said on November 02, 2007

Snitter doesn't let me type Japanese. Although I can copy and paste Japanese on it. The snitter version - 0.017

Jonathan Snook said on November 04, 2007

@Takeshi: in 0.017, the feature required you to manually turn on the international keyboard support. In 0.018, this'll be enabled by default (and no longer a user option)

Takeshi S said on December 04, 2007

Thank you for the information, Jonathan. I updated Snitter to 0.020. I am still having trouble directly typing Japanese in the text area field, though.

GiorgioViklo said on February 18, 2009

Hello,

I've just desided to register here, so... hello everyone ! :)

Zippie84 said on February 15, 2011

thanks, that helped me a lot!
regards,
chantal

Romankeiler said on February 16, 2011

Spiegel-Online auf Satire reingefallen

Der Inhaber der Premium-Wodka-Marke Iordanov Vodka (Niko Jordanov) versteht sich als Mann der Satire
und legt Spiegel-Online rein. Der Journalist hat geglaubt, dass es einen Blocktarif zu 129,- Euro pro Anruf
gibt und hat prompt berichtet, Niko Iordanov gibt Arschbombentipps (Wasserspringen) zu 129,- Euro
pro Anruf.

Christoph Titz schrieb das aber keinesfalls in einer netten Form sondern so, um Niko Iordanov
zu diskreditieren und als Abzocker darzustellen.

Eine peinliche Panne die zeigt, dass es der Spiegel mit der journalisitischen Recherchepflicht nicht mehr ernst nimmt
nur um Leser zu gewinnen.

Nun muss jeder aufpassen, wenn er eine satirische Webseite online stellt, dass er von Spiegel-Online nicht
diskreditiert wird. Der Spiegel greift Satire auf und berichtet diese als wahre Tatsache. Es scheinen dem Magazin
die Themen ausgegangen zu sein.

Der Spiegel verkommt somit zu einem Blatt auf Niveau des Boulevardjournalismus. Peinlich, oder?

Was denkt Ihr?

Tommy

MsSuzukiMotorbikej said on February 17, 2011

Just wanted to say What's Up!. I have been reading posts
on the forum for a while but just recently registered.

Laterz,
Ms. Trouble on a Motorcycle

payday loans charlotte said on February 21, 2011

Technical knowledge has now become an integral aspect of the Iranian psyche.

JoinGamez said on February 28, 2011

Кто что собирается дарить на 8-е марта девушке?

typtogeneut said on February 28, 2011

After looking through the discussion boards for some time I thought its time to join. I hope we can all get a long and share knowleadge.Iam looking forward to it. Let the fun begin :)

VeXeffQuax said on March 03, 2011

Hello
You are a moderator or an administrator, and you see this message?
Remove it please
Sorry for the trouble :)

Unknown said on March 03, 2011

Unknown message

Nadetrodo said on March 09, 2011

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:)

hawasakigirl said on March 10, 2011

I SAW HERE POST ABOUT RELATIONSHIPS. not tell WHERE

Cisypoiptsmam said on May 04, 2011

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.