Degisime devam, tam guc jQuery!

Biliyorsunuz site ustunde buyuk degisikliklerle mesguldum. Nihayet mimari degisiklikler sonuclanmaya basladi, cogu bitti diyebilirim. Hala var fakat artik on yuzde gorunur seyleri de degistirmeye basliyorum. Bunun bir kismi 2-3 haftadir mootools ile jquerynin beraber calisarak bir tasima surecinde olmasi seklinde gecti.

Simdi mootools bagimliligi olan herseyi temizledim. Bazi seyleri sadelestirdim, zamaninda fazla gorseli destekleyen bir javascript yaklasimda kodluyormusum.

Sonuc olarak site artik tamamen jquery ustunde sekilleniyor, eski seyleri tasima bitti. Simdi yavas yavas bunun uzerine gelistirme olarak ilerleyecegim.
Gorunur degisikliklerden biri de footer oldu. Yakinda eskisine yakin bir hale getirecegim fakat tamamen tasarim degisimine de ugrayabilir. Su an fonksiyonel olarak bir kayip yok eskisine gore.

Mootools vs JQuery

Son dönemde smashing magazine’da sağda solda çok fazla jquery plugin-leri vs görmeye başladım. Jquery açısından işin güzel yanı piyasadaki her türlü şaklaban siteler varsa (yani javascriptsel aktiviteleri iyi olan) o sitelerdeki her türlü zamazingoyu jquery-ciler hemen çevirip plugin olarak yazıyorlar.

Mesela aylar önce mfyz.com’daki textarea’ları elle büyütüp küçülttürmek yerine facebook ayarında otomatik yapan bir kütüphane aradım mootools için yazılmış olan fakat bulamadım. Çok şaşırtıcı değil. Google’da gerekli anahtar kelimelerle bu konuyu araştırdığınızda direk jquery eklentileri çıkıyor karşınıza.

İsmi itici, alakasız gelse de jquery için “mootools vs jquery” araması yaptığınızda çıkan neredeyse tüm tartışma konularında, blog girdilerinde yorumlar jquery dostları ile dolu.
Mesela 274 saniye önce okuduğum bir yorumda şöyle diyordu :

ben ve **** mootools ile çok çalıştık fakat birkaç ay kadar önce jquery’ye geçtik. (seçim yapmadık, ıkına sıkıla geçtik).

Hatta başka bir yerde de

Mootools’u çok sevimli buluyorum. Efektleri ve yaptığı işleri yumuşakca (smoothly’nin Türkçesi, yoksa yumuşakçayı yanlış anlamayın 🙂 ) yapıyor, fakat aynı işleri jquery ile çok daha kolay, hızlı ve pratik yapıyorum.

Yani çoğunluğun tercihi jquery. Günlerdir karşıma çıkan pluginleri nedeniyle, “jquery nedir?”, “nasıl pluginleri var?” gibi soruları kendime sormama, araştırıp merak etmeme yol açtı.

Zaten bir iki aydır elim kodlama görmediğinden şu anda herşeyi unutup yeni bir dille başlayabilirim işlerime. Muhtemelen ileride qjuery kodluyor/kullanıyor olacağım arkadaşlar.

Siz bu konuda ne düşünüyorsunuz?

Mootools’da Nesne Seçiciler, CSS Seçicileri

Korkmayın

Döküman başlığı anlaşılmaz olsa da şimdi olayı kavrayacaksınız 🙂 Html elemanlarımızı css ile yerleştirirken css’de nesnelerin etiket adları, kimlikleri (id) ve sınıflarına (class) göre seçici cümleler oluştururuz. Mesela tüm bağlantılar için

kullanırız. Ya da tüm “ipucu” sınıfına ait elemanları seçmek için

tanımı kullanırız. Hatta tüm ipucu sınıfındaki sadece bağlantıları seçmek için

veya icerik kimliği içindeki tüm ipucu sınıflı span’ları seçmek istersek de

