Verwenden des Text Layout Framework

Flash Player 10 und höher, Adobe AIR 1.5 und höher

Übersicht über das Text Layout Framework

Das Text Layout Framework (TLF) ist eine erweiterbare ActionScript-Bibliothek. Das TLF basiert auf der Textengine in Adobe® Flash® Player 10 und Adobe® AIR® 1.5. Das TLF bietet erweiterte typografische Funktionen sowie Textlayout-Funktionen für innovative Typografie im Web. Das Framework kann mit Adobe® Flex® oder Adobe® Flash® Professional verwendet werden. Entwickler können vorhandene Komponenten verwenden oder erweitern oder mit dem Framework eigene Textkomponenten erstellen.

Das TLF umfasst die folgenden Funktionsmerkmale:
  • Bidirektionaler Text, vertikaler Text und mehr als 30 Schriften, darunter Arabisch, Hebräisch, Chinesisch, Japanisch, Koreanisch, Thai, Laotisch und Vietnamesisch.

  • Auswählen, Bearbeiten und Anordnen von Text über mehrere Spalten und verknüpfte Container.

  • Vertikaler Text, Tate-Chu-Yoko (horizontaler Textblock innerhalb von vertikalen Textzeilen) und Ausrichtung für ostasiatische Typografie.

  • Zahlreiche typografische Steuerelemente, beispielsweise für Kerning, Ligaturen, typografische Buchstabenart, Zifferndarstellung und Ziffernbreite sowie weiche Bindestriche.

  • Ausschneiden, Kopieren, Einfügen, Rückgängigmachen und standardmäßige Tastatur- und Mausgesten zur Bearbeitung.

  • Vielseitige Entwickler-APIs zum Bearbeiten von Textinhalt, Layout und Markup sowie zum Erstellen von benutzerdefinierten Textkomponenten.

  • Robuste Unterstützung für Listen, wie benutzerdefinierte Markierungen und Nummerierungsformate.

  • Inlinebilder und Positionierungsregeln.

Das TLF ist eine ActionScript 3.0-Bibliothek, die auf der neuen Flash Text Engine (FTE) basiert, die in Flash Player 10 eingeführt wurde. FTE kann über das flash.text.engine -Paket aufgerufen werden, das in der Application Programming Interface (API) von Flash Player 10 enthalten ist.

Die Flash Player-API bietet der Text-Engine jedoch nur Zugriff auf niedriger Ebene, d. h. dass für einige Aufgaben relativ viel Code notwendig ist. Das TLF fasst den Code auf niedriger Ebene in einfacheren APIs zusammen. Außerdem bietet das TLF eine konzeptionelle Architektur, die die von der FTE definierten grundlegenden Bausteine in einem System organisiert, das sich einfacher verwenden lässt.

Im Gegensatz zur FTE ist das TLF nicht in Flash Player integriert. Es handelt sich vielmehr um eine unabhängige Bibliothek, die vollständig in ActionScript 3.0 geschrieben ist. Da das Framework erweiterbar ist, lässt es sich an bestimmte Umgebungen anpassen. Sowohl Flash Professional als auch das Flex SDK enthalten Komponenten, die auf dem TLF-Framework basieren.

Unterstützung von komplexen Schriften

Das TLF unterstützt komplexe Schriften. Beispielsweise kann Text in Sprachen, die von rechts nach links geschrieben werden, angezeigt und bearbeitet werden. Das TLF unterstützt auch das Anzeigen und Bearbeiten von Schriften in gemischter Schreibweise (links nach rechts und rechts nach links), wie Arabisch und Hebräisch. Das Framework unterstützt nicht nur das vertikale Textlayout für Chinesisch, Japanisch und Koreanisch, sondern auch TCY-Elemente (Tate-Chuu-Yoko). TCY-Elemente sind Blöcke von horizontalem Text, die in eine vertikale Textzeile eingebettet sind. Nachstehende Schriften werden unterstützt:

  • Latein (Englisch, Spanisch, Französisch, Vietnamesisch usw.)

  • Griechisch, Kyrillisch, Armenisch, Georgisch und Äthiopisch

  • Arabisch und Hebräisch

  • Han-Ideogramme und Kana (Chinesisch, Japanisch und Koreanisch) sowie Hangul Johab (Koreanisch)

  • Thai, Laotisch und Khmer

  • Devanagari, Bengalisch, Gurmukhi, Malayalam, Telugu, Tamil, Gujarati, Oriya, Kannada und Tibetisch

  • Tifinagh, Yi, Cherokee, kanadische Silbenzeichen, Deseret, Schawisch, Vai, Tagalog, Hanunoo, Buhid und Tagbanwa

Verwenden des Text Layout Framework in Flash Professional und Flex

Sie können die TLF-Klassen direkt zur Erstellung von benutzerdefinierten Komponenten in Flash verwenden. Außerdem bietet Flash Professional CS5 die neue fl.text.TLFTextField-Klasse, die die TLF-Funktionalität einschließt. Mit der TLFTextField-Klasse können Sie in ActionScript Textfelder erstellen, die die erweiterten TLF-Funktionen für die Textanzeige nutzen. Erstellen Sie ein TLFTextField-Objekt auf die gleiche Weise wie Sie ein Textfeld mit der TextField-Klasse erstellen. Verwenden Sie dann die textFlow -Eigenschaft, um erweiterte Formatierung aus den TLF-Klassen zuzuweisen.

In Flash Professional können Sie die TLFTextField-Instanz auch mithilfe des Textwerkzeugs auf der Bühne erstellen. Dann können Sie ActionScript verwenden, um Formatierung und Layout des Inhalts im Textfeld mithilfe der TLF-Klassen zu steuern. Weitere Informationen finden Sie im Abschnitt zu TLFTextField im ActionScript 3.0-Referenzhandbuch für die Adobe Flash-Plattform.

