前回の第39回「TLFTextFieldクラスを使う」の結びで述べたとおり、Text Layout FrameworkはTLFテキストのためだけのフレームワークではない。今回は、フレームワークに含まれるクラスを使ったテキストコンテンツの扱い方について解説しよう。

Text Layout Frameworkは「高度なテキスト編集およびレイアウト機能」を提供する。このフレームワークは「ActionScript 3.0で記述された独立したコンポーネントライブラリ」だ[1]⁠。ライブラリの各クラスは、テキストの構造とフォーマットやその表示、さらに編集操作などの役割を、それぞれ分けて担っている。

Text Layout Framework Markup形式のXMLからTextFlowオブジェクトをつくる

テキストコンテンツは、TextFlowオブジェクトに構造化して納める。Text Layout Frameworkは、XHTMLを参考にしてテキストの構造化を定めた。構造化したTextFlowオブジェクトのつくり方はいくつかある。応用しやすいのは、XMLデータをTextFlowオブジェクトに変換することだろう。その場合、静的メソッドTextConverter.importToFlow()を用いる。

TextConverter.importToFlow(ソースデータ, データ形式)

ソースのXMLデータは、後に説明するText Layout Framework Markup形式でマークアップしておく。その場合、TextConverter.importToFlow()メソッドの第2引数には定数TextConverter.TEXT_LAYOUT_FORMATを渡す（表1⁠）⁠。

マークアップに使えるタグは、[ヘルプ]の「Text Layout Frameworkのモデル」で「Text Layout Framework Markup」の項に一覧表が掲げられているので、参照してほしい。エレメントは、それぞれ定められた子エレメントがもてる（表2⁠）⁠。単純なテキストは、つぎのようにエレメントを構造化する。なお、各エレメントには、それを扱うクラスが決められている。

<TextFlow>
  <p>
    <span>
    テキスト
    </span>
  </p>
</TextFlow>

エレメントのタグには、TextLayoutFormatクラスのプロパティでフォーマットをXML属性として記述できる。たとえば、つぎのフレームアクションにより、段落（p）の位置揃え（textAlign）を中央（center）にし、テキスト範囲（span）にはImpact（fontFamily）の18ポイント（fontSize）でフォントを設定したテキストのTextFlowインスタンスがつくられる。

import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.conversion.TextConverter;
var markUp:XML = <TextFlow xmlns='http://ns.adobe.com/textLayout/2008'>
  <p textAlign='center'><span fontFamily='Impact' fontSize='18'>
  Text Layout Framework
  </span></p>
</TextFlow>;
var myFlow:TextFlow = TextConverter.importToFlow(markUp, TextConverter.TEXT_LAYOUT_FORMAT);
trace(myFlow.getText());   // テキストを確認

注意が2つある。第1に、TextFlowオブジェクトは構造化されたテキストやそのフォーマット指定をデータとしてもつだけで、そのままステージには表示できない。そこで、オブジェクトに設定されたテキストをgetText()メソッドで調べ、TextFlowインスタンスがつくられたことを確かめた（図1⁠）⁠。

第2は、TextFlowタグにxmlns属性でXML名前空間を宣言することだ（図1参照⁠）⁠。これがないと、TextConverter.importToFlow()メソッドがTextFlowインスタンスを生成できず、nullを返してしまう（図2⁠）⁠。

フローコンポーザーでテキストコンテンツを表示する

TextFlowオブジェクトがもつ構造化されたテキストやそのフォーマット指定のデータをステージに表示する役割は、フローコンポーザーが担う。フローコンポーザーのオブジェクトは、前回紹介したTextFlow.flowComposerプロパティからその参照が得られる。フローコンポーザーは、インターフェイスIFlowComposerを実装するクラスのオブジェクトだ。

テキストコンテンツは、Spriteインスタンスをコンテナとして流し込まれる。そのSpriteインスタンスとTextFlowインスタンスを結びつけ、テキストの表示領域を定めるのがContainerControllerオブジェクトだ。コンストラクタメソッドには、コンテナのSpriteインスタンスおよびテキスト領域の幅と高さを渡す。そして、そのオブジェクトをIFlowComposer.addController()メソッドの引数に渡すと、TextFlowインスタンスのコンテナが加わる（図3⁠）⁠。

new ContainerController(コンテナSprite, テキスト領域幅, テキスト領域高さ)

IFlowComposerオブジェクト.addController(ContainerControllerオブジェクト)

フローコンポーザーで、前掲フレームアクションのテキストコンテンツを表示してみよう（図4⁠）⁠。前掲フレームアクションにフローコンポーザーの処理を加えたのが、つぎのスクリプト1だ。前回説明したとおり、フローコンポーザーにテキストコンテンツを表示させるには、IFlowComposer.updateAllControllers()メソッドの呼出しが必要になる。

// フレームアクション
import flash.display.Sprite;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.conversion.TextConverter;
import flashx.textLayout.container.ContainerController;
import flashx.textLayout.compose.IFlowComposer;
var container:Sprite = new Sprite();
var markUp:XML = <TextFlow xmlns='http://ns.adobe.com/textLayout/2008'>
  <p textAlign='center'><span fontFamily='Impact' fontSize='18'>
  Text Layout Framework
  </span></p>
</TextFlow>;
var myFlow:TextFlow = TextConverter.importToFlow(markUp, TextConverter.TEXT_LAYOUT_FORMAT);
var controller:ContainerController = new ContainerController(container, 240, 100);
var composer:IFlowComposer = myFlow.flowComposer;
addChild(container);
composer.addController(controller);
composer.updateAllControllers();

次回でText Layout Frameworkの説明は終える。外部XMLファイルからText Layout Framework Markup形式のデータを読み込んだ後、ユーザーインタラクションを加える。