TileList コンポーネントの使用

TileList は、ICellRenderer インターフェイスを実装した Sprite を使用して、各セルをレンダリングします。 このレンダラーは、TileList の cellRenderer プロパティで指定できます。TileList コンポーネントのデフォルトの CellRenderer は ImageCell です。これにより、イメージ（クラス、ビットマップ、インスタンスまたは URL）やオプションのラベルを表示します。このラベルは単一行で、常にセルの下部に配置されます。 TileList は、1 方向だけにスクロールすることができます。

フォーカスを取得している TileList インスタンスでは、次のキーを使用して中のアイテムにアクセスすることも可能です。

TileList コンポーネントをアプリケーションに追加する際に、次の ActionScript コード行を追加することで、そのコンポーネントをスクリーンリーダーが読み取れるように設定できます。

import fl.accessibility.TileListAccImpl; 
 
TileListAccImpl.enableAccessibility();

1 つのコンポーネントに対してアクセシビリティ機能を有効化する処理は、そのコンポーネントがインスタンスをいくつ持つかに関係なく、一度だけ実行します。 詳しくは、『Flash ユーザーガイド』の第 18 章「アクセシビリティコンテンツの作成」を参照してください。

プロパティインスペクターまたはコンポーネントインスペクターで TileList コンポーネントの各インスタンスに設定できるオーサリングパラメーターは、 allowMultipleSelection 、 columnCount 、 columnWidth 、 dataProvider 、 direction 、 horizontalScrollLineSize 、 horizontalScrollPageSize 、 labels 、 rowCount 、 rowHeight 、 ScrollPolicy、verticalScrollLineSize、verticalScrollPageSize です。これらの各パラメーターには、対応する同名の ActionScript プロパティがあります。 dataProvider パラメーターの使用について詳しくは、 dataProvider パラメーターの使用 を参照してください。

ActionScript を記述すれば、TileList コンポーネントのメソッド、プロパティ、イベントを使用して、TileList インスタンスのその他のオプションを設定できます。 詳しくは、「 Adobe Flash Professional CS5 用 ActionScript 3.0 リファレンスガイド 」の TileList クラスを参照してください。

この例では、複数の MovieClip を使用して、TileList にペイントカラーの配列を格納します。

1. 新しい Flash (ActionScript 3.0) ドキュメントを作成します。

2. TileList コンポーネントをステージにドラッグし、インスタンス名を aTl にします。

3. アクションパネルを開いて、メインタイムライン内でフレーム 1 を選択し、次の ActionScript コードを入力します。

   import fl.data.DataProvider; 
   import flash.display.DisplayObject; 
    
   var aBoxes:Array = new Array(); 
   var i:uint = 0; 
   var colors:Array = new Array(0x00000, 0xFF0000, 0x0000CC, 0x00CC00, 0xFFFF00); 
   var colorNames:Array = new Array("Midnight", "Cranberry", "Sky", "Forest", "July"); 
   var dp:DataProvider = new DataProvider(); 
   for(i=0; i < colors.length; i++) { 
       aBoxes[i] = new MovieClip(); 
       drawBox(aBoxes[i], colors[i]);    // draw box w next color in array 
       dp.addItem( {label:colorNames[i], source:aBoxes[i]} ); 
   } 
   aTl.dataProvider = dp; 
   aTl.columnWidth = 110; 
   aTl.rowHeight = 130; 
   aTl.setSize(280,150); 
   aTl.move(150, 150); 
   aTl.setStyle("contentPadding", 5); 
    
   function drawBox(box:MovieClip,color:uint):void { 
               box.graphics.beginFill(color, 1.0); 
               box.graphics.drawRect(0, 0, 100, 100); 
               box.graphics.endFill();         
   }

4. 制御／ムービープレビューを選択してアプリケーションをテストします。