Text should be a particular concern. The absence of a physical keyboard introduces a new interface and user experience. Embedding and rendering fonts affects size and performance.
The Virtual Keyboard
On most devices, pressing on an input text field brings up the virtual keyboard. AIR for Android only uses the Android default alphabet keyboard.
Be aware of the space the keyboard occupies. The stage position is automatically adjusted to keep the text field visible. If the text field is toward the bottom, the application moves the stage up. To dismiss the virtual keyboard, the user usually needs to tap on the stage. Make sure you leave a noninteractive area for the user to tap on.
If you want to overwrite the default behavior, set the softKeyboardBehavior tag of the application descriptor to none.
[code]
<softKeyboardBehavior>none</softKeyboardBehavior>
[/code]
To control how the application moves, set a listener on the softKeyboardActivating event, which is dispatched when the keyboard opens. Use the softKeyboardRect property of the stage, which contains the dimensions of the area covered by the keyboard:
[code]
import flash.events.SoftKeyboardEvent;
import flash.text.TextField;
import flash.text.TextFieldType;
var textField:TextField = new TextField();
textField.type = TextFieldType.INPUT;
textField.width = 400;
textField.height = 200;
addChild(textField);
textField.addEventListener
(SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATE, onKeyboard);
textField.addEventListener
(SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE, onKeyboard);
function onKeyboard(event:SoftKeyboardEvent):void {
trace(stage.softKeybardRect.y);
trace(stage.softKeybardRect);
}
[/code]
For fullscreen mode, use the keyboard dimensions as an approximation. The values returned may not be perfectly exact.
Fonts
Try to use device fonts for input text fields, as they render faster than embedded fonts. The Font Embedding dialog box monitor in Flash Professional CS5 and later monitors font usage in your application. You can also generate a size report that lists all the assets, including fonts. Only include the font families you use.
The choice of Android font families is limited but well targeted to the Android style. Figure 18-1 shows the Droid Serif font, created by Steve Matteson of Ascender Corporation.
With AIR 2.6 and up, support is provided for scrolling text; text selection for cut, copy, and paste; and context menus.
Consider using an alternative to input text fields, such as already populated fields or plus and minus buttons for digits. The recommended font size is at least 14 pixels, so that text is readable on high-density devices.
The Flash Text Engine
An application with impeccable typography stands out. The Text Layout Framework (TLF) provides the tooling for text quality but is heavy and not yet ready for mobile.
The Flash Text Engine (FTE) is the low-level API below the TLF. It is light and renders exquisite script with great precision. It is not as immediately accessible as other tools, however. For simplicity, use it for read-only text and keep the classic TextField object for input text if needed.
Here is a “Hello world” example:
[code]
import flash.text.engine.*;
var fd:FontDescription = new FontDescription();
var ef:ElementFormat = new ElementFormat(fd);
var te:TextElement = new TextElement(“Hello world”, ef);
var tb:TextBlock = new TextBlock();
tb.content = te;
var tl:TextLine = tb.createTextLine(null, 200);
addChild(tl);
[/code]
FontDescription is for the font family. ElementFormat is for styling and layout. TextEle ment is for the content as text and inline graphic. TextBlock is the Factory to create one block of text. Finally, TextLine is the display object for a single line of text. Figure 18-2 depicts the classes needed to create text using the Flash Text Engine.
This is a lot of classes for such a simple example, but it introduces the benefit of using this engine. It gives you access to a vast range of typographic settings, bidirectional layout, and support for most scripts. Please refer to the article I wrote on FTE to learn more (see http://www.developria.com/2009/03/flash-text-engine.html).