Text Layout Framework

Text Layout Framework
beta 1
フレームワーク解説
ver0.9
更新履歴
日付
バージョン
更新内容
2009/06/23
0.9
新規作成
2009/07/30
0.9
TLFがオープンソース化したため、DL先を変更
Text Layout Framework（TLF）とは
►
TextFieldクラスでは出来なかった、複雑なレイアウトやタイポグ
ラフィックをサポートするAS3ライブラリ

アラビア語のような右⇒左と、英語の左⇒右方向の文字列の混在
日本語・中国語向けの縦書のサポート
縦中横
数字表記・合字
カーニング・トラッキング・行送り・文字寄せ・上付き/下付き文字
段組
デモ色々（http://labs.adobe.com/technologies/textlayout/）
開発環境
►
実行環境
Flash Player 10（Flash Text Engine（FTE）を使用）
AIR１．５以降
►
開発環境
Flash CS4 Professional
Flex Gumbo beta
Flex 3.2
►
ダウンロード
Adobe Open Sourceにて（2009/07/20にオープンソース化）
http://opensource.adobe.com/wiki/display/tlf/Text+Layout+Frame
work
Flex SDK4.0 に含まれるtextLayout.swcを使用
Flashの場合は、パブリッシュ設定のライブラリパスに、swcへのパスを
追加して使用
TLFアーキテクチャ
►
MVCデザインパターン
►
Model（データの保持と、その構造・アクセス方法を定義）
Elementsパッケージ：テキストのデータ構造を定義
Formatsパッケージ：フォーマット情報を定義
Conversionクラス：インポート/エクスポートのルールを定義
►
View（ユーザへの表示を管理）
Factoryパッケージ：静的テキストの表示
Containerパッケージ：動的テキストの表示
Composeパッケージ：動的テキストの表示位置のコントロール
►
Controller（ユーザ操作によるインタラクションを通知）
Edit/operationsパッケージ：Modelのデータの編集等を管理
階層型テキストデータ
►
TLFでは、テキストデータを階層ツリー構造で扱う
XHTMLがベースで、使用するタグはPageMakerやInDesignに似ている

TextFlow: DivElement または ParagraphElement を子に持つ

DivElement <div> : DivElement または ParagraphElement を子に持つ

ParagraphElement <p> : SpanElement, InlineGraphicElement, LinkElement, TCYElement 等を子に持つ

SpanElement <span> : パラグラフ内のテキスト

InlineGraphicElement <img> : パラグラフ内に表示される画像URL

LinkElement <a> : リンク要素（href 属性にリンク先やイベントを指定）

