CellRenderer の操作

例えば、次のコードには 2 つのクラスが含まれています。 ListSample クラスは List コンポーネントをインスタンス化し、他のクラスの CustomRenderer を使用して List コンポーネントに使用するセルレンダラーを定義します。 CustomRenderer クラスは CellRenderer クラスを拡張します。

1. ファイル／新規を選択します。

2. 表示される新規ドキュメントダイアログボックスで、「Flash ファイル (ActionScript 3.0)」を選択して、「OK」をクリックします。

3. ウィンドウ／コンポーネントを選択して、コンポーネントパネルを表示します。

4. コンポーネントパネルで、List コンポーネントをステージまでドラッグします。

5. プロパティインスペクターが表示されていない場合は、ウィンドウ／プロパティ／プロパティを選択します。

6. List コンポーネントを選択した状態で、プロパティインスペクターでプロパティを設定します。

   • インスタンス名：myList

   • W（幅）：200

   • H（高さ）：300

   • X：20

   • Y：20

7. タイムラインのレイヤー 1 のフレーム 1 を選択し、ウィンドウ／アクションを選択します。

8. アクションパネルで、次のスクリプトを入力します。

   myList.setStyle("cellRenderer", CustomCellRenderer); 
   myList.addItem({label:"Burger -- $5.95"}); 
   myList.addItem({label:"Fries -- $1.95"});

9. ファイル／保存を選択します。ファイル名を指定し、「OK」ボタンをクリックします。

10. ファイル／新規を選択します。

11. 表示される新規ドキュメントダイアログボックスで、「ActionScript ファイル」を選択して、「OK」をクリックします。

12. スクリプトウィンドウで、次のコードを入力し、CustomCellRenderer クラスを定義します。

    package { 
        import fl.controls.listClasses.CellRenderer; 
        import flash.text.TextFormat; 
        import flash.filters.BevelFilter; 
        public class CustomCellRenderer extends CellRenderer { 
            public function CustomCellRenderer() { 
                var format:TextFormat = new TextFormat("Verdana", 12); 
                setStyle("textFormat", format); 
                this.filters = [new BevelFilter()]; 
            } 
        } 
    }

13. ファイル／保存を選択します。CustomCellRenderer.as ファイルに名前を付けて、FLA ファイルと同じディレクトリに入れ、「OK」をクリックします。

14. 制御／ムービープレビューを選択します。

DisplayObject クラスを継承し、ICellRenderer インターフェイスを実装するいずれかのクラスを使用して CellRenderer を定義することもできます。 例えば、次のコードは 2 つのクラスを定義します。 ListSample2 クラスは List オブジェクトを表示リストに追加し、その CellRenderer を定義して CustomRenderer クラスを使用します。 CustomRenderer クラスは CheckBox クラスを拡張し (CheckBox クラスは DisplayObject クラスを拡張する)、ICellRenderer インターフェイスを実装します。 CustomRenderer クラスは、ICellRenderer インターフェイスに定義された data プロパティと listData プロパティに関する getter メソッドと setter メソッドを定義します。ICellRenderer インターフェイスに定義されたその他のプロパティとメソッド（ selected プロパティと setSize() メソッド）は既に CheckBox クラスに定義されています。

1. ファイル／新規を選択します。

2. 表示される新規ドキュメントダイアログボックスで、「Flash ファイル (ActionScript 3.0)」を選択して、「OK」をクリックします。

3. ウィンドウ／コンポーネントを選択して、コンポーネントパネルを表示します。

4. コンポーネントパネルで、List コンポーネントをステージまでドラッグします。

5. プロパティインスペクターが表示されていない場合は、ウィンドウ／プロパティ／プロパティを選択します。

6. List コンポーネントを選択した状態で、プロパティインスペクターでプロパティを設定します。

   • インスタンス名：myList

   • W（幅）：100

   • H（高さ）：300

   • X：20

   • Y：20

7. タイムラインのレイヤー 1 のフレーム 1 を選択し、ウィンドウ／アクションを選択します。

8. アクションパネルで、次のスクリプトを入力します。

   myList.setStyle("cellRenderer", CustomCellRenderer); 
   myList.addItem({name:"Burger", price:"$5.95"}); 
   myList.addItem({name:"Fries", price:"$1.95"});

9. ファイル／保存を選択します。ファイル名を指定し、「OK」ボタンをクリックします。

10. ファイル／新規を選択します。

11. 表示される新規ドキュメントダイアログボックスで、「ActionScript ファイル」を選択して、「OK」をクリックします。

12. スクリプトウィンドウで、次のコードを入力し、CustomCellRenderer クラスを定義します。

    package 
    { 
        import fl.controls.CheckBox; 
        import fl.controls.listClasses.ICellRenderer; 
        import fl.controls.listClasses.ListData; 
        public class CustomCellRenderer extends CheckBox implements ICellRenderer { 
            private var _listData:ListData; 
            private var _data:Object; 
            public function CustomCellRenderer() { 
            } 
            public function set data(d:Object):void { 
                _data = d; 
                label = d.label; 
            } 
            public function get data():Object { 
                return _data; 
            } 
            public function set listData(ld:ListData):void { 
                _listData = ld; 
            } 
            public function get listData():ListData { 
                return _listData; 
            } 
        } 
    }

