YUI’ye Baslangic: YUI Nasil Kullanilir?

Serdar — Fri, 13 Nov 2009 00:30:34 +0000

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.

Kopyaladığımız kodu sayfamızın 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:


  
  
    Adınız*
    
    adınızı giriniz
  
  
    Doğum yılınız*
    
    sadece 4 haneli sayı giriniz

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.

YUI Selector IE8 Bug and Solution

Serdar — Mon, 09 Nov 2009 12:26:37 +0000

We used YUI 2.5.2 version for a long time on markafoni.com. With the new face of markafoni I decided to update YUI version. I updated YUI to 2.8rc version, but surprisingly I saw javascript errors in all IE8 pages. After googling I found the solution. The problem is was here in selector.js (or selector-min.js):

if(YAHOO.env.ua.ie && YAHOO.env.ua.ie<8)

Change to:

if(YAHOO.env.ua.ie && ((!document.documentMode && YAHOO.env.ua.ie<8) || document.documentMode < 8))

YUI 3 experimental example

Serdar — Tue, 09 Sep 2008 11:59:10 +0000

As a YUI fan, I am excited about new release of YUI. There is a total diffrence between YUI 2.x and YUI 3.x. Now it is time to try new YUI 3.x

I made an experimental example using Node and Event modules. Here is the example.

Creating elements are very easy with new YUI:

Y.Node.create('
Lorem ipsum
');

My Portfolio

Serdar — Fri, 05 Sep 2008 12:18:00 +0000

markafoni.com : Markafoni is an e-commerce site. It is a Django Project, so I worked only front-end.

icanfootball.com: I Can Football is a football game by Sobee. I used Codeigniter and YUI on this site. It was my first MSSQL project.

usaksofrasi.com : Uşak Sofrası is my experimental project. It is a clone of Yemek Sepeti -food order site-. Usaksofrasi is my first codeigniter project.

trabzoncell.com.tr : Trabzoncell I fully coded backend and frontend. As my favourites I used YUI and Codeigniter.

turkolimpiyattakimi.gov.tr : Türk Olimpiyat Takımı is the offical site of Turkish Olympic Team. I developed all front-end on this site.

Adınız*		adınızı giriniz
Doğum yılınız*		sadece 4 haneli sayı giriniz

Web Development Blog by Serdar AKARCA » yui