TCYElement <tcy> : 縦書きの TextFlow 内で横に表示されるテキスト（TCY は縦中横の意）
フォーマット
►
TextLayoutFormat
テキストコンテナ・パラグラフ・文字単位のフォーマットを設定
ContainerController（TextFlowとコンテナの関係を定義するクラス）か
FlowElement （TextFlowオブジェクトの抽象クラス）のformatプロパティ
に、TextLayoutFormatクラスのインスタンスを適用する
個々のエレメントのプロパティで、フォーマットを上書きすることができる
► 例：TextFlowのレベルで文字色を青にしても、子のSpanElementで文字色
を黒に設定できる（全体の文字色は青でも、一部だけ黒になる）
► 階層ツリーの低下層の設定が優先される
静的テキストの表示
►
編集や選択、スクロールバーの表示が不要な場合は、静的テ
キストを使う
►
StringTextLineFactory
単行のTextLineオブジェクトのインスタンスを生成するクラス
► TextLine：
テキストを表示するのに必要な最小限の情報を保持するオブジェクト
►
TextFlowTextLineFactory
複数行のTextLineオブジェクトのインスタンスを生成するクラス
静的テキストのサンプルコード
StringTextLineFactory
TextFlowTextLineFactory
public class TextFlowTextLineFactory_example extends Sprite
{
public function TextFlowTextLineFactory_example()
{
var factory:TextFlowTextLineFactory = new TextFlowTextLineFactory();
public class StringTextLineFactoryExample extends Sprite
{
public function StringTextLineFactoryExample ()
{
var factory:StringTextLineFactory = new StringTextLineFactory ();
//表示領域の定義
factory.compositionBounds = new Rectangle( 100, 100, 200, 130 );
//TextFlowの生成
var flow:TextFlow = new TextFlow();
//表示領域の定義
factory.compositionBounds = new Rectangle( 100, 100, 200, 130 );
//フォーマットの設定
var format:TextLayoutFormat = new TextLayoutFormat();
format.fontSize = 32;
format.color = 0x000000;
//フォーマットの設定
var format:TextLayoutFormat = new TextLayoutFormat();
format.fontSize = 32;
format.color = 0x000000;
factory. spanFormat = format;
//Spanの生成
var span:SpanElement = new SpanElement();
span.text = "The quick brown fox jumped over the lazy dog.";
span.format = format;
//表示文字列
factory.text = "The quick brown fox jumped over the lazy dog.";
//Paragraphの生成
var para:ParagraphElement = new ParagraphElement();
para.addChild( span );
//TextLineオブジェクトを生成するメソッド
factory.createTextLines( useTextLines);
}
flow.addChild( para );
//コールバック関数
private function useTextLines( line:TextLine ):void
{
this.addChild( line );
}
//TextLineオブジェクトを生成するメソッド
factory.createTextLines( useTextLines, flow );
}
}
//コールバック関数
private function useTextLines( line:TextLine ):void
{
this.addChild( line );
}
}
動的テキストの表示
►
FlowComposer：
コンテナにはまるように、TextFlowをTextLineインスタンスに変換する
►
ContainerController：コンテナを管理する
FlowComposerとコンテナの関係を定義する
►
コンテナ：Spriteクラスのインスタンス
TextLineの領域を定義する
►
描画を更新するときは、flowComposer.updateAllcontainers()
動的テキストのサンプルコード
public class TextFlowExample extends Sprite
{
public function TextFlowExample()
{
//フォーマットの設定
var textLayoutFormat:TextLayoutFormat = new TextLayoutFormat();
textLayoutFormat.color = 0xFF0000;
textLayoutFormat.fontSize = 48;
//フォーマットのセット
var config:Configuration = new Configuration();
config.textFlowInitialFormat = textLayoutFormat;
//TextFlowの生成
var textFlow:TextFlow = new TextFlow(config);
var p:ParagraphElement = new ParagraphElement();
var span:SpanElement = new SpanElement();
span.text = "Hello, World!";
p.addChild(span);
textFlow.addChild(p);
//コントローラの追加
textFlow.flowComposer.addController(new ContainerController(this,500,200));
}
}
//描画の更新
textFlow.flowComposer.updateAllControllers();
テキストのインポート/エクスポート
►
TextFilterクラスのimportToFlow() でインポート
プレーンテキスト/Text Layout Markup（TLM）形式のXMLを読み込み
►
TextFilterクラスのexport()でエクスポート
TextFlowインスタンスを、プレーンテキスト/FXG/TLMで書き出し
►
Text Layout Markup
テキストの選択・編集・アンドゥ
►
SelectionManager
テキスト選択範囲の管理
SelectionManagerのイベントハンドラでは、キーボードやマウス操作で
のフォーカス検知ができる
►
EditManager
テキスト編集の管理
編集毎にFlowOperationのサブクラスのインスタンスを生成する
（例：挿入なら、InsertTextOperationクラス）⇒Undoで利用
►
UndoManager
アンドゥの管理
UndoManagerインスタンスは、複数のTeｘｔFlowを管理できる
►
これらのManagerを、TextFlow.interactionManagerプロパティ
にセットすることで有効になる

Download Report