JSF ve Ajax(JSF and Ajax)

Merhaba arkadaşlar. Bu makalemizde Ajax‘ın JSF içinde nasıl kullanıldığını öğreneceğiz.

Ajax Nedir?

İngilizcesi Asynchronous JavaScript and XML, Türkçesi Eşzamansız JavaScript ve XML olan Ajax sayfayı yenilemeye gerek olmadan bilgi alışverişi yapmak için kullanılan yapıdır. Örneğin bazı anketlerde verdiğiniz oyu gönderdikten sonra sayfa yenilemeden sonuçları görebiliyorsunuz. Bunu sağlayan yapı Ajax yapısıdır.

Nasıl Kullanılır?

Ajax’ın JSF içinde nasıl kullanıldığını örneğimiz üzerinden anlamaya çalışalım. Örneğimizin kaynak kodları aşağıdadır. Kodların açıklaması kaynak kodlarımızın altındadır.

index.xhtml Kodu

<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://xmlns.jcp.org/jsf/html"
	  xmlns:f="http://xmlns.jcp.org/jsf/core">
	<h:head>
		<title>JSF Ve Ajax</title>
	</h:head>
	<h:body>
		<h:form>
			<h:inputText id="isim" value="#{ajaxManagedBean.isim}"/>
			<h:commandButton value="GÖNDER">
				<f:ajax execute="isim" render="cikti"/>
			</h:commandButton>
			<br/>
			<h:outputText id="cikti" value="#{ajaxManagedBean.hosgeldinizsoyle()}"/>
		</h:form>
	</h:body>
</html>

AjaxManagedBean.java Kodu

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class AjaxManagedBean {
String isim="";

    public String getIsim() {
        return isim;
    }

    public void setIsim(String isim) {
        this.isim = isim;
    }
   
    public String hosgeldinizsoyle()
    {
        if(isim.equals("")||isim==null)
            return "";
        else
            return "Ajax Mesajı:Hoşgeldin "+isim;
    }
}

Kodların Açıklaması

index.xhtml sayfası içerisinde bulunan inputText bileşenini şimdiye kadar id olmadan kullandık. Ancak Ajax kullanacaksak id kullanmamız şart. Uygun bir id verip değerine de managed bean içindeki değişkene atıyoruz.

Ajax işlemini asıl çalıştıracak yapı buton içindedir. CommandButton içerisinde yer alan <f : ajax> etiketi Ajax yapısını kullanmamıza imkan sağlayan etikettir. execute bölümüne Ajax ile çalıştırmak istediğimiz bileşene verdiğimiz id’yi atarız çünkü execute girilen veriyi işleyecektir. render bölümüne de butona basıldıktan sonra ne olmasını istiyorsak onu tanımladığımız bileşenin id’sini atıyoruz. Burada id kısmına cikti verdik. Butona basılınca cikti id’li outputText çalıştırılacak. 16. satırda bulunan outputText bildiğimiz outputText yapısıdır.

Managed Bean içinde isim değişkenini tanımlarken ona ” “ değerini atadık. Çünkü bununla Null Pointer Exception hatası almanın önüne geçmek istedik. ” ” değerini atamasaydık bize Boş Gösterici Hatası şeklindeki hatayı verecekti. Değişkenimizin get ve set metotlarını oluşturduktan sonra index.xhtml sayfasındaki outputText bileşenine atadığımız metodu tanımlıyoruz. Öncelikle değişkenin boş olup olmadığını kontrol ediyoruz. Boş değilse girilen isimle birlikte Hoşgeldiniz yazısını ekrana aktarıyoruz. Boşsa boş bir string döndürüyoruz.

Programın ekran çıktılarına da bir bakalım. Resimlerin altındaki yazılara dikkat edelim.

Ajax, JSF içinde temel olarak böyle kullanılıyor arkadaşlar. Gelecek yazıda Ajax kullanarak bir anket yapacağız.

Esen kalın.

Selam ve Sevgilerimle