Merhaba arkadaşlar, Sizlere ilk yazımda drupal tema geliştiricilerinin genelde sorun yaşadığı jquery ile ilgili bilgiler vereceğim.

Sizlerinde çok iyi bildiği gibi Drupal konusunda, eksikliğini en çok hissettiğimiz şey gelişmiş ve görsel anlamda zengin temalar. Drupal her ne kadar preprocess gibi geliştiricilerin drupal data çıktılarını değiştirmeleri için gelişmiş fonksiyonlar sunsa da bunları kullanmak için biraz araştırma ve drupal’ın çalışma mantığı hakkında bilgi edinmek gerekiyor. Bu yazımızda pek fazla Preprocess fonksiyonuna değinmeyeceğiz ancak bir sonraki ders notlarına bu konuyu eklemeyi planlıyorum.

Şimdi gelelim kendi konumuza: jquery UI. Konu hakkında kısa bir bilgi vermek gerekirse, web siteleri için görsel anlamda zengin içerikler oluşturmak için kullanılan bir jquery kütüphanesi diyebiliriz. Bu kütüphane içerisinde web siteniz için otomatik tamamlama, tarih seçici, diyalog kutusu, yuvarlak köşeli kutular, sekmeler, ilerleme çubuğu gibi eklentilerin yanı sıra görsel efektler oluşturabilmeniz için de kütüphaneler bulunmaktadır.

Şimdi size Drupal temanızda jquery UI ile sekme oluşturmayı anlatacağım. İlk olarak bir ihtiyaç listesi yapalım.
Gerekenler:

• Drupal 6.x
• Jquery 1.3.2
• Jquery UI 1.7.3

Şimdi gelelim ihtiyaç listesinde ki sorunlara; Drupal 6.x jquery 1.2.6 ile beraber gelmektedir fakat bizim kullanacağımız eklentiler ve jquery UI için en az jquery 1.3.2 gerekmekte bunu da drupal sitesinde jquery update modülü yardımı ile gerçekleştireceğiz.

İlk olarak http://drupal.org/project/jquery_update adresinden ilgili modülü sitemize kuralım. Burada dikkat etmemiz gereken, jQuery Update 6.x-2.x: jQuery 1.3.x modülünü kullanmamız; ancak bu yazımı hazırlarken modül hala düzgün olarak çalışmamaktadır. Eğer bu modülde sorun yaşarsanız jQuery Update 6.x-1.x: jQuery 1.2.x modülünü kurun ve manuel olarak jquery 1.3.2 yükseltmesi yapın. Bunun için, Jquery sitesinden jquery 1.3.2 mini dosyasın indirin (Bu bağlantıdan indirebilirsiniz) ve indirdiğiniz dosyanın adını jquery.js olarak değiştirin ve drupal’ın kurulu olduğu dizin altında misc/ klasörü içine kopyalayınız. Bu yaptığımız işlem sayesinde, Drupal ile gelen 1.2.6 sürümünü 1.3.2 ile değiştirmiş olduk. Ancak, bu dosyayı bir yere daha kopyalamamız gerekiyor: jquery_update modülü altında replace klasörünü göreceksiniz; şimdi indirmiş olduğumuz jquery.mini.js dosyasını replace klasörü içinde bulunan jquery.mini.js ile değiştirelim ve bu işlemden sonra Drupal yönetim paneline giderek "Site yapılandırması" altında jquery update seçeneğini göreceksiniz (admin/settings/jquery_update); buradan kullanmak istediğimiz jquery dosya tipimizi Minified olarak belirliyoruz ve böylece jquery sürümümüzü 1.2.6’dan 1.3.2 yükseltmiş olduk.

Şimdi jquery UI’yi sitemize tanıtalım.

Jquery UI’yi sitemize tanımlamamız için bize iki adet modül gerekecek bunlar; jquery_ui ve jquery_ui_loader. Bu modülleri de http://drupal.org/project/jquery_ui ve http://drupal.org/node/654090 linklerinden indirebilirsiniz. Burada unutmamanız gereken jquery_ui modülü için Jquery UI Kütüphanesinin gerekmesi. Bu kütüphaneyi http://jqueryui.com/download sitesinden indirmemiz gerekiyor. jquery 1.7.3 versiyonunu indirdiğinizden emin olun çünkü 1.7.3 versiyonu sitemize tanıttığımız jquery 1.3.2 ile uyumlu çalışmaktadır.

Bu dosyamızı indirdikten sonra içerisinde development-bundle adında bir klasör bulacaksınız, kullanacağımız bütün eklentiler efektler temalar vs. bu klasörümüzün içinde bulunmakta. Şimdi bu klasörümüzü daha önce indirdiğimiz jquery_ui modülü klasörümüz için jquery.ui adına kayıt edelim (/modules/jquery_ui/jquery.ui/ şeklinde olduğundan emin olun). Artık modüllerimizi etkinleştirebiliriz. Şimdi yönetim panelinden jquery_ui ve jquery_ui_loader modüllerimizi aktif hale getirelim artık sitemiz jquery 1.3.2 ve jquery UI 1.7.3 tanımış durumda.

Son olarak temamızda kullanacağımız jquery_ui eklentilerini ekleyelim, bunun için yönetim panelimizden "Site yapılandırması" altında Jquery UI loader göreceksiniz (admin/settings/jquery_ui_loader); burada bulunan seçenekler temamızda hangi eklentileri ve hangi jquery_ui temasını kullanacağımızı tanımlıyoruz.

Bu yazımızda temamıza sekme ekleyeceğimiz için, jQuery UI load settings altında > Files to Load göreceksiniz, buraya ui.tabs yazıyoruz böylece temamıza ui.tabs.js scriptini eklemiş olduk ve jquery ui load settings seçenekleri altında göreceğiniz Theme files to Load: jquery ui ile kullanacağımız temamızı belirlememize yarıyor. Standart olarak default/ui.all.css geliyor fakat jquery ui sitesinden istediğiniz temayı indirerek yüklemiş olduğumuz jquery_ui modülü içerisinde yer alan jquery.ui/themes klasörü altına ekleyerek kullanabilirsiniz. Ben standart tema yerine indirmiş olduğum black-tie temasını kullanacağım siz de temanıza uygun bir ui teması yapabilir yada hazır temalardan birisini kullanabilirsiniz. UI temaları hakkında daha fazla bilgi için http://jqueryui.com/themeroller/ sitesini ziyaret edebilirsiniz ve hoşunuza giden temaları buradan indirebilirsiniz ya da kendi temanızı kendiniz her hangi bir kod yazmadan kolayca yapabilirsiniz.

Şimdi yapmış olduklarımıza bir göz atalım, sitemizi jquery 1.3.2 versiyonuna yükselttik ve jquery_ui 1.7.3 kütüphanesini kurduk ve son olarak temamızda kullanacağımız ui.tabs kütüphanesini etkinleştirdik. Artık tema dosyamıza giderek kodlarımızı yazmaya başlayabiliriz.

Şimdi temamıza 3 adet sekme ekleyelim; ilk olarak page.tpl.php dosyamızı açalım ve aşağıdaki kodu sekme eklemek istediğimiz yere yazalım.

Sadece bu kodları kullanarak sekmeleri görmemiz mümkün değil şimdi jquery_ui tab scriptinde bu sekmelerimizi tanıtalım bu işlem için temamıza kullanacağımız bir js dosyası gerekiyor bunu da tema klasörümüz içine sekme.js dosyasını oluşturalım ve bu dosyamızı da temamıza tanıtalım. Bu işlem için tema_adı.info (kullandığınız tema klasörü içinde uzantısı .info olan dosya) dosyamızı açalım bu dosya içerisinde tanımlı bloklar(regions), css dosyaları, scriptler göreceksiniz.

şimdi sekme.js dosyamızı
scripts[] = sekme.js olarak dosyamıza ekleyelim böylece sekme.js dosyamız temamıza eklenmiş oldu.
Şimdi sekme.js dosyamızı açalım ve içerisine aşağıdaki kodu ekleyelim

Eklemiş olduğumuz kod html id’si “sekmeler” olan tagları arayacak ve yazmış olduğumuz html kodunu jquery tarafından görsel açıdan zengin sekmelere dönüştürecek. Burada yapmış olduğumuz işin screenshot’ını görebilirsiniz.

(Not: UI teması black-tie)

Her ne kadar bu kod yeterli olsa da Biraz daha bilgilendirme amacı ile bu sekmelerimizi ajax ile sunalım bunun için yukarıda yazmış olduğumuz kod yerine aşağıda ki kodu ekleyelim

Eklemiş olduğumuz kod ile artık sekmelerimizi ajax ile çekiyoruz. Peki bunu neden yapıyoruz? Bir de buna değinelim, burada basitleştirmek amacı ile sizlere sadece sabit 3 sekme ekledik fakat bu sekmeleri eğer Blok olarak tanımlarsanız (regions) ve bu sekmelerde bulunan bloklara atadığınız views blokları gibi dinamik içeriklerin yüklenmesi için ajax kullanmak daha mantıklı olacaktır. Ajax dışında sekmelerimize efektler, renkler, geçişler eklemeniz de mümkün. Bu özelikler için http://jqueryui.com/demos/tabs/ adresini incelemenizi öneririm. Burada, Options, Events, Methods, Theming seçenekleri göreceksiniz; bütün kodlar ve örnek dosyalara verdiğim linkten ulaşmanız mümkün.

Bu yazımızda sizlere jquery_ui ile tema geliştirme konusunda biraz bilgi vermeye çalıştım. Basit bir şekilde temanıza sekme eklemeniz mümkün bunun yanı sıra, http://jqueryui.com/demos/ sitesinde gördüğünüz bütün eklentileri aynı mantıkla kolayca sitenize eklemeniz mümkün olacak. Umarım faydalı olmuştur.