Verwenden des Text Layout Framework

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:

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 .

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

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 .

hTextFlow = TextConverter.importToFlow(headlineMarkup, TextConverter.TEXT_LAYOUT_FORMAT); 

headContainer = new Sprite(); 
headlineController = new ContainerController(headContainer);

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.

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.

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.

<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>

<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>

<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.

<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>

<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 >" ).

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.

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

<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.

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";

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.

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:

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.

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.

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.