Wenn Sie in Flex arbeiten, verwenden Sie die TLF-Klassen. Weitere Informationen finden Sie unter Verwenden des Text Layout Framework .

Verwenden des Text Layout Framework

Wenn Sie in Flex arbeiten oder benutzerdefinierte Textkomponenten erstellen, verwenden Sie die TLF-Klassen. Das TLF ist eine ActionScript 3.0-Bibliothek, die vollständig in der textLayout.swc-Bibliothek enthalten ist. Die TLF-Bibliothek enthält etwa 100 ActionScript 3.0-Klassen und Schnittstellen, die in 10 Pakete unterteilt sind. Diese Pakete sind Unterpakete des flashx.textLayout-Pakets.

Die TLF-Klassen

Die TLF-Klassen lassen sich in drei Kategorien einteilen:
  • Klassen für die Datenstrukturierung und Formatierung

  • Klassen für das Rendern

  • Klassen für die Benutzerinteraktion

Klassen für die Datenstrukturierung und Formatierung

Die folgenden Pakete enthalten die TLF-Klassen für die Datenstrukturierung und Formatierung:

Die Hauptdatenstruktur des TLF ist die Textflusshierarchie, die im elements-Paket definiert ist. Innerhalb der Struktur können Sie Textzeilen mithilfe des format-Pakets Stile und Attribute zuweisen. Mit dem conversion-Paket können Sie steuern, wie Text in die Datenstruktur importiert und aus der Datenstruktur exportiert wird.

Klassen für das Rendern

Die folgenden Pakete enthalten die TLF-Klassen für das Rendern: Mit den Klassen in diesen Paketen kann Text zur Anzeige in Flash Player gerendert werden. Das factory-Paket bietet eine einfache Art, statischen Text anzuzeigen. Das container-Paket enthält Klassen und Schnittstellen, die Anzeigecontainer für dynamischen Text definieren. Das compose-Paket definiert Techniken für die Positionierung und Anzeige von dynamischen Texten in Containern.

Klassen für die Benutzerinteraktion

Die folgenden Pakete enthalten die TLF-Klassen für die Benutzerinteraktion: Die edit- und operations-Pakete definieren Klassen für die Bearbeitung von Text, der in den Datenstrukturen gespeichert ist. Das events-Paket enthält Klassen für die Ereignisverarbeitung.

Allgemeine Schritte zum Erstellen von Text mit dem Text Layout Framework

In den folgenden Schritten wird das allgemeine Verfahren zum Erstellen von Text mit dem Text Layout Framework beschrieben:

  1. Importieren Sie formatierten Text in die TLF-Datenstrukturen. Weitere Informationen finden Sie unter Strukturieren von Text mit dem TLF und Formatieren von Text mit dem TLF .

  2. Erstellen Sie mindestens einen verknüpften Anzeigeobjektcontainer für den Text. Weitere Informationen finden Sie unter Verwalten von Textcontainern mit dem TLF .

  3. Ordnen Sie den Text in den Datenstrukturen den Containern zu und legen Sie Optionen für die Bearbeitung und für den Bildlauf fest. Weitere Informationen finden Sie unter Aktivieren von Textauswahl, Bearbeitung und Rückgängigmachen mit dem TLF .

  4. Erstellen Sie eine Ereignisprozedur, mit der der Text nach einer Größenänderung (oder nach anderen Ereignissen) neu angeordnet wird. Weitere Informationen finden Sie unter Ereignisverarbeitung mit dem TLF .

Text Layout Framework-Beispiel: Zeitungslayout

Das folgende Beispiel veranschaulicht, wie mit dem TLF das Layout einer einfachen Zeitungsseite gestaltet werden kann. Die Seite enthält eine große Schlagzeile, eine Überschrift und einen aus mehreren Spalten bestehenden Text:

