Uso del Text Layout Framework

Il TLF fornisce il supporto per script complessi, inclusa la possibilità di visualizzare e modificare script da destra a sinistra. Il TLF consente anche di visualizzare e modificare una combinazione di script da sinistra a destra e da destra a sinistra, ad esempio l'arabo e l'ebraico. Il framework supporta non solo il layout di testo verticale per cinese, giapponese e coreano, ma anche gli elementi TCY (tate-chu-yoko), ovvero blocchi di testo orizzontale incorporati in sequenze di testo verticali. Sono supportati i seguenti script:

Potete utilizzare le classi TLF direttamente per creare componenti personalizzati in Flash. Inoltre, Flash Professional CS5 fornisce una nuova classe, fl.text.TLFTextField, che incorpora le funzionalità TLF. Utilizzate la classe TLFTextField per creare campi di testo in ActionScript che utilizzano le funzioni avanzate di visualizzazione del testo di TLF. Potete creare un oggetto TLFTextField nello stesso modo con cui create un campo di testo con la classe TextField. Utilizzate quindi la proprietà textFlow per assegnare le opzioni di formattazione avanzate delle classi TLF.

Potete anche utilizzare Flash Professional per creare l'istanza TLFTextField sullo stage utilizzando lo strumento Testo. Quindi potete utilizzare ActionScript per controllare la formattazione e il layout del contenuto del campo di testo utilizzando le classi TLF. Per ulteriori informazioni, vedete TLFTextField nella Guida di riferimento di Adobe ActionScript 3.0 per la piattaforma Adobe Flash.

Se state lavorando in Flex, utilizzate le classi TLF. Per ulteriori informazioni, vedete Uso del Text Layout Framework .

I passaggi seguenti descrivono il processo generale di creazione di testo con il Text Layout Format:

L'esempio seguente dimostra l'utilizzo di TLF per disporre una semplice pagina di giornale. La pagina include un titolo di grandi dimensioni, un sottotitolo e una sezione del corpo dell'articolo su più colonne:

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

La classe TLFNewsLayout utilizza due contenitori di testo. Un contenitore visualizza un titolo e un sottotitolo, mentre l'altro visualizza un corpo del testo a tre colonne. Per semplicità, il testo è codificato nell'esempio come testo di marcatura TLF. La variabile headlineMarkup contiene un titolo e un sottotitolo, mentre la variabile bodyMarkup contiene il testo principale. Per ulteriori informazioni sul codice TLF, vedete Creazione di strutture di testo con TLF .

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

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

hContainerFormat = new TextLayoutFormat();

Il controller viene assegnato al compositore di flusso e la funzione aggiunge il contenitore all'elenco di visualizzazione. La composizione e la visualizzazione effettiva dei contenitori è differita al metodo resizeHandler() . La stessa sequenza di operazioni viene eseguita per inizializzare l'oggetto TextFlow del corpo.

Il metodo resizeHandler() misura lo spazio disponibile per il rendering dei contenitori e misura le dimensioni dei contenitori di conseguenza. Una chiamata iniziale al metodo compose() consente il calcolo dell'altezza corretta del contenitore del titolo. Il metodo resizeHandler() può quindi collocare e visualizzare il contenitore del titolo con il metodo updateAllControllers() . Infine, il metodo resizeHandler() utilizza la dimensione del contenitore del titolo per determinare la posizione del contenitore del testo principale.

La conoscenza della struttura di TLF è utile anche per gestire il formato di codifica TLF Markup, ovvero una rappresentazione XML del testo che fa parte del TLF. Il framework supporta anche altri formati XML, ma l'unicità del formato di codifica TLF Markup risiede nel fatto che è basato specificamente sulla struttura della gerarchia TextFlow. Se esportate codice XML da un'istanza TextFlow utilizzando questo formato di codifica, il codice XML verrà esportato mantenendo intatta la gerarchia.

Il formato di codifica TLF Markup fornisce la rappresentazione più fedele del testo in una gerarchia TextFlow. Il linguaggio di markup fornisce tag per ciascuno degli elementi di base della gerarchia TextFlow, nonché attributi per tutte le proprietà di formattazione disponibili nella classe TextLayoutFormat.

