Erhan is typing…

WebDevelopment , PHP, Javascript, CakePHP, ExtJS

Prototype pencere sınıfı

| Comments

Prototype aşağı, prototype yukarı! Aslında tüm özelliklerini örneklendiremesek bile öğrenmek isteyenlere önayak olduğumuzu düşünüyoruz. Bu aydan itibaren yine prototype için mevcut eklentiler ile kütüphanenin nasıl daha kullanışlı hale getirilebileceğini görelim.

Yazımıza Prototype çatısı ile devam ettiğimizden beri bunun temel bir kütüphane olduğuna ve bazı çatıların da temelini oluşturduğuna değinmiştik. Javascript ile kod yazmayı daha pratik hale getiren temelin üzerine kurulmuş bu eklentilerden biri olan pencere sınıfı ile sayfalarınızda ziyaretçilerinizin gözüne hoş gelebilecek, tabir-i caizse, sözde pencereler oluşturmak gerçekten çok kolay. Üstelik bu pencereler açılır pencere engelleyiciler tarafından da engellenmiyor ;)

Pencere sınıfını nasıl kullanabiliriz?

Öncelikle http://prototype-window.xilinus.com/download.html adresinden en son sürümü (şu anki sürüm 0.96.2) indirmekle başlayabiliriz. Arşiv dosyasını açtığınızda birçok dosya göreceksiniz. Bizim ilgilendiklerimiz ise javascripts klasöründeki window.js, effects.js ve tabii ki prototype.js. Bunlar dışında da pencerelerin biçimlendirilmesinde kullanılan themes klasörüne ihtiyacımız olacak.

Daha sonra ki işlemimiz de sayfamızın head etiketi içerisine javascript ve css dosyalarını aşağıdaki gibi eklemek.

CSS dosyalarının tümünü eklemek zorunda değiliz. default.css, dışında sadece kullanacaklarınızı ekleyip diğerlerini göz ardı edebilirsiniz.

Örnekler içerisinde göreceğiniz uyarı ve onay pencereleri için alert.css dosyası da eklenmelidir.

Şimdi ilk pencere örneğimize geçebiliriz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

200x150 boyutlarında sade bir <a href="javascript:pencereGoster1()">pencere aç</a>.

<script type="text/javascript">
    function pencereGoster1()
    {
        pencere1 = new Window('pencere1', {
            className: "darkX",
            title: "Örnek 1",
            width:200,
            height:150
        });
        pencere1.getContent().innerHTML = "İlk örneğimiz";
        pencere1.setDestroyOnClose();
        pencere1.showCenter();
    }
</script>

Örnekte öncelikle Window adlı nesneden pencere1 adıyla kendimize de bir tane kopyaladık ve özelliklerini de parantez içindeki kısımda belirledik. Buradaki değerler içerisinde pencere1, pencere oluşturulurken kullanılan katmanın id özelliği olacak. Böylece müdahale etmek istediğimizde getElementById ile bu sayfa öğesine erişim gerçekleştirilebilir. className için de yukarıda eklediğimiz CSS dosyalarının isimlerini dosya türü olmadan (yani .css olmadan) kullanıyoruz. title penceremizin başlığı, width genişliği, height da yüksekliği belirler. .getContent().innerHTML ile pencere içeriğini oluşturduktan sonra .setDestroyOnClose() ile pencereyi kapattığımızda kopyaladığımız nesnenin ortadan kaldırılmasını sağlıyoruz. Eğer bunu yapmazsak pencere sayfada görüntülenmese dahi bellekten silinmediyse tekrar açılmasını istediğimizde aşağıdaki hatayı alacağız. İçerikte HTML kodlarını da kullanabilirsiniz.

En son satırdaki .showCenter()la da penceremizi sayfada ortalıyoruz. Tüm bu işlemleri pencereGoster1() adlı fonksiyonumuzun içerisine yerleştirdiğimiz için tıklandığında açılması için bir bağlantı içerisinde çağırıyoruz. İşte örneğimiz!