package 
{ 
    import flash.display.Sprite; 
    import flash.display.StageAlign; 
    import flash.display.StageScaleMode; 
    import flash.events.Event; 
    import flash.geom.Rectangle; 
     
    import flashx.textLayout.compose.StandardFlowComposer; 
    import flashx.textLayout.container.ContainerController; 
    import flashx.textLayout.container.ScrollPolicy; 
    import flashx.textLayout.conversion.TextConverter; 
    import flashx.textLayout.elements.TextFlow; 
    import flashx.textLayout.formats.TextLayoutFormat; 
     
    public class TLFNewsLayout extends Sprite 
    { 
        private var hTextFlow:TextFlow; 
        private var headContainer:Sprite; 
        private var headlineController:ContainerController; 
        private var hContainerFormat:TextLayoutFormat; 
         
        private var bTextFlow:TextFlow; 
        private var bodyTextContainer:Sprite; 
        private var bodyController:ContainerController; 
        private var bodyTextContainerFormat:TextLayoutFormat; 
         
        private const headlineMarkup:String = "<flow:TextFlow xmlns:flow='http://ns.adobe.com/textLayout/2008'><flow:p textAlign='center'><flow:span fontFamily='Helvetica' fontSize='18'>TLF News Layout Example</flow:span><flow:br/><flow:span fontFamily='Helvetica' fontSize='14'>This example formats text like a newspaper page with a headline, a subtitle, and multiple columns</flow:span></flow:p></flow:TextFlow>"; 
         
        private const bodyMarkup:String = "<flow:TextFlow xmlns:flow='http://ns.adobe.com/textLayout/2008' fontSize='12' textIndent='10' marginBottom='15' paddingTop='4' paddingLeft='4'><flow:p marginBottom='inherit'><flow:span>There are many </flow:span><flow:span fontStyle='italic'>such</flow:span><flow:span> lime-kilns in that tract of country, for the purpose of burning the white marble which composes a large part of the substance of the hills. Some of them, built years ago, and long deserted, with weeds growing in the vacant round of the interior, which is open to the sky, and grass and wild-flowers rooting themselves into the chinks of the stones, look already like relics of antiquity, and may yet be overspread with the lichens of centuries to come. Others, where the lime-burner still feeds his daily and nightlong fire, afford points of interest to the wanderer among the hills, who seats himself on a log of wood or a fragment of marble, to hold a chat with the solitary man. It is a lonesome, and, when the character is inclined to thought, may be an intensely thoughtful occupation; as it proved in the case of Ethan Brand, who had mused to such strange purpose, in days gone by, while the fire in this very kiln was burning.</flow:span></flow:p><flow:p marginBottom='inherit'><flow:span>The man who now watched the fire was of a different order, and troubled himself with no thoughts save the very few that were requisite to his business. At frequent intervals, he flung back the clashing weight of the iron door, and, turning his face from the insufferable glare, thrust in huge logs of oak, or stirred the immense brands with a long pole. Within the furnace were seen the curling and riotous flames, and the burning marble, almost molten with the intensity of heat; while without, the reflection of the fire quivered on the dark intricacy of the surrounding forest, and showed in the foreground a bright and ruddy little picture of the hut, the spring beside its door, the athletic and coal-begrimed figure of the lime-burner, and the half-frightened child, shrinking into the protection of his father's shadow. And when again the iron door was closed, then reappeared the tender light of the half-full moon, which vainly strove to trace out the indistinct shapes of the neighboring mountains; and, in the upper sky, there was a flitting congregation of clouds, still faintly tinged with the rosy sunset, though thus far down into the valley the sunshine had vanished long and long ago.</flow:span></flow:p></flow:TextFlow>"; 
         
        public function TLFNewsLayout() 
        {      
            //wait for stage to exist 
            addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);     
        } 
         
        private function onAddedToStage(evtObj:Event):void 
        { 
            removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage); 
            stage.scaleMode = StageScaleMode.NO_SCALE; 
            stage.align = StageAlign.TOP_LEFT; 
             
            // Headline text flow and flow composer 
            hTextFlow = TextConverter.importToFlow(headlineMarkup, TextConverter.TEXT_LAYOUT_FORMAT); 
             
            // initialize the headline container and controller objects 
            headContainer = new Sprite(); 
            headlineController = new ContainerController(headContainer); 
            headlineController.verticalScrollPolicy = ScrollPolicy.OFF; 
            hContainerFormat = new TextLayoutFormat(); 
            hContainerFormat.paddingTop = 4; 
            hContainerFormat.paddingRight = 4; 
            hContainerFormat.paddingBottom = 4; 
            hContainerFormat.paddingLeft = 4; 
             
            headlineController.format = hContainerFormat; 
            hTextFlow.flowComposer.addController(headlineController); 
            addChild(headContainer); 
            stage.addEventListener(flash.events.Event.RESIZE, resizeHandler); 
             
            // Body text TextFlow and flow composer 
            bTextFlow = TextConverter.importToFlow(bodyMarkup, TextConverter.TEXT_LAYOUT_FORMAT); 
             
            // The body text container is below, and has three columns 
            bodyTextContainer = new Sprite(); 
            bodyController = new ContainerController(bodyTextContainer); 
            bodyTextContainerFormat = new TextLayoutFormat(); 
            bodyTextContainerFormat.columnCount = 3; 
            bodyTextContainerFormat.columnGap = 30; 
             
            bodyController.format = bodyTextContainerFormat; 
            bTextFlow.flowComposer.addController(bodyController); 
            addChild(bodyTextContainer); 
            resizeHandler(null); 
        } 
         
        private function resizeHandler(event:Event):void 
        { 
            const verticalGap:Number = 25; 
            const stagePadding:Number = 16; 
            var stageWidth:Number = stage.stageWidth - stagePadding; 
            var stageHeight:Number = stage.stageHeight - stagePadding; 
            var headlineWidth:Number = stageWidth; 
            var headlineContainerHeight:Number = stageHeight; 
             
            // Initial compose to get height of headline after resize 
            headlineController.setCompositionSize(headlineWidth, 
headlineContainerHeight); 
            hTextFlow.flowComposer.compose(); 
            var rect:Rectangle = headlineController.getContentBounds(); 
            headlineContainerHeight = rect.height; 
             
            // Resize and place headline text container 
            // Call setCompositionSize() again with updated headline height 
            headlineController.setCompositionSize(headlineWidth, headlineContainerHeight ); 
            headlineController.container.x = stagePadding / 2; 
            headlineController.container.y = stagePadding / 2; 
            hTextFlow.flowComposer.updateAllControllers(); 
             
            // Resize and place body text container 
            var bodyContainerHeight:Number = (stageHeight - verticalGap - headlineContainerHeight); 
            bodyController.format = bodyTextContainerFormat; 
            bodyController.setCompositionSize(stageWidth, bodyContainerHeight ); 
            bodyController.container.x = (stagePadding/2); 
            bodyController.container.y = (stagePadding/2) + headlineContainerHeight + verticalGap; 
            bTextFlow.flowComposer.updateAllControllers(); 
        } 
    } 
} 

Die TLFNewsLayout-Klasse verwendet zwei Textcontainer. Ein Container zeigt die Schlagzeile und die Überschrift, der andere Container zeigt den aus drei Spalten bestehenden Text. Der Einfachheit halber ist der Text im Beispiel als TLF-Markuptext fest programmiert. Die headlineMarkup -Variable enthält sowohl die Schlagzeile als auch die Überschrift und die bodyMarkup -Variable enthält den Haupttext. Weitere Informationen zu TLF-Markup finden Sie unter Strukturieren von Text mit dem TLF .

