CellRenderer ile çalışma

Örneğin, şu kod iki sınıf içerir. ListSample sınıfı bir List bileşenini başlatır ve List bileşeni için kullanılacak hücre oluşturucuyu tanımlamak üzere diğer sınıfı (CustomRenderer) kullanır. CustomRenderer sınıfı, CellRenderer sınıfını genişletir.

1. Dosya > Yeni'yi seçin.

2. Görüntülenen Yeni Belge iletişim kutusunda Flash Dosyası (ActionScript 3.0) öğesini seçip Tamam'ı tıklatın.

3. Bileşenler panelini görüntülemek için Pencere > Bileşenler seçeneklerini belirleyin.

4. Bileşenler panelinde, bir List bileşenini Sahne Alanı'na sürükleyin.

5. Flash uygulaması Özellik denetçisini görüntülemiyorsa, Pencere > Özellikler > Özellikler seçeneklerini belirleyin.

6. List bileşeni seçili durumdayken Özellik denetçisinde özellikleri ayarlayın:

   • Örnek Adı: myList

   • W (genişlik): 200

   • H (yükseklik): 300

   • X: 20

   • Y: 20

7. Zaman Çizelgesi'nde Kare 1'i seçin ve Pencere > Eylemler seçeneklerini belirleyin.

8. Eylemler paneline şu komut dosyasını yazın:

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

9. Dosya > Kaydet'i seçin. Dosyaya bir ad verin ve Tamam düğmesini tıklatın.

10. Dosya > Yeni'yi seçin.

11. Yeni Belge iletişim kutusunda ActionScript Dosyası'nı seçip Tamam düğmesini tıklatın.

12. Komut dosyası penceresinde, CustomCellRenderer sınıfını tanımlamak için şu kodu girin:

    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. Dosya > Kaydet'i seçin. Dosyayı CustomCellRenderer.as olarak adlandırın ve FLA dosyasıyla aynı dizine koyup Tamam düğmesini tıklatın.

14. Kontrol Et > Filmi Test Et'i seçin.

DisplayObject sınıfını miras alıp ICellRenderer arabirimini uygulayan herhangi bir sınıfı kullanarak da CellRenderer öğesini tanımlayabilirsiniz. Örneğin, şu kod iki sınıfı tanımlar. ListSample2 sınıfı, List nesnesini görüntüleme listesine ekler ve CustomRenderer sınıfını kullanmak için CellRenderer öğesini tanımlar. CustomRenderer sınıfı, CheckBox sınıfını (DisplayObject sınıfını genişleten) genişletir ve ICellRenderer arabirimini uygular. CustomRenderer sınıfının ICellRenderer arabiriminde tanımlanan data ve listData özellikleri için getter ve setter yöntemleri tanımladığını unutmayın. ICellRenderer arabiriminde tanımlanan diğer özellik ve yöntemler ( selected özelliği ve setSize() yöntemi) önceden CheckBox sınıfında tanımlanmıştır:

1. Dosya > Yeni'yi seçin.

2. Görüntülenen Yeni Belge iletişim kutusunda Flash Dosyası (ActionScript 3.0) öğesini seçip Tamam'ı tıklatın.

3. Bileşenler panelini görüntülemek için Pencere > Bileşenler seçeneklerini belirleyin.

4. Bileşenler panelinde, bir List bileşenini Sahne Alanı'na sürükleyin.

5. Flash uygulaması Özellik denetçisini görüntülemiyorsa, Pencere > Özellikler > Özellikler seçeneklerini belirleyin.

6. List bileşeni seçili durumdayken Özellik denetçisinde özellikleri ayarlayın:

   • Örnek Adı: myList

   • W (genişlik): 100

   • H (yükseklik): 300

   • X: 20

   • Y: 20

7. Zaman Çizelgesi'nde Kare 1'i seçin ve Pencere > Eylemler seçeneklerini belirleyin.

8. Eylemler paneline şu komut dosyasını yazın:

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

9. Dosya > Kaydet'i seçin. Dosyaya bir ad verin ve Tamam düğmesini tıklatın.

10. Dosya > Yeni'yi seçin.

