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.

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

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

Ö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

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

Uyarı

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

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 “idâ€?sini 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â€? 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

“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öre “ok|cancelâ€? iş bitirici fonksiyonumuzu devreye sokuyor.

İletişim penceresi

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!

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.Requestâ€?tin 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. Buradan tüm örnekleri kontrol edebilirsiniz. Ö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,

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.

Filed under: Kategorilenmemiş