ComboBox bileşenini kullanma

ComboBox bileşeni, kullanıcının açılır bir listeden tek bir seçim yapmasına olanak tanır. ComboBox statik veya düzenlenebilir olabilir. Düzenlenebilir bir ComboBox, kullanıcının listenin en üst kısmındaki metin alanına doğrudan metin girmesine olanak sağlar. Açılır liste belgenin alt kısmına değerse, aşağı yerine yukarı doğru açılır. ComboBox üç alt bileşenden oluşur: BaseButton, TextInput ve List bileşenleri.

Düzenlenebilir bir ComboBox öğesinde metin kutusu değil yalnızca düğme vuruş alanıdır. Statik bir ComboBox öğesinde düğme ve metin kutusu vuruş alanını oluşturur. Vuruş alanı, açılır listeyi açarak veya kapatarak yanıt verir.

Kullanıcı fare veya klavye ile listede bir seçim yaptığında, seçimin etiketi ComboBox öğesinin üst kısmındaki metin alanına kopyalanır.

ComboBox bileşeniyle kullanıcı etkileşimi

ComboBox bileşenini, herhangi bir formda veya listeden tek bir seçim yapılmasını gerektiren uygulamada kullanabilirsiniz. Örneğin, bir müşteri adresi formunda şehirlerin açılır bir listesini sağlayabilirsiniz. Daha karmaşık senaryolar için düzenlenebilir bir ComboBox kullanabilirsiniz. Örneğin, sürüş talimatları sağlayan bir uygulamada, kullanıcının başlangıç ve hedef adreslerini girmesine olanak sağlamak için düzenlenebilir bir ComboBox kullanabilirsiniz. Açılır listede önceden girilmiş adresler bulunur.

ComboBox düzenlenebilir durumdaysa, başka bir deyişle editable özelliği true değerindeyse, şu tuşlar odağı metin girdi kutusundan kaldırır ve önceki değeri bırakır. Tek istisna, kullanıcı metni girdiğinde ilk olarak yeni değeri uygulayan Enter tuşudur.

Anahtar

Açıklama

Üst Karakter + Sekme

Odağı bir önceki öğeye taşır. Yeni bir öğe seçilirse, change olayı gönderilir.

Sekme

Odağı bir sonraki öğeye taşır. Yeni bir öğe seçilirse, change olayı gönderilir.

Aşağı Ok

Seçimi bir öğe aşağı taşır.

End

Seçimi listenin en alt kısmına taşır.

Escape

Açılır listeyi kapatır ve odağı ComboBox öğesine geri getirir.

Enter

Açılır listeyi kapatır ve odağı ComboBox öğesine geri getirir. ComboBox düzenlenebilir durumda olduğunda ve kullanıcı metin girdiğinde, Enter öğesi, değeri girilen metne ayarlar.

Home

Seçimi listenin en üst kısmına taşır.

Sayfa Yukarı

Seçimi bir sayfa yukarı taşır.

Sayfa Aşağı

Seçimi bir sayfa aşağı taşır.

Bir uygulamaya ComboBox 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.ComboBoxAccImpl; 
 
ComboBoxAccImpl.enableAccessibility();

Bileşenin kaç tane örneğine sahip olduğunuza bakılmaksızın, bir bileşenin erişilebilirliğini yalnızca bir defa etkinleştirirsiniz.

ComboBox bileşeni parametreleri

Her ComboBox örneği için Özellik denetçisinde veya Bileşen denetçisinde şu parametreleri ayarlayabilirsiniz: dataProvider , editable , prompt ve rowCount . Bu parametrelerin her biri, aynı adda, karşılık gelen ActionScript özelliğine sahiptir. Bu parametrelerin olası değerleriyle ilgili bilgi için, Adobe® Flash® Professional CS5 için ActionScript® 3.0 Başvurusu bölümündeki ComboBox sınıfına bakın. dataProvider parametresini kullanma hakkında bilgi almak için, bkz. dataProvider parametresini kullanma .

ComboBox bileşeniyle uygulama oluşturma

