PrimeFaces AccordionPanel – Beispiel für dynamisches Laden + Cache

Wenn Sie die Akkordeon-Panel-Komponente von Primefaces gesehen haben, fragen Sie sich höchstwahrscheinlich nach den wichtigsten Funktionen, die dem Entwickler zur Verfügung gestellt wurden, um die Komponente nützlicher zu machen. Eine der Funktionen ist das verzögerte Laden des Inhalts in den einzelnen Registerkarten.

AccordionPanel unterstützt das verzögerte Laden von Tab-Inhalten, Wenn das dynamische Attribut auf „true“ gesetzt ist, werden nur aktive Tab-Inhalte auf der Clientseite gerendert und durch Klicken auf einen inaktiven Tab-Header wird eine Ajax-Anfrage zum Laden des Tab-Inhalts gesendet. Dies würde die Leistung beim ersten Rendern der Seite erhöhen.

  • Lesen : PrimeFaces-Tutorials

Diese Funktion ist nützlich, um die Bandbreite zu reduzieren und die Ladezeit der Seite zu beschleunigen. Standardmäßig führt die Aktivierung einer zuvor geladenen dynamischen Registerkarte nicht dazu, dass der Inhalt erneut geladen wird, da die Registerkarte zwischengespeichert wird. Um dieses Verhalten zu steuern, verwenden Sie die Cache-Option.

Das AccordionPanel-Tag verfügt über die Attribute dynamisch und Cache zum Erreichen der Lazy-Loading- und Caching-Techniken. In diesem Tutorial werden die Vorteile dieser beiden Attribute hervorgehoben.

Dynamisches Laden von AccordionPanel

Die folgenden Schnappschüsse zeigen Ihnen die Auswirkungen der Verwendung dynamisch Attribut und den Unterschied, ob man es berücksichtigt oder nicht. Durch die Verwendung des dynamischen Attributs werden nur die aktivierten Paneldaten geladen. Die restlichen Panels werden erst dann geladen, wenn sie vom Benutzer aktiviert werden. Wenn Sie jedoch kein dynamisches Attribut angeben, lädt die Ansicht die gesamten Panels.

Ausführung ohne dynamisches Attribut

Demo ausführen, ohne dynamisches Attribut zu verwenden

  • Ohne Verwendung des dynamischen Attributs wurden alle Akkordeon-Registerkarten aktiviert.

Ausführung mit dynamischem Attribut

Demo mit dynamischem Attribut ausführen

  • Die Verwendung des dynamischen Attributs führt dazu, dass die einzige erste AccordionPanel-Registerkarte aktiviert wurde.
  • Bedenken Sie, dass die anderen Registerkarten aktiviert werden, sobald der Benutzer darauf klickt.

AccordionPanel-Datencache

Wie bereits erwähnt, löst die Aktivierung eines zuvor geladenen dynamischen Tabs keine Anforderung aus, den Inhalt erneut zu laden, während der Tab zwischengespeichert wird. Deaktivierung von Zwischenspeicher Das Attribut wird dieses Problem lösen.

Läuft dynamisch und im Cache

Akkordeon dynamisch und zwischengespeichert

Läuft dynamisch und nicht zwischengespeichert

Akkordeon dynamisch und nicht zwischengespeichert

1. Verwaltete Bohne

AccordionPanel.java

package net.javabeat.primefaces;

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

@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;
	}
}

2. 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 AccordionPanel</h2>
			<br/>
			<p:accordionPanel dynamic="true" cache="false">
				<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. Faces-Konfigurationsdatei

faces-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://xmlns.jcp.org/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
	version="2.2">
<application>
	<resource-bundle>
		<base-name>net.javabeat.jsf.application</base-name>
		<var>msg</var>
	</resource-bundle>
</application>
</faces-config>

4. Pom.xml-Datei

pom.xml

<!--Pom entries-->
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>${junit.version}</version>
			<scope>test</scope>
		</dependency>

		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>slf4j-api</artifactId>
			<version>${slf4j.version}</version>
		</dependency>

		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<version>${servlet.version}</version>
			<scope>provided</scope>
		</dependency>

		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-impl</artifactId>
			<version>2.2.4</version>
		</dependency>

		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-api</artifactId>
			<version>2.2.4</version>
		</dependency>

		<dependency>
			<groupId>org.primefaces</groupId>
			<artifactId>primefaces</artifactId>
			<version>4.0</version>
		</dependency>

		<dependency>
			<groupId>javax.servlet.jsp</groupId>
			<artifactId>javax.servlet.jsp-api</artifactId>
			<version>2.3.1</version>
		</dependency>

		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.1.2</version>
		</dependency>
<!--Pom entries-->

(wpdm_file id=59)

Kommentar verfassen

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

Nach oben scrollen