adreslemesini kullanırız. Bu adresleme aslında nesnelere erişimimizi oldukça kolaylaştırır. Gerek tek nesneye ulaşırken gerek de birden fazla nesneye ulaşırken css adreslemeleri bu konuda oldukça pratiktir.

JavaScript ile ne ilgisi var peki?

DOM’da seçici fonksiyonlar vardır bilirsiniz. getElementById(), getElementsByClass() gibi. Fakat son verdiğim örnekteki nesnelere ulaşmak için birkaç döngü kurmanız gerekir, daha karışık nesene seçimlerinde de bizi uğraştırabilir. Mootools’u yine seveceksiniz, çünkü mootools’da seçici fonksiyonlar var ve bunlardan bir tanesi (muhtemelen en çok kullanılan) css adreslemelerine göre elemanlar seçiyor.

$ Fonksiyonu elemanları kimliklerine göre seçer. getElementById(); ile aynı işi yapıyor aslında

$$ Fonksiyonu az önce yazdığımız css adreslemesinde bulduğu elemanları nesne dizesi olarak verir.

Örneğin ipucu sınıfındaki tüm linkleri seçtirelim

icerik kimliği içindeki ipucu sınıflı tüm linker :

ya da birden fazla sınıf adreslemesine ait elemanların hepsi :

Şimdilik pek oturmadı farkındayım ama birkaç örnek yapalım eminim daha iyi anlayacaksınız :

Mesela elimizde 4-5 linkten oluşan bir menü olsun. Aynı zamanda sayfamızın içeriğinde de linkler, span’lar bold metinler vs bir sürü elemanımız var. Sadece css ile yerleştirilip düzenlenmiş durumda. Örnek HTML şöyle :

Gördüğünüz gibi basit bir html dosyası. Şimdi menudeki tüm linkleri seçip bir güzellik yapalım 🙂

$$ ile aldığımız nesneleri each ile dönüyoruz. içerideki fonksiyona verdiğimiz link parametresi dizi dönerken elemanın nesnesini ifade ediyor. Böylece o elemanlar üzerinde istediğimizi yapabiliyoruz. İçeride basitçe linklerdeki title argümanına atadığım açıklama metinlerini alert ettirdim. Ama bu sayfa yüklenirken yapılır be birşey anlamazsınız. Daha güzel bir örnek vermek gerekirse :

Linklerin üzerine geldiğinizde sayfa statusbar’ında linklerin url’leri yerine açıklamaları çıkar 🙂 Bu kısımlar dökümanla ilgili değil, onun için geçiyorum.

Mesela kullanılabilir bir örnek için de sayfada içerikten sonraki linkler kısmında birşeyler yapalım. O linkler site dışı linkler ve target’ları yok gördüğünüz gibi. Yani linkler doğrudan sayfa üzerinde açılacaklar. Bu linkleri yeni pencerede açtıralım.

kodu işimizi görecektir. Bu kod işletildikten sonra o linkler yeni pencerede açılacaktır.

Bu örnek css seçicileri anlamanızı sağlamıştır umarım.

CSS seçiciler ile tek eleman seçtirmek

CSS seçiciler ile tek eleman seçtirmek istediğinizde, mesela bir sürü eleman içinden css adresiyle bir eleman seçtiriyorsunuz :

az önceki örnekte alttaki linklerin etiketinde hepsine sınıf eklediğimizi düşünelim. Google linkine de google sınıfı atadık. Fakat bu sınıfa tek eleman var. Sadece o link var. Ancak CSS seçiciler her zaman dizi döner.

olarak seçmek istediğinizde tek elemanlı bir dizi dönecektir.

ile kolayca elemanınıza ulaşabilir, üzerinde işlemler yapabilirsiniz.

Mootools ile Ajax

Ajax Nedir?

Ajax aslında modern tarayıcıların desteklediği XMLHttpRequest özelliğini kullanarak sayfa yenilemeden istek yapıp cevap almamızı sağlayan birşeydir.

