TileList bileşenini kullanma

TileList bileşeni, bir veri sağlayıcısının sunduğu verilerle birlikte gelen satır ve sütunlardan oluşan bir listeden oluşur. Bir item , TileList içindeki bir hücrede saklanan veri birimini ifade eder. Veri sağlayıcısının sunduğu bir öğe genellikle bir label özelliğine ve bir source özelliğine sahiptir. label özelliği, bir hücrede görüntülenecek içeriği tanımlarken source öğesi de bunun için bir değer sağlar.

Bir Array örneği oluşturabilir veya sunucudan bir Array örneği alabilirsiniz. TileList bileşeni, veri sağlayıcısı için proxy olarak çalışan addItem() ve removeItem() gibi yöntemlere sahiptir. Listeye herhangi bir harici veri sağlayıcısı sağlanmazsa, bu yöntemler otomatik olarak List.dataProvider üzerinden kullanıma sunulan bir veri sağlayıcısı oluşturur.

TileList bileşeniyle kullanıcı etkileşimi

TileList öğesi, her bir hücreyi ICellRenderer arabirimini uygulayan bir Sprite öğesini kullanarak oluşturur. TileList cellRenderer özelliğiyle bu oluşturucuyu belirtebilirsiniz. TileList bileşeninin varsayılan CellRenderer öğesi, görüntü (sınıf, bitmap, örnek veya URL) gösteren ImageCell ve isteğe bağlı bir etikettir. Etiket, her zaman hücrenin alt kısmında hizalanan tek bir satırdır. TileList öğesini yalnızca bir yönde kaydırabilirsiniz.

TileList örneği odağı aldığında, örneğin içindeki öğelere erişmek için şu tuşları da kullanabilirsiniz:

Anahtar

Açıklama

Yukarı Ok ve Aşağı Ok

Bir sütunda yukarı be aşağı hareket etmenize olanak sağlar. allowMultipleSelection özelliği true olursa, birden çok hücre seçmek için Üst Karakter tuşuyla birlikte bu tuşları kullanabilirsiniz.

Sol Ok ve Sağ Ok

Bir satırda sola veya sağa hareket etmenize olanak sağlar. allowMultipleSelection özelliği true olursa, birden çok hücre seçmek için Üst Karakter tuşuyla birlikte bu tuşları kullanabilirsiniz.

Home

TileList öğesinde birinci hücreyi seçer. allowMultipleSelection özelliği true olursa, Üst Karakter tuşu basılı tutulduğunda Home tuşu geçerli seçiminizden birinci hücreye kadar tüm hücreleri seçer.

End

TileList öğesinde son hücreyi seçer. allowMultipleSelection özelliği true olursa, Üst Karakter tuşu basılı tutulduğunda End tuşu geçerli seçiminizden son hücreye kadar tüm hücreleri seçer.

Ctrl

allowMultipleSelection özelliği true değerine ayarlanırsa, belirli bir sıralama olmaksızın birden çok hücre seçmenize olanak sağlar.

Bir uygulamaya TileList bileşenini eklediğinizde, aşağıdaki ActionScript kodu satırlarını ekleyerek bu bileşeni bir ekran okuyucusu için erişilebilir duruma getirebilirsiniz: 

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

Bileşenin kaç tane örneğe sahip olduğuna bakılmaksızın, bir bileşenin erişilebilirliğini yalnızca bir defa etkinleştirebilirsiniz. Daha fazla bilgi için bkz. Bölüm 18, “Erişilebilir İçerik Oluşturma,” Flash Uygulamasını Kullanma .

TileList bileşeni parametreleri

Özellik denetçisinde veya Bileşen denetçisinde her TileList bileşeni örneğinde şu yönetim parametrelerini ayarlayabilirsiniz: allowMultipleSelection , columnCount , columnWidth , dataProvider , direction , horizontalScrollLineSize , horizontalScrollPageSize , labels , rowCount , rowHeight , ScrollPolicy, verticalScrollLineSize ve verticalScrollPageSize . Bu parametrelerin her biri, aynı adda, karşılık gelen ActionScript özelliğine sahiptir. dataProvider parametresini kullanma hakkında bilgi almak için, bkz. dataProvider parametresini kullanma .

TileList örneklerinin yöntemlerini, özelliklerini ve olaylarını kullanarak TileList örnekleri için ek seçenekler ayarlamak üzere ActionScript yazabilirsiniz. Daha fazla bilgi için, Adobe® Flash® Professional CS5 için ActionScript® 3.0 Başvurusu bölümündeki TileList sınıfına bakın.

TileList bileşeniyle uygulama oluşturma

Bu örnek, bir TileList öğesini boya renkleri dizisiyle doldurmak için MovieClip öğelerini kullanır.

  1. Yeni bir Flash (ActionScript 3.0) belgesi oluşturun.

  2. TileList bileşenini Sahne Alanı'na sürükleyin ve bu bileşene aTl örnek adını verin.

  3. Eylemler panelini açın, ana Zaman Çizelgesi'nde Kare 1'i seçin ve şu ActionScript kodunu girin: 

    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. Uygulamayı test etmek için, Kontrol Et > Filmi Test Et seçeneklerini belirleyin.

ActionScript kullanarak TileList bileşeni oluşturma

Bu örnek, dinamik olarak bir TileList örneği oluşturur ve ColorPicker, ComboBox, NumericStepper ve CheckBox bileşenlerinin örneklerini ekler. Görüntülenecek bileşenin etiketlerini ve adlarını içeren bir Array oluşturur ve TileList öğesinin dataProvider özelliğine Array ( dp ) atar. TileList öğesini düzenlemek için columnWidth ve rowHeight özelliklerini ve setSize() yöntemini, TileList öğesini Sahne Alanı'nda konumlandırmak için move() yöntemini, TileList örneğinin kenarlıklarını ile içerikleri arasına boşluk koymak için contentPadding stilini ve içeriği etiketlerine göre sıralamak için sortItemsOn() yöntemini kullanır.

  1. Yeni bir Flash (ActionScript 3.0) belgesi oluşturun.

  2. Şu bileşenleri Bileşenler panelinden Kütüphane paneline sürükleyin: ColorPicker, ComboBox, NumericStepper, CheckBox ve TileList.

  3. Eylemler panelini açın, ana Zaman Çizelgesi'nde Kare 1'i seçin ve şu ActionScript kodunu girin: 

    import fl.controls.CheckBox; 
import fl.controls.ColorPicker; 
import fl.controls.ComboBox; 
import fl.controls.NumericStepper; 
import fl.controls.TileList; 
import fl.data.DataProvider; 
 
var aCp:ColorPicker = new ColorPicker(); 
var aCb:ComboBox = new ComboBox(); 
var aNs:NumericStepper = new NumericStepper(); 
var aCh:CheckBox = new CheckBox(); 
var aTl:TileList = new TileList(); 
 
var dp:Array = [ 
{label:"ColorPicker", source:aCp}, 
{label:"ComboBox", source:aCb}, 
{label:"NumericStepper", source:aNs}, 
{label:"CheckBox", source:aCh}, 
]; 
aTl.dataProvider = new DataProvider(dp); 
aTl.columnWidth = 110; 
aTl.rowHeight = 100; 
aTl.setSize(280,130); 
aTl.move(150, 150); 
aTl.setStyle("contentPadding", 5); 
aTl.sortItemsOn("label"); 
addChild(aTl);

  4. Uygulamayı test etmek için, Test Et > Filmi Kontrol Et seçeneklerini belirleyin.