Beispiel für benutzerdefinierte JSF 2-Tags

Sie haben bereits gesehen, wie Sie Elemente der Benutzeroberfläche anordnen Vorlagen. Darüber hinaus können Sie mit Facelets benutzerdefinierte Tags definieren. Ein benutzerdefiniertes Tag sieht aus wie ein normales JSF-Tag, verwendet jedoch den Facelets-Kompositionsmechanismus, um Inhalte in Ihre Seite einzufügen.

Die Implementierung benutzerdefinierter Facelets-Tags mit jsf2.0 erfolgt in zwei Schritten:

  • Implementieren Sie das benutzerdefinierte Tag (oder die Komponente) in einer XHTML-Datei.
  • Deklarieren Sie das benutzerdefinierte Tag in einem Tag-Bibliotheksdeskriptor.

Die Implementierung benutzerdefinierter Facelets-Tags mit jsf2.0 ist eine einfache Angelegenheit und wird dringend empfohlen, um sich wiederholende Markups auszuschließen. Auch wenn benutzerdefinierte Facelets-Tags nicht so leistungsstark sind wie vollwertige JSF-Komponenten (wird später besprochen). Insbesondere können Sie keine Funktionen wie Validatoren oder Listener an benutzerdefinierte Facelets-Tags anhängen. Beispielsweise können wir keinen Aktions-Listener hinzufügen javabeat:tutorial Etikett. Jsf2.0 begegnet diesem Problem mit einem fortschrittlicheren Komponentenmechanismus, den sogenannten Verbundkomponenten. Verbundkomponenten werden in einem separaten Beitrag behandelt.

Lesen Sie auch:

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

1. Das benutzerdefinierte Tag

Tutorial.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">
<ui:composition>
	<h:outputLink value="#{tutorialNavigator.navigate(tutorialId)}">
		<h:outputText value="#{desc}"/>
	</h:outputLink>
</ui:composition>
</html>

2. Der Deskriptor des benutzerdefinierten Tags

javabeat.jsf.taglib.xml

<?xml version="1.0" encoding="UTF-8"?>
<facelet-taglib>
<namespace>https://javabeat.net/facelets</namespace>
<tag>
 <tag-name>tutorial</tag-name>
 <source>tags/javabeat/tutorial.xhtml</source>
</tag>
</facelet-taglib>

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>
	<context-param>
		<param-name>facelets.LIBRARIES</param-name>
		<param-value>/WEB-INF/javabeat.jsf.taglib.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>
  • Achten Sie auf die Verwendung eines neuen Kontextparameters, der die Verwendung der neu entwickelten benutzerdefinierten Tags ermöglicht. facelets.BIBLIOTHEKS Kontextparameter, der für diese wichtige Aktivierung verwendet wird.

4. Die Ansichten

JPATutorial.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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>JavaBeat JSF 2.2 Examples</h1>
	<h2>JSF2 Custom Tags Example</h2>
	JPA Tutorial has been navigated through Custom Tag
</html>

JSFTutorial.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">
	<h1>JavaBeat JSF 2.2 Examples</h1>
	<h2>JSF2 Custom Tags Example</h2>
	JSF Tutorial has been navigated through Custom Tag
</html>

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"
	xmlns:javabeat="https://javabeat.net/facelets">
<h:head>
	<title><h:outputText value="JavaBeat UI Param Example" /></title>
</h:head>
<h:body>
	<h1>JavaBeat JSF 2.2 Examples</h1>
	<h2>JSF2 Custom Tags Example</h2>
	<javabeat:tutorial tutorialId="jpa" desc="JPA Tutorial"/>
	#{' '}
	<javabeat:tutorial tutorialId="jsf" desc="JSF Tutorial"/>
</h:body>
</html>

5. Verwaltete Bohne

Die Verwendung einer benutzerdefinierten Komponente erfordert nicht die Verwendung verwalteter Beans. Es bestehen zwar Einschränkungen bei der Verwendung benutzerdefinierter Tags, dies bedeutet jedoch nicht, dass die verwalteten Beans nicht verwendet werden könnten.
TutorialNavigator.java

package net.javabeat.corejsf;

import java.util.HashMap;
import java.util.Map;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class TutorialNavigator {
	public static final Map<String,String> pages = new HashMap<String,String>();

	public TutorialNavigator() {
		pages.put("jpa", "JPATutorial.xhtml");
		pages.put("jsf", "JSFTutorial.xhtml");
	}
	public String navigate(String tutorial){
		return pages.get(tutorial) != null ? pages.get(tutorial) : "";
	}
}

6. JSF 2 Custom Tag Demo

Die folgenden Schnappschüsse zeigen Ihnen eine vollständige Demonstration der Verwendung eines benutzerdefinierten Tags zum Erstellen von Links, die Ihnen beim Navigieren zwischen verschiedenen Tutorials helfen können.

Beispiel für ein benutzerdefiniertes JSF 2-Tag

Beispiel 2 für ein benutzerdefiniertes JSF 2-Tag

Beispiel 3 für ein benutzerdefiniertes JSF 2-Tag

Eine verbleibende Anmerkung muss noch erwähnt werden, nämlich die Möglichkeit, eine ui:component als alternative Möglichkeit zur Erstellung eines benutzerdefinierten Tags zu verwenden. Verwendung von ui:component Das Tag sorgt dafür, dass die untergeordneten Elemente in einer JSF-Komponentenansicht platziert werden, sodass das erstellte benutzerdefinierte Tag verwendet werden kann Bindung & gerendert Attribute, damit die Komponente einer Bean-Eigenschaft zugeordnet werden kann und bedingt sichtbar ist.

7. UI-Komponente

Tutorial.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">
<ui:component binding="#{tutorialNavigator.component}" rendered="#{tutorialNavigator.applicable}">
	<h:outputLink value="#{tutorialNavigator.navigate(tutorialId)}">
		<h:outputText value="#{desc}"/>
	</h:outputLink>
</ui:component>
</html>

(wpdm_file id=25)

Kommentar verfassen

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

Nach oben scrollen