JSF 2.0 + Ajax Hallo Weltbeispiel

In JSF 2.0 ist das Codieren von Ajax genauso einfach wie das Codieren eines normalen HTML-Tags. In diesem Tutorial werden Sie die letztenJSF 2.0 hello world example neu strukturieren, sodass beim Klicken auf die Schaltfläche eine Ajax-Anfrage gestellt wird, anstatt das gesamte Formular zu senden.

1. JSF 2.0 Seite

Eine JSF 2.0-XHTML-Seite mit Ajax-Unterstützung.

helloAjax.xhtml




    
        




JSF 2.0 + Ajax Hello World Example

In diesem Beispiel wird die Schaltfläche "Ajaxable" aktiviert. Wenn Sie auf die Schaltfläche klicken, wird eine Ajax-Anforderung an den Server gesendet, anstatt das gesamte Formular zu senden.

Im<f:ajax>-Tag:

execute=”name” - Geben Sie an, dass die Formularkomponente mit der ID "name" zur Verarbeitung an den Server gesendet wird. Teilen Sie es für mehrere Komponenten einfach mit einem Leerzeichen dazwischen auf, z. B.execute=”name anotherId anotherxxId”. In diesem Fall wird der Textfeldwert übergeben.
render=”output” - Nach der Ajax-Anforderung wird die Komponente mit der ID „output“ aktualisiert. In diesem Fall wird nach Abschluss der Ajax-Anforderung die<h:outputText>-Komponente aktualisiert.

2. ManagedBean

Siehe das vollständige Beispiel für#{helloBean}.

HelloBean.java

package com.example.common;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import java.io.Serializable;

@ManagedBean
@SessionScoped
public class HelloBean implements Serializable {

    private static final long serialVersionUID = 1L;

    private String name;

    public String getName() {
       return name;
    }
    public void setName(String name) {
       this.name = name;
    }
    public String getSayWelcome(){
       //check if null?
       if("".equals(name) || name ==null){
        return "";
       }else{
        return "Ajax message : Welcome " + name;
       }
    }
}

3. Wie es funktioniert?

Greifen Sie auf die URL zu:http://localhost:8080/JavaServerFaces/helloAjax.jsf

jsf2-ajax-hello-world-example-1

Wenn Sie auf die Schaltfläche klicken, wird eine Ajax-Anforderung gesendet und der Textfeldwert zur Verarbeitung an den Server übergeben. Danach wird dieoutputText-Komponente aktualisiert und der Wert über diegetSayWelcome()-Methode ohne „page flipping effect“ angezeigt.

jsf2-ajax-hello-world-example-2

Quellcode herunterladen

Laden Sie es herunter -JSF-2-Ajax-Hello-World-Example.zip (8 KB)

TOC

JSF 2.0 + Ajax Hallo Weltbeispiel