Ders Web Sayfası   Bilgisayar Mühendisliği Bölümü   Ders Sorumlusu

Hazırlayanlar Ali Osman SERHATOĞLU Kaynak makaleleri göster Kaynak makaleleri gizle

 

 

resim

 

 

YUI

 

YAHOO KULLANICI ARAYÜZ KÜTÜPHANESİ

(YAHOO USER INTERFACE LIBRARY)

 

 

 

 

 

Ali Osman SERHATOĞLUaliser05@yahoo.com

Ankara, 2009

1.      GİRİŞ.. 3

1.1  Belge İçeriği Hakkında. 3

2. ÖRNEK UYGULAMA.. 4

2.1. Örnek Uygulama Hakkında. 4

2.2. Yahoo Kullanıcı Arayüz Kütüphanesi Yükleme. 4

2.3. Örnek Uygulama Kod Kesimi ve Açıklama. 5

3. YAHOO KULLANICI ARAYÜZÜ KÜTÜPHANESİ. 12

(YAHOO USER INTERFACE LIBRARY) (YUI) 12

3.1 Yahoo Kullanici Arayüzü Kütüphanesi  Nedir?. 12

3.2 YUI çekirdeği (YUI Core) 12

3.2.1 Yahoo Global Objesi 12

3.2.2 DOM Koleksiyonu (DOM Collection) 13

3.2.3 Olay Yardımcısı (Event Utility) 14

3.3 Yardımcı Programlar (Utilities) 15

3.3.1. Animasyon: 15

3.3.2. Tarayıcı Geçmiş Yöneticisi (Browser History Manager) 15

3.3.3. Bağlantı Yöneticisi (Connection Manager) 16

3.3.4. Çerez (Cookie Utility) 17

3.3.5. DataSource Utility. 17

3.3.6. Sürükle Bırak (Drag and Drop Utility) 17

3.4 Kullanıcı Arayüz Kontrolleri (UI Controls) 18

3.4.1 AutoComplete. 18

3.4.2 Buton. 19

3.4.3 Takvim.. 19

3.4.4 Renk Seçici 20

3.5 CSS Bileşenleri (CSS Components) 20

3.6 Geliştirici Araçları (Developer Tools) 20

3.7. Build Araçları 21

3.7.1 YUI Compressor 21

4. ADIM ADIM ÖRNEK PROJE.. 21

5. SONUÇ.. 21

6. KAYNAKÇA.. 21

1.      GİRİŞ

 

WEB Tabanlı Teknolojilerle proje gerçekleştirimi sırasında göz önünde bulundurulması gereken ve özellikle de kullanıcılar açısından hayati önemi bulunan en önemli kesim belki de sistemin kullanıcılarına sunmuş olduğu arayüz bileşenleridir. Bu arayüz bileşenlerinin kullanıcılar açısından kullanıcı dostu olması gerektiği gibi geliştiriciler açısından da gerçekleştirimi kolay, tekrar kullanılabilir ve yönetimi kolay olması gerekmektedir.

Günümüz web teknolojilerini düşündüğümüz zaman bu tarz bileşenleri her yeni projede tekrardan yazmak ya da var olanı yöneterek daha iyi hale getirmek ve yeni projelere adapte etmek gerçekten çok zaman alabilmektedir. Bunları sağlayabilecek kullanıcı ve geliştirici dostu arayüz oluşturmak çoğu zaman sunucu tarafındaki kodlara ayrılan zamandan daha fazlasını ayırmayı gerektirmektedir.

WEB 2.0 bileşenleri içeren AJAX destekli JavaScript kütüphaneleri, geliştiricileri bu gereksiz ve yorucu işlemlerden kurtarmak adına geliştirilen özel kütüphanelerdir. Yahoo Kullanıcı Arayüz Kütüphanesi (Yahoo User Interface Library) de bu kütüphanelerden en zengin içeriğe ve desteğe sahip, birçok örnek içeren ve kullanılması en kolay olanıdır.

Bir tanım vermek gerekirse: YUI (Yahoo User Interface), web geliştiricileri ve arayüz tasarımcılarının işlerini kolaylaştırmak amacıyla Yahoo’nun uzman geliştiricileri tarafından esasen JavaScript ile yazılmış yardımcı yazılımlar (utilities) ve kontrollerden (controls) oluşan bir kütüphanedir. Bu kütüphane BSD lisansı ile lisanslanmış ve tamamen ücretsiz olarak her türlü kullanıma açılmıştır.