Nach der Initialisierung importiert die onAddedToStage() -Funktion den Text der Schlagzeile in ein TextFlow-Objekt, das die Hauptdatenstruktur des TLF bildet:
hTextFlow = TextConverter.importToFlow(headlineMarkup, TextConverter.TEXT_LAYOUT_FORMAT); 
Dann wird ein Sprite-Objekt für den Container erstellt und ein Controller wird erstellt und dem Container zugeordnet.
headContainer = new Sprite(); 
headlineController = new ContainerController(headContainer);
Der Controller wird initialisiert, um Optionen für Formatierung, Bildlauf und andere Aspekte festzulegen. Der Controller enthält Geometrie, die die Grenzen des Containers für den Textfluss definiert. Ein TextLayoutFormat-Objekt enthält die folgenden Formatierungsoptionen:
hContainerFormat = new TextLayoutFormat();

Der Controller wird dem Flow-Composer zugewiesen und die Funktion fügt den Container der Anzeigeliste hinzu. Der eigentliche Satz und die Anzeige der Container werden an die resizeHandler() -Methode übertragen. Dieselbe Schrittfolge wird ausgeführt, um das TextFlow-Objekt für den Haupttext zu initialisieren.

Die resizeHandler() -Methode misst den verfügbaren Platz für die Wiedergabe der Container und stellt die Größe der Container entsprechend ein. Ein anfänglicher Aufruf der compose() -Methode ermöglicht die Berechnung der richtigen Höhe für den Schlagzeilencontainer. Die resizeHandler() -Methode kann den Schlagzeilencontainer dann mit der updateAllControllers() -Methode platzieren und anzeigen. Zum Schluss verwendet die resizeHandler() -Methode die Größe des Schlagzeilencontainers, um die Position des Textkörpercontainers zu bestimmen.

Strukturieren von Text mit dem TLF

Das TLF verwendet einen Hierarchiebaum zur Darstellung des Textes. Jeder Knoten des Baums ist jeweils eine Instanz einer Klasse, die im Paket der Elemente definiert ist. Zum Beispiel: Der Stammknoten des Baums ist immer eine Instanz der TextFlow-Klasse. Die TextFlow-Klasse stellt einen gesamten Artikel dar. Ein Artikel ist eine Sammlung aus Text und anderen Elementen, die als eine Einheit oder ein Textfluss betrachtet wird. Für die Anzeige eines Artikels sind möglicherweise mehrere Spalten oder Textcontainer erforderlich.

Mit Ausnahme des Stammknotens basieren die restlichen Elemente frei auf XHTML-Elementen. Im folgenden Diagramm wird die Framework-Hierarchie dargestellt:

TextFlow-Hierarchie

TLF-Markup

Das Verständnis der TLF-Struktur ist auch beim Umgang mit TLF-Markup hilfreich. TLF-Markup ist eine XML-Darstellung von Text, die Teil des TLF ist. Zwar unterstützt das Framework auch andere XML-Formate, doch das TLF-Markup ist einzigartig, da es speziell auf der Struktur der TextFlow-Hierarchie basiert. Wenn Sie XML aus einem TextFlow mit diesem Markup-Format exportieren, erfolgt der XML-Export mit der intakten Hierarchie.

TLF-Markup stellt den Text in einer TextFlow-Hierarchie mit höchster Genauigkeit und Detailtreue dar. Die Markupsprache bietet Tags für alle Grundelemente der TextFlow-Hierarchie sowie Attribute für alle Formatierungseigenschaften, die in der TextLayoutFormat-Klasse zur Verfügung stehen.

In der folgenden Tabelle sind die Tags aufgeführt, die in TLF-Markup verwendet werden können.

Element

Beschreibung

Untergeordnete Elemente

Klasse

textflow

Das Markup-Stammelement.

div, p

TextFlow

div

Ein Abschnitt in einem TextFlow. Kann eine Gruppe von Absätzen enthalten.

div, list, p

DivElement

p

Ein Absatz.

a, tcy, span, img, tab, br, g

ParagraphElement

a

Ein Hyperlink.

tcy, span, img, tab, br, g

LinkElement

tcy

Eine horizontale Textfolge (wird in einem vertikalen TextFlow-Objekt verwendet).

a, span, img, tab, br, g

TCYElement

span

Eine Textfolge innerhalb eines Absatzes.

SpanElement

img

Ein Bild in einem Absatz.

InlineGraphicElement

tab

Ein Tabulatorzeichen.

TabElement

br

Ein Zeilenumbruchzeichen. Wird für das Ende einer Zeile in einem Absatz verwendet; der Text wird in der nächsten Zeile fortgeführt, bleibt aber in demselben Absatz.

BreakElement

linkNormalFormat

Definiert die Formatierungsattribute für Links im normalen Zustand.

TextLayoutFormat

TextLayoutFormat

linkActiveFormat

Definiert die Formatierungsattribute, die für aktive Links verwendet werden, wenn mit der Maus auf einen Link geklickt wird.

TextLayoutFormat

TextLayoutFormat

linkHoverFormat

Definiert die Formatierungsattribute, die für Links verwendet werden, über die der Mauszeiger bewegt wird („Hover“-Zustand).

TextLayoutFormat

TextLayoutFormat

li

Ein Listeneintragselement. Muss sich in einem Listenelement befinden

div, li, list, p

ListItemElement

list

Eine Liste. Listen können verschachtelt oder nebeneinander platziert werden. Verschiedene Beschriftungen oder Nummerierungsschemas können auf die Listenelemente angewendet werden.

div, li, list, p

ListElement

g

Ein Gruppenelement. Zum Gruppieren von Elementen in einem Absatz. Hiermit können Sie Elemente unter der Absatzebene verschachteln.