11. Yeni Belge iletişim kutusunda ActionScript Dosyası'nı seçip Tamam düğmesini tıklatın.

12. Komut dosyası penceresinde, CustomCellRenderer sınıfını tanımlamak için şu kodu girin:

    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. Dosya > Kaydet'i seçin. Dosyayı CustomCellRenderer.as olarak adlandırın ve FLA dosyasıyla aynı dizine koyup Tamam düğmesini tıklatın.

14. Kontrol Et > Filmi Test Et'i seçin.

CellRenderer tanımlamak için kütüphanede bir sembol de kullanabilirsiniz. Sembolün ActionScript için dışa aktarılması ve kütüphane sembolünün sınıf adının ICellRenderer arabirimini uygulayan veya CellRenderer sınıfını (ya da alt sınıflarından birini) genişleten ilişkilendirilmiş bir sınıf dosyasına sahip olması gerekir.

Aşağıdaki örnek, kütüphane sembolünü kullanarak özel bir CellRenderer öğesini tanımlar.

1. Dosya > Yeni'yi seçin.

2. Görüntülenen Yeni Belge iletişim kutusunda Flash Dosyası (ActionScript 3.0) öğesini seçip Tamam'ı tıklatın.

3. Bileşenler panelini görüntülemek için Pencere > Bileşenler seçeneklerini belirleyin.

4. Bileşenler panelinde, bir List bileşenini Sahne Alanı'na sürükleyin.

5. Flash uygulaması Özellik denetçisini görüntülemiyorsa, Pencere > Özellikler > Özellikler seçeneklerini belirleyin.

6. List bileşeni seçili durumdayken Özellik denetçisinde özellikleri ayarlayın:

   • Örnek Adı: myList

   • W (genişlik): 100

   • H (yükseklik): 400

   • X: 20

   • Y: 20

7. Parametreler panelini tıklatın ve dataProvider satırında ikinci sütunu çift tıklatın.

8. Değerler iletişim kutusunda, iki veri öğesini (etiketleri label0 ve label1 olarak ayarlanmış şekilde) eklemek için artı işaretini iki defa tıklatın ve sonra da Tamam düğmesini tıklatın.

9. Metin aracıyla Sahne Alanı'nda bir metin alanı çizin.

10. Metin alanı seçili durumdayken Özellik denetçisinde özellikleri ayarlayın:

    • Metin türü: Dinamik Metin

    • Örnek Adı: textField

    • W (genişlik): 100

    • Font boyutu: 24

    • X: 0

    • Y: 0

11. Metin alanı seçili durumdayken, Değiştir > Sembole Dönüştür seçeneklerini belirleyin.

12. Sembole Dönüştür iletişim kutusunda şu ayarları yapın ve Tamam'ı tıklatın.

    • Ad: MyCellRenderer

    • Tür: MovieClip

    • ActionScript için Dışa Aktar: Seçili

    • İlk Karede Dışa Aktar: Seçili

    • Sınıf: MyCellRenderer

    • Temel Sınıf: flash.display.MovieClip

      Flash uygulaması bir ActionScript Sınıf Uyarısı görüntülerse, uyarı kutusunda Tamam düğmesini tıklatın.

13. Yeni film klibi örneğinin sembolünü Sahne Alanı'ndan silin.

14. Zaman Çizelgesi'nde Kare 1'i seçin ve Pencere > Eylemler seçeneklerini belirleyin.

15. Eylemler paneline şu komut dosyasını yazın:

    myList.setStyle("cellRenderer", MyCellRenderer);

16. Dosya > Kaydet'i seçin. Dosyaya bir ad verin ve Tamam düğmesini tıklatın.

17. Dosya > Yeni'yi seçin.

18. Yeni Belge iletişim kutusunda ActionScript Dosyası'nı seçip Tamam düğmesini tıklatın.

19. Komut dosyası penceresinde, MyCellRenderer sınıfını tanımlamak için şu kodu girin:

    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. Dosya > Kaydet'i seçin. Dosyayı MyCellRenderer.as olarak adlandırın ve FLA dosyasıyla aynı dizine koyup Tamam düğmesini tıklatın.

21. Kontrol Et > Filmi Test Et'i seçin.