Beispiel für JSF 2 UI Decorate

im Gegensatz zu den ui:Zusammensetzung, Das ui:decorate ist ein eher inhaltsorientierter Ansatz, bei dem Sie Ihre Seiten wie gewohnt schreiben, den Inhalt jedoch mit umgeben ui:dekorieren Tag, der ein hat Vorlage Attribut. Der Dekorateur wiederum verwendet die bereitgestellte Vorlage zum Dekorieren der Inhalte, die Sie in der Vorlage festgelegt haben. Die Verwendung von ui:decorate unterscheidet sich von der ui:composition, da ui:decorate die Tags berücksichtigt, die es umgeben, während ui:composition sie schneidet.

Der ui:einfügen wird in Verbindung mit using verwendet ui:dekorieren als ob es von der ui:composition verwendet wurde, zusätzlich zu einer weiteren minimalen Änderung, die daran vorgenommen werden könnte, um eine andere Verwendung bereitzustellen, nämlich das -Tag ohne Name Attribut. Dadurch werden alle untergeordneten Elemente des ui:decorate-Tags eingefügt. Mit Dekoratoren und Kompositionen können Sie Standardeinstellungen überschreiben ui:definieren Stichworte.

Der Unterschied zwischen ui:composition und ui:decorate ist hauptsächlich konzeptioneller Natur. Mit beiden Tags können Sie die gleichen Effekte erzielen. Facelets betrachtet sie einfach als komplementäre Konstrukte.

Lesen Sie auch:

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

1. Die Decorator-Vorlage

Decorator.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">
	<h:head>
		<title>JavaBeat Decorator Example</title>
	</h:head>
	<h:form>
		<h1><h:outputText value="JavaBeat JSF 2.2 Examples" /></h1>
		<h2><h:outputText value="JSF2 Decorate Example" /></h2>
		<h:panelGrid columns="3" border="1">
			<f:facet name="caption">
				<ui:insert name="caption"/>
			</f:facet>
			<ui:insert name="text"/>
			<ui:insert/>
		</h:panelGrid>
	</h:form>
</html>

2. Die Aussicht

index.html

<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 Decorate"/></title>
</h:head>
<h:body>
	<h2><h:outputText value="Decorate Doesn't Trim the Surrounding Tags" /></h2>
	<ui:decorate template="/template/Decorator.xhtml">
		<ui:define name="caption">
			<h:outputText value="Caption !"/>
		</ui:define>
		<ui:define name="text">
			<h:outputText value="Column1 !"/>
		</ui:define>
		<h:outputText value="I will be inserted into insert that does not provide name"/>
	</ui:decorate>
	<h2><h:outputText value="Decorate Doesn't Trim the Surrounding Tags" /></h2>
</h:body>
</html>

3. 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>

4. Die Verzeichnisstruktur

JSF 2-Dekorationsbeispiel 1

5. JSF 2 UI Decorate-Beispiel

Der folgende Schnappschuss zeigt Ihnen die Verwendung von ui:decorate in Verbindung mit ui:insert und ui:define.

JSF 2-Dekorationsbeispiel 2

Folgende Punkte können Sie beachten:

  • Im Gegensatz zum ui:composition-Tag schneidet der Dekorateur die umgebenden Tags nicht ab.
  • Wenn Sie ein ui:define ohne Namen angegeben haben, wird es in das ui:insert eingefügt, das auch keinen Namen bereitstellt.
  • Wenn Sie ein ui:define ohne Namen bereitgestellt haben und im Dekorator kein ui:insert angegeben haben, das kein Namensattribut enthält, werden Ihre Tags nicht angezeigt.

(wpdm_file id=24)

Kommentar verfassen

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

Nach oben scrollen