JSF 2-Vorlage – Beispiel für Komposition, Einfügen und Definieren

Die meisten Webanwendungen folgen einem ähnlichen Muster, bei dem alle Seiten ein gemeinsames Layout und einen gemeinsamen Stil haben. Es ist typisch, dass Seiten dieselben Kopf- und Fußzeilen sowie dieselben Seitenleisten haben.

Mit Facelets können Sie diese Gemeinsamkeit in einem zusammenfassen Vorlagedamit Sie das Erscheinungsbild Ihrer Website aktualisieren können, indem Sie Änderungen an der Vorlage und nicht an den einzelnen Seiten vornehmen. Facelets-Vorlagen kapseln Funktionen, die von mehreren Seiten gemeinsam genutzt werden, sodass Sie diese Funktionen nicht für jede Seite einzeln angeben müssen. Das Kapselungskonzept ist der Grundstein sowohl der objektorientierten Programmierung als auch des bekannten DRY-Prinzips (Don’t Repeat Yourself)..

Um eine solche wohlgeformte Organisation zu erreichen, ist die Nutzung und das Verständnis mehrerer Aspekte erforderlich Facetten-Tags:

  • Komposition: Ohne Vorlage ist eine Komposition eine Abfolge von Elementen, die an anderer Stelle eingefügt werden können. Die Komposition kann variable Teile haben (angegeben mit ui:insert children). Bei Verwendung mit dem Vorlagenattribut wird die Vorlage geladen. Die untergeordneten Elemente dieses Tags bestimmen die variablen Teile der Vorlage. Der Inhalt der Vorlage ersetzt dieses Tag.
  • definieren: Definiert Inhalte, die mit einer Übereinstimmung in eine Vorlage eingefügt werden ui:einfügen.
  • einfügen: Fügt Inhalte in eine Vorlage ein. Dieser Inhalt wird innerhalb des Tags definiert, das die Vorlage lädt.

Lesen Sie auch:

  • JSF 2-Tutorials
  • JSF-Tutorials
  • Einführung in JSF

1. Die Vorlage

TutorialTemplate.xhtml

</pre>
<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">
	<h1>
		<h:outputText value="JavaBeat JSF 2.2 Examples" />
	</h1>
	<h2>
		<h:outputText value="JSF2 Template Example" />
	</h2>
<h:panelGrid columns="3" border="1">
	<h:panelGroup columns="1">
		<ui:insert name="left" />
	</h:panelGroup>
	<h:panelGroup columns="1">
		<ui:insert name="center" />
	</h:panelGroup>
	<h:panelGroup columns="1">
		<ui:insert name="right" />
	</h:panelGroup>
</h:panelGrid>
</html>

2. Die Aussicht

JSFTemplate.xhml

<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">
	<ui:composition template="/template/TutorialTemplate.xhtml">
		<ui:define name="left">
			This is the left of JSF Tutorial
		</ui:define>
		<ui:define name="center">
			This is the center of JSF Tutorial
		</ui:define>
		<ui:define name="right">
			This is the right of JSF Tutorial
		</ui:define>
	</ui:composition>
</html>

JPATutorial.xhml

<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">
	<ui:composition template="/template/TutorialTemplate.xhtml">
		<ui:define name="left">
			This is the left of JPA Tutorial
		</ui:define>
		<ui:define name="center">
			This is the center of JPA Tutorial
		</ui:define>
		<ui:define name="right">
			This is the right of JPA Tutorial
		</ui:define>
	</ui:composition>
</html>

index.xhml

<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:c="http://java.sun.com/jsp/jstl/core">
<h:head>
	<title><h:outputText value="JavaBeat Template"/></title>
</h:head>
<h:body>
	<h:form id="form">
		<h1>
			<h:outputText value="JavaBeat JSF 2.2 Examples" />
		</h1>
		<h2>
			<h:outputText value="JSF2 Template Example" />
		</h2>
		<h:outputLink value="JPATutorial.xhtml">
			JPA Tutorial
		</h:outputLink>
		<br/>
		<h:outputLink value="JSFTutorial.xhtml">
			JSF Tutorial
		</h:outputLink>
	</h:form>
</h:body>
</html>

3. Die Verzeichnisstruktur

JSF 2-Vorlage Beispiel 1

4. Der Bereitstellungsdeskriptor (web.xml)

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5" metadata-complete="true">
	<context-param>
		<description>State saving method: 'client' or 'server'
						(=default). See JSF Specification 2.5.2
		</description>
		<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
		<param-value>client</param-value>
	</context-param>
	<context-param>
		<param-name>javax.faces.application.CONFIG_FILES</param-name>
		<param-value>/WEB-INF/faces-config.xml</param-value>
	</context-param>
	<servlet>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>/faces/*</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.xhtml</url-pattern>
	</servlet-mapping>
	<listener>
		<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
	</listener>
</web-app>

5. JSF 2-Vorlagendemo

Die folgenden Schnappschüsse zeigen Ihnen die Verwendung der Vorlage

JSF 2-Vorlage Beispiel 1

JSF 2-Vorlage Beispiel 2

JSF 2-Vorlage Beispiel 3

  • Die Vorlage hat einen definierten Satz von ui:einfügen Stichworte.
  • JPATutorial und JSFTutorial haben auf die Vorlage verwiesen ui:composition indem Sie das Vorlagenattribut mit dem gewünschten Wert füllen.
  • JPATutorial und JSFTutorial haben diese überschrieben ui:einfügen Tags, die in der Vorlage definiert sind, mit den Wünschen des Entwicklers.
  • Der allgemeine HTML-Code, der nicht überschrieben werden konnte, wird unverändert angezeigt.
  • Um Facelets-Tags zu verwenden, fügen Sie Ihrer JSF-Seite eine Namespace-Deklaration (xmlns:ui=“http://java.sun.com/jsf/facelets“) hinzu.
  • Die Verwendung von ui:composition Dadurch wird der umliegende Inhalt abgeschnitten.

(wpdm_file id=22)

Kommentar verfassen

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

Nach oben scrollen