Bu yazıda size DHTML ile nasıl bir pencere yönteicisi yapabileceğinizi anlatacağım. Sanıyorum olayın özünü anladıktan sonra kodu anlaması basit olacaktır, zira kodun uzunluğu deliler gibi açıklama dahil 150 satır!

BİR PENCERE YÖNETİCİSİ NE YAPAR?

Pencere yöneticisi, oturur takılır. Çay kahve falan içer... mi? İçmez. Pencere yöneticisi pencereler yaratır, pencereler ile farenin etkileşimlerini düzenler ve pencereleri kapatır (yok eder). Fare ile ne yapılabilir pencereler kıpırdatılabilir, boyları değiştirilebilir veya bir pencere en üste alınabilir.

İLK ADIM: PENCERE YARATMA VE YOK ETME

Bir HTML belgesini bir masa olarak düşünürsek (bildiğin masa ya), üzerine de bu masanın kağıtlar koyabilsek. HTML dünyasında, HTML belgesine (yani masaya) koyabileceğimiz nesneler (yani kağıtlar) bir çok çeşitte, bunlardan birinin adı da DIV. DIV'leri aynı kağıt gibi, belgenin istenilen bir yerine konabilir, üst üste dizilebilir ve istediği şeyi içerebilir. Kağıttan farklı olarak, DIV'in boyu değiştirilebilir.

Bir DIV yaratmak için, JavaScript tarafından document.createElement("DIV") çağrısını yapmak yeterli. Bu emri duyan web tarayıcısı, yeni bir DIV yaratıp bu DIV'e bir referensı size döndürür. Siz bu referansı kullanarak DIV'in muhtelif özelliklerini (kimliği, yeri, boyu, içeriği, vs.) değiştirebilirsiniz. İstediğiniz özellikleri değiştirdikten sonra DIV'i görünür kılmak için belgeye eklemek gerekli: document.body.appendChild(object).

Demin dedim ki DIV'e bir kimlik verebiliriz. Bu kimlik sayesinde DIV'imizi geri çağırabiliriz: document.getElementById. Bu çağrı bize DIV'e doğru bir referans geri verir, bu referansı kullanarak ister DIV'in özelliklerini değiştirebilir istersek de DIV'i yok edebiliriz: document.body.removeChild(object). Denemek isterseniz buraya tıklayın. Yeterince oynadığınıza inandıktan sonra pencereye sağ tıklayıp "kaynağı göster" diyerek JavaScript koda erişebilirsiniz.

İKİNCİ ADIM: FARE İLE ETKİLEŞİM

DHTML "olay" dolu bir dildir: her ne kadar bir web sayfasında insanlar bağırmayıp polis basmasa da (ya bu arada bu yazının İngilizce ve Fransızca sürümü daha ciddi oldu sanki) muhtelif olaylar olur, mesela "a'ha sayfa yüklendi" veya "oğlum kullanıcı klavyede tuşlara basıyor" veya "fare kıpırdadı! kime diyorum!??!" gibi. Tüm bu olayları işleyecek alacak fonksiyonlar tanımlanabilir pekala. Mesela document.onmousemove=FareHareketiİsleyicisi dersek, fare her kıpırdadığında web tarayıcısı FareHareketiİsleyicisi fonksiyonunu çağıracaktır.

Bu fonksiyon içinde de tabii farenin o anki konumunu yakalama imkanı var. Farenin konumunu bildiğimize göre eski konumuyla karşılaştırıp ne kadar oynadığını bulduktan sonra kıpırdatılacak veya boyu değiştirilecek DIV'lerde ona uygun işlemleri yapabiliriz. İşte bunun örneği de burada: "TEST" yazısını tıklayın, ve açılan karenin kırmızı köşesinden pencereyi sürükleyin mavi köşesinden de boyunu değiştirin. Sağ üstteki gri köşesinden de kapatabilirsiniz. Sağ tıklayıp "kaynağı görüntüle" deyip de JavaScript koduna bakabilirsiniz.

ÜÇÜNCÜ ADIM: PENCERELERİN SIRALARINI DEĞİŞTİRME

Daha önce kısaca DIV'lerin üst üste dizilebileceğinden bahsetmiştim. Bunu yapmanın yolu "z-index" denen olay: şimdi efendim bir nesnenin z-index'i ne kadar büyük ise o nesne o kadar üstte olur (en üstte de siz varsınız, aşağıya bakıyorsunuz) (ben demiyorum DOM'u yapanlar diyor). Dolayısıyla nedir eğer bir sürü DIV'imiz var ise birinin en üstte olması (dolayısıyla tamamen görünür olması) için z-index'ini diğerlerinden büyük yapmak yeterliymiş. İşte üçüncü örnekte de aynen bunu yapıyoruz, yeşil köşe ile dikdörtgeni en üste alabilirsiniz.

DÖRDÜNCÜ ADIM: GÜZELLEŞTİRME

Tabii şimdi birine "bak pencere yaptım" deyip gri, kırmızı, mavi ve yeşil dört dikdörtgenden oluşan dikdörtgenler gösterirseniz sizinle dalga geçer, siz de onu dövmek zorunda kalırsınız. Bunu engellemek için iki şey yapmak lazım: bir kere, pencerelere hakiki pencere resimleri koymak. İkincisi de koda biraz yorum eklemek, zira iyi bir yazılımcı yaptığı koda her zaman bol yorum koyar.

Pencere boyama kısmı kolay: herhangi bir HTML editörü açıp pencereleri çizmek veya Windows'unkileri falan çalmanız yeterli. Ben hazır kendi web sitem için yapmışım onları çaldım (bravo), biraz da koda yorum ekledim. Rahat anlayın diye Türkçe yaptım. Buyrun tıklayın.

Buraya tıklayarak tüm adımları ve son adımdaki resimleri ZIP dosyası olarak indirebilirsiniz. Haydi iyi eğlenceler.