13. ファイル／保存を選択します。CustomCellRenderer.as ファイルに名前を付けて、FLA ファイルと同じディレクトリに入れ、「OK」をクリックします。

14. 制御／ムービープレビューを選択します。

ライブラリのシンボルを使用して CellRenderer を定義することもできます。 シンボルを ActionScript 用に書き出す必要があります。また、ライブラリシンボルのクラス名に、ICellRenderer インターフェイスを実装するか、CellRenderer クラス (またはそのサブクラスの 1 つ) を拡張するクラスファイルが関連付けられていることが必要です。

次の例では、ライブラリシンボルを使用してカスタム CellRenderer を定義します。

1. ファイル／新規を選択します。

2. 表示される新規ドキュメントダイアログボックスで、「Flash ファイル (ActionScript 3.0)」を選択して、「OK」をクリックします。

3. ウィンドウ／コンポーネントを選択して、コンポーネントパネルを表示します。

4. コンポーネントパネルで、List コンポーネントをステージまでドラッグします。

5. プロパティインスペクターが表示されていない場合は、ウィンドウ／プロパティ／プロパティを選択します。

6. List コンポーネントを選択した状態で、プロパティインスペクターでプロパティを設定します。

   • インスタンス名：myList

   • W（幅）：100

   • H（高さ）：400

   • X：20

   • Y:20

7. パラメーターパネルをクリックして、dataProvider 行の 2 列目をダブルクリックします。

8. 表示される値ダイアログボックスで、プラス記号 (+) を 2 回クリックして (ラベルが label0 と label1 に設定された) 2 つのデータエレメントを追加し、「OK」をクリックします。

9. テキストツールで、ステージ上のテキストフィールドを描画します。

10. テキストフィールドを選択した状態で、プロパティインスペクターでプロパティを設定します。

    • テキストタイプ：ダイナミックテキスト

    • インスタンス名：textField

    • W（幅）:100

    • フォントサイズ：24

    • x：0

    • Y：0

11. テキストフィールドを選択した状態で、修正／シンボルに変換を選択します。

12. シンボルに変換ダイアログボックスで次の設定を行い、「OK」をクリックします。

    • 名前：MyCellRenderer

    • タイプ：MovieClip

    • ActionScript 用に書き出し：オン

    • 最初のフレームに書き出し：オン

    • クラス：MyCellRenderer

    • 基本クラス：flash.display.MovieClip

      ActionScript クラス警告が表示されたら、警告ボックスの「OK」ボタンをクリックします。

13. 新しいムービークリップシンボルのインスタンスをステージから削除します。

14. タイムラインのレイヤー 1 のフレーム 1 を選択し、ウィンドウ／アクションを選択します。

15. アクションパネルで、次のスクリプトを入力します。

    myList.setStyle("cellRenderer", MyCellRenderer);

16. ファイル／保存を選択します。ファイル名を指定し、「OK」ボタンをクリックします。

17. ファイル／新規を選択します。

18. 表示される「新規ドキュメント」ダイアログボックスで、「ActionScript ファイル」を選択して、「OK」をクリックします。

19. スクリプトウィンドウで、次のコードを入力し、MyCellRenderer クラスを定義します。

    package { 
        import flash.display.MovieClip; 
        import flash.filters.GlowFilter; 
        import flash.text.TextField; 
        import fl.controls.listClasses.ICellRenderer; 
        import fl.controls.listClasses.ListData; 
        import flash.utils.setInterval; 
        public class MyCellRenderer extends MovieClip implements ICellRenderer { 
            private var _listData:ListData; 
            private var _data:Object; 
            private var _selected:Boolean; 
            private var glowFilter:GlowFilter; 
            public function MyCellRenderer() { 
                glowFilter = new GlowFilter(0xFFFF00); 
                setInterval(toggleFilter, 200); 
            } 
            public function set data(d:Object):void { 
                _data = d; 
                textField.text = d.label; 
            } 
            public function get data():Object { 
                return _data; 
            } 
            public function set listData(ld:ListData):void { 
                _listData = ld; 
            } 
            public function get listData():ListData { 
                return _listData; 
            } 
            public function set selected(s:Boolean):void { 
                _selected = s; 
            } 
            public function get selected():Boolean { 
                return _selected; 
            } 
            public function setSize(width:Number, height:Number):void { 
            } 
            public function setStyle(style:String, value:Object):void { 
            } 
            public function setMouseState(state:String):void{ 
            } 
            private function toggleFilter():void { 
                if (textField.filters.length == 0) { 
                    textField.filters = [glowFilter]; 
                } else { 
                    textField.filters = []; 
                } 
            } 
        } 
    }    

20. ファイル／保存を選択します。MyCellRenderer.as ファイルに名前を付けて、FLA ファイルと同じディレクトリに入れ、「OK」をクリックします。

21. 制御／ムービープレビューを選択します。