JSF 2 InputText mit AJAX-Beispiel

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. JSF 2.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 von Ajax behandelt Eingabetext jsf-Komponente, während die anderen in anderen Beiträgen behandelt werden.

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 afterPhase="#{indexBean.phaseListener}"
		beforePhase="#{indexBean.phaseListener}">
		<h1>JavaBeat JSF 2.2 Examples</h1>
		<h2>JSF2 Ajaxify UI Input Example</h2>
		<h:form>
			<h3>This Ajax is Triggered On KeyDown</h3>
			<h:inputText id="input" value="#{indexBean.message}">
				<f:ajax event="keydown" execute="input" render="output"></f:ajax>
			</h:inputText>
					#{' '}
					<h:outputText id="output" value="#{indexBean.message}"></h:outputText>
		</h:form>
	</f:view>
</h:body>
</html>
  • Beachten Sie die Verwendung von PhaseListener um sicherzustellen, dass eine echte Anfrage vorliegt.

2. Verwaltete Bohne

IndexBean.java

package net.javabeat.jsf;

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

@ManagedBean
@SessionScoped
public class IndexBean {
	private String message;

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}

	public void phaseListener(PhaseEvent e){
		System.out.println(e);
	}
}

3. Der Bereitstellungsdeskriptor

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>

5. JSF 2 Ajaxify InputText-Demo

Der folgende Schnappschuss zeigt Ihnen die Verwendung von f:ajax zum Initiieren einer Teilanfrage und zum Rendern der Teilantwort, die bereits vom Server zurückgegeben wurde.

Beispiel für JSF 2 Ajaxify InputText

  • Die obige Demo behandelt den Fall der Eingabe von Zeichen in die Eingabe, während die Ausgabe automatisch geändert wurde.
  • Der Eingabetext und die Veranstaltung Taste nach unten wurde mit einer Ajax-Anfrage verknüpft.
  • Die Identifizierung der Komponenten, die gesendet oder teilweise gerendert werden, wurde durchgeführt ausführen Und machen jeweils.
  • Nur die Komponenten, die im f:ajax erwähnt werden machen Das Attribut wird gerendert, während das JSF-Framework die Komponentenansicht gezeichnet hat.
  • Nur die Komponenten, die im f:ajax erwähnt werden ausführen Das Attribut wird ausgeführt, während die Übermittlung verarbeitet wird.
  • Der f:ajax Ereignis Das Attribut bestimmt den Zeitpunkt, an dem die Ajax-Anfrage übermittelt wurde.

(wpdm_file id=31)

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen