PrimeFaces BlockUI-Beispiel

Primefaces BlockUI Komponente verwendet wird Block Interaktivität von JSF-Komponenten mit optionalem Ajax Integration. Für BlockUI müssen Trigger- und Blockattribute definiert werden. Mit der speziellen Ajax-Integration werden Ajax-Anfragen, deren Quelle die Triggerkomponenten sind, blockiert Benutzeroberfläche am Start und entsperren oncomplete. Wenn Sie die Anfrage an den Server senden, wird die Seiteninteraktion blockiert und der Fortschritt der Serverantwort kann angezeigt werden. Dies ist in modernen Webanwendungen sehr nützlich.

  • Lesen : PrimeFaces-Tutorials

1. BlockUI-Tag-Informationen

Allgemeine Informationen zu BlockUI

2. BlockUI-Attribute

BlockUI-Attribute

3. 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 - BlockUI</h2>
			<p:panel id="block" columns="1" header="Login Panel" style="width:272px;">
				<h:outputText  value="Enter Username:"/>
				<p:inputText value="#{blockUI.username}"></p:inputText>
				<h:outputText  value="Enter Password:"/>
				<p:inputText value="#{blockUI.password}"></p:inputText>
				<f:facet name="footer">
					<p:commandButton id="trigger"
						value="Login" action="#{blockUI.login}"></p:commandButton>
				</f:facet>
			</p:panel>
			<p:blockUI trigger="trigger" block="block">
				<p:graphicImage value="#{resource('images:ajax-loader.gif')}"></p:graphicImage>
			</p:blockUI>
		</h:form>
	</f:view>
</html>

4. Verwaltete Bohne

BlockUI.java

package net.javabeat.primefaces;

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

@ManagedBean
@SessionScoped
public class BlockUI {
	private String username;
	private String password;

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

	public String login() throws Exception{
		// Assumed business could too long
		Thread.sleep(5000);
		return "";
	}
}

5. PrimeFaces BlockUI-Demo

Der folgende Schnappschuss zeigt Ihnen die Auswirkungen der Verwendung von BlockUI zum Blockieren einer interaktiven Benutzeroberfläche.

BlockUI-Beispiel

(wpdm_file id=70)

Kommentar verfassen

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

Nach oben scrollen