YUI’nin kullanıcılarına AJAX desteği, Javascript ve CSS bileşenleri, kendi servisleri için Yahoo API’leri sağlamanın ötesinde en büyük getirisi arayüz tasarımcıları ve web geliştiricileri için belki de en büyük sorunu teşkil eden farklı tarayıcılar üzerinde çalışan scriptler üretebilme konusunda getirdiği kolaylıklardır. Kullanıcılarına tüm tarayıcılarda düzgün çalışan javascript bileşenleri sunarak popülerliğini her geçen gün artırmaktadır.

1.1 Belge İçeriği Hakkında

Bu belge ile son derece geniş olan Yahoo kullanıcı arayüz kütüphanesininin sunmuş olduğu hizmetler mümkün oldukça özlü bir şekilde ele alınmıştır. Kütüphane, kendi alanındaki diğer kütüphanelere göre artısı ve eksisi ile ele alınmış ve derinlemesine irdelenmiş ve incelenmiştir.

Belgenin devam eden kesimlerinde okuyucuya önce küçük çaplı bir örneğin gerçekleştirimi ve test edilebilmesi için gerekli bilgiler tüm ayrıntılarıyla verilmiştir. Ardından YUI kütüphanesi ve oluştuğu alt bileşenler detaylı bir anlatımla okuyucuya aktarılmış ve okuyucunun kütüphanenin sağladığı hizmetleri temel düzeyde anlayabilmesi ve uygulayabilmesi için gerekli deneyimin kazandırılması amaçlanmıştır. Son olarak da YUI’nin geniş çaplı bir proje olarak ‘Amatör Haber Sitesi’ içerisinde nasıl kullanıldığı tutorial olarak anlatılmış ve sözkonusu kütüphanenin kullanıcıya kendi projelerinde nasıl bir yaklaşımla kullanabileceği verilmek istenmiştir.

Bir uyarı olarak kullanıcının dökümanın geri kalan kesimini en iyi şekilde anlayabilmesi açısından ön gereksinim olarak JavaScript, HTML ve CSS bilgisine temel düzeyde de olsa sahip olması gerektiğini hatırlatmayı uygun görüyoruz.Ayrıca belgenin geri kalanında Yahoo Kullanıcı Arayüz Kütüphanesi (Yahoo User Interface Library) için YUI kısaltmasının kullanıldığını da belirtmekte yarar görmekteyiz.

2. ÖRNEK UYGULAMA

2.1. Örnek Uygulama Hakkında

Örnek uygulama ve uygulamaya dair açıklamalara geçmeden önce uygulamanın ele alınış tarzı üzerinde bir ön bilgi vermek yerinde olacaktır. Örnek uygulamada YUI ile alakalı kullanılan kütüphane bileşenleri, okuyucunun kod kesimini ve uygulamanın işleyişini takip edebilecek seviyede açıklanmakla yetinilmiştir. İlgili kesimlerin daha detaylı anlatımları için bir sonraki bölüme referanslar verilerek okuyucuya dökümanı takipte ve kütüphaneyi derinlemesine anlamada yol gösterilmeye çalışılmıştır.

Bunun yanında okuyucunun uygulamadan en az bilgiyle  en fazla yarar sağlayabilmesi açısından kullanımı yaygın, oldukça sade, YUI’nin sağladığı temel özellikleri içerisinde barındıran, gerçekleştirimi kolay ve en az düzeyde gereksinim isteyen böylece okuyucunun da açıklamalarla birlikte rahatlıkla  uygulayabileceği Takvim kontrolü (calender control) ele alınmıştır. Önce kod kesimleri adım adım incelenmiş ve en sonunda da kod bir bütün olarak verilmiştir.

Son olarak okuyucuya genel kanının aksine YUI’nin kullanımının, sağlanan devasa boyuttaki çevrimiçi dökümantasyonu, fazla sayıda örnek uygulaması ve bileşenlerinin olay bazlı gerçekleştirimleriyle aslında son derece kolay olduğu açıklamalarla gösterilmeye çalışılmış ve resmi web sayfasına  yapılan referanslarla okuyucuya kütüphanenin kullanımı açısından bir anlamda yol gösterilmiştir.

