Praca z mechanizmem renderującym komórki

Poniższy przykładowy kod zawiera dwie klasy. Klasa ListSample tworzy instancję składnika List i wykorzystuje drugą klasę, CustomRenderer, do zdefiniowania mechanizmu renderującego komórki używanego ze składnikiem List. Klasa CustomRenderer rozszerza klasę CellRenderer.

1. Wybierz polecenie Plik > Nowy.

2. W wyświetlonym oknie dialogowym Nowy dokument wybierz typ Plik Flash (ActionScript 3.0), a następnie kliknij przycisk OK.

3. Wybierz polecenie Okno > Składniki, aby wyświetlić panel Składniki.

4. Przeciągnij składnik List z panelu Składniki na stół montażowy.

5. Jeśli w programie Flash nie zostanie wyświetlony Inspektor właściwości, wybierz polecenie Okno > Właściwości > Właściwości.

6. Po zaznaczeniu składnika List ustaw właściwości w Inspektorze właściwości:

   • Nazwa instancji: myList

   • Sz (szerokość): 200

   • W (wysokość): 300

   • X: 20

   • Y: 20

7. Na osi czasu wybierz klatkę nr 1 warstwy nr 1 i wybierz polecenie Okno > Operacje.

8. W panelu Operacje wpisz następujący skrypt.

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

9. Wybierz polecenie Plik > Zapisz. Nadaj plikowi nazwę i kliknij przycisk OK.

10. Wybierz polecenie Plik > Nowy.

11. W wyświetlonym oknie dialogowym Nowy dokument wybierz typ Plik ActionScript i kliknij przycisk OK.

12. W oknie skryptu wprowadź następujący kod w celu zdefiniowania klasy 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. Wybierz polecenie Plik > Zapisz. Nadaj plikowi nazwę CustomCellRenderer.as, umieść go w tym samym katalogu, co plik FLA, a następnie kliknij przycisk OK.

14. Wybierz polecenie Sterowanie > Testuj film.

Mechanizm renderujący komórki można również zdefiniować, używając dowolnej klasy, która dziedziczy z klasy DisplayObject i implementuje interfejs ICellRenderer. Poniższy przykładowy kod definiuje dwie klasy. Klasa ListSample2 dodaje obiekt List do listy wyświetlania i definiuje własny mechanizm renderujący komórki wykorzystujący klasę CustomRenderer. Klasa CustomRenderer rozszerza klasę CheckBox (która z kolei rozszerza klasę DisplayObject) i implementuje interfejs ICellRenderer. Należy zwrócić uwagę, że klasa CustomRenderer definiuje metody pobierające i ustawiające dla właściwości data i listData zdefiniowanych w interfejsie ICellRenderer. Pozostałe właściwości i metody zdefiniowane w interfejsie ICellRenderer (właściwość selected i metoda setSize() ) są już zdefiniowane w klasie CheckBox:

1. Wybierz polecenie Plik > Nowy.

2. W wyświetlonym oknie dialogowym Nowy dokument wybierz typ Plik Flash (ActionScript 3.0), a następnie kliknij przycisk OK.

3. Wybierz polecenie Okno > Składniki, aby wyświetlić panel Składniki.

4. Przeciągnij składnik List z panelu Składniki na stół montażowy.

5. Jeśli w programie Flash nie zostanie wyświetlony Inspektor właściwości, wybierz polecenie Okno > Właściwości > Właściwości.

6. Po zaznaczeniu składnika List ustaw właściwości w Inspektorze właściwości:

   • Nazwa instancji: myList

   • Sz (szerokość): 100

   • W (wysokość): 300

   • X: 20

   • Y: 20

7. Na osi czasu wybierz klatkę nr 1 warstwy nr 1 i wybierz polecenie Okno > Operacje.

8. W panelu Operacje wpisz następujący skrypt.

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

9. Wybierz polecenie Plik > Zapisz. Nadaj plikowi nazwę i kliknij przycisk OK.

10. Wybierz polecenie Plik > Nowy.

11. W wyświetlonym oknie dialogowym Nowy dokument wybierz typ Plik ActionScript i kliknij przycisk OK.

