indieas

In one of my last projects I had to develop an air application with an onscreen keyboard that is working with flash as with the internal html browser of air.

I realized pretty quickly that this isn’t that easy as it seams. There are multiple problems especially with the html view:

• how do i get the focus in the html view to add letters.
• how do i get the selection to add chars on the right position.
• how do i know when a user clicks and inputfield/textarea.
• how do i prevent that flash do set the focus on the keyboard when I click on a letter sprite.

After some experiments I discovered the really nice javascript support of the internal browser. So my first problem was already gone, when I found the javascript command:

var webView:HTMLLoader = new HTMLLoader();
//...later, to get the element with the focus call:
var element:Object = webView.window.document.activeElement;

I wasn’t really into javascript so I was surprised to discover even more possibilities. Now with the focus I can place an onscreen keyboard made with flash and get the activeElement of the htmlloader and add characters to it. something like this:

var inputField:Object = webView.window.document.activeElement;
if( inputField != null ) {
   var select:Number = addScreenBoardText( e.char, inputField, "value", "selectionStart", "selectionEnd" );
   inputField.setSelectionRange( select, select );
}

The function where I add the char and return the selection where the cursor should be set:

private function addScreenBoardText( insert:String, object:Object, textAttribute:String, selectionStartAttribute:String, selectionEndAttribute:String ):Number {
  var selectionStart:Number = object[ selectionStartAttribute ];
  var selectionEnd:Number = object[ selectionEndAttribute ];
  var original:String = object[ textAttribute ];
  var newText:String = original.substring( 0, selectionStart ) + insert + original.substr( selectionEnd );
  object[ textAttribute ] = newText;
  return selectionStart + insert.length;
}

Why I make this weird looking function is because I can use it also for the flash TextField just with different parameters. So now we can add letters to a textfield in a html view as a flash TextField. But one big problem is that we loose the focus every time we click on our on screen keyboard. And there is a way to prevent the change of the focus which is very handy in this situation:

 // in our main application class we listen to the mouse focus change event.
addEventListener( FocusEvent.MOUSE_FOCUS_CHANGE, onMouseFocus );

// in the listener we check if the relatedObject is a Key,Screenboard ( these are my classes for the Keyboard that get mouseclicks )
// then we prevent the default behaviour of the event. which means no focus change is triggered.
private function onMouseFocus( fe:FocusEvent ):void {
if( fe.relatedObject is Key || fe.relatedObject is ScreenBoard ) fe.preventDefault();
}

We saw earlier that is was possible to write to javascript objects as normal in actionscript. I was even more surprised as its possible to listen to javascript events with actionscript functions. That allows me to listen to javascript focus changes and hide/show the keyboard. This way I can make an overlay keyboard that is only visible when I click in a textfield which I find is a very nice solution. So this is how I listened to the javascript events ( keep in mind that this is all actionscript ):

// register everytime the page has loaded!
private function onPageLoaded( e:Event ):void {
  webView.window.addEventListener( "focus", onJavaScriptFocusIn, true );
  webView.window.addEventListener( "blur", onJavaScriptFocusOut, true );
 }

// if we get a focus in event from js, check if its a inputfield or a textarea. then show the keyboard.
private function onJavaScriptFocusIn( e:Object ):void {
  if( e.target.localName == "input" || e.target.localName == "textarea" ) {
    dispatchEvent( new JavaScriptEvent( JavaScriptEvent.FOCUS_IN ) );
  }
}

// we lost focus - hide keyboard
private function onJavaScriptFocusOut( e:Object ):void {
  dispatchEvent( new JavaScriptEvent( JavaScriptEvent.FOCUS_OUT ) );
}

With all this you can build your onscreen keyboard that is working in flash as in html. I made a quick flexbuilder air project that you can download with a keyboard, textfield and htmlloader.