Uso de Text Layout Framework

TLF proporciona compatibilidad con scripts complejos. La compatibilidad con scripts complejos incluye la capacidad para mostrar y editar scripts de derecha a izquierda. TLF también proporciona la capacidad para mostrar y editar una mezcla de scripts de izquierda a derecha y de derecha a izquierda como, por ejemplo, árabe y hebreo. La arquitectura no solo admite diseño de texto vertical para chino, japonés y coreano, sino que también es compatible con tate-chu-yoko (elementos TCY). Los elementos TCY son bloques de texto horizontal incorporados en extensiones de texto vertical. Se admiten los siguientes scripts:

Se pueden utilizar las clases TLF directamente para crear componentes personalizados en Flash. Asimismo, Flash Professional CS5 proporciona una nueva clase, fl.text.TLFTextField, que encapsula la funcionalidad de TLF. Utilice la clase TLFTextField para crear campos de texto en ActionScript que utilicen las funciones avanzadas de visualización de TLF. Cree un objeto TLFTextField la misma manera que crearía un campo de texto con la clase TextField. Seguidamente, utilice la propiedad textFlow para asignar formato avanzado de las clases TLF.

También se puede utilizar Flash Professional para crear la instancia de TLFTextField en el escenario utilizando la herramienta de texto. Posteriormente ActionScript se puede utilizar para controlar el formato y el diseño del contenido del campo de texto utilizando las clases TLF. Para obtener más información, consulte la clase TLFTextField en la Referencia de ActionScript 3.0 para la plataforma de Adobe Flash.

Si está trabajando en Flex, utilice las clases TLF. Para obtener más información, consulte Uso de Text Layout Framework .

Los siguientes pasos describen el proceso general para crear texto con Text Layout Format:

En el siguiente ejemplo se muestra el uso de TLF para diseñar una sencilla página de periódico. La página incluye un titular grande, un subtí­tulo y una sección de cuerpo de varias columnas:

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 clase TLFNewsLayout utiliza dos contenedores de texto. Un contenedor muestra un titular y subtítulo y el otro muestra el texto de cuerpo de tres columnas. Para que resulte más fácil, el texto se codifica en el ejemplo como texto de marcado TLF. La variable headlineMarkup contiene el titular y el subtítulo y la variable bodyMarkup incluye el texto principal. Para obtener más información sobre TLF Markup, consulte Estructuración del texto con TLF .

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

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

hContainerFormat = new TextLayoutFormat();

El controlador se asigna al compositor de flujo y la función añade el contenedor a la lista de visualización. La visualización y composición real de los contenedores se difiere al método resizeHandler() . La misma secuencia de pasos se lleva a cabo para inicializar el objeto TextFlow del cuerpo.

El método resizeHandler() mide el espacio disponible para procesar los contenedores y calculan su tamaño en consecuencia. Una llamada inicial al método compose() permite el cálculo de la altura adecuada del contenedor del titular. El método resizeHandler() puede situar y mostrar el contenedor del titular con el método updateAllControllers() . Finalmente, el método resizeHandler() utiliza el amaño del contenedor del titular para determinar la ubicación del contenedor del texto principal.

EL conocimiento de la estructura de TLF también resulta útil a la hora de tratar con el marcado de Text Layout Framework. El marcado de TLF es una representación XML del texto que forma parte de TLF. Aunque la arquitectura también admite otros formatos XML, el marcado es único, ya que se basa específicamente en la estructura de la jerarquía de TextFlow. Si opta por exportar XML desde TextFlow utilizando este formato de marcado, XML se exportará con esta jerarquía intacta.

TLF Markup proporciona la representación de texto de más alta fidelidad en una jerarquía de TextFlow. El lenguaje de marcado proporciona etiquetas para cada uno de los elementos básicos de la jerarquía de TextFlow y también ofrece atributos para todas las propiedades de formato disponibles en la clase TextLayoutFormat.