2.2. Yahoo Kullanıcı Arayüz Kütüphanesi Yükleme

YUI kendi içerisinde bir uygulama olmamasından ve sadece bir takım JavaScript ve CSS gibi düz metin dosyaları içermesinden ötürü extra bir kurulum aşaması gerektirmemektedir. Kütüphanenin resmi sitesinden (http://developer.yahoo.com/yui/) indirildikten sonra arayüz sayfaları içerisinde kendi sunucunuz üzerine yerleştirilmiş dosyalara referans vererek çevrimdışı kullanılabileceği gibi Yahoo’nun kendi sunucularına referans verilerek de kullanılabilmektedir.

Örneğimizde son kararlı sürüm olan YUI version 2.7.0 sürümü kullanılacak ve bu kesimde kütüphanenin sadece uygulamanın ihtiyacı olan kesimi kullanılacak ve açıklanacaktır. Kütüphaneyle birlikte gelen klasörler ve kütüphanenin içeriği hakkında daha detaylı bilgiyi 3.X. Kütüphane İçeriği bölümünde bulabilirsiniz.

2.3. Örnek Uygulama Kod Kesimi ve Açıklama

Örnek uygulamamızda YUI’nin Takvim Kontrolü (YUI Calendar Control) ele alınmıştır. YUI Takvim Kontrolü; geliştiricilerin göze hoş gelen ve fonksiyonel takvim arayüzlerini kolayca gerçekleştirebilmelerini sağlamanın yanında kullanıcıların da oldukça kolay ve hızlı bir şekilde takvim üzerinden gün veya gün aralıkları seçmesine  imkan tanımaktadır. Uygulamamızın temel aldığı mantık, kullanıcının bir takvim ikonuna basması ile takvimin görünür hale gelmesi ve ardından da doğum gününü takvimden seçmesi ile bu gün bilgisınin sayfanın ilgili alanına yazdırılmasıdır.

Uygulamanın kod kesimine geçmeden önce kullanacağımız takvim kontrolü ile ilgili bilgi vermek yerinde olacaktır. YUI birden çok ve karmaşık takvim kontrolü sunuyor olsa da biz burada en basit ve temel takvim kontrolü olarak tek panelli (single-panel) takvimi kullanacağız. Bu takvim YAHOO.widget.Calendar sınıfı kullanılarak oluşturulmaktadır. Takvim kontrolünü bir sayfa üzerinde görüntüleyebilmek için de tahmin edilebileceği gibi bir konteynır (contanier) olarak görev yapacak HTML elemanına (element) ihtiyaç vardır. Aşağıdaki ekran görüntüsü uygulamamızda kullanacağımız takvim sınıfının en basit görünümünü vermektedir:

resim

YUI tek panelli takvim sınıfı örnek görünümü

Sözkonusu sınıf örneğini oluşturabilmek için yapıcı (constructor) metoda mutlaka verilmesi gereken parametre yukarıda da bahsedildiği gibi bu takvimi içerisinde tutacak ve konteynır görevi görecek bir HTML elemanıdır. Bundan başka konfigurasyon gibi takvimin görünümünü ve fonksiyonelliğini değiştirecek opsiyonel parametreler de alabilmektedir (Geniş bilgi için: http://developer.yahoo.com/yui/docs/YAHOO.widget.Calendar.html#config_selected). Aşağıda bu basit sınıf nesnesi için tanımlanmış ‘public’ metodların listesi bulunmaktadır (Bu listedeki metodlarla ilgili detaylı bilgi ve sınıfın sağladığı diğer olaylar (events), özellikler (properties) ve konfigürasyon öznitelikleri (configuration attributes) için: http://developer.yahoo.com/yui/docs/YAHOO.widget.Calendar.html#config_selected).

resim

Yahoo.widget.calendar sınıfını kısaca tanıttıktan sonra uygulamanın kod kesiminde ilk olarak takvim kontrolünün de içinde bulunacağı bir HTML dökümanı ele alınmıştır. Bu doküman için önce masa üzerinde uygulamamızın bulunacağı ‘örnek_takvim’ adında boş bir klasör oluşturuyoruz. Ardından bu boş klasöre herhangi bir metin editörü ile ‘takvim.html’ adında bir html dosyası oluşturuyoruz. Ayrıca yine bu klasör içerisinde ‘icons’ isimli bir klasor ile ‘calendar’ isimli bir css dosyası ve  YUI ile gelen paketi açtıktan sonra elde edilen klasörün içerisinden bizi ilgilendiren  ve build klasörü altında bulunan klasörleri şekildeki gibi yerleştiriyoruz:

resim

resim

Şu an itibariyle bu klasör ve dosyaların içeriği pek önem taşımamaktadır. Simdi takvim.html isimli dökümanın içeriğine göz atabiliriz:

Metin Kutusu: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="tr">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>YUI Takvim Kontrol Örneği</title>
    <script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="yui/build/calendar/calendar-min.js"></script>
    <link rel="stylesheet" type="text/css" href="yui/build/calendar/assets/skins/sam/calendar.css">
    <link rel="stylesheet" type="text/css" href="calendar.css">
  </head>
  <body class="yui-skin-sam">
    <div>
      <label>Lütfen doğum gününüzü giriniz:</label>
      <input type="text" name="dobfield" id="dobfield">
      <img id="calico" src="icons/cal.png" alt="Takvim kontrolünü aç">
    </div>
    <div id="mycal"></div>
    
  </body>
</html>

Yukarıdaki HTML dokumanının açıklamasına geçmeden önce bize vereceği çıktıyı aşağıdaki şekilde görmekteyiz:

resim

Dokümanda her şeyden önce dikkati çeken <head> elementi altında bulunan <script> ve <link> elementleri. Burada YUI’nin sağlamış olduğu bazı JavaScrip ve CSS dosyalarının sistemimizdeki yerlerini doküman için referans vermekteyiz. Neden bu dosyaları kullandırığımızı daha sonraya bırakıyoruz (Detaylı bilgi için: 3.X. YUI Kütüphane İçeriği).

Dokümanın <boyd> kesimine gelirsek burada iki adet <div> elementi bulunmakta olduğunu görmekteyiz. İlki yukarıdaki ekran görüntüsündeki <label>, <input> ve <img> elementlerini tutarken ikinci div elementi ise takvimimiz için konteynır görevi görecek olan HTML elementi. O zaman her şeyden önce yapmamız gereken bir takvim nesnesi oluşturmak ve bunu ilgili HTML elementi içerisine yerleştirmek:

Metin Kutusu: <script type="text/javascript">
      //create the namespace object for this example
      YAHOO.namespace("yuibook.calendar");
      
      //define the lauchCal function which creates the calendar
      YAHOO.yuibook.calendar.launchCal = function() {
        …
	 …
	 …
      }
      
      //create calendar on page load
      YAHOO.util.Event.onDOMReady(YAHOO.yuibook.calendar.launchCal);
</script>

Burada her şeyden önce YAHOO utility nin namespace() metodu ile örneğimiz için bir isim uzayı (namespace) oluşturarak scriptimize başlıyoruz. Ardından asıl işin yapılacağı fonksiyon kesimine bir tür alyans fonksiyon oluşturarak devam ediyoruz (fonksiyonun içeriği devam eden kesimlerde verilecektir). Son olarak da Event utility’nin onDOMReady methodu kullanılarak Doküman Nesne Modeli (Document Object Model - DOM) hazır olduğunda fonksiyonumuzun işleme konulmasını sağlamış oluyoruz. Peki fonksiyonumuz içerisinde neler olup bitiyor:

Fonksiyonumuzun içerisini doldurmaya başlayabiliriz. Öncelikle daha önce bahsettiğimiz şekilde Calendar nesnemizi opsiyonel parametrelerden sadece biri olan configurasyon nesnesi ile oluşturuyor ve böylelikle ‘mycal’ id ye sahip <div> elementi içerisinde bulunacak bir Calendar nesnesi oluşturmuş oluyoruz. Burada configurasyon parametreleri ile takvimimize yeni özellikler katmış oluyoruz (Detaylı bilgi için: http://developer.yahoo.com/yui/docs/YAHOO.widget.Calendar.html#config_close). Ardından oluşturma anından sonra da takvim render edilmeden takvim nesnesinin özellikleri üzerinde değişiklik yapabileceğimizi örneklendirmek açısından haftanın başlangıç günü Pazartesi olarak değiştiriyoruz. Calendar nesnemizin render() ve hide() metodlarını da kullanarak önce takvimi oluşturup sayfa üzerinde gösteriyor daha sonra da bu takvimi saklıyoruz. Şimdi yapmamız gereken şey gizlediğimiz bu takvimi kullanıcı sayfa üzerindeki resim üzerine tıkladığında görünür hale getirecek olan kod kesimi yazmak:

Metin Kutusu: //define the showCal function which shows the calendar
        var showCal = function() {

          //show the calendar
          myCal.show();
        }

        //attach listener for click event on calendar icon
        YAHOO.util.Event.addListener("calico", "click", showCal);

Burada takvimi görünür hale getirecek yeni bir fonksiyon tanımı yapılmakta ve bu fonksiyon ilgili ikona kullanıcı tarafından tıklandığıda çağrılmak üzere ilgili <img> elementinin ‘onclick’ olayını yakalamak üzerine bir dinleyiciyle (listener) ilişkilendirilmektedir. Takvimi gizleyip gösterdikten sonra artık geriye kullanıcının girdiği tarih değerini takvimden alarak istediğimiz formatta ilgili HTML elementine yazdırmak kalıyor:

Metin Kutusu: //define the ripDate function which pulls the selected date from the control and places it in the form field
        var ripDate = function(type, args) {

          //get the date components
          var dates = args[0];
          var date = dates[0];
          var theYear = date[0];
          var theMonth = date[1];
          var theDay = date[2];

          //create the formatted date string
          var theDate = theDay + "/" + theMonth + "/" + theYear;

          //get a reference to the text field
          var field = YAHOO.util.Dom.get("dobfield");

          //insert the formatted date into the text field
          field.value = theDate;

          //hide the calendar once more
          myCal.hide();
          
        }

        //subscribe to the select event on Calendar cells
        myCal.selectEvent.subscribe(ripDate);

Burada işimizi kolaylaştıran etken YUI nin sağlamış olduğu olay tabanlı sistemdir. Kullanıcı her defasında takvimden bir gün seçtiğinde takvim bir olay fırlatıcak ve biz de kendi yazmış olduğumuz bir fonksiyonu takvimin ilgili olayına üye ederek (subscribe) fonksiyonumuzun çağrılmasını sağlayacağız (Custom Olaylarla ilgili detaylı bilgi için: http://developer.yahoo.com/yui/event/#customevent). Burada söz konusu fonksiyon ripDate ile referans edilen fonksiyondur. Bu fonksiyon seçilen tarih nesnelerini bir dizi içerisinde parametre olarak alıyor ve tek tarih değeri olan kullanıcının seçmiş olduğu tarih değerini işleyerek sayfa üzerindeki <input> alanına yazıyor. Burada fonksiyon içerisinde yine YUI’nin utility’lerinden biri olan YAHOO.util.Dom u kullanarak sözkonusu <input> alanına erişim sağlanıyor.

Aşağıda daha önce açıklamadığımız ‘icons’ klasörü ve ‘calendar’ css dosyalarının da içeriği görünmektedir:

resim

Metin Kutusu: input {
  margin:0px 10px 0px 10px;
}
.yui-skin-sam .yui-calcontainer .calclose {
  background:url("icons/myclose.gif") no-repeat;
}
#yui-history-iframe {
  position:absolute;
  top:0;
  left:0;
  width:1px;
  height:1px;
  visibility:hidden;
}

‘icons’ klasörü içerisinde iki adet ikon bulunmakta fakat uygulamanın çalışabilmesi için bunları bulunması zorunlu değildir. Bu ‘calendar’ CSS dosyası ile gösterilmek istenense örnek boyunca kullanılan varsayılan (default) stilin istenildiğinde kolaylıkla değiştirilebileceğidir. Aşağıda uygulamanın çalıştırılmış hali görüntülenmektedir:

resim

resim

 

3. YAHOO KULLANICI ARAYÜZÜ KÜTÜPHANESİ 

(YAHOO USER INTERFACE LIBRARY) (YUI)

3.1 Yahoo Kullanici Arayüzü Kütüphanesi  Nedir?

YUI  bir dizi ücretsiz yardımcı programlar (utilities) ve kontroller içeren, DOM scripting, DHTML ve AJAX gibi teknikleri kullanarak gelişmiş arayüze sahip interaktif web siteleri hazırlamak için kullanılan, Javascript’te yazılmış bir araçlar bütünüdür [1]. HTML gibi bir durağan biçimleme dili (static markup language), JavaScript gibi bir kullanıcı yazımı dili         (client-side scripting language), CCS gibi bir sunum tanımlama dili gibi birçok teknolojiyi kullanır. Yahoo tarafından geliştirilmiş ve içerisindeki tüm araçlar BSD lisansı ile lisanslanmıştır. Bu lisansta kodu alan kişi, kodu istediği gibi kullanma özgürlüğüne sahiptir.

YUI uluslar arası düzeyde herkesin kullanabileceği şekilde tasarlanmıştır.  Yahoo’nun ana sayfasında, mail ve flicker ında YUI’nin yerleşmiş hali bulunmaktadır, aynı zamanda LinkedIn, Mint, target , SugarCRM, wikia and PowerReviews gibi YUI ‘yi  front end platformlarına uyarlamış birçok şirket vardır.

3.2 YUI çekirdeği (YUI Core)

Kütüpanenin çekirdeği aşağıdaki 3 dosyayı içerir:

3.2.1 Yahoo Global Objesi (Global Object)

3.2.2 DOM Koleksiyonu (DOM Collection)

3.2.3 Olay Yardımcı Programları (Event Utility)

 

3.2.1 Yahoo Global Objesi

Yahoo Global Objesi tüm Yahoo kütüphanesinin kodlarının bulunduğu tek bir global namespace sağlar ve kütüphane boyunca kullanılan birçok metodu içermektedir. YUI kütüphanesini kullanan her sayfa Yahoo Global Objesini içermelidir ve tüm diğer YUI öğelerinden önce görünmelidir, yani diğer tüm YUI öğelei için temel gereksinimdir [2].

Yahoo Global Objesi tüm YUI öğeleri için namespace ağacının en üstünde yer alır ve tipleme kontrolü (type checking), kullanıcı birimi algılama (user-agent detection) ve module extension için bazı kullanışlı metotlar içerir [3]. Bir tipleme kontrolü örneği aşağıda gösterilmiştir. Şüpheli veriyle baş etmek için YAHOO.lang tipi kontrol metodu kullanılmıştır bu örnekte.

resim

YAHOO.lang Yahoo Global Objeyle paketlenerek gelir[4].

resim

 

Bu örnekte YAHOO.lang de bulunan birkaç tipleme kontrol metodu, çeşitli tiplerdeki verileri test etmek için kullanılmıştır [4].

resim

            3.2.2 DOM Koleksiyonu (DOM Collection)

Dom, Dom-scripting görevleri basitleştiren bir dizi için uygun metodlar (öğe konumlandırılması (element positining) ve CSS stil yönetimi (CSS style management) gibi) içerir. Aynı zamanda bu sırasa cross-browser tutarsızlıklarını da normale çevirir [5].

Örneğin addClass metodu bir HTML öğesine bir className eklemeyi sağlamaktadır. Şöyle ki;

resim

Çalıştır butonuna bastığımızda söyle bir mesaj geliyor. Aslına http://developer.yahoo.com/yui/examples/dom/addclass.html sitesinden ulaşabilirsiniz.

resim

Add Class’ın kullanımını göstermek için, bar className’i ile foo adında bir <div> oluşturulmuştur. Butona basıldığında baz className’ini öğeye eklenmiştir.

resim

Şimdi baz sınıfını foo elementine ekleyen bir fonksiyon tanımlanacaktır. addClass metodun ilk öncülü HTML elementinin ID’si ya da asıl HTML element objesidir. Ikincisi eklenen className’dir.

 

resim

Demoyu harekete geçirmek için YUI Olay Yardımcı Programı kullanılmıştır.

resim

Bu Dom.addClass metodunun nasıl kullanıldığıyla ilgili basit bir örneğidir. Bu metodun yararlarından biri atfedilen sınıfın içerisindeki cclassName sayısına bakmaksızın çalışmasıdır [6].

 3.2.3 Olay Yardımcısı (Event Utility)

Olay Yardımcı Programları tarayıcının Olay objesinin özeliklerini incelemek ve DOM olaylarına kaydolmak için basitleştirilmiş bir arayüz vererek, tarayıcıda event-driven uygulamalarını kolaylaştırır. Aynı zamanda Custon-Event objesi de içerir. Custom Event kodundaki ilginç anları ya da olayları yayımlamanı sağlar ve sayfadaki diğer öğeler, bu olaylara kaydolur ve karşılık verirler. Olay Yardımcısı Paketi (Event Utility Package) aynı zamanda aşağıdaki özellikleri de sağlar:

§        Bir olay denetimcisini bir ya da birkaç elemente bağlayan rahat bir metot.

§        Henüz uygun olmayan elementleri denetimci bağlantısının otomatik olarak ertelemesi.

§        Otomatik kapsam doğrulaması, isteğe bağlı kapsam ayrılması [7].

3.3 Yardımcı Programlar (Utilities)

3.3.1. Animasyon:

Deneysel modellerin hızlıca geliştirilmesine ve boyut, renk, pozisyon, matlık ve diğer görsel özelliklerini içeren animasyon uygulamalarına izin verir. Diğer bir değişle efekt yaratımına olanak sağlar. Animasyonları ayarlamak için var olan basit, sezgisel yolla anlaşılan bir sözdizimi (syntax) karmaşık animasyonlar için bile kolayca uygulanabilmektedir. Aşağıda basit bir animasyonun oluşturulması ve kullanımı gösterilmektedir. demo olarak adlandırılan <div> öğesinin genişliği canlandırılmıştır [8].

resim

Demo öğesi ve bir buton oluşturun animasyonu çalıştırmak için.

resim

Bu durumda YAHOO.util.Anim’in bir örneği oluşturulmuş oldu. Burada hareket olması bekleniyor ve son değer olarak kullanılacak bir değere ihtiyaç var.

resim

Son basamak animasyonu başlatmak için animate metodunu çağırmak. Bu sayede buton harekete geçecek ve şu animasyon dizisini başlatacaktır:

resim

            3.3.2. Tarayıcı Geçmiş Yöneticisi (Browser History Manager)

Tarayıcı Geçmiş Yöneticisi navigasyon butonlarının tam anlamıyla çalışmasını amaçlayan web uygulamalarının oluşumlarını kolaylaştırmak için bir yardımcı program olarak sunulmuştur. Sayfalar arası geçişlerin ve  hangi sayfanın hangisiyle ilgili olarak açıldığına dair karışıklıkların çözümünde etkili olanaklar sunmaktadır. Aşağıda çoklu modül (multiple modules) örneğinde; bir sayfada açılan birkaç modülle Tarayıcı Geçmiş Yöneticisinin nasıl çalıştığı gösterilmiştir.

resim resimresim

3.3.3. Bağlantı Yöneticisi (Connection Manager)

Cross-browser tarzda çarpışan XMLHttp isteklerini, genellikle AJAX denilenler, yönetmektedir.  XMLHttp istekleri, scriptlerin sayfa yenilemeksizin server ile bağlantı kurabilmelerini sağlar. Geri çağırma modelini (callback pattern)kullanır aynı zamanda. Örnek olarak [9].

resim

resim

resim

resim

resim

resim

 

            3.3.4. Çerez (Cookie Utility)

Çerezleri okuma ve yazma için temel Cookie örneği aşağıda verilmiştir. Example adlı cookie’ye önce bir değer verilmiştir. Example ilk kez çalıştırılıyorsa, değer  null olmalı Logger’da çıktı olutor bu değer ve rastgele bir değere dönüşüyor. Sayfanın tekrar yüklenmesi istenince, değer hemen önce hazırlanan değer olabilir [10].

resim

resim

            3.3.5. DataSource Utility

            3.3.6. Sürükle Bırak (Drag and Drop Utility)

YUI ile Drag&Drop nesneler yapımı aşağıda gösterilmiştir. Kodda  ilk iki satırda YUI'ı sayfaya dahil edildi. Son satırda var olan dragg ile draggable olacak yerler işaretlendi.

resim

 

Drag yazılı yere herhangi bir ID ya da element girilebilir.

resim

resim

 

Burada 90*75 sarı renkte bir kutu oluşturuldu.

 

resim

 

Son olarak "Drag" id'li bir div oluşturuldu.

Element Utility, Get Utility, ImageLoader Utility, JSON Utility, Resize Utility, Selector Utility,

The YUI Loader Utility gibi daha birçok öğe içermektedir YUI Kütüphanesi.

3.4 Kullanıcı Arayüz Kontrolleri (UI Controls)

                 3.4.1 AutoComplete

Aşağıda otomatik tamamlama örneği verilmiştir [11].

resim

resimresim

                3.4.2 Buton

8 farklı şekilde buton yapmaya yarar. Buton yapmanın değişik yollarını sunar [12].

resim

                3.4.3 Takvim

Giriş kısmındaki örnekte de bahsedilmiştir takvimden. Aşağıda örnekte takvim yapımı gösterilmiştir [13].

resimresimresim

                3.4.4 Renk Seçici

resim

                Container, DataTable, ImageCropper, Layout Manager, Menu Rich Text Editor,  Slider, TabView, TreeView,  Uploader gibi daha pek çok kontrol bulunmaktadır YUI’de.

3.5 CSS Bileşenleri (CSS Components)

            3.5.1 CSS Base

            3.5.2 CSS Grids

            3.5.3 CSS Fonts

            3.5.4 CSS Reset

3.6 Geliştirici Araçları (Developer Tools)

            3.6.1 Logger

            3.6.2 Profiler

            3.6.3 ProfilerViewer

            3.6.4 YUI Test

3.7. Build Araçları

            3.7.1 YUI Compressor

4. ADIM ADIM ÖRNEK PROJE

5. SONUÇ

6. KAYNAKÇA

[1]. Yahoo! developer network. Yer aldığı internet sayfası  http://developer.yahoo.com/yui/. Son

            ziyaret 1 Mayıs 2009.

[2]. Yahoo! developer network. Yer aldığı internet sayfası  http://developer.yahoo.com/yui/yahoo/.         Son ziyaret 1 Mayıs 2009.

[3]. Yahoo! developer network.  http://developer.yahoo.com/yui/examples/yahoo/index.html,

yer aldığı internet sayfası. Son ziyaret 1 Mayıs 2009.

[4]. Yahoo! developer network. Yer aldığı internet sayfası

http://developer.yahoo.com/yui/examples/yahoo/yahoo_type_checking.html. Son ziyaret 1 Mayıs 2009.

[5]. Yahoo! developer network. Yer aldığı internet sayfası http://developer.yahoo.com/yui/dom/.

            Son ziyaret 5 Mayıs 2009.

[6]. Yahoo! developer network. Yer aldığı internet sayfası

            http://developer.yahoo.com/yui/examples/dom/addclass.html. Son ziyaret 19 Mayıs 2009.

[7]. Yahoo! developer network. Yer aldığı internet sayfası http://developer.yahoo.com/yui/event/.

            Son ziyaret 19 Mayıs 2009.

[8]. Yahoo! developer network. Yer aldığı internet sayfası

            http://developer.yahoo.com/yui/examples/animation/basic.html. Son ziyaret 19 Mayıs 2009.

[9]. Yahoo! developer network. Yer aldığı internet sayfası

            http://developer.yahoo.com/yui/examples/connection/get.html. Son ziyaret 19 Mayıs 2009.

[10]. Yahoo! developer network. Yer aldığı internet sayfası

            http://developer.yahoo.com/yui/examples/cookie/cookie-simple-example.html. Son ziyaret 29

            Mayıs 2009.

[11]. Yahoo! developer network. Yer aldığı internet sayfası

http://developer.yahoo.com/yui/examples/autocomplete/ac_basic_array.html. Son ziyaret 29 Mayıs 2009.

[12]. http://en.wikipedia.org/wiki/Yahoo!_UI_Library

[13]. Yahoo! developer network. Yer aldığı internet sayfası

http://developer.yahoo.com/yui/examples/calendar/quickstart.html. Son ziyaret 29 Mayıs 2009.