XMLHttpRequest hakkında bilgi için buraya tıklayın.

Çoğu sitede görmeye alışık olduğumuz birşey haline gelmeye başladı aslında ajax. Çünkü web 2.0 uygulamalarının neredeyse ana çatısını oluşturuyor. Web 2.0 yazılımları 2.0 yapan şey aslında kullanıcı etkileşimi ve bu etkileşimden kastımız aslında bir web uygulamasının sanki masaüstü uygulaması gibi çalışması. Bu da aslında Sunucu-Kullanıcı istek-cevap ilişkisini sayfa yenilemeden yani kullanıcı için hazırladığınız ARAYÜZü yenilemeden birçok işi yapmaktan geçiyor. Tabiki bunu da XMLHttpRequest’i kolay hale getirip kullanmamızı sağlayan ajax kütüphaneleri yapıyor.

İnternette çok sayıda ajax kütüphanesine rastlayabilirsiniz, genellikle 3-5 satır kod ile istek ve cevabı işleyebiliyor. Fakat bu sitede mootools odaklı gittiğim için bu dökümanda mootools ile ajax eklentisini kullanmayı göreceğiz. Diğer kütüphaneleri de kullanarak farkı görebilirsiniz.

Mootools ve ajax

http://mootools.net/ adresinden mootools’u ajax seçeneği ile derleyerek indirmelisiniz. Sayfa başında mootools.js dosyasını include edin. Basitçe ajax isteği için kod bloğu şöyle :

Çoğu mootools eklentisi, nesnesindeki gibi zorunlu kısımlar nesneye ilk parametrelerde veriliyor. Sonra da bir ayar dizesi (nesne olarak)
şeklinde 2. parametre belirleniyor.

Burada ilk parametre string olarak istek yapılacak url, yani istek yapılacak dosya adı. Bir php dosyası veya html dosyası veya dışarıda bir web sayfası urlsi olabilir. Ayar dizesindeki parametrelerden önemli olanların açıklamaları da şöyle :

Şimdi bu parametreleri örneklerle açıklama çalışacağım. Önce bir bağlantıyı (link) ajax ile çağırıp dönen içeriği ekranda bir bölüme yazdıralım.

Bu sayfamız olsun. Linke tıklantığında ajax_istek fonksiyonunu url parametresiyle çağırıyor görüldüğü gibi. Ayrıca icerik kimlikli bir div var. İçeriği buraya basacağız.

Basit bir ajax isteği gördüğünüz gibi. Şimdi bunu biraz geliştirelim ve linke tıklandığında sayfa içeriği “Yükleniyor” olsun, içerik geldiğinde de zaten yükleniyor kalkacak.

Biraz daha geliştirip yüklenme işlemi bittiğinde birşeyler yaptıralım.

Örneğin burada alert yerine sayfanın bir köşesinde bu uyarıyı gösterip gizletebilirsiniz, Ya da içeriği basmayıp bir işlem yaptırabilirsiniz. Bunu örneklemek için işe biraz form katacağım. mfyz.com’da üye kayıt sayfasında kullanıcı adı kontrol mekanizmasını anlatacağım. Kayıt formuna girdiğinizde kullanıcı adı seçip yazdıktan sonra bilgi giriş kutusundan çıktığınızda (yani başka bir nesenye odaklandığınızda) otomatik olarak kullanıcı adının veritabanında olup olmadığını sorgulayıp cevabı geliyor ve ona göre kutu yeşil veya kırmızı oluyor farkında iseniz.

şeklinde bir inputum var ve onBlur olayına yani kutudan odak gittiğinde bir fonksiyon çağırıyorum.

Bakın burada 2 parametreyi örnekledim. Birisi data parametresi diğeri de update kullanmak zorunda olmadığımız. Ayrıca onComplete’de tanımladığımız fonksiyonun ilk parametresi yani cevap değişkeni ajax ile dönen içeriği alıyor.

