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.

First thing to know is how flash can apply css on text. If you set for example:

textField.text = "Hello is it <b>me</b> you <h1>looking</h1> for.";

You can style the text between tags here: <b>..</b> and <h1>…</h1> if you define css definition for these tags. An example css file would look like:

b {  font-weight: bold; }
h1 {  size:16; }

and the corresponding as source to set the styleSheet would be:

private function onLoaded( e:Event ):void {
// The TextLoader is a class from the indieas library
var loader:TextLoader = e.target as TextLoader;
var css:StyleSheet = loader.getDataAsCSS();
textField.styleSheet = css;
textField.text = "Hello is it <b>me</b> you <h1>looking</h1> for.";
}

Here its important that you set the text property after setting the styleSheet otherwise it will not apply the styles.

So far everything works as expected but what if you also want to style the normal text without any tags. You could wrap the text content in another tag like:

<text>Hello is it <b>me</b> you <h1>looking</h1> for.</text>

But thats not very handy instead we use the TextField own property defaultTextFormat. We can transform a css into a TextFormat and apply that as defaultTextFormat like this:

var styleObject:Object = css.getStyle( "*" );
var defaultStyle:TextFormat = css.transform( styleObject );
textField.defaultTextFormat = defaultStyle;
textField.styleSheet = css;
textField.text = "Hello is it <b>me</b> you <h1>looking</h1> for.";

Again here the order of applying defaultTextFormat, styleSheet and text is important. If you have a styleSheet applied and you want to set the defaultTextFormat it will throw an error. So if you want to reapply the defaultTextFormat do it like this:

var style:StyleSheet = textField.styleSheet; // save the styles to reapply them later
textField.styleSheet = null; // set this null to allow seting the defaultTextFormat
textField.defaultTextFormat = // new format;
textField.styleSheet = style; // reapply styles
textField.text = textField.text; // reapply text

The last thing to mention is the textField.condenseWhite property. Very often you load your content from an xml file and like to show a node content in a textField. But as the xml itself has linespaces and breaks the shown text is weird formatted. To avoid this use textField.condenseWhite = true. To make a new line just add a <br/> tag to your xml content and make sure your textfield has multiline set to true.

Summary:

• use defaultTextFormat for default text style.
• transform the defaultTextFormat from a StyleSheet style.
• properties set order: defaultTextFormat, styleSheet, text.
• set condenseWhite = true when setting xml content to the texfield.

To play around download a demo FlexBuilder project here.

Recently I struggled over another problem with the TextField where the textWidth / width was not calculated right.

On the screenshot you can see textfields stacked from the left to the right corresponding to the width of the textfield. If you look closely to the borders you see that the leading and tailing spaces around the words are not equal at all. Especially at the word “Newsletter” the tailing space too small. The texfield was setup like this;

label.autoSize = TextFieldAutoSize.LEFT;
label.wordWrap = false;
label.multiline = false;
label.antiAliasType = AntiAliasType.ADVANCED;
label.gridFitType = GridFitType.PIXEL;
label.embedFonts = true;
label.border = true;
var test:TextFormat = new TextFormat();
test.kerning = true;
test.font = "Futura";
label.setTextFormat( test );

The solution:

It seems that this is a flash bug and you can get over this by changing the GridFitType.PIXEL to GridFitType.SUBPIXEL.
The resulting textfields look like this;