PrimeFaces AccordionPanel – onTabChange- und onTabShow-Ereignisse

In diesem Tutorial werden die Ereignisänderungs-Listener erläutert, die zusammen mit der AccordionPanel-Komponente verwendet werden. Der onTabChange wird aufgerufen, bevor dem Benutzer eine Registerkarte angezeigt wird und onTabShow wird aufgerufen, nachdem es dem Benutzer angezeigt wurde. Beide erhalten das Containerelement der Registerkarte zur Anzeige als Parameter.

An der anderen Hand tabÄndern ist das einzige Ajax-Verhaltensereignis für das Akkordeon-Bedienfeld, das ausgeführt wird, wenn eine Registerkarte umgeschaltet wird. Es wird innerhalb des Unterelements verwendet p:ajax. Ihr Listener (falls definiert) wird mit einem aufgerufen org.primefaces.event.TabChangeEvent Instanz, die einen Verweis auf eine neue aktive Registerkarte und das Akkordeon-Bedienfeld selbst enthält.

  • Lesen : PrimeFaces-Tutorials

Sehen Sie sich den folgenden Beispielcode an, um zu verstehen, wie Sie den Tab-Wechsel-Listener in AccordionPanel verwenden.

1. Verwaltete Bohne

AccordionPanel.java

package net.javabeat.primefaces;

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

import org.primefaces.event.TabChangeEvent;

@ManagedBean
@SessionScoped
public class AccordionPanel {
	private String messageOne = "Hello JavaBeat One";
	private String messageTwo = "Hello JavaBeat Two";
	private String messageThree = "Hello JavaBeat Three";

	public String getMessageOne() {
		System.out.println("Message One Loaded");
		return messageOne;
	}
	public void setMessageOne(String messageOne) {
		this.messageOne = messageOne;
	}
	public String getMessageTwo() {
		System.out.println("Message Two Loaded");
		return messageTwo;
	}
	public void setMessageTwo(String messageTwo) {
		this.messageTwo = messageTwo;
	}
	public String getMessageThree() {
		System.out.println("Message Three Loaded");
		return messageThree;
	}
	public void setMessageThree(String messageThree) {
		this.messageThree = messageThree;
	}
	public void changeListener(TabChangeEvent e){
		System.out.println("TabChangeEvent Has Fired By ::"+e.getSource());
		System.out.println("The next Tab Title is :: "+e.getTab().getTitle());
	}
}

2. 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>
		<script>
			function onTabChange(panel){
				alert('Client Callback : Before Tab Being Changed');
			}

			function onTabShow(panel){
				alert('Client Callback : After Tab Been changed');
			}
		</script>
	</h:head>
	<f:view>
		<h:form prependId="false">
			<h1>JavaBeat Primefaces Example</h1>
			<h2>Primefaces AccordionPanel</h2>
			<br/>
			<p:accordionPanel onTabShow="onTabShow(panel)" onTabChange="onTabChange(panel)">
				<p:ajax event="tabChange" listener="#{accordionPanel.changeListener}"></p:ajax>
				<p:tab title="First Tab Title">
					<h:outputText value="#{accordionPanel.messageOne}"></h:outputText>
				</p:tab>
				<p:tab title="Second Tab Title">
					<h:outputText value="#{accordionPanel.messageTwo}"></h:outputText>
				</p:tab>
				<p:tab title="Third Tab Title">
					<h:outputText value="#{accordionPanel.messageThree}"></h:outputText>
				</p:tab>
			</p:accordionPanel>
		</h:form>
	</f:view>
</html>

3. AccordionPanel onTabChange und onTabShow Events Demo

Die folgenden Schnappschüsse zeigen Ihnen das Anwendungsverhalten, nachdem Sie die clientseitigen Rückrufe und das Ajax-Ereignis des verwendet haben p:accordionPanel Komponente in Ihrer Anwendung.

Akkordeon-Rückruf & Ajax-Event

  • Dieser clientseitige Rückruf wurde aufgerufen, sobald der Benutzer den zweiten Tab aktiviert hat.
  • Die Callback-JavaScript-Methode definiert einen Parameter für das AccordionPanel selbst.

Akkordeon-Rückruf & Ajax-Event

  • Der clientseitige Rückruf wurde aufgerufen, nachdem der Benutzer den zweiten Tab aktiviert hat.
  • Die Callback-JavaScript-Methode definiert einen Parameter für das AccordionPanel selbst.

Akkordeon-Ajax-TabChange-Ereignis

  • Der Zuhörer der TabÄnderung Das Ereignis wurde aufgerufen.
  • Der TabChangeEvent Bietet Referenzen für das Akkordeon-Bedienfeld selbst und für die aktivierte Registerkarte.

(wpdm_file id=61)

Kommentar verfassen

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

Nach oben scrollen