Yukarıda yaptırdığım işlem özetle şöyle: kullanici_adi_kontrol.php dosyası get methodu ile gelen kadi değişkenindeki string’i veritabanında aratıyor. Eğer yoksa ekrana sadece “OK” basıyor. Eğer başka bir hata varsa hatayı basıyor. Mesela kullanıcı adında geçersiz karakterler var veya veritabanında o kullanıcı mevcut. Yani hata varsa “OK” dışında birşeyler oluyor. PHP hatası da olabilir.

onComplete’da cevap değişkenini kontrol ettiriyorum. Eğer “OK” string’i ise kullanıcı adı yok yani ekrana başarı sinyali vermem gerek. Ben de etkileşimli olması için bilgi giriş kutusunun çerçevesini yeşil yapıyorum. Mootools ile css özniteliklerini değiştiriyorum. Eğer OK değilse bir hata vardır. Çerçeveyi kırmızı yapıp cevap değişkenini yani dönen hatayı ekrana yazdırıyorum alert ile.

Bu istekleri ve cevap işleme tekniklerini uygulamanıza göre geliştireceksiniz, Zaten burada o istek-cevap ilişkisinin boyutu önemli değil. Yani çok büyük istekler de yapabilirsiniz çok küçük de.

Formları otomatik ajax ile post etmek

Mootools’da çok güzel bir özellik daha var. Formunuzu çok pratik bir şekilde ajax ile göndermek.

böyle bir formunuz olduğunu varsayalım. Oldukça basit yani. Gönder butonuna basıldığında normal şekilde kayit.php dosyasina post methodu ile 2 değişken gidiyor biliyorsunuz. kayit.php’de de bu değişkenleri işliyorsunuz.

kodu sayesinde formu ajax ile gönderebilirsiniz. Gideceği url, methodu ve datası otomatik olarak bulunup gönderiliyor. Örnek kullanımını da şu kodlar özetleyebilirim :

Gördüğünüz gibi submit yerine buton kullanarak bir fonksiyon çağırıyorum. ajax için kullandığımız send fonksiyonunun ilk parametresi ajax için kullandığımız ayar dizesi oluyor. Yani update ile gelen içeriği biryere yazdırabilir veya ajax için uyguladığımız taklaları burada da attırabilirsiniz.

Mootools ajax dökümantasyonu : http://docs.mootools.net/Remote/Ajax.js
Ajax Demoları : http://demos.mootools.net/Ajax
http://demos.mootools.net/Ajax.Form

Not : Nesnelere olay ekleyip bu işleri yaptırmak daha kolaydır. Mesela form ajax ile post etmek için submiti butona çevirmek ilkel bir mantıktır. Forma doğrudan onSubmit olayı ile kural belirleyerek yaparız aslında bu işlemleri. Fakat dökümanda daha fazla kafa karışıklığı yaratmaması için doğrudan fonksiyon çağırtıp işlem yaptırdım.

Mootools ile ipucu açıklamaları (tooltip)

İpucu Açıklaması?

mfyz.com’da oldukça fazla gördüğünüz açıklama kutucukları var. Bir nesnenin (resim, buton, yazı, bağlantı) üzerine geldiğinizde açıklama olarak görünen ve fare imlecini takip eden kutulardan bahsediyorum.

Önceki versiyonlarda bu açıklama kutuları hem daha farklı idi hem de kendi yazdığım bir ufak kütüphaneyi kullanıyordu. Ancak kütüphane her ne kadar tüm tarayıcılarda çalışma destekli (crossbrowser) olsa da problemler yaşıyordum kodlarken. Aynı şekilde sadece ipucu eklemek için bile html’i oldukça kirletiyordum.

v0.7 ile mootools çatısı (framework) üzerinde çalışmaya başladım. Bu süreçte mootools’daki birçok eklentiyi kullandım. Bunlardan birisi de ipucu eklentisi. Tips.js olarak geçiyor.

