Korzystanie z architektury Text Layout Framework

Architektura TLF oferuje obsługę złożonych skryptów. Oznacza to między innymi możliwość wyświetlania i edytowania skryptów dla języków z zapisem od prawej do lewej. Architektura TLF pozwala również wyświetlać i edytować skrypty zawierające na przemian tekst z zapisem od lewej do prawej i od prawej do lewej, na przykład dla języków arabskiego i hebrajskiego. Platforma obsługuje nie tylko pionowy układ tekstu w językach chińskim, japońskim i koreańskim, lecz również elementy TCY (tate-chu-yoko). Elementy TCY są to bloki tekstu poziomego osadzone w pionowych ciągach tekstu. Obsługiwane są następujące skrypty:

Klasy architektury TLF można stosować bezpośrednio do tworzenia własnych składników w programie Flash. Ponadto program Flash Professional CS5 udostępnia nową klasę fl.text.TLFTextField, która obudowuje funkcje architektury TLF. Klasa TLFTextField pozwala tworzyć w kodzie ActionScript pola tekstowe, w których są stosowane zaawansowane funkcje wyświetlania tekstu oferowane przez architekturę TLF. Obiekt TLFTextField tworzy się w taki sam sposób, jak pole tekstowe klasy TextField. Następnie można skorzystać z właściwości textFlow w celu przypisania zaawansowanych opcji formatowania udostępnianych przez klasy TLF.

Program Flash Professional pozwala utworzyć wystąpienie klasy TLFTextField na stole montażowym za pomocą narzędzia Tekst. Następnie można użyć kodu ActionScript do sterowania formatowaniem i układem pola tekstowego za pośrednictwem klas architektury TLF. Więcej informacji zawiera strona o klasie TLFTextField w dokumentacji języka ActionScript 3.0 dla platformy Adobe Flash.

W przypadku pracy w środowisku Flex należy używać klas architektury TLF. Więcej informacji zawiera sekcja Korzystanie z architektury Text Layout Framework .

W następującej procedurze opisano ogólny proces tworzenia tekstu w architekturze TLF:

W poniższym przykładzie zademonstrowano użycie architektury TLF do przygotowania układu prostej strony gazety. Strona zawiera duży nagłówek, nagłówek podrzędny i wielokolumnową sekcję treści.

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(); 
        } 
    } 
} 

W klasie TLFNewsLayout użyto dwóch kontenerów tekstu. Jeden kontener wyświetla nagłówek i nagłówek podrzędny, a drugi wyświetla tekst podstawowy w trzech kolumnach. Dla uproszczenia tekst został zakodowany na stałe jako tekst w formacie TLF Markup (formacie znaczników architektury TLF). Zmienna headlineMarkup zawiera zarówno nagłówek, jak i nagłówek podrzędny, zaś zmienna bodyMarkup zawiera tekst podstawowy. Więcej informacji o formacie TLF Markup zawiera sekcja Ustalanie struktury tekstu w architekturze Text Layout Framework .

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

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

hContainerFormat = new TextLayoutFormat();

Kontroler jest przypisywany do układacza typograficznego, po czym funkcja dodaje kontener do listy wyświetlania. Właściwe tworzenie kompozycji i wyświetlanie kontenerów odbywa się dopiero w metodzie resizeHandler() . Te same kroki są wykonywane w celu zainicjowania obiektu TextFlow.

Metoda resizeHandler() mierzy obszar dostępny do renderowania kontenerów i odpowiednio ustala ich wymiary. Pierwsze wywołanie metody compose() umożliwia obliczenie właściwej wysokości kontenera nagłówka. Metoda resizeHandler() może następnie umieścić i wyświetlić kontener nagłówka w ramach metody updateAllControllers() . Na koniec metoda resizeHandler() na podstawie wielkości kontenera nagłówka określa położenie kontenera tekstu treści.

Znajomość struktury architektury TLF jest pomocna podczas pracy ze znacznikami tej architektury — z formatem TLF Markup. Format TLF Markup to reprezentacja XML tekstu używanego w architekturze Text Layout Framework. Architektura obsługuje także inne formaty XML, jednak standard TFL Markup jest unikatowy, ponieważ jest oparty na strukturze hierarchii obiektu TextFlow. Hierarchia obiektu TextFlow wyeksportowana jako kod XML w tym formacie pozostanie nienaruszona.

Format TLF Markup zapewnia najwyższą dokładność wyświetlania tekstu umieszczonego w hierarchii obiektu TextFlow. Język znaczników udostępnia znaczniki dla każdego z podstawowych elementów hierarchii obiektu TextFlow, a także atrybuty związane ze wszystkimi właściwościami formatowania zawartymi w klasie TextLayoutFormat.

