前回の第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 ) 。
表1 TextConverterクラスの定数
マークアップに使えるタグは、[ヘルプ]の「Text Layout Frameworkのモデル」で「Text Layout Framework Markup 」の項に一覧表が掲げられているので、参照してほしい。エレメントは、それぞれ定められた子エレメントがもてる(表2 ) 。単純なテキストは、つぎのようにエレメントを構造化する。なお、各エレメントには、それを扱うクラスが決められている。
<TextFlow>
<p>
<span>
テキスト
</span>
</p>
</TextFlow>
表2 単純なテキストコンテンツを構造化するためのエレメントと対応するクラス
エレメントのタグには、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 ) 。
図1 Text Layout Framework Markup形式のデータから生成したTextFlowオブジェクトのテキストを確認
第2は、TextFlowタグにxmlns属性でXML名前空間を宣言することだ(図1参照 ) 。これがないと、TextConverter.importToFlow()メソッドがTextFlowインスタンスを生成できず、nullを返してしまう(図2 ) 。
図2 xmlns属性がないとTextConverter.importToFlow()メソッドはTextFlowインスタンスを生成しない
フローコンポーザーでテキストコンテンツを表示する
TextFlowオブジェクトがもつ構造化されたテキストやそのフォーマット指定のデータをステージに表示する役割は、フローコンポーザーが担う。フローコンポーザーのオブジェクトは、前回紹介したTextFlow.flowComposerプロパティからその参照が得られる。フローコンポーザーは、インターフェイスIFlowComposer を実装するクラスのオブジェクトだ。
テキストコンテンツは、Spriteインスタンスをコンテナとして流し込まれる。そのSpriteインスタンスとTextFlowインスタンスを結びつけ、テキストの表示領域を定めるのがContainerControllerオブジェクトだ。コンストラクタメソッド には、コンテナのSpriteインスタンスおよびテキスト領域の幅と高さを渡す。そして、そのオブジェクトをIFlowComposer.addController()メソッド の引数に渡すと、TextFlowインスタンスのコンテナが加わる(図3 ) 。
new ContainerController(コンテナSprite, テキスト領域幅, テキスト領域高さ)
IFlowComposerオブジェクト.addController(ContainerControllerオブジェクト)
図3 Text Layout Frameworkにおけるオブジェクトの関係
フローコンポーザーで、前掲フレームアクションのテキストコンテンツを表示してみよう(図4 ) 。前掲フレームアクションにフローコンポーザーの処理を加えたのが、つぎのスクリプト1だ。前回説明したとおり、フローコンポーザーにテキストコンテンツを表示させるには、IFlowComposer.updateAllControllers()メソッドの呼出しが必要になる。
スクリプト1 Text Layout FrameworkでXML形式のテキストコンテンツをステージに配置する
// フレームアクション
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 ();
図4 フローコンポーザーでテキストがステージに表示された
次回でText Layout Frameworkの説明は終える。外部XMLファイルからText Layout Framework Markup形式のデータを読み込んだ後、ユーザーインタラクションを加える。
今回解説した次のサンプルファイルがダウンロードできます。