12. W oknie skryptu wprowadź następujący kod w celu zdefiniowania klasy 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. Wybierz polecenie Plik > Zapisz. Nadaj plikowi nazwę CustomCellRenderer.as, umieść go w tym samym katalogu, co plik FLA, a następnie kliknij przycisk OK.

14. Wybierz polecenie Sterowanie > Testuj film.

Do zdefiniowania mechanizmu renderującego komórki można także użyć symbolu z biblioteki. Symbol musi być wyeksportowany do użycia w kodzie ActionScript, a z nazwą klasy symbolu bibliotecznego musi być skojarzony plik klasy, która albo implementuje interfejs ICellRenderer, albo rozszerza klasę CellRenderer (bądź jedną z jej podklas).

W poniższym przykładzie niestandardowy mechanizm renderujący komórki jest definiowany przy użyciu symbolu z biblioteki.

1. Wybierz polecenie Plik > Nowy.

2. W wyświetlonym oknie dialogowym Nowy dokument wybierz typ Plik Flash (ActionScript 3.0), a następnie kliknij przycisk OK.

3. Wybierz polecenie Okno > Składniki, aby wyświetlić panel Składniki.

4. Przeciągnij składnik List z panelu Składniki na stół montażowy.

5. Jeśli w programie Flash nie zostanie wyświetlony Inspektor właściwości, wybierz polecenie Okno > Właściwości > Właściwości.

6. Po zaznaczeniu składnika List ustaw właściwości w Inspektorze właściwości:

   • Nazwa instancji: myList

   • Sz (szerokość): 100

   • W (wysokość): 400

   • X: 20

   • Y: 20

7. Kliknij panel Parametry, a następnie kliknij dwukrotnie drugą kolumnę w wierszu dataProvider.

8. W wyświetlonym oknie dialogowym Wartości kliknij dwa razy znak plus, aby dodać dwa elementy danych (z etykietami label0 i label1), a następnie kliknij przycisk OK.

9. Za pomocą narzędzia Tekst narysuj pole tekstowe na stole montażowym.

10. Po zaznaczeniu pola tekstowego ustaw właściwości w Inspektorze właściwości:

    • Typ tekstu: Tekst dynamiczny

    • Nazwa instancji: textField

    • Sz (szerokość): 100

    • Rozmiar czcionki: 24

    • X: 0

    • Y: 0

11. Po zaznaczeniu pola tekstowego wybierz polecenie Modyfikuj > Konwertuj na symbol.

12. W oknie dialogowym Konwertuj na symbol wybierz następujące ustawienia i kliknij przycisk OK.

    • Nazwa: MyCellRenderer

    • Typ: MovieClip

    • Eksportuj dla ActionScript: zaznaczone

    • Eksportuj w pierwszej klatce: zaznaczone

    • Klasa: MyCellRenderer

    • Klasa bazowa: flash.display.MovieClip

      Jeśli zostanie wyświetlone ostrzeżenie dotyczące klasy ActionScript, kliknij przycisk OK w oknie ostrzeżenia.

13. Usuń instancję nowego symbolu klipu filmowego ze stołu montażowego.

14. Na osi czasu wybierz klatkę nr 1 warstwy nr 1 i wybierz polecenie Okno > Operacje.

15. W panelu Operacje wpisz następujący skrypt.

    myList.setStyle("cellRenderer", MyCellRenderer);

16. Wybierz polecenie Plik > Zapisz. Nadaj plikowi nazwę i kliknij przycisk OK.

17. Wybierz polecenie Plik > Nowy.

18. W wyświetlonym oknie dialogowym Nowy dokument wybierz typ Plik ActionScript i kliknij przycisk OK.

19. W oknie skryptu wprowadź następujący kod w celu zdefiniowania klasy 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. Wybierz polecenie Plik > Zapisz. Nadaj plikowi nazwę MyCellRenderer.as, umieść go w tym samym katalogu, co plik FLA, a następnie kliknij przycisk OK.

21. Wybierz polecenie Sterowanie > Testuj film.