Pencerede farklı bir adresi görüntüleme

1
2
3
4
5
6
7
8
9

pencere2 = new Window('pencere2', {
    className: "mac_os_x",
    url: "http://pctech.com.tr/",
    title: "Örnek 2",
    width:800,
    height:600
});
pencere2.setDestroyOnClose();
pencere2.showCenter();

Eğer pencere özelliklerinde url ile bir adres tanımlarsak pencere içerisinde bu adres görüntülenecektir. Bu durumda .getContent().innerHTMLi kullanmamıza gerek kalmıyor.

Uyarı

1
2
3
4
5
6
7

Dialog.alert("Aşağıdaki buton ile bu uyarı penceresini kapatabilirsiniz.", {
    windowParameters: {
        width:300,
        height:100
    },
    okLabel: "Kapat"
});

Uyarı pencereleri için Dialog.alert()i kullanacağız. Parantez içerisinde yapacağımız ile tanımlama pencere içeriğini, windowsParameters kısmı Window nesnesindeki tüm özellik tanımlamalarını yapmamızı sağlıyor. okLabel da pencereyi kapatmamızı sağlayan butonun değerini belirliyor. Dialog modülünün özelliği, pencerenin diğer tüm sayfanın üzerine bir katman olarak gelip sayfadaki bağlantı, buton gibi kullanıcı etkileşimli öğeleri etkinsizleştirmesidir.

İçerik olarak sayfadan bir bölümü kullanma

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script type="text/javascript">
    function pencereGoster4()
    {
        pencere4 = new Window('pencere4', {
            className: "spread",
            resizable: false,
            hideEffect:Element.hide,
            showEffect:Element.show,
            minWidth: 10,
            maxWidth: 300
        });
        pencere4.setContent('pencere_icerigi', true, true);
        pencere4.toFront();
        pencere4.setDestroyOnClose();
        pencere4.show();
    }
</script>
<div id="pencere_icerigi" style="float:right">4. örnekteki pencere içeriğini bu bölüm oluşturuyor.</div>

En alttaki pencere_icerigi id özelliğine sahip alanı fark etmiş olmalısınız. Şimdi bu alanı penceremizin içeriği olarak görüntüleyeceğiz. Bunun için .setContent() özelliğini kullanıyoruz. .setContent() içerisinde öncelikle sayfa elemanının idsini tanımlayıp daha sonra da boyut ve yerleşim özelliklerini true ile otomatik hale getiriyoruz. Ardından .toFront() ile de sayfadaki tüm pencerelerden önde görünmesini sağlıyoruz. Kod içerisinde Windows nesnesinde kullanılan bazı yeni özelliklerine de yer verdik. Örneğin resizable: false ile yeniden boyutlandırılamaz, minWidth: 10&#8242; ile en az 10px genişliğinde,maxWidth: 300′ ile de en fazla 300px genişliğinde bir pencere tanımlaması yapmış oluyoruz. Değişiklikleri pencere büyültme ve küçültme butonlarını kullanarak görebilirsiniz.

Onay penceresi

1
2
3
4
5
6
7
8
9
10

Dilog.confirm("Değişiklikleri onaylıyor musunuz?", {
    id: "onayPenceresi",
    okLabel: "Evet",
    cancelLabel: "Hayır",
    windowParameters: {
        width:300
    },
    ok: function(pencere) {alert("Onaylandı"); return true;},
    cancel: function(pencere) {alert("İptal edildi")}
});

