JSF 2 UI Fragment Example

Before JSF 2.0, you’ve used an <f:verbatim/> Tag for rendering a set of JSF components conditionally. The <f:verbatim/> tag creates an output component as a child of the component associated with the enclosing tag. An output component renders the output contained in the body of this tag, such as HTML markup.

The <f:verbatim/> is more useful with JavaServer Pages (JSP) rather than with Facelets. This is because Facelets handles HTML mixed with JSF markup in a different way than JSP. For this reason Facelets provides a new tag called <ui:fragment/>. The UI Fragment tag inserts a new UIComponent instance into the JSF component Tree. Any components or content fragments outside this tag will be included by the Facelets view handler. Any components or contents fragment within this tag will be added to the component tree as children of this component instance. It’s applicable of using UI Fragment tag inside a <ui:component/> and <ui:composition/>.

The proposal demo that you would have seen at this tutorial will enforce the concept using <ui:component/> in conjunction with <ui:fragment/> for displaying the suggested component. The <ui:component/> tag have the ability to provide a rendered attribute for displaying the component conditionally and the using of <ui:fragment/> is acceptable way of achieving that.

Also Read:

1. The Custom Tag (Component)

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

2. The Descriptor of Custom Tag (Component)

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

3. The Deployment Descriptor (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>

4. The Views

JPATutorial.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 UI Fragment Example</h2>
	You've Navigated Here ! You've The Privilege
</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 UI Fragment Example</h2>
	You've Navigated Here ! You've The Privilege
</html>

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:c="http://java.sun.com/jsp/jstl/core"
	xmlns:javabeat="http://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 UI Fragment Example</h2>
	<javabeat:tutorial tutorialId="jpa" desc="JPA Tutorial"/>
	#{' '}
	<javabeat:tutorial tutorialId="jsf" desc="JSF Tutorial"/>
</h:body>
</html>

5. Managed Bean

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 static final Map<String,Boolean> authorities = new HashMap<String, Boolean>();

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

	public boolean authorized(String tutorial){
		return authorities.get(tutorial) != null ? authorities.get(tutorial) : false;
	}
}

6. JSF 2 UI Fragment Demo

The below snapshots show you the using of ui:fragment for displaying a components conditionally in conjunction of using the ui:component for defining a custom Tag.

JSF 2 UI Fragment Example1

  • The JavaServer Faces (jsf) tutorial link isn’t shown, cause the <ui:fragment/> inside Tutorial component (Custom Tag) evaluated to false. In contrast the <ui:fragment/> for the JPA Tutorial evaluated to true.

JSF 2 UI Fragment Example 2

  • Even you have the ability to use the rendered attribute that provided by the <ui:component/>, but it’s also you have the ability to use the ui:fragment for achieving the same desired result.
  • Unlike the creating of custom tag using the ui:composition, the ui:component provides three additional attributes; binding, rendered & id.

Comments

comments

About Amr Mohammed

Speak Your Mind

*