JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

JSF 2 Custom Tags Example

March 30, 2014 by Amr Mohammed Leave a Comment

You’ve already seen how to lay out user interface elements with templates. In addition, facelets allows you to define a custom tags. A custom tag looks like a regular JSF tag, but it uses the facelets composition mechanism to insert content into your page.

Implementing a custom Facelets tags with jsf2.0 is a two step:

  • Implement the custom tag (or component) in an XHTML file.
  • Declare the custom tag in a tag library descriptor.

Implementing custom facelets tags with jsf2.0 is a simple matter, and it is highly recommended for factoring out repetitive markup. Even that custom facelets tags aren’t as powerful as a full-fledged JSF components (It will be discussed later). In particular, you cannot attach functionality, such as validators or listeners, to facelets custom tag. As an example we cannot add an action listener to the javabeat:tutorial tag. Jsf2.0 addresses this concern with a more advanced component mechanism, called composite components. Composite components will be discussed in a separate post.

Also Read:

  • JSF 2 Tutorials
  • JSF Tutorials
  • Introduction to JSF

1. The Custom Tag

tutorial.xhtml

[code lang=”xml”]
<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>
[/code]

2. The Descriptor of Custom Tag

javabeat.jsf.taglib.xml

[code lang=”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>
[/code]

3. The Deployment Descriptor (web.xml)

web.xml

[code lang=”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>
[/code]

  • Pay attention for the using of a new context parameter for enabling the use of the new developed custom tags, facelets.LIBRARIES context parameter used for such that major enabling.

4. The Views

JPATutorial.xhtml

[code lang=”xml”]
<!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>
[/code]

JSFTutorial.xhtml

[code lang=”xml”]
<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>
[/code]

index.html

[code lang=”xml”]
<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>
[/code]

5. Managed Bean

The using of custom component doesn’t require using of managed beans, although the limitations of using custom tags is exist, but it doesn’t mean that the managed beans couldn’t be used.
TutorialNavigator.java

[code lang=”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) : "";
}
}
[/code]

6. JSF 2 Custom Tag Demo

The below snapshots will show you complete demonstration of using a custom tag for making a links that can help navigating between different tutorials.

JSF 2 Custom Tag Example

JSF 2 Custom Tag Example 2

JSF 2 Custom Tag Example 3

One remaining note must be mentioned, in that the possibility of using a ui:component as an alternative way of making a custom Tag. Using of ui:component tag will make the child elements to be placed inside a jsf component view, so the created custom tag is applicable to use binding & rendered attributes in order the component can be associated into a bean property and it can be seen conditionally.

7. UI Component

tutorial.xhtml

[code lang=”xml”]
<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>
[/code]

[wpdm_file id=25]

Filed Under: JSF Tagged With: JSF 2

About Amr Mohammed

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved