﻿ Dergi May 2009 Sayısı - Dreamweaver ve Spry Framework Kullanımına Giriş | Photoshop Magazin
Spry Framework Ajax teknolojilerini kullanarak eklediği bazı hazır kontrolleri tanımlıyor. Her ne kadar web tasarım uzmanları ve / veya ileri düzez web tasarımcısı olan kullanıcıları hedeflesede kolay kullanımı ve pratik yapısıyla başlangıç üzeri bilgi sahibi olan herkese görsel açıdan tatmin edici efektler hazırlama imkanı sunuyor.
• jQuery (http://www.jquery.com),
• Prototype (http://www.prototypejs.org/)
• Mootools (http://www. mootools.net)
Bu Framework’lerin nasıl çalıştıklarını ilerleyen sayılarda inceleyeceğiz ancak bu sayımızda Spry’a odaklanalım. Bu Framework’leri kullanarak yapamayacağınız şey neredeyse yok gibi ancak kullanacağınız ufak efektler veya basit form kontrolleri için bu kütüphaneleri eklemeniz kodlarınızın gereksiz uzamasına ve performans kaybına neden olabilir. Bu nedenle basit işlerimizde Spry’ı kullanmak karlı olacak gibi duruyor.
Üstelik Spry Framework Adobe Labs tarafından geliştiriliyor. Spry adeta html ve css iie birlikte çalışan bir eklenti gibi hazırlanmış. Adobe’ye göre Spry’ı geliştirme nedeni birçok kullanıcının AJAX’a nasıl başlayacağından emin olamaması.
Bu nedenle Spry geliştirildi. Spry jQuery, Prototype ve Mootools kadar kompleks ve gelişmiş özelliklere sahip değil ama işini düzgün yapıyor.
Gelelim bunları Dw içinde nasıl kullanacağımıza. Dw açıldığında
Insert Panel üzerinde bulunan tablardan SPRY tabına bastığımızda 3 bölüme ayrılmış vaziyette Spry araçlarını bulabilir ve tek tıklama ile çalışmanıza ekleyebilirsiniz. İlk bölümde yer alan 4 ikon Spry Data (XML, HTML tabanlı bilgileri kullanılabilir formata dönüştürme), sonrasında Spry ile gelen form kontrol araçları ve en sonunda da 5 adet widget olarak adladırılan hazır aracı bulabilirsiniz. Ayrıca Spry Effects (Efektler) adında bir bölüm daha yer alır.
Gelin birlikte Spry kullanarak nasıl açılır menü yapabileceğimize bakalım.
Öncelikle menümüzü oluşturmak için eğer kapalıysa Cntr+F2 (Apple kullanıcılar Elma+F2) tuşlarına basarak Insert Paneli’ni aktif edelim. Insert Paneli üzerinde yer alan Spry tabına tıklayalım. Açılan tabda bulunan bölümlerde en solda yer alan Spry Menubar butonuna bir kez tıklayalım.
Açılan pencereden yatay veya dikey ne tür bir menü yapmak istiyorsak ilgili seçeneği işaretleyelim. Ben yatay bir menü yapacağım için Horizontal seçeneğini işaretledim. OK butonuna basarak menümün sayfamda görünmesini sağlayabilirim. Burada dikkat edilmesi gereken bir husus var. Bu işlemi yapmadan önce mutlaka dokümanımızı kaydetmemiz gerekiyor. Eğer kaydedilmemiş bir dokümanda bu işlemi yaparsak Dw bize kaydetmemiz gerektiğini nazik bir dille hatırlatıyor.
OK butonuna bastığımızda menümüzün kaba yapısı karşımızda.
Evet menümüz gayet güzel görünüyor. Gelin birde kod bölümüne bakalım neler olmuş, sayfaya nerelere neler eklenmiş.
Burada ilk göze çarpan kısım <head></head> arasına bir Js bir de css uzanlılı dosya eklendiğidir. Bunlardan Js uzantılı olan dosya bizim menümüzün efekt kısmını, css dosyası ise görünümüne ait bilgi ve kodların olduğu dosyalardır.
Alt kısımdaki kodları incelediğimizde ise sırasız liste <UL> etiketi ile başlayan ve devam eden bir liste yapısına rastlıyoruz. Buradaki açılır alt menü yaparken kullanılan iç içe geçmiş sırasız liste <UL> yapılarına dikkat ediniz.
Artık istediğiniz kadar açılır menü hazırlayabilirsiniz. Ayrıca dikkat etmeniz gereken bir diğer husus da açılan etiketlerin mutlaka kapatılması gerektiğidir. Aksi taktirde istenilen sonucu almamız mümkün olmayacaktır.
Eğer etiketleri düzenlerken bir sorun yaşamazsanız menünüz düzgünce çalışacaktır. Görünümü şağıdaki gibi olacaktır ancak css dosyasıyla oynayarak istediğiniz renk ve boyutlarda menüler oluşturabilirsiniz. Gelecek sayı Spry Framework konusuna devam edeceğiz. Bu aylık bize ayrılan yerin sonuna geldik görüşmek üzere.