Generating a formatted TextFlow Layout with XML/E4X

An instance of the XMLTextLayout class is instantiated with a single XMLFileURL:String required parameter, which supplies the URLRequest for the URLLoader's load function with the address for an XML file.

The XMLTextLayout class operates by parsing data from an external XML file that creates a formatted TextFlow layout by employing APIs from the Text Layout Framework.

The XML file includes textFileURL and conversionType attributes that assign the URL of the text source and its conversion format type. Additionally, the XML file may include any number of TextLayoutFormat properties. However, each format element name must match a public property name from the TextLayoutFormat class. The format attribute highlightColor assigns a color for a new SelectionFormat object. Furthermore, the XML file may include any number of container elements limited to the properties of x, y, width and height. The index of the TextFlow's containers is based on the listed order of container elements in the XML file.

[SWF(width="1000", height="600", frameRate="60", backgroundColor="#330000")]


var layout:XMLTextLayout = new XMLTextLayout("XMLTextLayout.XML");

addChild(layout);

package

{

import flash.display.Sprite;

import flash.net.URLLoader;

import flash.net.URLRequest;

import flash.events.Event;

import flash.events.IOErrorEvent;

import flashx.textLayout.container.ContainerController;

import flashx.textLayout.formats.TextLayoutFormat;

import flashx.textLayout.elements.Configuration;

import flashx.textLayout.elements.TextFlow;

import flashx.textLayout.edit.SelectionManager;

import flashx.textLayout.edit.SelectionFormat;

import flashx.textLayout.edit.EditingMode;

import flashx.textLayout.conversion.TextConverter;

import flashx.textLayout.conversion.ConversionType;


public class XMLTextLayout extends Sprite

         {

         //Class Variables

         private var xmlData:XML;


         //Constructor

         public function XMLTextLayout(XMLFileURL:String)

                  {

                  var xmlLoader:URLLoader = new URLLoader();

                  xmlLoader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);

                  xmlLoader.addEventListener(Event.COMPLETE, xmlDataHandler);

                  xmlLoader.load(new URLRequest(XMLFileURL));

                  }


         private function xmlDataHandler(evt:Event):void

                  {

                  evt.target.removeEventListener(IOErrorEvent.IO_ERROR, errorHandler);

                  evt.target.removeEventListener(Event.COMPLETE, xmlDataHandler);

                  xmlData = new XML(evt.target.data);


                  var textLoader:URLLoader = new URLLoader();

                  textLoader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);

                  textLoader.addEventListener(Event.COMPLETE, initiateLayout);

                  textLoader.load(new URLRequest(xmlData.@textFileURL));

                  }


         private function errorHandler(evt:IOErrorEvent):void

         {

         throw(evt.text);

         }


         //Layout Text

         private function initiateLayout(evt:Event):void

                  {

                  evt.target.removeEventListener(IOErrorEvent.IO_ERROR, errorHandler);

                  evt.target.removeEventListener(Event.COMPLETE, initiateLayout);


                  var textFormat:TextLayoutFormat = new TextLayoutFormat();


                  for each (var formatProperty:XML in xmlData.format.*)

                           {

                           if (textFormat.hasOwnProperty(formatProperty.name()))

                           textFormat[formatProperty.name()] = formatProperty.toString();

                           }


                  var configuration:Configuration = new Configuration();

                  configuration.textFlowInitialFormat = textFormat;

                  configuration.focusedSelectionFormat = new SelectionFormat(xmlData.format.@highlightColor);


                  var textFlow:TextFlow = TextConverter.importToFlow(evt.target.data, xmlData.@conversionType, configuration);


                  for each (var element:XML in xmlData..container)

                           {

                           var sprite:Sprite = new Sprite();

                           sprite.graphics.drawRect(0, 0, element.width, element.height);

                           sprite.x = element.x;

                           sprite.y = element.y;

                           addChild(sprite);


                           textFlow.flowComposer.addController(new ContainerController(sprite, sprite.width, sprite.height));

                           }


                           textFlow.flowComposer.updateAllControllers();

                           textFlow.interactionManager = new SelectionManager();

                           textFlow.interactionManager.editingMode == EditingMode.READ_SELECT;

                           }

             }

}

<?XML version="1.0" encoding="UTF-8"?>


<textLayout textFileURL="Lorem Ipsum.txt" conversionType="plainTextFormat">


         <format highlightColor="0xFF0000">

                  <color>0xAA0000</color>

                  <fontSize>10.5</fontSize>

                  <fontWeight>bold</fontWeight>

                  <textAlign>left</textAlign>

                  <verticalAlign>middle</verticalAlign>

                  <columnCount>4</columnCount>

                  <paddingLeft>40</paddingLeft>

                  <paddingRight>40</paddingRight>

                  <paddingTop>40</paddingTop>

                  <paddingBottom>40</paddingBottom>

         </format>


         <container>

                  <x>0</x>

                  <y>0</y>

                  <width>500</width>

                  <height>600</height>

         </container>


         <container>

                  <x>500</x>

                  <y>70</y>

                  <width>500</width>

                  <height>480</height>

         </container>


</textLayout>

<!--

Notes:

1. Format element names must match the public property names of the TextLayoutFormat class.

2. ConversionType and format element values must match the string value of the property's public constant.

-->

Please see the attached zip file for the files associated with this solution.

This recipe was originally contributed by Geoffrey Mattie.