Asynchrones JavaScript XML (Ajax) galt lange Zeit als Luxus, sowohl für Benutzer als auch für Entwickler, aber heute ist Ajax für die Erstellung überzeugender und wettbewerbsfähiger Anwendungen unerlässlich. JSF2.0 verfügt über integrierte Ajax-Unterstützung mit einer Standard-JavaScript-Bibliothek.
JSF-Ajax-Anforderungen verarbeiten Komponenten teilweise auf dem Server und rendern Komponenten teilweise auf dem Client, wenn die Anforderung zurückgegeben wird. Die Verwendung von Ajax hat mehrere Formen. In diesem Beitrag wird die Ajaxifizierung einer Gruppe von Komponenten oder für die gesamte Form behandelt.
Sie haben die Verwendung von bemerkt f:ajax für inputText und verschiedene Arten von Aktionsquellen (CommandLink & CommandButton), verwendet bei diesen jedoch die f:ajax Tag ist mit der Komponente verknüpft, die ajaxifizieren würde. Solche Verwendungen sind etwas mühsam, da Sie f:ajax jedes Mal zuordnen müssen, wenn Sie eine bestimmte Komponente ajaxifizieren möchten. Dieses Problem wird durch die Verwendung von gelöst Ajax-Gruppe Konzept.
Eine Ajax-Gruppe ist keine bestimmte Komponente oder ein bestimmtes Tag, das Sie verwenden müssen, es ist einfach das Gleiche f:ajax Tag, bei dem Sie das Ajax-Tag nicht mit einer bestimmten Komponente, sondern mit dem Formular verknüpfen. Durch die Verwendung der Ajax-Gruppe wendet jsf die Standard-Ajax-Ereignisse an – Action für Aktionsquellen und ValueChange für alle Eingabe- und Auswahlkomponenten – wenn Sie kein Ereignis angeben. Falls Sie das Ereignis angegeben haben, bei dem es sich um Ajax handelt nur gilt für das angegebene Ereignis.
Lesen Sie auch:
- JSF 2-Tutorials
- JSF-Tutorials
- Einführung in JSF
1. Die Aussicht
index.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<h:outputScript library="javax.faces" name="jsf.js" target="head" />
</h:head>
<h:body>
<f:view>
<h1>JavaBeat JSF 2.2 Examples</h1>
<h2>JSF2 Ajax Group Example</h2>
<f:ajax render="output">
<h:form>
<h3>This Ajax is Default Triggered</h3>
<h:inputText id="input" value="#{indexBean.message}"
valueChangeListener="#{indexBean.valueChange}"/>
#{' '}
<h:commandButton value="Display" action="#{indexBean.displayText}">
</h:commandButton>
#{' '}
<h:commandLink value="Display" action="#{indexBean.displayText}">
</h:commandLink>
#{' '}
<h:outputText id="output" value="#{indexBean.message}"></h:outputText>
</h:form>
</f:ajax>
</f:view>
</h:body>
</html>
2. Verwaltete Bohne
IndexBean.java
package net.javabeat.jsf;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.ValueChangeEvent;
@ManagedBean
@SessionScoped
public class IndexBean {
private String message;
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
// This action will be invoked every time the commandButton has been activated
public String displayText(){
return "";
}
// This listener will be invoked every time the inputText value has changed
public void valueChange(ValueChangeEvent e){
System.out.println("The Value Changed For : "+e.getComponent()+" Component");
}
}
3. Der Bereitstellungsdeskriptor (web.xml)
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5" metadata-complete="true"> <context-param> <description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2 </description> <param-name>javax.faces.STATE_SAVING_METHOD</param-name> <param-value>client</param-value> </context-param> <context-param> <param-name>javax.faces.application.CONFIG_FILES</param-name> <param-value>/WEB-INF/faces-config.xml</param-value> </context-param> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.xhtml</url-pattern> </servlet-mapping> <listener> <listener-class>com.sun.faces.config.ConfigureListener</listener-class> </listener> </web-app>
4. Die Aussicht
Der folgende Schnappschuss zeigt Ihnen die vollständige Demonstration, wie die Ajax-Gruppe für die Aktivierung der Standardereignisse verwendet werden kann.
Bei der vorherigen Demonstration müssen die folgenden Punkte beachtet werden, um ein gutes Verständnis dessen zu erhalten, was jetzt passiert ist:
- Verwendung von f:ajax vor dem Formular wird das gesamte Formular ajaxifiziert.
- Das Ajaxieren des Formulars bedeutet, dass jede Eingabe (Texteingabe, Textbereiche, geheime Eingabe, alle ausgewählten Komponenten) durch ihr Standardereignis ajaxifiziert wird.
- Das Standardereignis für die aufgelisteten Eingabekomponenten ist valueChange; Dadurch wird, sobald Sie den Wert der Eingabe geändert und versucht haben, sich auf eine andere Komponente in der Ansicht zu konzentrieren, die ändern Das Ereignis wird ausgelöst und die Ajax-Anfrage wurde initiiert.
- Das Standardereignis für die Aktionsquellen (commandButton & commandLink) ist die Aktion (klicken – aktivieren); Sobald also die Aktion aktiviert (angeklickt) wurde, wurde der Ajax-Sogar-Klick (Senden) ausgelöst und die Ajax-Anfrage wurde initiiert.
- Das Auslösen von Ajax-Ereignissen bedeutet nicht mehr, dass die JSF irgendwelche Komponenten rendert, wenn der Ajax-Aufruf zurückkehrt, weil Sie kein a angegeben haben machen für das Gebrauchte f:ajax. Wenn Sie sich die Datei index.xhtml notiert haben, werden Sie feststellen, dass das Tag f:ajax ein definiert hat machen Attribut.
(wpdm_file id=30)
