Beispiel für eine clientseitige API von Primefaces AccordionPanel

Primefaces definiert die JavaScript-Bibliothek namens Widget. Widget – definiert mit WidgetVar – ist die Darstellung der Primefaces-Komponenten, auf denen das JavaScript arbeitet. Jedoch, primefaces stellt ein implizites JavaScript-Objekt namens PF bereit für den Zugriff auf die verschiedenen Funktionen (Verhaltensweisen) von Primefaces-Widgets. Diese Widgets werden mithilfe der Primefaces definiert. WidestVar Attribut, dass alle Komponenten es als eine der Eigenschaften definiert haben, die bereitgestellt werden könnten. Dies ist nicht die einzige Möglichkeit, auf die Primefaces-Komponenten zuzugreifen. Die Primefaces ermöglichen es dem Entwickler jedoch, eine Widget-Funktionalität mithilfe von aufzurufen WidgetVar direkt.

  • Lesen : PrimeFaces-Tutorials

Eine der Komponenten, die durch die Verwendung von gesteuert werden können Clientseitige API So oder so ist das AkkordeonPanel. In diesem Tutorial erfahren Sie, wie das geht Aktivieren/Deaktivieren Die AkkordeonPanel Verwendung der PF oder über den direkten Zugriff der WidgetVar. Diese Bibliothek ist Teil der Primafaces-Bibliothek.

1. Verwaltete Bohne

AccodrionPanel.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 activateTab(index){
				PF('accordionPanel').select(index);
			}

			function deactivateTab(index){
				accordionPanel.unselect(index);
			}
		</script>
	</h:head>
	<f:view>
		<h:form prependId="false">
			<h1>JavaBeat Primefaces Example</h1>
			<h2>Primefaces AccordionPanel</h2>
			<br/>
			<p:accordionPanel widgetVar="accordionPanel">
				<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>
			<br/>
			<h:link value="Activate First Tab"  onclick="activateTab(0);return false;"/>
			#{' '}
			<h:link value="Deactivate First Tab"  onclick="deactivateTab(0);return false;"/>
			<br/>
			<h:link value="Activate Second Tab"  onclick="activateTab(1);return false;"/>
			#{' '}
			<h:link value="Deactivate Second Tab"  onclick="deactivateTab(1);return false;"/>
			<br/>
			<h:link value="Activate Third Tab"  onclick="activateTab(2);return false;"/>
			#{' '}
			<h:link value="Deactivate Third Tab"  onclick="deactivateTab(2);return false;"/>
		</h:form>
	</f:view>
</html>

3. Primefaces AccordionPanel JavaScript-Widget-Beispieldemo

Primefaces AccordionPanel Client-seitige API

  • Erste Registerkarte, die standardmäßig aktiviert wurde.
  • Um den ersten Tab zu deaktivieren, müssen Sie a aufrufen Deaktivieren Sie die erste Registerkarte die wiederum eine JavaScript-Funktion aufrufen.
  • Die definierte JavaScript-Funktion greift über ihre WidgetVar direkt auf die Akkordeonkomponente zu.

Primefaces AccordionPanel Client-seitige API

  • Das Ergebnis der Deaktivierung des ersten Tabs.

Primefaces AccordionPanel Client-seitige API

  • Um den zweiten Tab zu aktivieren, müssen Sie darauf klicken Aktiver zweiter Tab was wiederum eine JavaScript-Funktion aufrufen würde, die das Implizite verwendet PF Objekt für den Zugriff auf die AccordionPanel-Komponente. Der übergebene Wert für die PF ist der WidgetVar Wert, der zuvor definiert wurde.

(wpdm_file id=60)

Kommentar verfassen

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

Nach oben scrollen