Java Server Faces

JSF ve Ajax Kullanım Örneği

Paylaş

ggrtgJava Server Faces Dersleri‘ne devam ediyoruz. Önceki derslerde JSF Html Bileşenleri’ni gördük. Bu yazıda ise bizim işimize yarayacak bir teknolojiyi kullanarak işlemlerimizi daha hızlı şekilde yapmayı göreceğiz.

Kısaca AJAX

Bu teknoloji AJAX’dır. Ajax yani Asynchronous JavaScript and XML’un kısaltması olan teknolojidir.  AJAX’ı kısaca açıklamak gerekirse bir web sayfasındaki veriyi kullanmak için sayfayı yenilemeye gerek kalmadan o veriyi kullanmamıza olanak sağlamaktadır.  Çok kullanılan bir teknolojidir.

Biz bu ders’de ise bu güzel teknolojinin Java Server Faces sayfalarımızda nasıl kullanabiliyoruz bir örnek ile açıklamaya çalışacağım. Bu örneğimiz kullanıcıdan adını ve soyadını alacağız ve Merhaba ad+soyad şeklinde mesaj vereceğiz.İlk yapmamız gereken Bean’imizi oluşturmak. Getter ve Setter metodları olacak bu Bean’imizin adı kullaniciBean.java olacak. kullaniciBean.java Bizim formumuzdan gelicek ad ve soyad değerleri bir mesaj olarak JSF sayfamıza gönderecek.

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class kullaniciBean {
String ad="";
String soyad="";

    public String getAd() {
        return ad;
    }

    public void setAd(String ad) {
        this.ad = ad;
    }
    
     public String getSoyad() {
        return soyad;
    }

    public void setSoyad(String soyad) {
        this.soyad = soyad;
    }
   
    public String merhaba()
    {
      return "Hoşgeldiniz "+ad+" "+soyad;           
    }
}

Bean’imiz tamam bu bölüm bildiğimiz kısımdı. Şimdi sıra JSF sayfamızı oluşturmaya geldi bu sayfada yaptığımız şey bir form içerisinde <h:form> kullanıcıdan ad ve soyadını girmesini isteyeceğimiz bir form yapacağız <h:inputtext> ardından Gönder tuşuna basarak <h:commandButton> değerlerimiz bean’e geçicek ve değerler Bean’de döndürüldikten sonra <h:outputText> ile sonuç ekrana yazdıralacak. Bunlar bildiğimiz kısım. Ancak Buton işlevinin arasında Ajax’ın çalışması için bir ifade ekliyoruz.

<f:ajax render="gonder"></f:ajax>

Bu ifade Ajax’ın çalışmasını sağlamaktadır. <h:commandButton> ile bu işlemi tetiklemektir.

Bizim uygulamamızda kullanacağımız şekli ise;

<f:ajax execute="ad soyad" render="gonder"/>

şeklinde olacaktır. execute ifadesi bizim değelerimizi işlemesini sağlamak olacak.  render ifadesi ise verdiğimiz işlemi yapmasını sağlayan komuttur. render değerini nereye yazarsak orada işlemesini sağlamaya başlar. Biz bu id’yi outpuText’e yazdığımız için sonuç orada görüntülenecek.

<!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-Ajax Kullanımı</title>
    </h:head>
    <h:body>
        <h:form>
            <h:inputText id="ad" value="#{kullaniciBean.ad}"/>
            <h:inputText id="soyad" value="#{kullaniciBean.soyad}"/>
            <h:commandButton value="Gönder">
                <f:ajax execute="ad soyad" render="gonder"/>
            </h:commandButton>
            <br/>
            <h:outputText id="gonder" value="#{kullaniciBean.merhaba()}"/>
        </h:form>
    </h:body>
</html>

 

Paylaş

Diğer Yazılar

İlgini Çekebilir