JSF 2 CommandLink und CommandButton 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 CommandLink Und Befehlsschaltfläche 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

<!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: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 CommandLink &amp; CommandButton Example</h2>
		<h:form>
			<h3>This Ajax is Triggered On Action Click</h3>
			<h:inputText id="input" value="#{indexBean.message}"/>
			#{' '}
			<h:commandButton value="Display" action="#{indexBean.displayText}">
				<f:ajax event="click" execute="input" render="output"></f:ajax>
			</h:commandButton>
			#{' '}
			<h:commandLink value="Display" action="#{indexBean.displayText}">
				<f:ajax event="click" execute="input" render="output"></f:ajax>
			</h:commandLink>
			#{' '}
			<h:outputText id="output" value="#{indexBean.message}"></h:outputText>
		</h:form>
	</f:view>
</h:body>
</html>

2. Verwaltete Bohne

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 String displayText(){
		return "";
	}

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

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. JSF 2 Ajaxify CommandLink & CommandButton Demo

Der folgende Schnappschuss zeigt Ihnen die Ajaxifyig-Implementierung für commandLink & Befehlsschaltfläche.

JSF 2 Ajaxifizierende Aktionsquelle

  • Ajaxifizieren von Aktionsquellen (CommandLink und CommandButton) müssen verwendet werden f:ajax.
  • 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=29)

Kommentar verfassen

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

Nach oben scrollen