YUI’ye Baslangic: YUI Nasil Kullanilir?
YUI, YAHOO tarafından geliştirilen içerisinde javascript ve css kodları bulunduran gelişmiş bir arayüz kütüphanesidir. Arayüz geliştiricilerinin tüm ihtiyaçlarını karşılayacak kadar zengindir. YUI’nin nasıl kullanıldığını adım adım öğreneceğiz.
Devamını okumak için lütfen tıklayınız…
1. YUI’yi sayfamıza eklemek
YUI’yi sayfamıza eklememizin en kolay yolu YUI depency configurator sayfasındaki aracı kullanmaktır. Bu araç sayesinde istediğimiz YUI modullerini kolayca ekleyebiliriz. Resimde göründüğü gibi seçimlerimi başlangıç olarak şöyle yapıyorum:
Filter sekmesinden YUI dosyalarının nerede host edileceğini seçtim. YUI’yi kendi bilgisayarıma indirmeden ya da host alanıma koymadan kullanacağız. Hızlı başlangıç yapmak için bu şimdilik en iyi yöntem.
YUI CSS Packages sekmesinden sayfamız için gerekli ve yararlı CSS kütüphanelerini seçtim. Bu kütüphanelerin ne işe yaradığını bir sonraki adımda açıklayacağız.
YUI JavaScript Utilities sekmesinden Selector Utility ve son olarak utilities.js yi seçtim.
Seçimleri yaptıktan sonra YUI Depency Configurator’un benim için hazırladığı ‘Loading Script and CSS Directly’ sekmesinin altındaki kodu kopyalıyorum.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css"> <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/utilities/utilities.js&2.8.0r4/build/selector/selector-min.js"></script>
Kopyaladığımız kodu sayfamızın <head> tag’i içine yapıştırarak YUI’yi sayfamıza eklemiş oluyoruz.
Eklediğimiz dosyalar ne işe yarıyor?
Sayfamıza şu kütüphaneleri yükledik:
- YUI Fonts, Grids, Reset CSS: Bu CSS kütüphaneleri web tarayıcıları(browser) arasındaki farkları ortadan kaldırıyor. Hazırladığımız sayfaların her browserda aynı görünmesi için Reset CSS’i eklememiz gerekmektedir. Ayrıca Font’ların düzgün render edilmesi için de YUI Fonts kütüphanesi gereklidir. Grids CSS ise layout oluşturmamız için yardımcı bir kütüphanedir. Layout oluşturmak için ayrıca yardımcı bir aracımız var: YUI Grid Builder
- utilities.js: Utilities.js dosyası çok kullanılan kütüphanelerin toplamıdır. Utilities.js’yi ekleyerek yui, dom, event, animation, connection, drag&drop, element ve get kütüphanelerini yüklemiş oluyoruz.
2. Hello World: YUI’yle ilk javascript kodunu yazmak
YUI’nin javascript kütüphaneleri sayesinde html elementleri seçmek, seçtiğimiz elementlere listener eklemek ve bu elementlerin özelliklerini değiştirmek çok kolay.
Kolay bir örnekle başlayabiliriz. Hazırladığımız html form’ları javascript’le kontrol edelim. Doldurulması zorunlu alanlar varsa kullanıcıyı uyaran form validation kodunu yazalım.
Aşağıdaki formda tüm alanları doldurmak zorunludur.
Formu şu şekilde oluşturduk:
<form id="form1" action="#" method="post">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>Adınız*</th>
<td><input type="text" name="adiniz" class="zorunlu" /></td>
<td>adınızı giriniz</td>
</tr>
<tr>
<th>Doğum yılınız*</th>
<td><input type="text" name="adiniz" class="zorunlu yil" /></td>
<td>sadece 4 haneli sayı giriniz</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Gönder"></td>
<td> </td>
</tr>
</table>
</form>
Form’a kolayca erişebilmek için “id” tanımladık(id=”form1″). Adınız alanı için “zorunlu” class’ını ekledik. “zorunlu” class’ına sahip olan input’ların yazılmasını zorulu yapacağız. Doğum yılı için de hem “zorunlu” hem de “yil” class’ını ekledik. Her birini ayrı ayrı kontrol edeceğiz. İlk adım form’a listener eklemek. Yani form gönderilirken(submit edilirken) kontrolleri yapacak fonksiyonu atamak. Ama ondan önce birkaç kısayol tanımlayacağız.
var $D = YAHOO.util.Dom; // elementlerin DOM objesine erişmek için gerekli class var $E = YAHOO.util.Event; // elementlere listener eklemek için gerekli class var select = YAHOO.util.Selector.query; // elementleri seçmek için gerekli class
$E.on('form1', 'submit', function(e) {
formu_dogrula(e);
}); // 'form1' formuna listener ekledik
“form1″ id’li element ‘submit’ edilirken formu_dogrula. Şimdi formu_dogrula fonksiyonunu yazalım.
function formu_dogrula(e) {
// CSS3 Selector'leri kullanarak istediğimiz elementleri Selector class'ı sayesinde seçebiliyoruz. Detaylar için: http://developer.yahoo.com/yui/selector/
var zorunlu_alanlar = select('input.zorunlu'); // zorunlu class'ına sahip tüm input elemanlarını -array olarak- seçtik. YAHOO.util.Selector.query fonksiyonu elementleri seçip array olarak döndürür. Seçilen elementlerin tüm DOM özelliklerine erişmek mümkündür. ör: select('input.zorunlu')[0].style.display
var yil_alanlari = select('input.yil'); // yil class'ına sahip tüm input elemanlarını -array olarak- seçtik.
// Seçtiğimiz zorunlu_alanlar'ı kontrol etmek için hepsini teker teker for döngüsüyle gezeceğiz.
for(var i=0;i < zorunlu_alanlar.length;i++) {
if(zorunlu_alanlar[i].value == "") { // value boş ise
$D.setStyle(zorunlu_alanlar[i], 'background', '#FF7791'); // doldurulmamış alanı kırmızıya boyuyoruz. Dom fonksiyonları için: http://developer.yahoo.com/yui/dom/
alert('Lütfen gerekli alanları doldurunuz.'); // uyarı gösteriyoruz.
zorunlu_alanlar[i].focus(); // Doldurulmamış alana focus ettik.
$E.preventDefault(e); // formun submit edilmesini engelliyoruz. Tüm Event fonksiyonları için: http://developer.yahoo.com/yui/event/
return false;
}
else {
$D.setStyle(zorunlu_alanlar[i], 'background', '#97F297'); // Herhangi bir CSS kuralını setStyle fonksiyonuyla elementlere atayabiliriz.
}
}
// Zorunlu alanlar için kontrolleri yaptık şimdi de yil_alanlari'ni kontrol edeceğiz. Bu kez for döngüsü yerine YUI'nin batch fonksiyonunu kullanacağız. batch, fonksiyonel dillerdeki map'in karşılığır. For döngüsünden daha hızlı ve verimli çalışır. Ayrıca anlaşılması da daha kolaydır.
$D.batch(yil_alanlari, function(el) {
if(!YAHOO.lang.isNumber(el.value*1)) { // YAHOO.lang class'ı javascript yazarken sıkça kullanılan yardımcı fonksiyonları barındırıyor. Detaylar için:XXXXXXXXX
$D.setStyle(el, 'background', '#FF7791'); // yanlış doldurulmuş alanı kırmızıya boyuyoruz.
alert('Yıl alanına yalnızca rakam giriniz.'); // uyarı gösteriyoruz.
$E.preventDefault(e); // formun submit edilmesini engelliyoruz.
return false;
}
else {
$D.setStyle(el, 'background', '#97F297');
}
});
return true; // Burada tüm doğrulamalardan geçmiş olan formumuzun post edilmesi için true değerini döndürüyoruz.
}
Yaptığımız örneği ayrı bir sayfada görmek için buraya tıklayınız.
