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.
Conversation
Thanks for the workaround. Now Snitter is usable for a ton of other peeps like myself. :D Great work!
Just wondering, how do you actually test the code? Having additional non-US keyboards?
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.
Snitter doesn't let me type Japanese. Although I can copy and paste Japanese on it. The snitter version - 0.017
@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)
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.
Hello,
I've just desided to register here, so... hello everyone ! :)
thanks, that helped me a lot!
regards,
chantal
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
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
Technical knowledge has now become an integral aspect of the Iranian psyche.
Кто что ÑобираетÑÑ Ð´Ð°Ñ€Ð¸Ñ‚ÑŒ на 8-е марта девушке?
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 :)
Hello
You are a moderator or an administrator, and you see this message?
Remove it please
Sorry for the trouble :)
Unknown message
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:)
I SAW HERE POST ABOUT RELATIONSHIPS. not tell WHERE
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?