Poniższa tabela zawiera znaczniki, których można używać w kodzie TLF Markup.

Korzystając z klas ListElement i ListItemElement , można dodawać listy punktowane do tekstowych elementów sterujących. Listy punktowane można zagnieżdżać oraz dostosowywać w celu używania różnych punktorów (znaczników), automatycznego numerowania, a także numerowania w stylu konspektu.

Do tworzenia list w przepływie tekstu służy znacznik <list> . Następnie dla wszystkich pozycji listy należy wprowadzić znaczniki <li> w obrębie znacznika <list> . Wygląd punktorów można dostosować przy użyciu klasy ListMarkerFormat.

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

Klasa ListMarkerFormat pozwala zdefiniować licznik. Oprócz definiowania kroku licznika można dostosowywać licznik, zerując go za pomocą właściwości counterReset .

W celu dostosowania wyglądu znaczników na listach można użyć właściwości beforeContent i afterContent obiektu ListMarkerFormat. Właściwości te są stosowane do zawartości wyświetlanej przez zawartością znacznika i po niej.

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

Jak widać na poprzednim przykładzie, właściwość content pozwala też dodać przyrostek — ciąg wyświetlany po znaczniku, ale przed elementem afterContent . Aby wstawić ten ciąg podczas umieszczania zawartości XML w przepływie, należy umieścić ciąg w elementach HTML &quote; , a nie w cudzysłowach ( "< string >" ).

Każdy obiekt FlowElement obsługuje właściwości dopełnienia, za pomocą których można sterować położeniem każdego elementu w obszarze zawartości, a także odstępami między obszarami zawartości.

Całkowita szerokość elementu jest sumą szerokości jego zawartości powiększoną o wartości właściwości paddingLeft i paddingRight . Całkowita wysokość elementu jest sumą wysokości jego zawartości powiększoną o wartości właściwości paddingTop i paddingBottom .

Właściwości dopełnienia nie można stosować do elementów zakresu.

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

Poprawne wartości właściwości dopełnienia to liczby (w pikselach) oraz ciągi „auto” (automatycznie) i „inherit” (dziedziczenie). Wartością domyślną jest „auto” (automatycznie). Oznacza ona obliczanie automatyczne i ustawianie na 0 dla wszystkich elementów oprócz obiektów typu ListElement. W przypadku obiektów typu ListElement opcja „auto” (automatycznie) oznacza wartość 0 z wyjątkiem początku listy, gdzie jest stosowana wartość właściwości listAutoPadding . Wartość domyślna właściwości listAutoPadding to 40 — domyślne wcięcie list.

Właściwości dopełnienia domyślnie nie są dziedziczone. Wartości „auto” (automatycznie) i „inherit” (dziedziczenie) są stałymi zdefiniowanymi w klasie FormatValue .

Właściwości dopełnienia nie mogą mieć wartości ujemnych.

Do dowolnego obiektu FlowElement można przypisywać formaty poprzez przypisanie właściwości. Klasa FlowElement implementuje interfejs ITextLayoutFormat, a zatem każda podklasa klasy FlowElement także musi implementować ten interfejs.

Poniższy przykładowy kod ilustruje przypisywanie pojedynczych formatów do wystąpienia klasy ParagraphElement.

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

Możliwe jest stosowanie formatów względem obiektów FlowElement za pomocą klasy TextLayoutFormat. Ta klasa umożliwia utworzenie specjalnego obiektu formatowania, który zawiera wszystkie pożądane wartości formatowania. Następnie taki obiekt można przypisać do właściwości format dowolnego obiektu FlowElement. Klasy TextLayoutFormat i FlowElement implementują interfejs ITextLayoutFormat. Takie rozwiązanie gwarantuje, że obie klasy zawierają te same właściwości formatowania.

Więcej informacji zawiera strona o klasie TextLayoutFormat w dokumentacji języka ActionScript 3.0 dla platformy Adobe Flash.

W hierarchii przepływu tekstu formaty są dziedziczone. Przypisanie instancji klasy TextLayoutFormat do instancji klasy FlowElement, która ma elementy podrzędne, inicjuje proces nazywany kaskadowaniem . W trakcie kaskadowania następuje rekurencyjne przeglądanie wszystkich węzłów hierarchii dziedziczących z obiektu FlowElement. Następnie architektura określa, czy odziedziczone wartości powinny być przypisane do poszczególnych właściwości formatowania. W trakcie kaskadowania stosowane są następujące reguły:

