Uso da Text Layout Framework

A TLF oferece suporte a script complexo. O suporte a script complexo inclui a capacidade de exibir e editar scripts da direita para a esquerda. A TLF também oferece a capacidade de exibir e editar uma mistura de scripts da esquerda para a direita e da direita para a esquerda, como árabe e hebraico. A estrutura oferece suporte não apenas para o layout de texto vertical para chinês, japonês e coreano, como também para tate-chuu-yoko (elementos TCY). Os elementos TCY são blocos de texto horizontal integrados em séries verticais de texto. Há suporte para os seguintes scripts:

Você pode usar as classes TLF diretamente para criar componentes personalizados no Flash. Além disso, o Flash Professional CS5 fornece uma nova classe, fl.text.TLFTextField, que encapsula a funcionalidade da TLF. Use a classe TLFTextField para criar campos de texto no ActionScript que usam os recursos de exibição de texto avançados da TLF. Crie um objeto de TLFTextField do mesmo modo que você cria um campo de texto com a classe TextField. Em seguida, use a propriedade textFlow para atribuir a formatação avançada das classes TLF.

Você também pode usar o Flash Professional para criar a ocorrência de TLFTextField no palco usando a ferramenta de texto. Em seguida, pode usar o ActionScript para controlar a formatação e o layout do conteúdo do campo de texto usando classes da TLF. Para obter mais informações, consulte TLFTextField na Referência do ActionScript® 3.0 para Adobe® Flash® Platform.

Se estiver trabalhando no Flex, use as classes da TLF. Para obter mais informações, consulte Uso da Text Layout Framework .

As seguintes etapas descrevem o processo geral para criação de texto com o Text Layout Format:

O exemplo a seguir demonstra o uso da TLF para fazer o layout de uma simples página de jornal. A página inclui um título grande, um subtítulo e uma seção de corpo com várias colunas:

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

A classe TLFNewsLayout usa dois contêineres de texto. Um contêiner exibe um título e subtítulo e o outro exibe o texto do corpo em três colunas. Por uma questão de simplicidade, o texto é codificado no exemplo como texto de marcação TLF. A variável headlineMarkup contém o título e o subtítulo, e a variável bodyMarkup contém o corpo do texto. Para obter mais informações sobre a marcação da TLF, consulte Estruturação de texto com a TLF .

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

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

hContainerFormat = new TextLayoutFormat();

O controlador é atribuído ao compositor de fluxo e a função adiciona o contêiner à lista de exibição. A composição e a exibição reais dos contêineres são adiados para o método resizeHandler() . A mesma sequência de etapas é executada para inicializar o objeto TextFlow do corpo.

O método resizeHandler() mede o espaço disponível para renderizar os contêineres e dimensioná-los de acordo. Uma chamada ao método compose() permite calcular a altura adequada do contêiner de título. O método resizeHandler() pode então colocar e exibir o contêiner de título com o método updateAllControllers() . Por fim, o método resizeHandler() usa o tamanho do contêiner de título para determinar a colocação do contêiner de texto do corpo.

Compreender a estrutura da TLF também é útil ao lidar com a marcação TLF. A marcação TLF é uma representação de texto que faz parte da TLF. Embora a estrutura também ofereça suporte a outros formatos XML, a marcação TLF é exclusiva pelo fato de se basear especificamente na estrutura da hierarquia TextFlow. Se você exportar o XML de um TextFlow usando esse formato de markup, o XML será exportado com essa hierarquia intacta.

A marcação TLF oferece a representação da mais alta fidelidade em uma hierarquia TextFlow. A linguagem da marcação fornece tags para cada um dos elementos básicos da hierarquia TextFlow, além de fornecer atributos para todas as propriedades de formatação disponíveis na classe TextLayoutFormat.

A tabela a seguir contém as tags que podem ser usadas na TLF Markup.

É possível usar as classes ListElement e ListItemElement para incluir listas com marcadores nos controles do seu texto. As listas com marcadores podem ser aninhadas e personalizadas para usar marcadores (ou sinalizadores) diferentes e numeração automática, assim como numeração por destaque.

Para criar listas de seus fluxos de texto, use a tag <list> . Use tags <li> dentro da tag <list> para cada item de lista na lista. É possível personalizar a aparência dos marcadores usando a 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>

Use a classe ListMarkerFormat para definir o contador. Além de definir o incremento de um contador, também é possível personalizá-lo, redefinindo-o com a propriedade counterReset .

É possível ainda personalizar a aparência dos marcadores em sua lista usando as propriedades beforeContent e afterContent do ListMarkerFormat. Estas propriedades se aplicam ao conteúdo que aparece antes e depois do conteúdo do marcador.

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

Como mostra o exemplo anterior, a propriedade content também pode inserir um sufixo: uma sequência de caracteres que aparece depois do marcador, mas antes do afterContent . Para inserir esta sequência de caracteres ao fornecer o conteúdo XML para o fluxo, envolva a sequência de caracteres nas entidades HTML &quote; em vez de aspas ( "< string >" ).

Cada FlowElement é compatível com propriedades de deslocamento que você usa para controlar a posição da área do conteúdo de cada elemento, e o espaço entre as áreas do conteúdo.

A largura total de um elemento é a soma da largura do seu conteúdo, mais as propriedades paddingLeft e paddingRight . A altura total de um elemento é a soma da altura do seu conteúdo, mais as propriedades paddingTop e paddingBottom .

As propriedades de deslocamento não podem ser aplicadas aos elementos de distância.

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

