Tanım: İçinde kullanıldığı bileşendeki(component) olaylarda(event) , Ajax action'ı oluşturmak için kullanılan element. Eğer bir grup elementin etrafına koyulur ise (elementler f:ajax elemementinin içinde ise) içindeki tüm bileşenler için aynı event'de(olay) ajax action'ın oluşmasını sağlar

f:ajax elementinin yazım kuralı aşağıdaki gibi gösterilebilir : 

<f:ajax [event=”Literal”] [execute=”Literal | Value Expression”] [render=”Literal | Value Expression”] [onevent=”Literal | Value Expression”] [onerror=”Literal | Value Expression”] | [listener=”Method Expression”] [disabled=”Literal|Value Expression”] [immediate=”Literal|ValueExpression]/>

 

 

f:ajax elementinin attriubute'leri aşağıdaki gibidir : 

• event : Ajax action'ın oluşmasını sağlayan event (click, fosuc, enter, blur gibi olaylar). Eğer event verilmez ise varsayılan event (örneğin yazı alanlarında verinin değişmesi) girilmiş kabul edilir.
• execute : Id'leri verilen bileşenler veya @ ile tanımlı bileşenleri (keywords) , Ajax action'unda çalışması (JSF'in Apply Request, Process Validation vb.. gibi aşamalarından yeniden geçmesi) için kullanılır. Değer verilmediği zaman @this kabul edilir
• render : Id'leri verilen bileşenler veya @ ile tanımlı bileşenleri (keywords) , Ajax action'undan sonra yenilemesi (render etmek) için kullanılır. Değer verilmediği zaman @none kabul edilir
• listener : Ajax action'ında server tarafında verilen method'un çalışması için kullanılır
• immediate : Eğer true ise "Apply Request Values" fazından başlanır. False ise "Invoke Aplications" fazından işlenmeye başlanır
• disabled : True verildiğinde Ajax davranışı için gerekli script üretilmez ve bu nedenle Ajax davranışı gerçekleşmez
• onevent : Javascript ile event yakalamak için
• onerror : Javascript'te error yakalamak için

 

 

f:ajax element'inde render ve execute özelliği için ön tanımlı olarak kullanılan ifadeler (keywordler) aşağıdaki gibidir : 

• @all : Tüm bileşenler
• @none : Tanımlayıcı yok
• @this : İçinde bulunduğu element 
• @form : İçinde bulunduğu form elementi

Aşağıdaki JSF 2 ile f:ajax kullanarak yapılan basit bir counter örneği görülmektedir :

<h:form prependId="false"> 
 <h:commandButton action="#{ajax1Bean.increase}" value="Say"> 
  <f:ajax execute="@form" render="countId" /> 
 </h:commandButton> 
 <h:outputText id="countId" value="#{ajax1Bean.count}" /> 
</h:form>

Her düğmeye basılışta sayı bir arttırılmakta ve yazı alanında gösterilmektedir. @form ile tüm form yeniden server'a gönderilmekte , render özelliği ile countId yazı alanı tekrar render edilmektedir. Java bean aşağıdaki gibidir :

@ManagedBean(name = "ajax1Bean") 
@SessionScoped 
public class Ajax1Bean implements Serializable { 
 private int count; 
 public int getCount() { 
  return count; 
 } 
 public void setCount(int count) { 
  this.count = count; 
 } 
 public void increase() { 
  count++; 
 } 
}

Bu örnekte il seçildiği zaman, o ile ait olan ilçeler yüklenmektedir. Form bölümü aşağıdaki gibidir :

<h:selectOneMenu value="#{testBean.il}"> 
	<f:selectItems value="#{testBean.iller}"></f:selectItems> 
	<f:ajax event="change" render="ilce" ></f:ajax> 
</h:selectOneMenu> 
  
<h:selectOneMenu id="ilce" value="#{testBean.ilce}"> 
	<f:selectItems value="#{testBean.ilceler}"></f:selectItems> 
</h:selectOneMenu>

Yukarıda görüldüğü gibi illerin listesi ve altında da ilçelerin listesini gösteren selectOneMenu bileşeni blunmaktadır. TestBean de gerekli bölüm aşağıdaki gibidir :

private String il; 
private String ilce; 
public List<SelectItem> getIller(){ 
	List<SelectItem> a=new ArrayList<SelectItem>(); 
	a.add(new SelectItem("0","Seçiniz")); 
	a.add(new SelectItem("34","İstanbul")); 
	a.add(new SelectItem("6","Ankara")); 
	return a; 
}  
public List<SelectItem> getIlceler(){ 
	 
	List<SelectItem> a=new ArrayList<SelectItem>(); 
	if(il==null){ 
		return null; 
	} 
	if(il.equals("34")){			 
		a.add(new SelectItem("1","Fatih")); 
		a.add(new SelectItem("2","Beşiktaş")); 
		a.add(new SelectItem("3","Kadıköy")); 
		return a; 
	}else if(il.equals("6")){ 
		a.add(new SelectItem("1","Çankaya")); 
		a.add(new SelectItem("2","Yenimahalle")); 
		return a; 
	} 
	return null; 
} 

İl listesinde bulundan f:ajax bileşeni, il seçimi yapıldığında çalışır ve ilce listesinin render edilmesini (yenilenmesini) sağlar. İlce listesi de seçilen ile göre yenilendiği için her il seçiminde ilçe değerleri tekrar yüklenmektedir

Aşağıdaki örnekte il , ilçe ve mahalle bilgilerini açılır listeye yükleyen örnek görülmektedir. İl seçince ilçeler, ilçeler seçince de iller dolmaktadır :

<h:form>  
	<h:selectOneMenu value="#{testBean.il}"> 
		<f:selectItems value="#{testBean.iller}"></f:selectItems> 
		<f:ajax event="change" render="ilce mahalle" listener="#{testBean.sehirChanged}"></f:ajax>
	</h:selectOneMenu> 
	  
	<h:selectOneMenu id="ilce" value="#{testBean.ilce}"> 
		<f:selectItems value="#{testBean.ilceler}"></f:selectItems> 
		<f:ajax event="change" render="mahalle" listener="#{testBean.sehirIlceChanged}"></f:ajax>
	</h:selectOneMenu> 
	  
	<h:selectOneMenu id="mahalle" value="#{testBean.mahalle}"> 
		<f:selectItems value="#{testBean.mahalleler}"></f:selectItems> 
	</h:selectOneMenu> 
</h:form> 

Yukarıda görüldüğü gibi illerin listesi ve altında da ilçelerin ve mahallelerin listesini gösteren selectOneMenu bileşeni blunmaktadır. TestBean de gerekli bölüm aşağıdaki gibidir :

@ManagedBean 
@SessionScoped 
public class TestBean { 
	private String il; 
	private String ilce; 
	private String mahalle; 
 
	public List<SelectItem> getIller(){ 

		List<SelectItem> iller=new ArrayList<SelectItem>(); 
		iller.add(new SelectItem("0","Seçiniz")); 
		iller.add(new SelectItem("34","İstanbul")); 
		iller.add(new SelectItem("6","Ankara")); 
		return iller; 
	}  
	public List<SelectItem> getIlceler(){ 
		if(il==null){ 
			return null; 
		} 
		List ilceler=new ArrayList<SelectItem>(); 
		ilceler.add(new SelectItem("0","Seçiniz")); 
		if(il.equals("34")){			 
			ilceler.add(new SelectItem("1","Fatih")); 
			ilceler.add(new SelectItem("2","Beşiktaş")); 
			ilceler.add(new SelectItem("3","Kadıköy")); 
			return ilceler; 
		}else if(il.equals("6")){ 
			ilceler.add(new SelectItem("1","Çankaya")); 
			ilceler.add(new SelectItem("2","Yenimahalle")); 
			return ilceler; 
		} 
		return null; 
	}	 
	public List<SelectItem> getMahalleler(){ 
		if(ilce==null){ 
			return null; 
		} 
                List mahalleler=new ArrayList();
		if(mahalleler==null){ 
			List<SelectItem> a=new ArrayList<SelectItem>(); 
			ilceler.add(new SelectItem("0","Seçiniz")); 
			for(int i=0;i<10;i++){ 
				a.add(new SelectItem(i,il+"-"+ilce+"-Mahalle-"+i)); 
			} 
			return a; 
		}else{ 
			return mahalleler; 
		} 
	} 
	public void sehirChanged(AjaxBehaviorEvent event){
		ilce=null;
		mahalle=null;
	}
	public void sehirIlceChanged(AjaxBehaviorEvent event){
		mahalle=null;
	}
} 

İl listesinde bulundan f:ajax bileşeni, il seçimi yapıldığında çalışır ve ilce ve mahalle listesinin render edilmesini (yenilenmesini) sağlar. İlçe seçildiğinde de mahalle listesi yenilenir