a, tcy, span, img, tab, br, g

SubParagraphGroupElement

Verwenden von Listen mit Nummern und Aufzählungszeichen

Mit den ListElement - und ListItemElement -Klassen können Sie Ihren Textsteuerelementen Listen mit Aufzählungszeichen hinzufügen. Die Listen mit Aufzählungszeichen können verschachtelt und angepasst werden. Beispielsweise können Sie verschiedene Aufzählungszeichen (oder Markierungen) und automatische Nummerierungen sowie eine Nummerierung mit Gliederung verwenden.

Zum Erstellen von Listen im Textfluss verwenden Sie das <list> -Tag. Dann verwenden Sie für jedes Listenelement in der Liste <li> -Tags innerhalb des <list> -Tags. Mithilfe der ListMarkerFormat-Klasse können Sie das Erscheinungsbild der Aufzählungszeichen anpassen.

Im folgenden Beispiel werden einfache Listen erstellt:
<flow:list paddingRight="24" paddingLeft="24"> 
    <flow:li>Item 1</flow:li> 
    <flow:li>Item 2</flow:li> 
    <flow:li>Item 3</flow:li> 
</flow:list>
Sie können Listen in anderen Listen verschachteln, wie im folgenden Beispiel gezeigt:
<flow:list paddingRight="24" paddingLeft="24"> 
    <flow:li>Item 1</flow:li> 
    <flow:list paddingRight="24" paddingLeft="24"> 
        <flow:li>Item 1a</flow:li> 
        <flow:li>Item 1b</flow:li> 
        <flow:li>Item 1c</flow:li> 
    </flow:list> 
    <flow:li>Item 2</flow:li> 
    <flow:li>Item 3</flow:li> 
</flow:list>
Zum Anpassen der Markierung in der Liste verwenden Sie die listStyleType -Eigenschaft des ListElement-Objekts. Diese Eigenschaft kann einen der Werte haben, die von der ListStyleType-Klasse definiert werden (wie check , circle , decimal und box ). Das folgende Beispiel erstellt Listen mit verschiedenen Markierungstypen und einem benutzerdefinierten Wert zum Erhöhen des Zählers:
<flow:list paddingRight="24" paddingLeft="24" listStyleType="upperAlpha">     <flow:li>upperAlpha item</flow:li>     <flow:li>another</flow:li> </flow:list> <flow:list paddingRight="24" paddingLeft="24" listStyleType="lowerAlpha">     <flow:li>lowerAlpha item</flow:li>     <flow:li>another</flow:li> </flow:list> <flow:list paddingRight="24" paddingLeft="24" listStyleType="upperRoman">     <flow:li>upperRoman item</flow:li>     <flow:li>another</flow:li> </flow:list> <flow:list paddingRight="24" paddingLeft="24" listStyleType="lowerRoman">     <flow:listMarkerFormat>         <!-- Increments the list by 2s rather than 1s. -->         <flow:ListMarkerFormat counterIncrement="ordered 2"/>     </flow:listMarkerFormat>     <flow:li>lowerRoman item</flow:li>     <flow:li>another</flow:li> </flow:list>

Sie definieren den Zähler mithilfe der ListMarkerFormat -Klasse. Sie können nicht nur den Wert zum Erhöhen des Zählers definieren, sondern den Zähler auch anpassen, indem Sie ihn mit der counterReset -Eigenschaft zurücksetzen.

Das Erscheinungsbild der Markierungen in Listen kann über die beforeContent - und afterContent -Eigenschaften von ListMarkerFormat noch weiter angepasst werden. Diese Eigenschaften gelten für Inhalt, der vor und nach dem Inhalt der Markierung steht.

Im folgenden Beispiel wird der String „XX“ vor der Markierung hinzugefügt und der String „YY“ nach der Markierung:
<flow:list listStyleType="upperRoman" paddingLeft="36" paddingRight="24"> 
    <flow:listMarkerFormat> 
        <flow:ListMarkerFormat fontSize="16" 
            beforeContent="XX" 
            afterContent="YY" 
            counterIncrement="ordered -1"/> 
        </flow:listMarkerFormat> 
    <flow:li>Item 1</flow:li> 
    <flow:li>Item 2</flow:li> 
    <flow:li>Item 3</flow:li> 
</flow:list>
Mit der content -Eigenschaft selbst können weitere Anpassungen des Markierungsformats vorgenommen werden. Das folgende Beispiel zeigt eine geordnete Markierung mit römischen Zahlen in Großbuchstaben.
<flow:list listStyleType="disc"  paddingLeft="96" paddingRight="24"> 
    <flow:listMarkerFormat> 
        <flow:ListMarkerFormat fontSize="16" 
            beforeContent="Section " 
            content="counters(ordered,&quot;*&quot;,upperRoman)" 
            afterContent=": "/> 
    </flow:listMarkerFormat> 
    <flow:li>Item 1</li> 
    <flow:li>Item 2</li> 
    <flow:li>Item 3</li> 
</flow:list>

Wie das vorherige Beispiel zeigt, kann die content -Eigenschaft auch ein Suffix einfügen. Dies ist ein String, der nach der Markierung, aber vor afterContent steht. Um diesen String einzufügen, wenn XML-Inhalt für den Fluss angegeben wird, umschließen Sie den String in &quote; -HTML-Entitäten anstatt in Anführungszeichen ( "< String >" ).

Auffüllen in TLF

Jedes FlowElement unterstützt padding-Eigenschaften zum Auffüllen, mit denen Sie die Position des Inhaltsbereichs der einzelnen Elemente und den Platz zwischen den Inhaltsbereichen steuern können.

