Photoshop Magazin
 


Spry Framework Data Set Kullanımı

01 August 2009 | Sayı: Aug 2009
 
1 2 3 4 5
 


Spry Data Set Nedir?
Spry Framework hakkında bu son dersimizde Spry Data Set işlemlerini ve bize sağlayacağı
avantajları konuşacağız. Spry Data Set aslında bizim bir veri kaynağında (XML dosyası veya HTML dosyası gibi) hazırladığımız verileri barındıran bir JavaScript nesnesidir. Dreamweaver ile, bu Javascript nesnesini oldukça hızlı bir şekilde oluşturabilir.
Alınan veriler, satır ve sütunlardan oluşan standart bir tablo formundaki bir veri dizisi oluşturur. Bu dersimizde bunları nasıl yapacağımızı detaylıca inceleyeceğiz.

Dreamweaver’ı kullanarak bir Spry Data Set oluşturduğumuzda, verilerin web sitenizde nasıl görüntülemek istiyorsanız o şekilde düzenleyebilirsiniz. Data Seti, satır ve sütun yapıları belli, verileri olan sanal bir tablo gibi düşünebilirsiniz. Javascript
sayesinde sayfayı Refresh etmeden verileri istediğiniz şekilde sıralayabilirsiniz.

XML Nedir?
XML, HTML gibi bir biçimleme dili değildir. Sadece veriyi kullanım amacına uygun olarak etiketlemek için kullanılan bir dildir. Zaten isminin açılımı da Genişletilebilir Etiketleme Dilidir Genişletilebilir İşaretleme Dilidir (eXtensible Markup Language)*. XML hem insanlar hem bilgi işlem sistemleri tarafından kolayca okunabilecek dokümanlar oluşturmaya yarayan, W3C tarafından tanımlanmış
bir standarttır. Bu özelliği ile veri saklamanın yanında farklı sistemler arasında veri alışverişi yapmaya yarayan bir ara format
görevi de görür.

HTML’i de tasarlamış olan Tim Berners Lee tarafından tasarlanmıştır. XML dilinin düzenlenmesi de W3C’nin sorumluluğundadır. XML dökümanları ağaç veri yapısında olurlar. Bağımsız imler yapıyı oluştururken, içerik ya imin özelliği olarak ya da iki im arasında gösterilir.**

Şimdi gelin birlikte bir mağazaya ait ürün listesinin Spry Data Set ile oluşturulmasını inceleyelim. Öncelikle ürün listesini oluşturmakla başlayalım.

Ürün listemizde sıra no, ürün ismi, açıklaması ve fiyatı olacağını varsayalım.

İlk adım: XML yapısını oluşturalım.


İlk XML belgemizi oluşturmak için File=>New komutuyla işe başlayalım. Açılan listeden XML seçeneğini işaretleyerek ilk XML belgemizi yaratalım.

XML dökümanları ağaç veri yapısında olurlar demiştik hatırlarsanız. Bu yapının nasıl olduğuna bakalım şimdi.

 

XML verimiz hazır olduğuna göre artık Data Setimizi oluşturmaya başlayabiliriz. Daha önceki yazılarımızı okuyanlar hatırlayacaklardır

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), işlemleri içindir.

Biz bugün ilk ikon olan Spry Data Set butonunu kullanacağız.


Spry Data Set butonuna bastığınızda eğer kaydetmemişseniz dökümanı kaydetmenizi isteyen bir uyarı çıkacaktır.
Dökümanı kaydettikten sonra tekrar Spry Data Set butonuna bastığınızda karşınıza Data kaynağını belirtebileceğiniz bir pencere
çıkar burada açılan menüden XML’i seçin.

Yeni veri kümesi için bir ad belirleyin. Veri kümesini ilk oluşturduğumuzda, varsayılan ad ds1’dir. Veri kümesi adı, harf, rakam ve alt çizgi içerebilir, ancak bir rakamla başlayamaz.


XML veri kaynağınızı içeren dosya yolunu belirtin. Bilgisayarınızdaki bir dosyayı seçmek için Browse düğmesini tıklatarak dosyayı seçebilirsiniz.

Dreamweaver Satır Öğeleri (Row Element) penceresinde XML veri kaynağını oluşturur ve seçim için uygun veri öğelerinin XML yapısını görüntüler. Yineleyen öğeler artı (+) işareti taşırken alt öğeler girintiyle gösterilir.


Görüntülemek istediğiniz verileri içeren öğeyi seçin. Genellikle bu öğe, birkaç alt öğe (<isim>, <aciklama>, <fiyat>) içeren yinelenen bir öğedir (<urun_ogesi>).

Sonraki aşamada ise sütun özelliklerini (string, number,date, html) ve sütun hizalama kriterini seçebilirsiniz. Bir sonraki aşamada
da data yerleşim şeklini seçtikten sonra Finish butonuna basarak işlemi sonlandırabilir ve tabloyu sayfada görebiliriz.
F12 tuşuna basarak önizleme yapmayı ihmal etmeyin :) Gelecek sayıda görüşmek üzere.

Hoşçakalın.
Kaynaklar: * Belgeler.org ** Wikipedia *** Adobe.com

 

August 2009

 


Dreamweaver