Na przykład ustawienie wartości fontSize na poziomie obiektu TextFlow będzie obowiązywało we wszystkich elementach w obiekcie TextFlow. Innymi słowy, wartości są kaskadowo przenoszone w dół hierarchii przepływu tekstu. Można jednak przesłonić wartość w konkretnym elemencie, przypisując ją do właściwości tego elementu. Dla odmiany, jeśli ustawimy wartość backgroundColor na poziomie obiektu TextFlow, elementy podrzędne obiektu TextFlow jej nie odziedziczą. Właściwość backgroundColor nie jest dziedziczona z elementów nadrzędnych w trakcie kaskadowania. Można przesłonić to zachowanie, przypisując właściwości backgroundColor każdego elementu podrzędnego wartość flashx.textLayout.formats.FormatValue.INHERIT .

Więcej informacji zawiera strona o klasie TextLayoutFormat w dokumentacji języka ActionScript 3.0 dla platformy Adobe Flash.

W prostej metodzie używana jest klasa TextFlowTextLineFactory, która znajduje się w pakiecie flashx.textLayout.factory . Zaletą tej metody, obok jej prostoty, jest mniejsza zajętość pamięci niż w przypadku użycia klasy FlowComposer. Ta strategia jest zalecana w przypadku tekstu statycznego, który nie wymaga edycji, zaznaczania ani przewijania przez użytkownika.

Więcej informacji zawiera strona o klasie TextFlowTextLineFactory w dokumentacji języka ActionScript 3.0 dla platformy Adobe Flash.

Układacz typograficzny zapewnia większą kontrolę nad wyświetlaniem tekstu niż obiekt TextFlowTextLineFactory. Dzięki zastosowaniu układacza typograficznego użytkownicy mogą na przykład zaznaczać i edytować tekst. Więcej informacji zawiera sekcja Umożliwianie zaznaczania i edytowania tekstu oraz cofania operacji w architekturze Text Layout Framework .

Układacz typograficzny jest wystąpieniem klasy StandardFlowComposer zawartej w pakiecie flashx.textLayout.compose . Układacz typograficzny zarządza konwersją wystąpienia klasy TextFlow na wystąpienia klasy TextLine oraz rozmieszczeniem tych wystąpień klasy TextLine w kontenerze lub kontenerach.

Powiększ obraz

Z obiektem IFlowComposer skojarzonych jest zero lub więcej obiektów ContainerController

Z każdą instancją TextFlow skojarzony jest obiekt implementujący interfejs IFlowComposer. Ten obiekt IFlowComposer jest dostępny za pośrednictwem właściwości TextFlow.flowComposer . Korzystając z tej właściwości, można wywoływać metody zdefiniowane w interfejsie IFlowComposer. Metody te pozwalają skojarzyć tekst z kontenerem lub kontenerami oraz przygotować tekst do wyświetlania w kontenerze.

Kontener jest instancją klasy Sprite, która z kolei jest podklasą klasy DisplayObjectContainer. Obie te klasy wchodzą w skład interfejsu API listy wyświetlania programu Flash Player. Kontener jest bardziej zaawansowaną formą prostokąta ograniczającego używanego w klasie TextLineFactory. Podobnie jak obiekt rectangle, kontener otacza obszar, w którym widoczne są instancje klasy TextLine. W odróżnieniu od prostokątnej obwiedni kontener jest powiązany z obiektem kontrolera. Kontroler zarządza przewijaniem, tworzeniem kompozycji, tworzeniem połączeń, formatowaniem i obsługą zdarzeń. Steruje kontenerem lub zbiorem kontenerów. Każdy kontener ma odpowiadający mu obiekt kontrolera będący wystąpieniem klasy ContainerController z pakietu flashx.textLayout.container.

W celu wyświetlenia tekstu należy utworzyć obiekt kontrolera przeznaczony do zarządzania kontenerem i skojarzyć go z układaczem typograficznym. Po skojarzeniu kontenera należy zdefiniować układ tekstu (dokonać kompozycji), aby można go było wyświetlić. W związku z tym kontenery mają dwa stany: kompozycji i wyświetlania. Kompozycja tekstu to proces przekształcania tekstu z hierarchii przepływu tekstu na instancje klasy TextLine i obliczania, w jaki sposób rozmieścić te instancje w kontenerach. Wyświetlanie to proces aktualizowania listy wyświetlania programu Flash Player.

Więcej informacji zawierają opisy klas IFlowComposer , StandardFlowComposer i ContainerController w dokumentacji języka ActionScript 3.0 dla platformy Adobe Flash.