Dialog için confirm özelliğini kullanarak şimdi de bir onay penceresi oluşturacağız. alert özelliğinden farkı onaylama dışında iptal etme için de bir seçeneğimizin olması. Seçime bağlı olarak da istediğimiz fonksiyonu çağırarak uygun işlemin yapılmasını sağlayabiliriz.(ok|cancel)Labelözellikleri ile onay ve iptal butonlarımızın değerlerini belirlerken tıklanan butona göreok|cancel` iş bitirici fonksiyonumuzu devreye sokuyor.

İletişim penceresi

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var zamanAsimi;
function iletisimKutusuAc() {
    Dialog.info("Bu pencere 5 saniye içerisinde kapanacak", {windowParameters: {width:250, height:100}, showProgress: true});
    zamanAsimi = 5;
    setTimeout(zamanBilgisi, 1000)
}

function zamanBilgisi() {
    zamanAsimi--;
    if (zamanAsimi >0) {
        Dialog.setInfoMessage("Bu pencere " + zamanAsimi + " saniye içerisinde kapanacak")
        setTimeout(zamanBilgisi, 1000)
 }
 else
    Dialog.closeInfo()
}
iletisimKutusuAc();

Yine bir Dialog fakat bu kez info. 5’ten geri sayarak açılan pencereyi otomatik kapatan, bunun dışında farklı bir kapatma seçeneği olmayan bir pencere. Elimizde iletisimKutusuAc() ve zamanBilgisi() olarak 2 fonksiyon bulunuyor. Birinci fonksiyon iletişim kutusunu oluşturuyor; diğeri ise geri sayım ve pencere içeriğinde buna bağlı güncellemeyi gerçekleştiriyor.
Pencere özellikleri içerisinde showProgress: true dikkatinizi çekmiş olabilir. Bu, pencere içerisinde bir işlem yapılıyor anlamına gelen resmin görüntülenmesini sağlıyor. setTimeout(zamanBilgisi, 1000) satırları ile zamanBilgisi() fonksiyonu 1’er saniyelik gecikmelerle çağırılarak çalıştırılıyor.

zamanBilgisi() fonksiyonuna bakarsanız da öncelikle başlangıçta 5 olarak belirlenen süre 1 saniye azaltılıyor. Daha sonra da saniyenin 0 olmaması koşulu ile pencere içeriği .setInfoMessage() ile güncelleniyor. 0 olduğu takdirde de .closeInfo() ile kapatılıyor.

AJAX iş başında!

1
2
3
4
5
6
7
8
9
10
11

pencere7 = new Window('pencere7', {
    className: "alphacube",
    title: "Örnek 7",
    width:300,
    height:100
});
pencere7.setAjaxContent("ajax_cevap.php", {
    method: 'get',
    parameters: 'kullaniciAdi=erhan&sifre=yok&[email protected]'
}, true, false)
pencere7.setDestroyOnClose();
ajax_cevap.php
1
2
3
4
5

<?php
  echo("Kullanıcı adı: ".$_GET["kullaniciAdi"]."<br />");
  echo("Şifre: ".$_GET["sifre"]."<br />");
  echo("E-posta: ".$_GET["eposta"]."<br />");
?>

Penceremizin içeriğini AJAX ile yapacağımız istek sayesinde belirlememizi sağlayan kodumuz son örnek olarak karşımızda. .setAjaxContent() ile gerçekleştirdiğimiz bu işlem aslında geçen haftalarda anlattığımız Ajax.Requesttin ta kendisi. ajax_cevap.php sayfasına GET metodu ile gönderdiğimiz veri pencere içerisinde biçimlendirilerek görüntüleniyor.

Bu ay ki örneklerimizi de burada sonlandırdık. Önümüzdeki sayıda yine prototype temelli bir kütüphane olan script.aculo.us ile devam edeceğiz.

Efektler

Kullandığımız sınıf, pencerelerin açılıp kapanması sırasında efektler kullanabilmemize olarak sağlıyor. Prototype temelli bir kütüphane olan script.aculo.us içerisindeki efektlerin dahil edildiği sınıfta pencere özelliklerinde showEffect ve hideEffect ile pencerelerin nasıl açılıp nasıl kapanacağını belirleyebilirsiniz. Örneğin,

1
2

showEffect: Effect.Appear
hideEffect: Effect.Fade

Daha fazla örnek için http://wiki.script.aculo.us/scriptaculous/show/CombinationEffectsDemo adresini kontrol edebilirsiniz.

Bu yazı Ekim 2006 tarihinde PC Tech dergisinde yayınlanmıştır.

Comments