La siguiente tabla contiene las etiquetas que se pueden utilizar en marcado TLF.

Las clases ListElement y ListItemElement pueden utilizarse para añadir listas con viñetas a los controles de texto. Las listas con viñetas se pueden anidar y personalizar para que utilicen viñetas distintas (o marcadores) y numeración automática, así como numeración con estilo.

Para crear listas en los flujos de texto, utilice la etiqueta <list> . Posteriormente se utilizan las etiquetas <li> en la etiqueta <list> para cada elemento de la lista. Es posible personalizar la apariencia de las viñetas mediante la clase 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>

La clase ListMarkerFormat se emplea para definir el contador. Además de definir el incremento de un contador, también es posible personalizar el contador, restableciéndolo con la propiedad counterReset .

Se puede personalizar más el aspecto de los marcadores de las listas con el uso de las propiedades beforeContent y afterContent de ListMarkerFormat. Estas propiedades se aplican al contenido que aparece antes y después del contenido del 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>

Tal y como se muestra en el ejemplo anterior, la propiedad content también puede insertar un sufijo: una cadena que aparece tras el marcador, pero antes de afterContent . Para insertar esta cadena al proporcionar contenido XML en el flujo, ajuste la cadena en las entradas HTML &quote; en lugar de comillas ( "< string >" ).

Todos los objetos FlowElement admiten propiedades de margen que se utilizan para controlar la posición del área de contenido de cada elemento y el espacio entre las áreas de contenido.

La anchura total de un elemento es la suma de la anchura de su contenido, más las propiedades paddingLeft y paddingRight . La altura total de un elemento es la suma de la altura de su contenido, más las propiedades paddingTop y paddingBottom .

Las propiedades de margen no se pueden aplicar a los elementos de delimitación.

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

Los valores válidos para las propiedades de margen son un número (en píxeles), “auto” o “inherit”. El valor predeterminado es “auto”, lo que significa que se calcula automáticamente y se establece en 0, para todos los elementos excepto ListElement. Para ListElements, “auto” es 0 excepto en la parte de inicio de la lista donde se utiliza el valor de la propiedad listAutoPadding . El valor predeterminado de listAutoPadding es 40, lo que proporciona a las listas una sangría predeterminada.

Las propiedades de margen no se heredan de forma predeterminada. Los valores “auto” e “inherit” son constantes definidas por la clase FormatValue .

Las propiedades de margen pueden ser valores negativos.

Es posible establecer formatos en cualquier elemento FlowElement mediante asignación de propiedades. La clase FlowElement implementa la interfaz ITextLayoutFormat, por lo que cualquier subclase de la clase FlowElement también debe implementar esta interfaz.

Por ejemplo, el siguiente código muestra cómo asignar formatos individuales a una instancia de ParagraphElement:

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

Puede aplicar formatos a un objeto FlowElement con la clase TextLayoutFormat. Puede utilizar esta clase para crear un objeto de formato especial que contenga todos los valores de formato que desee. Puede asignar ese objeto a la propiedad format de cualquier objeto TextFlow, DivElement o ContainerController. TextLayoutFormat y FlowElement implementan la interfaz ITextLayoutFormat. Esta disposición garantiza que ambas clases contengan las mismas propiedades de formato.

Para obtener más información, consulte la clase TextLayoutFormat en la Referencia de ActionScript 3.0 para la plataforma de Adobe Flash.

Los formatos se heredan mediante la jerarquía de flujo de texto. Si se asigna una instancia de TextLayoutFormat a una instancia de FlowElement con elementos secundarios, la arquitectura inicia un proceso denominado cascada . Durante una cascada, la arquitectura examina de forma sucesiva cada nodo de la jerarquía que hereda de FlowElement. Posteriormente determina si asignar los valores heredados a cada propiedad de formato. Durante la cascada se aplican las siguientes reglas:

