Flash Player 10 以降、Adobe AIR 1.5 以降

Text Layout Framework のビュー

テキストをモデルに格納すると、ビューでテキストを表示できます。フロー階層で定義されたモデルに格納されているテキストは、Flash Player で表示可能なフォーマットに変換する必要があります。Text Layout Framework では、フローから表示オブジェクトを作成する方法が 2 通りあります。静的テキストを表示するのに適した単純なアプローチと、テキストの選択と編集が可能なより複雑なアプローチです。いずれの場合も、テキストは最終的に、Flash Player 10 の flash.text.engine パッケージの一部である、TextLine クラスのインスタンスに変換されます。

TextFlowTextLineFactory を使用したコンテンツの表示

単純なアプローチでは、flashx.textLayout.factory パッケージ内にある TextFlowTextLineFactory クラスを使用します。このアプローチの利点は、単純であるということ以上に、FlowComposer アプローチよりメモリフットプリントが小さいという点です。このアプローチは、ユーザーが編集、選択またはスクロールする必要がない静的テキストに適しています。

TextFlowTextLineFactory クラスは、createTextLines() という名前のメソッドを提供します。このメソッドは、TextFlow インスタンスのテキストを、表示可能な一連の TextLine インスタンスに変換します。このアプローチには、単純な 4 つの手順のプロセスがあります。最初に、TextFlowTextLineFactory クラスのインスタンスを作成します。2 番目に、テキストのバウンディングボックスとして機能する Rectangle インスタンスを作成し、それを compositionBounds プロパティに割り当てます。3 番目に、createTextLines() メソッドによって各 TextLine インスタンスが作成された後に呼び出すコールバック関数を作成します。コールバック関数では、TextLine インスタンスを Flash Player 表示リストに追加する必要があります。4 番目に、createTextLines() メソッドを 2 つの引数(コールバック関数の名前と TextFlow インスタンスの名前)を指定して呼び出します。次の例では、TextFlowTextLineFactory クラスを使用して「Hello, World」という文字列を表示する方法を示します。

package { 
    import flash.display.Sprite; 
     
    import flash.text.engine.TextLine; 
    import flash.geom.Rectangle; 
    import flashx.textLayout.elements.ParagraphElement; 
    import flashx.textLayout.elements.SpanElement; 
    import flashx.textLayout.elements.TextFlow; 
    import flashx.textLayout.factory.TextFlowTextLineFactory; 
     
    public class TextFlowTextLineFactoryExample extends Sprite 
    {       
     
        public function TextFlowTextLineFactoryExample() 
        { 
            // create the TextFlow and FlowElements 
            var myFlow:TextFlow = new TextFlow(); 
            var para:ParagraphElement = new ParagraphElement(); 
            var span:SpanElement = new SpanElement(); 
            span.text = "Hello, World"; 
            para.addChild(span); 
            myFlow.addChild(para); 
         
            // create an instance of the TextFlowTextLineFactory class 
            var factory:TextFlowTextLineFactory = new TextFlowTextLineFactory(); 
             
            // create a bounding rectangle 
            factory.compositionBounds = new Rectangle(0,0,300,100); 
             
            // call createTextLines() 
            factory.createTextLines(callback, myFlow);    
        } 
         
        // create a callback function 
        private    function callback(txLine:TextLine):void        { 
             addChild(txLine); 
        } 
    } 
}

フローコンポーザーを使用したコンテンツの表示

フローコンポーザーは、TextFlowTextLineFactory よりもテキストの表示をより詳細に制御する場合に使用します。例えば、フローコンポーザーを使用すると、ユーザーはテキストを選択および編集できます。フローコンポーザーとは、flashx.textLayout.compose パッケージ内にある StandardFlowComposer クラスのインスタンスであり、TextFlow を TextLine インスタンスに変換することだけでなく、これらの TextLine インスタンスを 1 つ以上のコンテナに配置することも管理するオブジェクトです。

フルサイズのグラフィックを表示
IFlowComposer には 0 個以上の ContainerController があります。

各 TextFlow インスタンスには、IFlowComposer インターフェイスを実装する、対応するオブジェクトがあります。この IFlowComposer オブジェクトには、TextFlow.flowComposer プロパティを通じてアクセス可能です。このプロパティを通じて、テキストを 1 つ以上のコンテナに関連付け、テキストをコンテナ内で表示可能にする IFlowComposer インターフェイスで定義されたメソッドを呼び出せます。

注意: 現在、フレームワーク内の StandardFlowComposer という 1 つのクラスのみが IFlowComposer インターフェイスを実装します。現時点では、TextFlow.flowComposer プロパティは、null であるか、または StandardFlowComposer のインスタンスをポイントします。今後、IFlowComposer も実装する新しいクラスがフレームワークに追加される可能性があります。

コンテナは、DisplayObjectContainer クラスのサブクラスである Sprite クラスのインスタンスです。これらのクラスは両方とも、Flash Player 表示リスト API. の一部です。Flash Player 表示リストに関する知識がない場合は、DisplayObjectContainer を、Flash Player でレンダリング可能なフォーマットのオブジェクトのコンテナと見なしてください。

コンテナは、TextLineFactory クラスで使用される境界を示す矩形のより高度な形式です。境界を示す矩形と同様に、コンテナでは TextLine インスタンスが表示される領域を定義します。しかし、境界を示す矩形とは異なり、コンテナには対応する「コントローラー」オブジェクトがあります。それを使用して、1 つまたは一連のコンテナのスクロール、リンク、フォーマットおよびイベント処理を制御できます。

高度なフォーマット、構成の境界、スクロールオプションなどの強化された機能は、コントローラーオブジェクトによって管理され、コントローラーオブジェクトに格納されます。各コンテナには、flashx.textLayout.container パッケージ内にある ContainerController クラスのインスタンスである対応するコントローラーオブジェクトがあります。

TextFlow に値を設定し、TextFlow を画面上に表示する準備ができたら、コンテナを管理するコントローラーオブジェクトを作成し、それをフローコンポーザーに関連付けます。コンテナを関連付けたら、テキストを表示できるように構成します。このように、コンテナには構成と表示の 2 つの状態があります。構成は、テキストフロー階層のテキストを TextLine インスタンスに変換し、これらのインスタンスがコンテナに収まるかどうかを計算するプロセスです。表示は、Flash Player 表示リストを更新するプロセスです。

例えば、次のコードは、myFlow という名前の TextFlow インスタンスと、それを表示するためのコントローラーオブジェクトを作成します。作成されたコントローラーオブジェクトは、TextFlow の flowComposer プロパティに関連付ける必要があります。最後に、updateAllContainers() メソッドへの呼び出しによってテキストが構成され、表示リストが更新されます。

// import necessary classes 
import flashx.textLayout.container.*; 
import flashx.textLayout.compose.*; 
import flashx.textLayout.elements.TextFlow; 
import flashx.textLayout.conversion.TextConverter; 
 
// first, create a TextFlow instance named myFlow 
var markup:XML = <TextFlow><p><span>Hello, World</span></p></TextFlow>; 
var myFlow:TextFlow = TextConverter.importToFlow(markup, TextConverter.TEXT_LAYOUT_FORMAT); 
 
// second, create a controller 
// the first parameter, this, must point to a DisplayObjectContainer 
// the last two parameters set the initial size of the container in pixels 
var contr:ContainerController = new ContainerController(this, 600, 600); 
 
// third, associate it with the flowComposer property 
myFlow.flowComposer.addController(contr); 
 
// fourth, update the display list 
myFlow.flowComposer.updateAllContainers();