“JSP Sayfasında AJAX Kullanımı” başlıklı yazımda AJAX teknolojisinin ne olduğundan ve JSP sayfalarındaki basit kullanımından söz etmiştim. Bu yazımda ise JSF 2 ve üstü sürümlerinde etiketlerimize nasıl AJAX eklediğimizi anlatmaya çalışacağım.
Öncelikle JSF’te hiç JavaScript ve XML bilmeden sayfalarımıza AJAX teknolojisini ekleyebileceğimizi belirtmek isterim.
Bunun için yapmamız gereken birkaç adım var.
- XHTML sayfasında <h:head> etiketi kullanılmalıdır. Bu etiketi eklediğimizde sayfamıza jsf.js dosyasını eklemiş oluruz. Bu sayede istekler AJAX isteği olarak gönderilebilir.
- Hangi bileşen AJAX isteği yaratacaksa, o bileşen kendi etiketi içerisinde <f:ajax> etiketini kullanmalıdır. Bu sayede hangi bileşenin isteği gönderirken AJAX isteği yarattığı belirtilmiş olur.
- Cevap döndükten sonra hangi bileşenlerin güncelleneceğini <f:ajax> etiketinin render özelliğinde söyleriz. Böylece sayfanın tamamı güncellenmez sadece render özelliğinde ID’sini verdiğimiz etiketler güncellenir.
Sadece bu 3 özelliği kullanarak basit bir örnek kod yazalım.
Web sayfamızda sadece bir button olsun. Bu button’a tıkladığımızda 1 ile 10 arasında rasgele bir sayı yaratarak aynı sayfada gösterelim. Ancak sayfamızın tamamı güncellenmeden sadece belirli bir bölgesinin güncellenmesini istiyoruz.
Bunun için sadece güncellenmesini istediğimiz etiketlere birer ID veriyoruz. Sonra da bu ID’leri <f:ajax> etiketinin render özelliğine veriyoruz.
[box type=”info”] Birden fazla bölge (etiket) güncellenecekse render özelliğinde ID’ler araya boşluk bırakılarak yazılır.[/box]
XHTML sayfa kodu aşağıdaki gibi olacaktır.
[codesyntax lang=”html4strict” lines=”no”]
<?xml version="1.0" encoding="ISO-8859-9" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9" />
<title>Insert title here</title>
</h:head>
<body>
<h:form>
<h:commandButton value="RASGELE SAYI" action="#{bean.rasgele}">
<f:ajax render="etkilenecekId" />
</h:commandButton>
<br/>
<h:outputText id="etkilenecekId" value="#{bean.sayi}" />
</h:form>
</body>
</html>
[/codesyntax]
Managed Bean sınıfının kodu da aşağıdaki gibi olacaktır.
[codesyntax lang=”java” lines=”no”]
package com.javauzmani.ajax.beans;
import javax.faces.bean.ManagedBean;
@ManagedBean
public class Bean {
private double sayi;
public double getSayi() {
return sayi;
}
public void setSayi(double sayi) {
this.sayi = sayi;
}
public String rasgele() {
setSayi(Math.random() * 10);
return null;
}
}
[/codesyntax]
Proje çalıştırdığımızda sayfanın tamamının güncellenmediğini göreceksiniz.
javauzmani 