Merhaba arkadaşlar ;

Dreamweaver CS3 ile birlikte gelen Spry Framework başlığında tasarımcıların işlerini oldukça kolaylaştıracak bazı kontrolleri uygulamalı göstermek istiyorum. Öncelikle Spry Framework aslında Adobe'nin Dreamweaver'ın arayüzüne Ajax teknolojilerini kullanarak eklediği bazı hazır kontrollerin genel adı. Ajax bildiğiniz üzere sayfalarımızda ziyaretçilerimizden gelen etkileşimleri tüm sayfayı değil sayfanın belli bir kısmını servera ileterek oradan gelen sonuçları da ekrana yazdırabilme yani askenron iletişimdir. Bu tüm sayfanın gidip yüklenmemesi nedeniyle inanılmaz bir veritabanı,bant genişliği ve kod optimizasyonudur. Zaten Visual Studio kullanıcıları Update Panel sayesinde yine bir satır kod yazmadan Ajax'ın veli nimetlerinden faydalanıyor.

Dreamweaver içerisinde Spry Framework'unden kullanabileceğiniz kontroller 4'e ayrılmış durumda. 3 Tanesi Spry tabinin altındaki gibi XML gibi okunabilir veri tutan dosyaları sayfamıza filtre ve stiller kazandırarak ekleyebileceğimiz Data Spry Widgets. Data kısmından bir XML dosyasını Load edip onun istediğiniz tagindeki veriyi html'inize ekleyebiliyorsunuz. Açıkçası bu konuda Expression Web tasarımcılara çok daha esnek ve geniş(Excel,Access,SQL..) uygulamalara izin veriyor.


Arayüzde de gri bir çizgiyle ayrılmış kısımlardan ikincisi tasarladığımız formlara bazı validation(geçerlilik) kontrolleri ekleyebileceğimiz kısım. Daha önce Dreamweaver eğitimlerinde Behaviors Panelinden eklenen Validate Form ile Javascript sayesinde sadece ekran mesajı ile uyarı verebiliyorken şimdi kırmızı uyarıları yan tarafta anında verebiliyoruz. Örnek uygulamam bu yazının en sonunda. Açıkçası bu konuda da .Net validation kontrolleri eğer Update Panel içerisinde kullanırsanız yine 1 satır kod yazmadan çok daha esnek ve tasarımı geliştirebilir şekilde geliyor.
Ve üçüncü ve belkide tasarımcılar adına en önemli adımda User Interface ile bazı hazır Ajax Menuleri çok kolay bir şekilde kullanabiliyoruz. İşte bunlar gerçekten kullanılısı güzel menüler. 4 tane ve eklendikten sonra alt panelden Customize this Widget ile Help dosyasında da gösterdiği gibi bu çalışmayı saklamaya çalıştığınızda bazı js ve css dosyaları da ekleyecek.Onları sağ üstteki CSS panelinden bu menü kontrollerinin tüm arkaplan reng,yazı,büyüklük genişlik özelliklerini biraz CSS bilgisiyle değiştirebilirsiniz.Ben alttaki örnekte bazılarının değiştirdim.


Ve en eğlenceli son adımımızda da Efektler var.Çalışmanızdaki herhangi bir div tagine direk uygulanabilen Window-Behaviors paneliyle erişilen Effects kısmında da Spry Framework sayesinde bu div tagi içerisindeki unsurlara,yazı,fotoğraf,flash neyse bu efektleri kazandırabiliyoruz.Div nasıl eklenir diyende olabilir,tabiiki koddan da eklenebilir ama tasarımcı olarak Layout sekmesinden Draw AP Div 'e tıklayıp ekrana geldiğinizde bir artı çıkacak böylece bir div çizebilirsinizBu divin solüstündeki kulakçığına tıklayarak taşıyabilir ve özelliklerini alltaki propertiesten görebilirsiniz.Bu division'ın positining'i default absoulte oluyor ona dikkat.Ayrıca tek divisiona alttaki efektleri çokluda uygulayabiliyorsunuz derslerde öğrencilerim hem fade out hemde shake'i uyguladılar mesela sallanarak görünmez olabiliyor,sizde denersiniz çeşitli kombinasyonları. Örnekleri :


(Google Reader'dan yazılarımı okuyanlar bu kısmı göremezlerse iframe ve object taglerinde sorun olabiliyor sayfanın kendisinden takip edebilirler)

Faydalı olması dileğiyle...