ComboBox Component

Çalışmamızda bir comboBox panelinden istenilen bir adrese yönlenme işlemi anlatılmıştır. Burada getURL komutu yerine goto komutunu kullanarak çalışmanızda istediğiniz kareye geçiş uygulaması yapabilirsiniz.

DOSYAYI İNDİR

Uygulama:

1- Sahneye bir comBox paneli yerleştirin ve instance name kısmına combobox yazın. Hemen yanına istenilen adresi gösterecek olan dinamik metin kutusu çizin ve instance name alanından mesaj olarak adlandırın.

2- Yukarıdaki grafide göreceğiniz gibi properties panelinde bu panele ait 4 alan mevcuttur. Label alanında yönlenmesini istediğiniz adreslerin adını yazmalısınız. Kutuda ilk gözükecek metin Arama Motoru Seçin metni olduğundan ilk labelımız bu olacaktır. Bu eklentinin nasıl yapılacağını diğer çalışmalarda görmüştünüz.label alanının önündeki boşluğa fare ile çift tıklamanız ilgili kutuyu açacaktır.Kutudaki artı butonuna basarak gerekli bölümleri açabilirsiniz.
Aynı yöntemle data alanını tıklayarak bu verilere ait değerleri yani sayfa adresini yazın. Yalnız ilk değeri boş bırakın:

Bu alan "Arama Motoru Seçin" uyarı yazısına ait değeri ifade eder. Bu alana hiçbir bilgi girmiyoruz, çünkü buradan bir yönlendirme yapılmayacak. Artı butonuna tıklayarak labela ait değerleri bu alana yazıyoruz.
editable alanını metinde bir düzenleme yapmayacağımız için false olarak bırakın.
rowCount alanı combobox ilk açıldığında kaç sıranın görüleceğini belirler. Biz 5 değerini seçtik.Yani paneli açtığınızda ilk etapta en fazla 5 sıra göreceksiniz. Şayet eklediğiniz labellar 5 den fazla ise bir scrollbar eklentisi oluşarak diğer alanlara kayma yapmanız sağlanır.

3- Şimdi sıra kodlara geldi. 1.kareyi seçerek şu kodları ekleyin:

comboBoxListe = new Object();
comboBoxListe.change = function ( ){
if(combobox.value!=""){
getURL(combobox.value,"_blank");
mesaj.text = combobox.text+" sayfasına yönlendiniz";
}
}
combobox.addEventListener ("change", comboBoxListe)

Bu kod girişine artık aşina olmuşsunuzdur. Önce comboBoxListe adında yeni bir nesne oluşturuyoruz. *.change fonksiyonu bize comboBox panelinde yapılan her değişiklikte tanımlanan kodların çalışmasını sağlar. Burada tanımlanan kod getURL komutudur.combobox.value gidilecek adresi bize gösterir. Bu değer önceden hazırladığımız data alanındaki değerlerdir. Daha sonra mesaj adlı dinamik metin kutusuna yazılacak metin ayarlanır. Label alanına yazdığımız metni alacağımız komut combobox.text komutudur. Bu komut bize label alanına yazdığımız metni verir. Yalnız bu işlemlerin yapılabilmesi için bir if şartı konulmuştur. Bunun tek nedeni "Arama Motoru Seçin" uyarı yazısını eklediğimizdendir. Şayet bu uyarı yazısını eklemezseniz bu if şartına gerek kalmaz.if(combobox.value!="") komutunda sorgulanan şudur. Seçilen alanın data değeri mevcutsa alttaki kodları çalıştır. Yahoo,altavista,google alanına data eklentileri yapıldığından ilgili alana yönlenme yapılır. Şayet kullanıcı "Arama Motoru Seçin" yazısına tıklarsa buna ait bir değer olmadığından if şartı gerçekleşmeyecek ve bir yönlenme yapılmayacaktır. En son dizinle klasik component uygulaması kapatılmaktadır. İlgili kodlar comboBox ile bağlantılı hale getirilir.

Aynı çalışmayı kodlarla oluşturalım:

1- Yine sahneye bir combobox (instance name=combobox) ve bir dinamik metin kutusu(instance name=mesaj) yerleştirelim.

2- Sahnede 1.kareye şu komutları atayalım:

//Elemanları içeren bir dizi oluşturuluyor
dizi=["eleman1","eleman2","eleman3","eleman4"]

//Bu elemanlara isim ve değerler atanıyor
var eleman1 = { label: "Arama Motoru Seçin",data: "" };
var eleman2 = { label: "Yahoo", data: "http://www.yahoo.com" };
var eleman3 = { label: "Google", data: "http://www.google.com" };
var eleman4 = { label: "Altavista", data: "http://www.altavista.com" };

//Bir döngü aracılığı ile bu değerler combobox paneline atanıyor
for(i=0;i<dizi.length;i++){
deger=this[dizi[i]]
combobox.addItem ( deger );
}

//Panel elemanları her tıklandığında gerekli yönlendirme yapılıyor
comboBoxListe = new Object();
comboBoxListe.change = function ( ){
if(combobox.value!=""){
getURL(combobox.value,"_blank");
mesaj.text = combobox.text+" sayfasına yönlendiniz";
}
}
combobox.addEventListener ("change", comboBoxListe);

//Panelin boyutları ve açıldığında sıra miktarı ayarlanıyor
combobox.rowCount=3;
combobox.setSize(140, 20);

Bu kodlarla yukardaki çalışma ile aynı sonucu elde edersiniz.