Monday, January 5, 2009

Ajax ile Form Tavsiyeleri Kodlamasi

Google'da arama kutusuna kelime girerken arka planda girdiginiz kadar harfler kullanilarak hemen bir arama yapilip sonucun text kutusu altinda Javascript tarafindan listelendigini goruyoruz. Bunun gibi ozellikler artik yeni nesil Web uygulamalarinin olmazsa olmaz ozelliklerinden birini teskil ediyor.
Bu ozelligi kodlamak icin Hibernate/Seam/Java ortaminda oncelikle Ajax ve biraz Javascript abrakadabrasi gerekecek. Forma girildigi kadar veriyi alip onu bir Javascript listesinde tarama yapmak icin kullanmak, sonuclari altta gorsel olarak gostermek bu ozelligin mekanizmalari arasinda. Bu kodun Javascript tarafini sifirdan yazmaya gerek yok: Bir kutuphane kullanmak en akillicasi. Bizim kullandigimiz scriptaculous adli bir Javascript kutuphanesidir. Bu kutuphaneyi indirip bir dizinde acin ve o dizine referans vererek HTML'iniz icindeki script src ile dahil edin. Surada ornek bir HTML sayfasi altta


Ajax
Simdi Seam/Hibernate ortaminda tavsiyeleri nasil kodlayacagiz, ona bakalim. Cok basit bir ornek uzerinden gidelim: Bir giris kutusu "aktif" olunca (yani mouse ya da TAB ile uzerine gelinince) hemen servis tarafindan Ajax ile bir listeyi alsin, ve ondan sonra isin tavsiye kismini scriptaculous'a biraksin. Bize bir EJB, bir XHTML ve birazcik Javascript entegrasyon kodu gerekecek.
Seam ortaminda servis tarafina nasil Ajax cagrisi yapilacagini suradaki slaytlarda detayli bir sekilde bulabilirsiniz. Ya da ornek kodlara bakmak mumkun (Web/SeamAjax projesi altinda).
XHTML tarafinda ise,
@Stateful
@Scope(SESSION)
@Name("carService")
public class CarServiceBean implements CarService, Serializable
{

@PersistenceContext
private EntityManager em;

public List getAllCars() {
Query q = em.createQuery("from Car");
List list = ...
for (obj : queryList) {
  list.add(obj.getCarName());
}
return list;
}
}

@Local
public interface CarService
{
@WebRemote
public List getAllCars() ;
}
Ustteki kodda su ozelligi kodluyoruz: Bir text kutusu aktive edilirse, hemen gidip handleInputCar adli Javascript fonksiyonunu cagir, bu fonksiyon Ajax uzerinden servise baglanip listeyi alacak. Ayrica scriptaculous uzerinden o listenin tavsiye edilir hale gelmesini saglayacak. remote.js ve interface.js Seam uzerinden Ajax cagrisi yapmak icin gerekli.
Simdi js/inc.js kodlarini gorelim:
var calledonce = false;

function handleInputCar(oEvent) {
var iTextbox = document.getElementById("inputBox1");
if (calledonce == false) {
Seam.Component.getInstance("carService").getAllCarNames(carListCallback);
calledonce = true;
}
}

function carListCallback(carlist) {
new Autocompleter.Local('inputBox1', 'carlist', carlist, { });
}
calledonce adli degiskeni kullandik ki, text kutusu her aktive edildiginde surekli servis tarafina
gidilmesin. Bu tur bir kodlamayi "az degisen" veriler icin yapmak en iyisi, biz burada araba listesinin cok az degistigini farz ederek, her sayfa guncellemesi (refresh) basina listenin en fazla bir kere indirilmesini ayarladik. Her harf girisi basina surekli servise gidilmesine ihtiyac duyan uygulamalar da olabilir. Bu ihtiyaca gore sekillenir.
Ustteki kodda servis tarafindan alinan liste ile scriptaculous arasindaki entegrasyon Autocompleter.Local objesinin yaratilmasi aninda oluyor. Bu obje yaratildiktan ve inputBox1 altinda tavsiye ciktisinin gosterilecegi div'in adresi verildikten sonra, gerisi scriptaculous kodlari tarafindan idare ediliyor.
scriptaculous'un tamamlama kodlarinin iki turlu kullanisi var - biz burada bunlardan sadece bir tanesini isledik. Bu kullanis tarzi, tum verinin bir cagrida halledilip Autocompleter objesini verildigi bir tarzidir. Tamamlama islemini parca parca, surekli servise giderek yapan bir kisim da var.

Dikkat! Sayfalarinizda new Autocompleter tanimlarini iceren Javascript kodlari, input ve div form elementlerinden sonra gelmeli.


 
   
   
     
     
 
   
   
     
     
     
   

       
    
       
 

No comments: