Text Layout Framework für Flash, Flex und AIR

Das neue Text Layout Framework für den Adobe® Flash® Player 10 and Adobe AIR® 1.5 ist als Beta Version bei Adobe Labs verfügbar. Das Framework setzt auf die neue Text-Engine des Flash Player 10 auf und kann ab Flash CS4 und dem Flex SDK 3.2 benutzt werden. In der nächsten Version von Flex (Codename „Gumbo“) ist das Framework bereits integriert.

Features

Die wichtigesten Features sind:

  • Verschiedene Textrichtungen: links-rechts, rechts-links sowie vertikal
  • über 30 verschiedene Schriftsysteme unter anderen Arabisch, Hebräisch, Chinesisch, Japansich, Koreanisch, Thailändisch, Laotisch und die wichtigesten Systeme von Indien.
  • Verschiedene text styling Optionen wie Ligaturen, Kerning, Leading, Hoch- und Tiefgestellter Text ect.
  • Mehrspaltigkeit
  • Verknüpfte Text Container
  • Tabulatoren
  • Inline Bilder die sich wie Buchstaben im Textfluss verhalten.

Architektur

Der interne Aufbau des Text Layout Frameworks lehnt sich an das Model-View-Controller (MVC) Entwurfsmuster an.

Im Model wird ein abstrakter TextFlow definiert der den Text selbst enthält. Der Text über eine an XHTML angelehnte Struktur hierarchisch gegliedert. Als Basis dient immer eine Instanz der TextFlow Klasse, diese kann direkt einen Absatz (p) enthalten oder einen Container (div). Das DivElement kann wiederum ein DivElement oder einen Absatz enthalten. Der Absatz kann eine SpanElement (Span), eine Grafik (Graphic), ein Link (Link) oder ein TCYElement enthalten. Ein TCYElement repräsentiert kurze Textabschnitte die sowohl horizontal als auch vertikal ausgerichtete Texte enthalten können. Das TCYElement kann ein oder mehrere Span Elemente enthalten.
Außerdem gehört eine Konvertierungsklasse zum Model die Text importieren und wieder exportieren kann.

Im View wird der Text mit Hilfe der neuen Text-Engine des Flash Player 10 gerendert und angezeigt. Für das rendern gibt es zwei Ansätze, einen einfacheren für statischen Text und einen aufwendigeren für dynamischen Text der auch bearbeitet werden kann (siehe Beispiel).

Der Controller des Text Layout Frameworks enthält Klassen um Interaktionen des Benutzers mit dem Text und dessen Formatierung zu realisieren.

Beispiel für das Einbinden von des Text Layout Frameworks in Flex:

<mx:Script>
<![CDATA[
import flashx.textLayout.edit.UndoManager;
import flashx.textLayout.edit.EditManager;
import flashx.textLayout.container.DisplayObjectContainerController;
import flashx.textLayout.container.IContainerController;
import flashx.textLayout.conversion.TextFilter;
import flashx.textLayout.elements.TextFlow;

// container to hold the text
private var _container:Sprite = null;

private function init() : void {

// create a sprite to hold the TextLines
_container = new Sprite();
textContainer.rawChildren.addChild(_container);

// The text to display in the textContainer
var markup:String = ‚<TextFlow xmlns=“http://ns.adobe.com/textLayout/2008″><p><span>Hello,</span> <span     fontWeight=“bold“>World</span></p></TextFlow>‘;

// import the text into a new textFlow
var myFlow:TextFlow = TextFilter.importToFlow(markup, TextFilter.TEXT_LAYOUT_FORMAT);
// create a controller instace
var contr:IContainerController = new DisplayObjectContainerController(_container, textContainer.width,     textContainer.height);
// associate the controller with the flowComposer property of the text flow
myFlow.flowComposer.addController(contr);

// create a new instace of the EditManager and assign it with the interactionManager of the flow
myFlow.interactionManager = new EditManager(new UndoManager());

// update the display list
myFlow.flowComposer.updateAllContainers();
}

]]>
</mx:Script>

<mx:Canvas id=“textContainer“ width=“100″ height=“50″ backgroundColor=“0xFFFFFF“ top=“20″ left=“20″/>

Das war ein kurzer Einblick in das neue Text Layout Framework. Weitere Informationen gibt’s bei Adobe unter http://labs.adobe.com/technologies/textlayout/#fma

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.