Por ejemplo, si el valor fontSize es establece para un contenedor a nivel de TextFlow, la configuración aplica todos los contenedores en TextFlow. Es decir, los valores caen en cascada hacia abajo en la jerarquía del flujo de texto. No obstante, puede sustituir el valor de un contenedor determinado asignando un nuevo valor directamente al contenedor. Como contraejemplo, si se establece el valor backgroundColor en el nivel de TextFlow, los elementos secundarios de TextFlow no heredan ese valor. La propiedad backgroundColor no hereda de su elemento principal durante una cascada. Para omitir este comportamiento, establezca la propiedad marginLeft de cada elemento secundario en flashx.textLayout.formats.FormatValue.INHERIT ..

Para obtener más información, consulte la clase TextLayoutFormat en la Referencia de ActionScript 3.0 para la plataforma de Adobe Flash.

En el enfoque sencillo se utiliza la clase TextFlowTextLineFactory, que puede encontrarse en el paquete flashx.textLayout.factory . Más allá de su simplicidad, la ventaja de este enfoque radica en que presenta una menor superficie de memoria que el esquema de FlowComposer. Este enfoque se recomienda para texto estático que el usuario no necesita editar, seleccionar ni desplazar.

Para obtener más información, consulte la clase TextFlowTextLineFactory en la Referencia de ActionScript 3.0 para la plataforma de Adobe Flash.

Utilice un compositor de flujo si desea tener más control sobre la visualización del texto que el que proporciona TextFlowTextLineFactory. Por ejemplo, con un compositor de flujo, los usuarios pueden seleccionar y editar el texto. Para obtener más información, consulte Activación de las operaciones para deshacer, editar y selección de texto con TLF .

Un compositor de flujo es una instancia de la clase StandardFlowComposer en el paquete flashx.textLayout.compose . Un compositor de flujo administra la conversión de TextFlow en instancias de TextLine y también la ubicación de las instancias de TextLine en uno o varios contenedores.

Ver gráfico a tamaño completo

El objeto IFlowComposer dispone de varios ContainerControllers o de ninguno de ellos.

Todas las instancias de TextFlow disponen de un objeto correspondiente que implementa la interfaz IFlowComposer. A este objeto IFlowComposer se puede acceder mediante la propiedad TextFlow.flowComposer . Se puede llamar a métodos definidos mediante la interfaz IFlowComposer a través de esta propiedad. Estos métodos permiten asociar el texto con uno o varios contenedores y preparan el texto para su visualización en un contenedor.

Un contenedor es simplemente una instancia de la clase Sprite, que es una subclase de la clase DisplayObjectContainer. Ambas clases forman parte de la API de la lista de visualización de Flash Player. Un contenedor es una forma más avanzada del rectángulo de delimitación utilizado con la clase TextLineFactory. Al igual que sucede con el rectángulo de delimitación, un contenedor limita el área donde aparecerán las instancias de TextLine. A diferencia de un rectángulo de delimitación, un contenedor dispone de un objeto “controller” correspondiente. El controlador administra el desplazamiento, composición, vinculación, formato y control de eventos para un contenedor o conjunto de contenedores. Cada contenedor cuenta con un objeto controlador correspondiente que es una instancia de la clase ContainerController del paquete flashx.textLayout.container.

Para mostrar texto, cree un objeto controlador para administrar y asociarlo con el compositor de flujo. Una vez asociado el contenedor, debe componer el texto antes de que pueda visualizarse. Por lo tanto, los contenedores disponen de dos estados: composición y visualización. La composición del texto es el proceso de conversión del texto desde la jerarquía de flujo de texto en instancias de TextLine y el cálculo de la forma en que esas instancias se ajustan al contenedor. La visualización es el proceso de actualización de la lista de visualización de Flash Player.

Para obtener más información, consulte IFlowComposer , StandardFlowComposer y ContainerController en Referencia de ActionScript 3.0 para la plataforma de Adobe Flash.