Os valores válidos para as propriedades de panorama são um número ( em pixels), “auto”, ou “herdado”. O valor padrão é "auto", o que significa que é calculado automaticamente e definido para 0, para todos os elementos, exceto o ListElement. Para ListElements, “auto” é 0 exceto no lado de início da lista, onde o valor da propriedade listAutoPadding é usado. O valor padrão de listAutoPadding é 40, o que dá à lista um recuo padrão.

As propriedades de deslocamento não são herdadas por padrão. Os valores “auto” e “inherit” são constantes definidas pela classe FormatValue .

As propriedades de deslocamento podem ser valores negativos.

Você pode definir formatos individuais em FlowElement através de atribuição de propriedade. A classe FlowElement implementa a interface ITextLayoutFormat, de modo que qualquer subclasse da classe FlowElement também deve implementar essa interface.

Por exemplo, o código a seguir mostra como atribuir formatos individuais a uma ocorrência de ParagraphElement:

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

É possível aplicar formatos a um FlowElement com a classe TextLayoutFormat. Utilize esta classe para criar um objeto de formatação especial que contém todos os valores e formato que desejar. Isso viabilizará a designação desse objeto à propriedade format de qualquer objeto FlowElement. Tanto TextLayoutFormat quanto FlowElement implementam a interface ITextLayoutFormat. Essa organização garante que as duas classes contenham as mesmas propriedades de formato.

Para obter mais informações, consulte TextLayoutFormat na Referência do ActionScript® 3.0 para Adobe® Flash® Platform.

Formatos são herdados através da hierarquia de fluxo de texto. Se você designar uma instância de TextLayoutFormat a uma instância do FlowElement com filhos, a estrutura iniciará um processo denominado cascade . Durante uma cascata, a estrutura examina recursivamente cada nó na hierarquia que herda do seu FlowElement. Então, ela determina se deve atribuir os valores herdados para cada propriedade de formatação. As seguintes regras se aplicam à réplica em cascata:

Por exemplo, se você definir o valor fontSize no nível do TextFlow, a configuração se aplicará a todos os elementos no TextFlow. Em outras palavra, os valores replicam a hierarquia de fluxo de texto em cascata. Será possível, no entanto, substituir o valor em determinado elemento designando-lhe diretamente um novo valor. Como contraexemplo, se você definir o valor backgroundColor para o nível do TextFlow, os filhos do TextFlow não herdam esse valor. A propriedade backgroundColor é aquela que não herda de seu pai durante uma cascata. É possível sobrescrever esse comportamento definido à propriedade backgroundColor em cada filho para flashx.textLayout.formats.FormatValue.INHERIT .

Para obter mais informações, consulte TextLayoutFormat na Referência do ActionScript® 3.0 para Adobe® Flash® Platform.

A abordagem simples utiliza a classe TextFlowTextLineFactory, que pode ser encontrada no pacote flashx.textLayout.factory . A vantagem dessa abordagem, além da sua simplicidade, é que ela tem uma superfície de memória menor em relação à abordagem do FlowComposer. Essa abordagem é aconselhável para o texto estático que o usuário não precisa editar, selecionar ou rolar.

Para obter mais informações, consulte TextFlowTextLineFactory na Referência do ActionScript® 3.0 para Adobe® Flash® Platform.

Use um compositor de fluxo se desejar ter mais controle sobre a exibição do texto do que quando fornecido pelo TextFlowTextLineFactory. Por exemplo, com um compositor de fluxo, os usuários podem selecionar e editar o texto. Para obter mais informações, consulte Ativação da seleção de texto, edição e recurso desfazer com a TLF .

Um compositor de fluxo é uma ocorrência da classe StandardFlowComposer no pacote flashx.textLayout.compose . Um compositor de fluxo gerencia a conversão do TextFlow em ocorrências de TextLine, bem como o posicionamento dessas ocorrências de TextLine em um ou mais contêineres.

Exibir gráfico inteiro

Um IFlowComposer tem zero ou mais ContainerControllers

Cada instância do TextFlow tem um objeto correspondente que implementa a interface IFlowComposer. Esse objeto IFlowComposer é acessível por meio da propriedade TextFlow.flowComposer . Você chama métodos definidos pela interface IFlowComposer usando esta propriedade. Estes métodos permitem associar o texto a um ou mais contêineres e preparar o texto para exibição em um contêiner.

Um contêiner é uma instância da classe Sprite, a qual, por sua vez, é uma subclasse da classe DisplayObjectContainer. Ambas essas classes são parte da API da lista de exibição do Flash Player. Um contêiner é uma forma mais avançada do retângulo delimitador usado na classe TextLineFactory. Como o retângulo delimitador, um contêiner define a área em que as instâncias do TextLine aparecerão. Diferentemente de um retângulo delimitador, um contêiner te um objeto “controlador” correspondente. O controlador gerencia a rolagem, composição, vinculação, formatação e tratamento de eventos de um contêiner ou conjunto de contêineres. Cada contêiner tem um objeto controlador correspondente, que é uma ocorrência da classe ContainerController no pacote flashx.textLayout.container.

Para exibir texto, crie um objeto controlador para gerenciar o contêiner e associá-lo ao compositor de texto. Depois de associar o contêiner, componha o texto antes que ele possa ser exibido. Da mesma forma, os contêineres têm dois estados: composição e exibição. A composição é o processo de conversão de texto da hierarquia de fluxo de texto nas instâncias do TextLine e o cálculo de se essas instâncias se ajustarão ao contêiner. A exibição é o processo de atualização da lista de exibição do Flash Player.

Para obter mais informações, consulte IFlowComposer , StandardFlowComposer e ContainerController na Referência do ActionScript® 3.0 para Adobe® Flash® Platform.