Text Layout Framework gebruiken

Het TLF biedt ondersteuning voor complexe schriften. Dit betekent dat schriften die van rechts naar links worden gelezen, kunnen worden weergegeven en bewerkt. Met het TLF kunt u ook een mengeling van talen die van links naar rechts en van rechts naar links worden weergegeven, zoals Arabisch en Hebreeuws, weergeven en bewerken. Het framework ondersteunt niet alleen verticale tekstlay-out voor Chinees, Japans en Koreaans, maar ook tate-chu-yoko (TCY-elementen). TCY-elementen zijn blokken horizontale tekst die in verticale tekstregels zijn ingesloten. De volgende schriften worden ondersteund:

U kunt met de TLF-klassen rechtstreeks aangepaste componenten maken in Flash. Bovendien biedt Flash Professional CS5 een nieuwe klasse, namelijk fl.text.TLFTextField, die de TLF-functionaliteit omvat. Gebruik de TLFTextField-klasse om in ActionScript tekstvelden te maken die de geavanceerde tekstweergavefuncties van het TLF gebruiken. Maak een TLFTextField-object op dezelfde manier als wanneer u met de TextField-klasse een tekstveld maakt. Gebruik de textFlow -eigenschap om geavanceerde opmaak van de TLF-klassen toe te wijzen.

U kunt Flash Professional ook gebruiken om in het werkgebied met het tekstgereedschap de TLFTextField-instantie te maken. Daarna kunt u met ActionScript de opmaak en lay-out van de inhoud van het tekstveld besturen aan de hand van de TLF-klassen. Zie TLFTextField in de Naslaggids voor ActionScript 3.0 voor het Adobe Flash-platform voor meer informatie.

Gebruik de TLF-klassen als u in Flex werkt. Zie Text Layout Framework gebruiken voor meer informatie.

Het proces voor het maken van tekst met TLF bestaat uit de volgende stappen:

Het volgende voorbeeld illustreert het gebruik van het TLF voor de lay-out van een eenvoudige krantenpagina. De pagina bevat een grote kop, een subkop en hoofdtekst die uit meerdere kolommen bestaat:

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

De klasse TLF gebruikt twee tekst containers. Een container geeft een kop en een subkop weer en de andere container geeft de hoofdtekst van drie kolommen weer. Voor de eenvoud is de tekst in het voorbeeld in code vastgelegd als TFL-opmaak tekst. De variabele handel bevat zowel de kop als de subkop en de variabele opmaakpakket bevat de hoofdtekst. Zie Tekst structureren met TLF voor meer informatie over TFL Mark up.

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

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

hContainerFormat = new TextLayoutFormat();

De controller wordt toegewezen aan de onLoadComplete en de functie voegt de container toe aan de weergavelijst. De werkelijke samenstelling en weergave van de containers wordt overgelaten aan de methode groei() . Dezelfde stappen worden uitgevoerd om het Text-object van de hoofdtekst te initialiseren.

De methode resizeHandler() meet de ruimt die beschikbaar is voor het renderen van de containers en bepaalt de overeenkomstige grootte van de containers. Met het aanvankelijk aanroepen van de methode compose() kunt u de correcte hoogte van de kopcontainer berekenen. De methode resizeHandler() plaatst vervolgens de kopcontainer en geeft deze weer met de methode updateAllControllers() . Ten slotte gebruikt de methode resizeHandler() de grootte van de kopcontainer om de plaatsing van de hoofdtekstcontainer te bepalen.

Kennis van de structuur van het TLF is ook nuttig wanneer u met TLF Mark up werkt. TLF Mark up is een van tekst die deel uitmaakt van het TLF. Hoewel het framework ook andere ondersteunt, is de TLF Mark up de enige indeling die specifiek is gebaseerd op de structuur van de Text-hiërarchie. Als u EXAMPLE van een Text exporteert met behulp van deze opmaak indeling, wordt de EXAMPLE met een intacte hiërarchie geëxporteerd.

TLF Mark up biedt de meest getrouwe weergave van tekst in een Text-hiërarchie. De opmaak taal verschaft tag voor alle basiselementen van de Text-hiërarchie naast kenmerken voor alle opmaak eigenschappen in de TextLayoutFormat-klasse.

De volgende tabel bevat de tags die kunnen worden gebruikt in TLF Markup.