Mootools’un Tips.js dökümantasyonuna erişmek için: http://docs.mootools.net/Plugins/Tips.js

Bu dökümanda bu ipucu kutucularının yapımı, ayarlanması ve stille desteklenmesini anlatacağım.

Nasıl çalışıyor?

Eski kütüphaneyi (ipucu) hatırlayanlar bilir, bir nesneye ipucu eklemek için ona onMouseOver ve Out gibi olaylarına tanımladığımız fonksiyonlarla ve parametrelerle bu işi yapabiliriz. Fakat mootools’da css adresilerindeki elemanları seçebilme özelliği var. Aslında tips kütüphanesinin yaptığı iş, verilen adreslerdeki tüm elemanlara MouseOver ve MouseOut olayları eklemek. Bu olaylarına atanan fonksiyonlarla da bu kutucukları fare imlecine göre göstermek. Ama bunu oldukça pratik bir şekilde yapıyor.

İpucu eklemek istediğimiz nesneleri “ipucu” adında bir sınıfta toplayalım, Yani css sınıfı olarak “ipucu” sınıfı ekleyelim.

Örneğin :

olan nesneyi

şeklinde ipucu sınıfına dahil edip “<b>title</b>” argümanı olarak bir açıklama ekledik.
Hatta bu açıklama içerisinde html etiketleri bile kullanabiliriz. (Tırnak kurallarına uygun olduğu sürece sorun çıkarmaz)

Bu işlemi sadece bağlantılarda değil tüm html nesnelerinde uygulayabiliriz. Resimler, butonlar, yazılar vs.

Şimdi mootools Tips kütüphanesiyle ipucu tanımlayalım. (Bu tanımları mootools’u include ettikten sonrak bir javascript dosyanızda veya html dosyanızdaki bir javascript bloğuna koyarak yapın.)

new Tips tanımı içerisinde ilk parametre (zorunlu) ipucu uygulanacak nesneleri belirliyor. Mootools’un nesne seçicilerini kullanarak CSS adresine göre yani .ipucu belirteci ile ipucu sınıfındaki tüm nesneleri gösteriyoruz.

ikinci parametre ile de bir ayar dizesi (nesne olarak) belirtiyoruz. Parametreler hakkında detaylı bilgiyi dökümantasyonundan edinebilirsiniz.

Ya da geçiş efekti uygulatarak gösterip-gizlemek isterseniz :

Bu kod ile 500 milisaniyede transparanlıkla gösterebilir veya gizleyebilirsiniz.

Peki nasıl görünecek, görünümünü nasıl değiştireceğim?

Tabiki css ile yapacağız. Ayar parametrelerinden className parametresi ile ipucu için çizdirilen html nesnelerinin sınıf adlarının başlangıcını değiştirebilirsiniz. Eğer değer vermezseniz varsayılan olarak bu sınıfların adlarının başlangıcı “tool” olacaktır.

Bu sitede kullandığım stile göre örnek vermek istiyorum, ben className kullanmadım. Yani varsayılan olarak “tool” ile başlıyor.

Bu stilde değiştirmeye çalışılan html kodu aslında şöyle, yani Tips eklentisi html’e şu kısmı sonradan dinamik olarak ekleyip ekranda gösteriyor.

Ben link url’sini görüntülemek istemiyorum. tips eklentisi otomatik olarak ekliyor url’yi. Gizlemek için css’de display: none; yaptım.
En dıştaki tool-tip çerçevesinin stillerini kutu olarak düşünürsek ayarlıyorum. Yazı için de tool-text sınıflı nesneyi düzenliyoruz.

Eğer className’e fatih değerini verseydik css sınıf adları fatih-tip, fatih-text, fatih-title gibi olacaktı. Bu tanımı farklı sınıflara farklı className ile yaparak farklı stillerde ipuçlarını aynı sayfada gösterebilirsiniz.

Tam örnek için http://demos.mootools.net/Tips adresindeki demoyu inceleyebilirsiniz.