Primefaces AjaxStatus-Beispiel

AjaxStatus ist ein globaler Notifier für Ajax-Anfragen, der Facetten verwendet, um den Anfragestatus darzustellen. Die am häufigsten verwendeten Facetten sind Start Und vollständig. Die Startfacette ist sichtbar, sobald die Ajax-Anfrage beginnt und bleibt, bis sie abgeschlossen ist. Sobald die Ajax-Antwort empfangen und die Seite aktualisiert wurde, wird die Startfacette ausgeblendet und die vollständige Facette angezeigt.

  • Lesen : PrimeFaces-Tutorials

1. AjaxStatus-Tag-Informationen

Allgemeine Informationen zu AjaxStatus

2. AjaxStatus-Attribute

AjaxStatus-Attribute

3. AjaxStatus-Ereignisse

Die AjaxStatus-Komponente überwacht die folgenden Phasen:

  • Standard: Zunächst sichtbar, wenn die Seite geladen wird.
  • Start: Bevor die Ajax-Anfrage beginnt.
  • Erfolg: Wenn eine Ajax-Antwort ohne Fehler empfangen wird.
  • Fehler: Wenn eine Ajax-Anfrage mit einem Fehler empfangen wird.
  • vollständig: Wenn alles fertig ist.

4. Verwaltete Bohne

AjaxStatus.java

package net.javabeat.primefaces;

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

@ManagedBean
@SessionScoped
public class AjaxStatus {
	private String message = "";

	public String getMessage() {
		return message;
	}

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

	public void listener(AjaxBehaviorEvent e) throws Exception{
		Thread.sleep(5000);
		System.out.println(e);
	}

	public String printMessage(){
		return "";
	}
}

5. 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"
	xmlns:p="http://primefaces.org/ui">
	<h:head>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<f:view>
		<h:form prependId="false">
			<h1>JavaBeat Primefaces Example</h1>
			<h2>Primefaces AjaxStatus - Example</h2>
			<h:outputText value="Type a message: "/>
			#{' '}
			<p:inputText id="in" value="#{ajaxStatus.message}">
				<p:ajax process="in out" update="out" event="keyup" listener="#{ajaxStatus.listener}"></p:ajax>
			</p:inputText>
			#{' '}
			<p:outputLabel id="out" value="#{ajaxStatus.message}"/>
			<br/>
			<br/>
		</h:form>
			<p:ajaxStatus id="startAjax">
				<f:facet name="start">
					<h:graphicImage value="#{resource('images:ajax-loader.gif')}"></h:graphicImage>
				</f:facet>
				<f:facet name="complete">
					<h:graphicImage value="#{resource('images:ajax-complete.gif')}"></h:graphicImage>
				</f:facet>
			</p:ajaxStatus>
	</f:view>
</html>

6. Primefaces AjaxStatus Demo – Deklarativer Ansatz

Die folgenden Schnappschüsse zeigen Ihnen die Verwendung von AjaxStatus Primefaces-Komponente zum Erzielen des Abhörens verschiedener Phasen bei Ajax Request-Response.
Primefaces AjaxStatus Startphase
Primefaces AjaxStatus Abschlussphase

7. Programmatischer Ansatz

Facetten sind die deklarative Verwendungsmethode. Wenn Sie erweiterte Fälle mit Skripten implementieren möchten, können Sie diese nutzen Rückrufe Dies sind die Event-Handler-Gegenstücke der Fakten.

8. Die Ansicht (AjaxStatus mit programmatischem Ansatz)

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"
	xmlns:p="http://primefaces.org/ui">
	<h:head>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<f:view>
		<h:form prependId="false">
			<h1>JavaBeat Primefaces Example</h1>
			<h2>Primefaces AjaxStatus - Example</h2>
			<h:outputText value="Type a message: "/>
			#{' '}
			<p:inputText id="in" value="#{ajaxStatus.message}">
				<p:ajax process="in out" update="out" event="keyup" listener="#{ajaxStatus.listener}"></p:ajax>
			</p:inputText>
			#{' '}
			<p:outputLabel id="out" value="#{ajaxStatus.message}"/>
			<br/>
			<br/>
		</h:form>
			<p:ajaxStatus id="startAjax" onstart="PF('start').show();" oncomplete="PF('start').hide();">
			</p:ajaxStatus>
			<p:dialog widgetVar="start">
				<h:graphicImage value="#{resource('images:ajax-loader.gif')}"></h:graphicImage>
			</p:dialog>
	</f:view>
</html>

9. Primefaces AjaxStatus – Programmatische Demo

Primefaces AjaxStatus Programmatic Way

10. Wichtige Hinweise

Wenn Sie AjaxStatus verwenden, stellen Sie sicher, dass Sie die folgenden wichtigen Punkte kennen:

  • Vermeiden Sie die Aktualisierung von AjaxStatus selbst, um doppelte Facetten-/Callback-Bindungen zu verhindern.
  • Geben Sie dem Inline-„ajaxStatus“ eine feste Breite/Höhe an, um zu verhindern, dass sich das Seitenlayout ändert.
  • Komponenten wie commandButton verfügen über ein Attribut (global), um die Auslösung von AjaxStatus zu steuern.
  • AjaxStatus unterstützt auch die Kern-JSF-Ajax-Anfrage von f:ajax.

(wpdm_file id=63)

Kommentar verfassen

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

Nach oben scrollen