Aşağıdaki prosedür, geliştirme sırasında bir uygulamaya nasıl ComboBox bileşeni ekleneceğini açıklamaktadır. ComboBox öğesi düzenlenebilir durumdadır ve metin alanına Add yazarsanız, örnek açılır listeye bir öğe ekler.

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

  2. Bir ComboBox bileşenini Sahne Alanı'na sürükleyin ve bu bileşene aCb örnek adını verin. Parametreler sekmesinde editable parametresini true değerine ayarlayın .

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

    import fl.data.DataProvider; 
import fl.events.ComponentEvent; 
 
var items:Array = [ 
{label:"screen1", data:"screenData1"}, 
{label:"screen2", data:"screenData2"}, 
{label:"screen3", data:"screenData3"}, 
{label:"screen4", data:"screenData4"}, 
{label:"screen5", data:"screenData5"}, 
]; 
aCb.dataProvider = new DataProvider(items); 
     
aCb.addEventListener(ComponentEvent.ENTER, onAddItem); 
 
function onAddItem(event:ComponentEvent):void { 
    var newRow:int = 0; 
    if (event.target.text == "Add") { 
        newRow = event.target.length + 1; 
            event.target.addItemAt({label:"screen" + newRow, data:"screenData" + newRow},  
            event.target.length);  
    } 
}

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

ActionScript kullanarak ComboBox oluşturma

Aşağıdaki örnek, ActionScript ile bir ComboBox öğesi oluşturur ve bu öğeyi San Francisco, California bölgesindeki üniversitelerin listesiyle doldurur. ComboBox öğesinin width özelliğini istem metninin genişliğini alacak şekilde ayarlar ve dropdownWidth özelliğini en uzun üniversite adını alacak şekilde daha geniş bir değere ayarlar.

Bu örnek, okul adlarını saklamak için label özelliğini ve her bir okulun web sitesini saklamak için data özelliğini kullanarak Array örneğinde üniversitelerin listesini oluşturur. dataProvider özelliğini ayarlayarak Array öğesini ComboBox öğesine atar.

Kullanıcı listeden bir üniversite seçtiğinde, bir Event öğesini tetikler. CHANGE olayı ve bir URL'ye data özelliğini yükleyen changeHandler() işlevi çağrısı, okulun web sitesine erişme isteğinde bulunur.

Liste kapandığında istemi yeniden görüntülemek için son satırın, ComboBox örneğinin selectedIndex özelliğini -1 değerine ayarladığına dikkat edin. Aksi takdirde, seçilmiş olan okulun adı istemin yerine geçer.

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

  2. ComboBox bileşenini Bileşenler panelinden Kütüphane paneline sürükleyin.

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

    import fl.controls.ComboBox; 
import fl.data.DataProvider; 
import flash.net.navigateToURL; 
 
var sfUniversities:Array = new Array( 
    {label:"University of California, Berkeley",  
                data:"http://www.berkeley.edu/"}, 
    {label:"University of San Francisco",  
                data:"http://www.usfca.edu/"}, 
    {label:"San Francisco State University",  
                data:"http://www.sfsu.edu/"}, 
    {label:"California State University, East Bay",  
                data:"http://www.csuhayward.edu/"}, 
    {label:"Stanford University", data:"http://www.stanford.edu/"}, 
    {label:"University of Santa Clara", data:"http://www.scu.edu/"}, 
    {label:"San Jose State University", data:"http://www.sjsu.edu/"} 
); 
 
var aCb:ComboBox = new ComboBox(); 
aCb.dropdownWidth = 210; 
aCb.width = 200;  
aCb.move(150, 50); 
aCb.prompt = "San Francisco Area Universities"; 
aCb.dataProvider = new DataProvider(sfUniversities); 
aCb.addEventListener(Event.CHANGE, changeHandler); 
 
addChild(aCb); 
 
function changeHandler(event:Event):void { 
    var request:URLRequest = new URLRequest(); 
    request.url = ComboBox(event.target).selectedItem.data; 
    navigateToURL(request); 
    aCb.selectedIndex = -1; 
}

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

Bu örneği Flash geliştirme ortamında uygulayabilir ve çalıştırabilirsiniz ancak ComboBox öğesindeki öğeleri tıklatarak üniversite web sitelerine erişmeyi denerseniz, uyarı mesajları alırsınız. Internet'te tam işlevsel ComboBox öğesine erişmek için şu konuma erişin:

http://www.helpexamples.com/peter/bayAreaColleges/bayAreaColleges.html