IBM RAD 7.0 ile AJAX Geliştirmek

[Φ Muallim-i Âli]

Yazan : arden agopyan

Makalenin orjinal hâli : www-128.ibm.com/developerworks/rational/library/06/1205_kats_rad2/

 

AJAX teknolojisi ve Web 2.0 felsefesi günümüz uygulamalarını ciddi şekilde yönlendirmeye başladılar. Öyle ki artık neredeyse AJAX kullanmayan web uygulamaları “demode” olarak görülmeye, sürekli postback yapan sayfalar “acemi işi” olarak nitelendirilmeye başlandı.

 

Birçok ürün ve geliştirme ortamı yavaş yavaş piyasada var olan veya kendi ürettikleri AJAX framework’leri bünyelerine katmaya, onlarla entegre olarak çalışmaya başladılar.

 

Bunlardan bir tanesi de daha önce blog sayfalarımdan duyurduğum Rational yazılım geliştirme araçları v7 ailesi.

 

Bu makalede, IBM’den Yury Kats‘in, Rational ailesinden olan Rational Application Developer ile bu ortamla bütünleşik gelen AJAX geliştirme özelliklerini kullanarak hazırladığı bir örneği göstereceğim.

 

JSF sayfalarınızı AJAX-enabled hale getirmek aslında sadece 4 adımda gerçekleşir :

 

1. Sayfanın neresinde AJAX güncellemeleri kullanacağınıza karar verin

 

RAD 7.0 ile gelen paneller, diyaloglar ve menüler : <> , <> , <> , <>

 

2. Hangi tip AJAX isteği kullanacağınıza karar verin

 

Aynı sayfa için GET : <>

Aynı sayfa için POST : <>

Farklı bir sayfa için GET : <>

 

3. AJAX isteğiyle sunucuya gönderilecek parametreleri ayarlayın

 

GET için sayfa içerisindeki giriş alanları (input), POST için tüm form…

 

4. AJAX isteğini tetikleyecek olan event’i seçin

 

Button için onclick, giriş alanları için onblur, kontrol nesneleri için onchange gibi…

 

Şimdi bu adımları bir Hello World örneğinde görelim. Bu örnekte bir giriş alanına bir metin yazdıktan sonra alan dışına çıkıp, çıktı alanımıza (output) bu metni yazdıracağız. Tabi tüm bunlar sayfayı sunucuya tekrar göndermeden AJAX ile gerçekleşecek.

 

Öncelikle yeni bir Web Project yaratalım :

 

* Menüden File > New > Project > Dynamic Web Project‘i seçelim. New Project diyaloğu açılacaktır.

 

* Bir proje adı girelim : HelloWorld.

 

* Hazır konfigürasyonlardan Faces Project‘i seçelim.

 

* Paketleme için EAR seçeneklerinde “Select Add project to an EAR” kutusunu işaretleyelim.

 

* ve Finish…

 

 

Şimdi yeni bir Web sayfası yaratalım :

 

* Project Explorer ekranından proje ismine sağ tuşla tıklayalım.

 

* Açılan menüden New > Web Page‘i seçelim.

 

* Açılan diyalogda yeni sayfamızın adını girelim : hello

 

* ve yine Finish…

 

 

Böylece artık bir projemiz ve üzerine eklemeler yapacağımız bir sayfamız var.

 

* Enhanced Faces Components araçlarından bir Input nesnesini sayfaya sürükleyip bırakalım.

 

* Aynı şekilde bir Panel Group nesnesini Input nesnesinin hemen altına yerleştirelim. (Group Box Type olarak Group seçelim)

 

* Şimdi de bu Panel Group içerisine bir Output nesnesi yerleştirelim.

 

Sonunda sıra geldi yarattığımız panel’e AJAX desteği eklemeye. Bu panel içerisinde AJAX kullanabilmek için paneli AJAX-enabled hale getirip, kullanacağımız parametreleri ayarlamamız gerekiyor.

 

* outputText nesnesini seçip Properties ekranına gelelim.

 

* Bu ekranda h:panelGroup tag’ini seçelim.

 

* Ajax sekmesi içerisindeki “Allow Ajax updates” kutucuğunu işaretleyelim.

 

* Ajax istek tipi olarak da “Refresh”‘i seçelim.

 

 

Biz burada Refresh isteği kullanacağız. Alternatif olarak Submit’i seçmiş olsaydık tüm form gönderilecekti.

 

Şimdi panel için kullanacağımız parametreleri ayarlayalım :

 

* Click to edit Ajax request properties butonuna tıklayalım.

 

* Properties bölümünde hx:ajaxRefreshRequest tag’ini seçelim :

 

- Add Parameter butonuna tıklayarak browser’dan göndereceğimiz parametreleri ekleyelim.

 

- Değeri alacağımız giriş alanını seçelim : text1

 

 

Girdi değerlerini ve panel özelliklerini ayarladıktan sonra sıra geldi çıktı ayarlarını yapmaya.

 

* outputText nesnesini seçelim.

 

* Value alanının yanındaki butona tıklayalım. Açılan diyalogda sağ üstteki New Data Object butonuna tıklayalım ve Scripting Variables > Param Scope Variable türünü seçelim. Parameter name olarak text1text1 değeri parametreler arasına eklendi. gireceğiz. Böylece

 

 

* Son olarak Value alanına “Hello, #{param.text1}” yazalım. Böylece çıktı alanımız artık neyi göstereceğinin farkında.

 

 

Buraya kadar yaptıklarımızla başta bahsettiğim 4 adımdan 3′ünü tamamladık. Sıra geldi son adıma. Bu adımda AJAX isteğini tetikleyecek event’i ayarlayacağız.

 

* inputText nesnesini seçelim.

 

* Quick Edit sekmesine geçelim.

 

Buradan:

 

- onblur olayını sol taraftaki olaylar listesinden seçelim.

 

- Use predefined behavior kutucuğuna tıklayalım.

 

- Invoke Ajax behavior on the specified tag action’unu seçelim.

 

- Hedef (target) olarak da group1 nesnesini seçelim.

 

 

Artık sıra geldi sayfamızı çalıştırmaya. Sayfayı kaydedip sunucu üzerinde çalıştıralım. Kutucuğumuzun içerisine “world” yazalım. Tab tuşuyla kutu dışına çıktığımızda veya fare ile kutu dışına tıkladığımızda AJAX isteği gönderilecek ve sayfa yeniden yüklenmeden “Hello, world” mesajımızı alacağız.

 

 

Böylece RAD içerisindeki hazır component’leri kullanarak bir kaç adımda hiç javascript yazmadan AJAX destekli basit bir sayfa oluşturmuş olduk.