Die Gesamtbreite eines Elements setzt sich zusammen aus der Breite des Inhalts sowie den paddingLeft - und paddingRight -Eigenschaften. Die Gesamthöhe des Elements besteht aus der Höhe des Inhalts sowie den paddingTop - und paddingBottom -Eigenschaften.

Die Auffüllung ist der Platz zwischen dem Rahmen und dem Inhalt. Die Eigenschaften zum Auffüllen heißen paddingBottom , paddingTop , paddingLeft und paddingRight . Die Auffüllung kann auf das TextFlow-Objekt sowie die folgenden untergeordneten Elemente angewendet werden:
  • div

  • img

  • li

  • list

  • p

Eigenschaften zum Auffüllen können nicht auf span-Elemente angewendet werden.

Im folgenden Beispiel werden die Auffülleigenschaften für TextFlow festgelegt:
<flow:TextFlow version="2.0.0" xmlns:flow="http://ns.adobe.com/textLayout/2008" fontSize="14" textIndent="15" paddingTop="4" paddingLeft="4" fontFamily="Times New Roman">

Gültige Werte für die Auffülleigenschaften sind eine Zahl (in Pixeln), „auto“ und „inherit“. Der Standardwert „auto“ wird automatisch berechnet und bei allen Elementen mit Ausnahme von ListElement auf 0 eingestellt. Bei ListElement-Objekten entspricht „auto“ 0, mit Ausnahme der Startseite der Liste, wo der Wert der listAutoPadding -Eigenschaft verwendet wird. Der Standardwert von listAutoPadding ist 40, wodurch Listen mit einem Standardeinzug versehen werden.

Standardmäßig erben die Auffülleigenschaften keine Werte. Die Werte „auto“ und „inherit“ sind Konstanten, die von der FormatValue -Klasse definiert werden.

Auffülleigenschaften können negative Werte aufweisen.

Formatieren von Text mit dem TLF

Das flashx.textLayout.formats-Paket enthält Schnittstellen und Klassen, die es Ihnen ermöglichen, jedem FlowElement in der Textflusshierarchie Formate zuzuweisen. Es gibt zwei Möglichkeiten, Formatierung anzuwenden. Sie können ein bestimmtes Format einzeln zuweisen oder mit einem speziellen Formatierungsobjekt eine Gruppe von Formaten gleichzeitig zuweisen.

Die ITextLayoutFormat-Schnittstelle enthält alle Formate, die auf ein FlowElement angewendet werden können. Manche Formate gelten für einen gesamten Container oder Textabsatz, aber nicht logischerweise für einzelne Zeichen. Zum Beispiel gelten Formate wie Ausrichtung oder Tabulatoren für ganze Absätze, können jedoch nicht auf einzelne Zeichen angewendet werden.

Zuweisen von Formaten zu einem FlowElement mit Eigenschaften

Sie können Formate für ein FlowElement über Eigenschaftszuweisungen festlegen. Die FlowElement-Klasse implementiert die ITextLayoutFormat-Schnittstelle; deshalb muss jede Unterklasse der FlowElement-Klasse diese Schnittstelle ebenfalls implementieren.

Der folgende Code zeigt zum Beispiel, wie einzelne Formate einer ParagraphElement-Instanz zugewiesen werden:

var p:ParagraphElement = new ParagraphElement(); 
p.fontSize = 18; 
p.fontFamily = "Arial";

Zuweisen von Formaten zu einem FlowElement mit der TextLayoutFormat-Klasse

Sie können mit der TextLayoutFormat-Klasse Formate auf ein FlowElement anwenden. Sie verwenden diese Klasse zur Erstellung eines besonderen Formatierungsobjekts, das alle gewünschten Formatierungswerte enthält. Anschließend können Sie dieses Objekt der format -Eigenschaft eines beliebigen FlowElement-Objekts zuweisen. Sowohl TextLayoutFormat als auch FlowElement implementieren die ITextLayoutFormat-Schnittstelle. Auf diese Weise wird sichergestellt, dass beide Klassen dieselben Formateigenschaften enthalten.

Weitere Informationen finden Sie im Abschnitt zu TextLayoutFormat im ActionScript 3.0-Referenzhandbuch für die Adobe Flash-Plattform.

Formatvererbung

Formate werden über die Textflusshierarchie vererbt. Wenn Sie einer FlowElement-Instanz mit untergeordneten Elementen eine TextLayoutFormat-Instanz zuweisen, initiiert das Framework einen Prozess, der Kaskade genannt wird. Während einer Kaskade untersucht das Framework jeden Knoten in der Hierarchie, der Ihr FlowElement beerbt. Danach wird bestimmt, ob die vererbten Werte jeder Formatierungseigenschaft zugewiesen werden. Die folgenden Regeln werden während einer Kaskade angewandt:

  1. Eigenschaftswerte können nur von direkt übergeordneten Elementen geerbt werden. Diese Elemente nennt man auch Parents.

  2. Eigenschaftswerte können nur vererbt werden, wenn eine Eigenschaft noch keinen Wert besitzt (d. h. der Wert ist undefined ).

  3. Einige Attribute erben keine Werte, wenn sie undefiniert sind, es sei denn, der Attributwert ist auf „inherit“ oder auf die Konstante flashx.textLayout.formats.FormatValue.INHERIT gesetzt.

Wenn Sie zum Beispiel den fontSize -Wert auf der TextFlow-Ebene setzen, gilt dieser für alle Elemente im TextFlow. Mit anderen Worten, die Werte werden stufenweise die TextFlow-Hierarchie heruntervererbt. Sie können jedoch den Wert in einem bestimmten Element außer Kraft setzen, indem Sie dem Element direkt einen neuen Wert zuweisen. Wenn Sie dagegen den backgroundColor -Wert auf der TextFlow-Ebene festlegen, erben die untergeordneten Elemente von TextFlow diesen Wert nicht. Die backgroundColor -Eigenschaft erbt in einer Kaskade nicht von ihrem übergeordneten Element. Sie können dieses Verhalten außer Kraft setzen, indem Sie die backgroundColor -Eigenschaft jedes untergeordneten Elements auf flashx.textLayout.formats.FormatValue.INHERIT setzen.

