13 Nisan 2017 Perşembe

JSF' de Ajax kullanımı

AJAX Asenkron JavaScript ve Xml anlamına gelir.

 Ajax tekniği kullanılarak javascript kodu sunucuyla veri alışverişinde bulunur ve tüm sayfayı yeniden yüklemeksizin web sayfalarının bölümlerini günceller.


JSF Tag

<f:ajax execute="input-component-name" render = "output-component-name" />

Örnek Uygulama


Ajax.java


import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "ajax", eager = true)
@SessionScoped
public class Ajax implements Serializable {
    private String name;
    private String surname;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name= name;
    }
    public String getSurname() {
        return  surname;
    }
    public void setSurname(String surname) {
        this.surname= surname;
    }
    public String getWelcomeMessage() {
        return " Merhaba" + name + "  "surname;
    }
    public  Ajax() {
    }
}



index.xhtml


<html xmlns  =  "http://www.w3.org/1999/xhtml"
      xmlns :h  =  "http://java.sun.com/jsf/html"
      xmlns :f = "http://java.sun.com/jsf/core"
      xmlns :p = "http://primefaces.org/ui">
    <h:head>
        <title>JSF tutorial</title>
    </h:head>
    <h:body>
        <h2>Jsf Ajax Kullanımı</h2>
        <h:form>
            <p:panelGrid columns="1" id="inputName">
                <p:inputText  value = "#{ajax.name}"></p:inputText>
                <p:inputText  value ="#{ajax.surname}"></p:inputText>               
            </p:panelGrid>
            <p:commandButton value = "Show">
                <f:ajax execute = "inputName" render = "outputMessage" />
            </p:commandButton>
 <p:commandButton value ="Reset" type="reset"></p:commandButton>
        </h:form>
        <h2><h:outputText id =outputMessage value="#{ajax.welcomeMessage } ></h:outputText></h2>     
    </h:body>
</html>










Hiç yorum yok:

Yorum Gönder