U kunt de klassen ListElement en ListItemElement gebruiken om opsommingstekens toe te voegen aan uw tekstbesturingselementen. Lijsten met opsommingstekens kunnen worden genest en aangepast, zodat verschillende opsommingstekens (of markeringen) en automatische nummering in omtrekstijl worden gebruikt.

Gebruik de tag <list> om lijsten op te nemen in uw tekstflow. Vervolgens gebruikt u de tags <li> in de tag <list> voor elk lijstitem in de lijst. U kunt de weergave van de opsommingstekens aanpassen met gebruik van de klasse 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>

Met de klasse ListMarkerFormat definieert u de teller. U kunt niet alleen de verhoging van een teller definiëren, maar u kunt de teller ook aanpassen door deze opnieuw in te stellen met de eigenschap counterReset .

U kunt de weergave van de markeringen in uw lijst verder aanpassen met de eigenschappen beforeContent en afterContent van ListMarkerFormat. Deze eigenschappen zijn van toepassing op inhoud die voor en na de inhoud van de markering wordt weergegeven.

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

Zoals uit het vorige voorbeeld blijkt, kunt u met de eigenschap content ook een achtervoegsel invoegen: een tekenreeks die na de markering wordt weergegeven, maar vóór afterContent . Als u deze tekenreeks wilt invoegen tijdens het verschaffen van de XML-inhoud aan de tekstflow, plaatst u de tekenreeks tussen &quote; HTML-entiteiten in plaats van tussen aanhalingstekens "< string >" ).

Elk FlowElement biedt ondersteuning voor opvullingseigenschappen waarmee u de positie van het inhoudsgebied van elk element en de ruimte tussen inhoudsgebieden bepaalt.

De totale breedte van een element is het totaal van de breedte van de inhoud plus de eigenschappen paddingLeft en paddingRight . De totale hoogte van een element is het totaal van de hoogte van de inhoud plus de eigenschappen paddingTop en paddingBottom .

Opvullingseigenschappen kunnen niet worden toegepast op bereikelementen.

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

De geldige waarden voor de opvullingseigenschappen zijn een nummer (uitgedrukt in pixels), ''auto'' of ''inherit''. De standaardwaarde is ''auto''. Dat betekent dat de waarde automatisch wordt berekend en voor alle elementen wordt ingesteld op 0, behalve voor ListElement. In geval van ListElements is ''auto'' 0, behalve aan het begin van de lijst waar de waarde van de eigenschap listAutoPadding wordt gebruikt. De standaardwaarde van listAutoPadding is 40, wat de standaardinspringing van lijsten is.

Standaard worden opvullingseigenschappen niet overgeërfd. De waarden ''auto'' en ''inherit'' zijn constanten die zijn gedefinieerd door de klasse FormatValue .

Opvullingseigenschappen kunnen negatieve waarden zijn.

Door eigenschappen toe te wijzen kunt u indelingen instellen op elk FlowElement. De klasse FlowElement implementeert de interface ITextLayoutFormat. Elke subklasse van de FlowElement-klasse moet deze interface dus ook implementeren.

De volgende code toont bijvoorbeeld hoe u afzonderlijke indelingen kunt toewijzen aan een instantie van ParagraphElement:

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

Met de TextLayoutFormat-klasse kunt u indelingen toewijzen aan een FlowElement. Met deze klasse kunt u een speciaal indelingsobject maken waarin alle gewenste indelingswaarden zijn opgenomen. Vervolgens kunt u dit object toewijzen aan de eigenschap format van elk FlowElement-object. Zowel met TextLayoutFormat als met FlowElement wordt de ITextLayoutFormat-interface geïmplementeerd. Hiermee wordt verzekerd dat beide klassen dezelfde indelingseigenschappen bevatten.

Zie TextLayoutFormat in de Naslaggids voor ActionScript 3.0 voor het Adobe Flash-platform voor meer informatie.

Indelingen worden overgeërfd via de tekstflowhiërarchie. Als u een instantie van TextLayoutFormat toewijst aan een FlowElement-instantie met onderliggende niveaus, start het framework een proces dat trapsgewijs wordt genoemd. Tijdens een trapsgewijs proces onderzoekt het framework recursief elk knooppunt in de hiërarchie die wordt overgeërfd van uw FlowElement. Vervolgens wordt bepaald of de overgeërfde waarden worden toegewezen aan elke indelingseigenschap. De volgende regels worden toegepast tijdens het trapsgewijze proces:

Als u de waarde fontSize bijvoorbeeld op TextFlow-niveau instelt, wordt deze instelling op alle elementen in de TextFlow toegepast. Met andere woorden, de waarden worden trapsgewijs naar beneden doorgegeven door de tekststroomhiërarchie. U kunt echter ook de waarde in een bepaald element overschrijven door een nieuwe waarde rechtstreeks toe te wijzen aan het element. Een tegenvoorbeeld is wanneer u de waarde backgroundColor instelt op TextFlow-niveau en de onderliggende elementen van de TextFlow deze waarde niet overerven. De eigenschap backgroundColor is een eigenschap die niet wordt overgeërfd van het bovenliggende niveau tijdens een trapsgewijs proces. U kunt dit gedrag opheffen door de eigenschap backgroundColor van elk onderliggend element in te stellen op flashx.textLayout.formats.FormatValue.INHERIT ..

Zie TextLayoutFormat in de Naslaggids voor ActionScript 3.0 voor het Adobe Flash-platform voor meer informatie.

De eenvoudige benadering maakt gebruik van de klasse TextLineFactory, die te vinden is in het flashx.textLayout.factory -pakket. Het voordeel van deze benadering, naast de eenvoud ervan, is dat er minder van het geheugen wordt geëist dan bij de FlowComposer-benadering. Deze benadering kan worden gebruikt voor statische tekst die door de gebruiker niet moet worden bewerkt, geselecteerd of verschoven.

Zie de TextFlowTextLineFactory in de Naslaggids voor ActionScript 3.0 voor het Adobe Flash-platform voor meer informatie.

Gebruik een flowcomposer als u over meer mogelijkheden wilt beschikken met betrekking tot de weergave van tekst dan TextFlowTextLineFactory biedt. Met een flowcomposer kunnen uw gebruikers de tekst bijvoorbeeld selecteren en bewerken. Zie Selecteren en bewerken van tekst en bewerkingen ongedaan maken mogelijk maken met TLF voor meer informatie.

Een flowcomposer is een instantie van de StandardFlowComposer-klasse in het flashx.textLayout.compose -pakket. Een flowcomposer beheert het omzetten van TextFlow- in TextLine-instanties en het plaatsen van deze TextLine-instanties in een of meer containers.

Afbeelding op volledige grootte weergeven

Een IFlowComposer heeft nul of meer ContainerControllers

Elke TextFlow-instantie heeft een bijbehorend object dat de IFlowComposer-interface implementeert. Dit IFlowComposer-object is toegankelijk via de eigenschap TextFlow.flowComposer . U kunt door de IFlowComposer-interface gedefinieerde methoden aanroepen via deze eigenschap. Aan de hand van deze methoden kunt u de tekst koppelen aan een of meerdere containers en de tekst voorbereiden op weergave in een container.

Een container is een instantie van de klasse Sprite, welke een subklasse is van de klasse DisplayObjectContainer. Beide klassen maken deel uit van de weergavelijst-API van Flash Player. Een container is een geavanceerde vorm van het opgegeven kader dat wordt gebruikt met klasse TextLineFactory. Zoals het opgegeven kader definieert een container het gebied waar de TextLine-instantie wordt weergegeven. In tegenstelling tot een selectiekader heeft een container een overeenkomstig ''controller''-object. De controller beheert het bladeren, samenstellen, koppelen, opmaken en de gebeurtenisafhandeling van een container of een set containers. Elke container heeft een overeenkomstig controllerobject dat een instantie is van de klasse ContainerController in het pakket flashx.textLayout.container.

Als u tekst wilt weergeven, maakt u een controllerobject dat de container beheert en koppelt u dit aan de flowcomposer. Zodra de container is gekoppeld, stelt u de tekst samen zodat deze kan worden weergegeven. Containers hebben twee statussen: samenstelling en weergave. Tijdens de samenstelling wordt de tekst van een tekststroomhiërarchie geconverteerd in TextLine-instanties en wordt berekend of deze instanties in de container passen. Tijdens weergave wordt de weergavelijst in Flash Player bijgewerkt.

Zie IFlowComposer , StandardFlowComposer en ContainerController in de Naslaggids voor ActionScript 3.0 voor het Adobe Flash-platform voor meer informatie.