La tabella seguente contiene i tag che è possibile utilizzare nel formato di codifica TLF Markup.

Potete utilizzare le classi ListElement e ListItemElement per aggiungere elenchi puntati ai controlli di testo. Gli elenchi puntati possono essere nidificati e personalizzati per utilizzare punti elenco (o indicatori) diversi e la numerazione automatica, nonché numerazione in stile contorno.

Per creare elenchi nel flusso di testo, utilizzate il tag <list> . Utilizzate quindi i tag <li> all'interno del tag <list> per ogni voce nell'elenco. Potete personalizzare l'aspetto dei punti elenco utilizzando la classe 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>

Utilizzate la classe ListMarkerFormat per definire il contatore. Oltre alla definizione dell'incremento di un contatore, potete anche personalizzare il contatore ripristinandolo con la proprietà counterReset .

Potete personalizzare ulteriormente l'aspetto degli indicatori negli elenchi utilizzando le proprietà beforeContent e afterContent di ListMarkerFormat. Queste proprietà si applicano al contenuto visualizzato prima e dopo il contenuto dell'indicatore.

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

Come mostrato nell'esempio precedente, la proprietà content può anche inserire un suffisso: una stringa visualizzata dopo l'indicatore, ma prima di afterContent . Per inserire questa stringa quando si fornisce contenuto XML al flusso, racchiudete la stringa tra entità HTML &quote; piuttosto che tra virgolette ( "< stringa >" ).

Ogni FlowElement supporta proprietà di riempimento utilizzate per controllare la posizione di ciascuna area di contenuto dell'elemento, nonché lo spazio tra le aree di contenuto.

La larghezza totale di un elemento è la somma della larghezza del suo contenuto più le proprietà paddingLeft e paddingRight . L'altezza totale di un elemento è la somma dell'altezza del suo contenuto più le proprietà paddingTop e paddingBottom .

Le proprietà di riempimento non possono essere applicate a elementi intervallo.

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

Valori validi per le proprietà di riempimento sono un numero (in pixel), “auto” o “inherit”. Il valore predefinito è “auto”, ovvero il riempimento viene calcolato automaticamente è impostato su 0 per tutti gli elementi ad eccezione di ListElement. Per ListElements, “auto” è 0 tranne che sul lato iniziale dell'elenco dove viene utilizzato il valore della proprietà listAutoPadding . Il valore predefinito di listAutoPadding è 40, che fornisce agli elenchi un rientro predefinito.

Per impostazione predefinita, le proprietà di riempimento non prevedono l'ereditarietà. I valori “auto” e “inherit” sono costanti definite dalla classe FormatValue .

Le proprietà di riempimento possono essere valori negativi.

Potete impostare formati su qualsiasi oggetto FlowElement mediante assegnazione di proprietà. Poiché la classe FlowElement implementa l'interfaccia ITextLayoutFormat, qualsiasi sottoclasse della classe FlowElement deve implementare la stessa interfaccia.

Ad esempio, il codice seguente mostra come assegnare singoli formati a un'istanza di ParagraphElement:

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

Potete applicare formati a un oggetto FlowElement con la classe TextLayoutFormat. Potete utilizzare questa classe per creare un oggetto di formattazione speciale che contiene tutti i valori di formattazione desiderati. Potete quindi assegnare questo oggetto alla proprietà format di qualsiasi oggetto FlowElement. Gli oggetti TextLayoutFormat e FlowElement implementano entrambi l'interfaccia ITextLayoutFormat. Questo approccio garantisce che entrambe le classi contengono le stesse proprietà di formattazione.

Per ulteriori informazioni, vedete TextLayoutFormat nella Guida di riferimento di Adobe ActionScript 3.0 per la piattaforma Adobe Flash.

I formati vengono ereditati tramite la gerarchia del flusso di testo. Se assegnate un'istanza di TextLayoutFormat a un'istanza FlowElement con elementi secondari, il framework avvia un processo a cascata . Durante un processo a cascata, il framework esamina in modo ricorsivo tutti i nodi della gerarchia che ereditano valori dall'istanza FlowElement e determina se i valori ereditati devono essere assegnati alle varie proprietà di formattazione. Durante il processo a cascata vengono applicate le seguenti regole:

Ad esempio, se impostate il valore fontSize a livello di TextFlow, l'impostazione viene applicata a tutti i contenitori dell'istanza TextFlow. In altre parole, i valori vengono applicati a cascata agli elementi di livello inferiore della gerarchia del flusso di testo. Potete tuttavia sostituire il valore di un elemento specifico assegnando un nuovo valore direttamente all'elemento. Viceversa, se impostate il valore backgroundColor per il livello TextFlow, l'elemento secondario di TextFlow non eredita tale valore. La proprietà backgroundColor non prevede l'ereditarietà dall'elemento principale durante un processo a cascata. Potete sostituire questo comportamento impostando la proprietà backgroundColor di ciascun elemento secondario su flashx.textLayout.formats.FormatValue.INHERIT .

Per ulteriori informazioni, vedete TextLayoutFormat nella Guida di riferimento di Adobe ActionScript 3.0 per la piattaforma Adobe Flash.

L'approccio semplice utilizza la classe TextLFlowTextLineFactory, che fa parte del pacchetto flashx.textLayout.factory . Il vantaggio di questo approccio, oltre alla sua semplicità, è che utilizza una quantità di memoria inferiore rispetto a un compositore di flusso. Questo approccio è indicato per il testo statico che non deve essere modificato, selezionato e che non richiede operazioni di scorrimento.

Per ulteriori informazioni, vedete TextFlowTextLineFactory nella Guida di riferimento di Adobe ActionScript 3.0 per la piattaforma Adobe Flash.

Utilizzate un compositore di flusso se desiderate un maggior controllo sulla visualizzazione del testo rispetto a quello fornito da TextFlowTextLineFactory. Ad esempio, gli utenti possono utilizzare un compositore di flusso per selezionare e modificare il testo. Per ulteriori informazioni, vedete Abilitazione di selezione, modifica e annullamento del testo con TLF .

Un compositore di flusso è un'istanza della classe StandardFlowComposer nel pacchetto flashx.textLayout.compose . Gestisce la conversione di TextFlow in istanze TextLine, nonché il posizionamento di queste istanze TextLine in uno o più contenitori.

Visualizzazione dell’elemento grafico a dimensioni intere

Un oggetto IFlowComposer può avere zero o più oggetti ContainerController

A ogni istanza TextFlow corrisponde un oggetto che implementa l'interfaccia IFlowComposer. L'oggetto IFlowComposer è accessibile tramite la proprietà TextFlow.flowComposer , che consente anche di chiamare metodi definiti dall'interfaccia IFlowComposer. Questi metodi consentono di associare il testo a uno o più contenitori, nonché preparare il testo per la visualizzazione all'interno di un contenitore.

Un contenitore è un'istanza della classe Sprite, ovvero una sottoclasse della classe DisplayObjectContainer. Entrambe queste classi fanno parte dell'API dell'elenco di visualizzazione di Flash Player. Un contenitore è una forma più avanzata del rettangolo di delimitazione utilizzato con la classe TextLineFactory. Analogamente al rettangolo di delimitazione, un contenitore definisce l'area in cui verranno visualizzate le istanze TextLine. A differenza del rettangolo di delimitazione, un contenitore dispone di un oggetto “controller” corrispondente. Il controller gestisce lo scorrimento, la composizione, il collegamento, la formattazione e la gestione eventi per un contenitore o insieme di contenitori. Ogni contenitore dispone di un oggetto controller corrispondente che è un'istanza della classe ContainerController nel pacchetto flashx.textLayout.container.

Per visualizzare testo, creare un oggetto controller per gestire il contenitore e associarlo al compositore di flusso. Dopo aver associato il contenitore, componete il testo per poterlo visualizzare. Di conseguenza, i contenitori hanno due stati: composizione e visualizzazione. La composizione è il processo che consente di convertire il testo della gerarchia del flusso di testo in istanze TextLine e definire la disposizione di queste istanze nel contenitore. La visualizzazione è il processo di aggiornamento dell'elenco di visualizzazione di Flash Player.

Per ulteriori informazioni, vedete IFlowComposer , StandardFlowComposer e ContainerController nella Guida di riferimento di Adobe ActionScript 3.0 per la piattaforma Adobe Flash.