Weitere Informationen finden Sie im Abschnitt zu TextLayoutFormat im ActionScript 3.0-Referenzhandbuch für die Adobe Flash-Plattform.

Importieren und Exportieren mit TLF

Mit der TextConverter-Klasse im flashx.textLayout.conversion.*-Paket können Sie Text in das TLF importieren und aus dem TLF exportieren. Verwenden Sie diese Klasse, wenn Sie den Text zur Laufzeit laden möchten, anstatt ihn in der SWF-Datei zu kompilieren. Sie können diese Klasse auch verwenden, um Text, der in einer TextFlow-Instanz gespeichert ist, in ein String- oder XML-Objekt zu exportieren.

Sowohl Importieren als auch Exportieren sind einfache Prozesse. Rufen Sie dazu entweder die export() - oder importToFlow() -Methode auf, wobei beide Teil der TextConverter-Klasse sind. Beides sind statische Methoden, d. h. dass Sie die Methoden in der TextConverter-Klasse aufrufen und nicht in einer Instanz der TextConverter-Klasse.

Die Klassen im flashx.textLayout.conversion-Paket bieten Ihnen bei der Entscheidung, wo Sie Text speichern möchten, ein hohes Maß an Flexibilität. Wenn Sie Ihren Text beispielsweise in einer Datenbank speichern, können Sie ihn zur Anzeige in das Framework importieren. Dann können Sie die Klassen im flashx.textLayout.edit-Paket verwenden, um den Text zu ändern und den geänderten Text wieder in die Datenbank zu exportieren.

Weitere Informationen finden Sie im Abschnitt zu flashx.textLayout.conversion im ActionScript 3.0-Referenzhandbuch für die Adobe Flash-Plattform.

Verwalten von Textcontainern mit dem TLF

Nachdem Text in TLF-Datenstrukturen gespeichert wurde, kann er in Flash Player angezeigt werden. Text, der in der Flusshierarchie gespeichert wurde, muss in ein Format umgewandelt werden, das Flash Player anzeigen kann. Das TLF bietet zwei Verfahren zum Erstellen von Anzeigeobjekten anhand eines Flusses. Das erste und einfachere Verfahren eignet sich für die Anzeige von statischem Text. Das zweite Verfahren ist etwas komplizierter, ermöglicht es Ihnen aber, dynamischen Text zu erstellen, der ausgewählt und bearbeitet werden kann. In beiden Fällen wird der Text letztendlich in Instanzen der TextLine-Klasse umgewandelt, die im flash.text.engine.*-Paket von Flash Player 10 enthalten ist.

Erstellen von statischem Text

Bei diesem einfachen Ansatz wird die TextFlowTextLineFactory-Klasse verwendet, die sich im flashx.textLayout.factory -Paket befindet. Der Vorteil dieser Variante ist, dass sie nicht nur einfach ist, sondern auch weniger Direktzugriffsspeicher als der FlowComposer-Ansatz benötigt. Dieser Ansatz eignet sich für statischen Text, den der Benutzer nicht bearbeiten, auswählen oder scrollen muss.

Weitere Informationen finden Sie im Abschnitt zu TextFlowTextLineFactory im ActionScript 3.0-Referenzhandbuch für die Adobe Flash-Plattform.

Erstellen von dynamischem Text und Containern

Verwenden Sie einen Flow-Composer, wenn Sie die Textanzeige genauer steuern möchten, als dies mit TextFlowTextLineFactory möglich ist. Ein Flow-Composer ermöglicht es den Benutzern beispielsweise, Text auszuwählen und zu bearbeiten. Weitere Informationen finden Sie unter Aktivieren von Textauswahl, Bearbeitung und Rückgängigmachen mit dem TLF .

Ein Flow-Composer ist eine Instanz der StandardFlowComposer-Klasse im flashx.textLayout.compose -Paket. Ein Flow-Composer ist für die Umwandlung von TextFlow- in TextLine-Instanzen zuständig. Außerdem steuert er die Platzierung dieser TextLine-Instanzen in einem oder mehreren Containern.

Grafik in Originalgröße anzeigen
Ein IFlowComposer hat keine oder mehrere ContainerController.

Jede TextFlow-Instanz hat ein entsprechendes Objekt, das die IFlowComposer-Schnittstelle implementiert. Auf dieses IFlowComposer-Objekt wird über die TextFlow.flowComposer -Eigenschaft zugegriffen. Sie können Methoden, die über die IFlowComposer-Schnittstelle definiert sind, über diese Eigenschaft aufrufen. Mithilfe dieser Methoden können Sie den Text einem oder mehreren Containern zuordnen und den Text für die Anzeige in einem Container vorbereiten.

Ein Container ist eine Instanz der Sprite-Klasse, die eine Unterklasse der DisplayObjectContainer-Klasse ist. Beide Klassen sind Bestandteil der Anzeigelisten-API von Flash Player. Ein Container ist eine komplexere Form des Begrenzungsrechtecks, das mit der TextLineFactory-Klasse verwendet wird. Wie das Begrenzungsrechteck definiert ein Container den Bereich, in dem TextLine-Instanzen dargestellt werden. Im Gegensatz zu einem Begrenzungsrechteck hat ein Container ein entsprechendes „Controller“-Objekt. Der Controller verwaltet Bildlauf, Satz, Verknüpfung, Formatierung und Ereignisverarbeitung für einen oder mehrere Container. Jeder Container verfügt über ein entsprechendes Controllerobjekt, das eine Instanz der ContainerController-Klasse im flashx.textLayout.container-Paket ist.

Zum Anzeigen von Text erstellen Sie ein Controllerobjekt, das den Container verwaltet, und verknüpfen Sie es mit dem Flow-Composer. Nachdem Sie den Container verknüpft haben, müssen Sie den Text zusammenstellen, damit Sie ihn anzeigen können. Dementsprechend haben Container zwei Zustände: Satz (Composition) und Anzeige. „Satz“ bezeichnet den Prozess, bei dem der Text aus der Textflusshierarchie in TextLine-Instanzen konvertiert und berechnet wird, ob letztere im Container Platz haben. „Anzeige“ ist der Prozess, bei dem die Anzeigeliste von Flash Player aktualisiert wird.

Weitere Informationen finden Sie unter IFlowComposer , StandardFlowComposer und ContainerController im ActionScript 3.0-Referenzhandbuch für die Adobe Flash-Plattform.

Aktivieren von Textauswahl, Bearbeitung und Rückgängigmachen mit dem TLF

Die Möglichkeit, Text auszuwählen oder zu bearbeiten, wird auf Textflussebene gesteuert. Jede Instanz der TextFlow-Klasse hat einen zugeordneten Interaktionsmanager. Sie können über die TextFlow.interactionManager -Eigenschaft eines TextFlow-Objekts auf dessen Interaktionsmanager zugreifen. Um die Textauswahl zu aktivieren, weisen Sie der interactionManager -Eigenschaft eine Instanz der SelectionManager-Klasse zu. Um sowohl die Textauswahl als auch die Bearbeitung zu aktivieren, weisen Sie eine Instanz der EditManager-Klasse anstelle einer Instanz der SelectionManager-Klasse zu. Um Rückgängig-Vorgänge zu aktivieren, erstellen Sie eine Instanz der UndoManager-Klasse und schließen Sie sie als Argument ein, wenn Sie den Konstruktor für EditManager aufrufen. Die UndoManager-Klasse speichert einen Verlauf der neuesten Bearbeitungsaktivitäten des Benutzers und stellt dem Benutzer für bestimmte Bearbeitungen die Funktionen „Rückgängig“ und „Wiederholen“ zur Verfügung. Diese drei Klassen sind Teil des edit-Pakets.

Weitere Informationen finden Sie unter SelectionManager , EditManager und UndoManager im ActionScript 3.0-Referenzhandbuch für die Adobe Flash-Plattform.

Ereignisverarbeitung mit dem TLF

TextFlow-Objekte lösen in zahlreichen Situationen Ereignisse aus, wie zum Beispiel:
  • Bei einer Änderung des Textes oder des Layouts

  • Vor Beginn und nach Abschluss eines Vorgangs

  • Bei einer Statusänderung eines FlowElement-Objekts

  • Bei Abschluss einer Zusammenstellung

Weitere Informationen finden Sie im Abschnitt zu flashx.textLayout.events im ActionScript 3.0-Referenzhandbuch für die Adobe Flash-Plattform.

Positionieren von Bildern innerhalb von Text

Zum Positionieren von InlineGraphicElement -Objekten innerhalb des Textes verwenden Sie die folgenden Eigenschaften:
  • float -Eigenschaft der InlineGraphicElement-Klasse

  • clearFloats -Eigenschaft von FlowElement

Die float -Eigenschaft steuert die Platzierung der Grafik und des umgebenden Textes. Die clearFloats -Eigenschaft steuert die Platzierung der Absatzelemente relativ zu float .

Um die Position eines Bildes innerhalb eines Textelements zu steuern, verwenden Sie die float -Eigenschaft. Im folgenden Beispiel wird ein Bild einem Absatz hinzugefügt und links ausgerichtet, damit der Text rechts umgebrochen wird.
<flow:p paragraphSpaceAfter="15" >Images in a flow are a good thing. For example, here is a float. It should show on the left: <flow:img float="left" height="50" width="19" source="../assets/bulldog.jpg"></flow:img> Don't you agree? Another sentence here. Another sentence here. Another sentence here. Another sentence here. Another sentence here. Another sentence here. Another sentence here. Another sentence here.</flow:p>

Gültige Werte für die float -Eigenschaft sind: left, right, start, end, none. Die Float-Klasse definiert diese Konstanten. Der Standardwert lautet „none“.

Die clearFloats -Eigenschaft eignet sich, wenn Sie die Startposition von folgenden Absätzen anpassen möchten, die andernfalls das Bild umgeben würden. Angenommen, Ihr Bild ist größer als der erste Absatz. Um sicherzustellen, dass der zweite Absatz nach dem Bild beginnt, setzen Sie die clearFloats -Eigenschaft.

Im folgenden Beispiel ist das Bild höher als der Text im ersten Absatz. Damit der zweite Absatz nach dem Bild im Textblock beginnt, wird in diesem Beispiel die clearFloats -Eigenschaft für den zweiten Absatz auf „end“ gesetzt.
<flow:p paragraphSpaceAfter="15" >Here is another float, it should show up on the right: <flow:img float="right" height="50" elementHeight="200" width="19" source="../assets/bulldog.jpg"></flow:img>We'll add another paragraph that should clear past it.</flow:p><flow:p clearFloats="end" >This should appear after the previous float on the right.</flow:p>

Gültige Werte für die clearFloats -Eigenschaft sind: left, right, end, start, none, both. Die ClearFloats -Klasse definiert diese Konstanten. Sie können die clearFloats -Eigenschaft auch auf „inherit“ setzen; dies ist eine Konstante, die von der FormatValue -Klasse definiert wird. Der Standardwert lautet „none“.