• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • 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)
  • 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)

JSF 2 Composite Component Example

April 1, 2014 //  by Amr Mohammed//  Leave a Comment

Unlike action-based frameworks, such as Struts or Ruby on Rails, jsf is a component-based, which means you can implement components that you or others can reuse. Before JSF 2.0, the using of components was very hard for mainly two reasons:

  • The components were difficult to implement, because of the need to write much more java code and specify XML configuration.
  • JSF 1.0 made no provision for easily composing new components from existing one. because of that, you need to implement the components from scratch every time that you want a component regardless of being your component was made from a set of already defined ones.

JSF 2.0 addresses both of those drawbacks by making it easier to implement custom components in java code, and by providing a new facility for composing new components from existing ones. JSF2.0 refers to those components that you’ve implemented with the composite library as composite components.

Composing a new component is very easy, cause no need for writing a java code or adding an XML. A simple XHTML file that defines the components will suffice for many composite component scenario.

Also Read:

  • JSF 2 Tutorials
  • JSF Tutorials
  • Introduction to JSF

Composing a new component inside JSF 2.0 requires covering it’s interface and implementation; the interface of composite component specifies the attributes that used by the developer to configure it, whereas the component implementation is simply its markup.

1. Tutorial Link Component

tutorialLink.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"
xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
<composite:attribute name="target" required="true"/>
<composite:attribute name="desc" required="true"/>
</composite:interface>
<composite:implementation>
<h:outputLink value="#{cc.attrs.target}">
<h:outputText value="#{cc.attrs.desc}"/>
</h:outputLink>
</composite:implementation>
</html>
[/code]

2. The Image Action Component

imageAction.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"
xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
<composite:attribute name="image"/>
<composite:attribute name="label"/>
<composite:attribute name="action" method-signature="java.lang.String action()"/>
</composite:interface>
<composite:implementation>
<h:commandButton image="#{cc.attrs.image}" action="#{cc.attrs.action}"/>
</composite:implementation>
</html>
[/code]

3. The Deployment Descriptor

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>
<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]

4. The Views

index.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"
xmlns:javabeat="http://java.sun.com/jsf/composite/javabeat">
<h:form>
<h1>JavaBeat JSF 2.2 Examples</h1>
<h2>JSF2 Simple Composite Example</h2>
<h3> This Sample Example Shows Two Different Composite Component</h3>
<h3> The First Composite Component Is Tutorial Link</h3>
<h3> The Second Composite Component Is Image Action</h3>
<javabeat:tutorialLink target="JSFTutorial.xhtml" desc="JSF Tutorial"/>
#{‘ ‘}
<h3> The Above Action Should Navigate Into JSF Tutorial Through TutorialLink Composite Component</h3>
<br/>
<javabeat:tutorialLink target="JPATutorial.xhtml" desc="JPA Tutorial"/>
#{‘ ‘}
<h3> The Above Action Should Navigate Into JPA Tutorial Through TutorialLink Composite Component</h3>
<br/>
<javabeat:imageAction image="#{resource[‘images:JSF-Thumbnail.png’]}"
action="#{indexBean.action}" label="Go To JPA Tutorial"/>
#{‘ ‘}
<h3> The Above Action Should Navigate Into JPA Tutorial Through ImageAction Composite Component</h3>
</h:form>
</html>
[/code]

JPATutorial.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 Simple Composite Example</h2>
<h:outputText value="JPA Tutorial View"></h:outputText>
</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 Simple Composite Example</h2>
<h:outputText value="JPA Tutorial View"></h:outputText>
</html>
[/code]

5. Managed Bean

IndexBean.java

[code lang=”xml”] package net.javabeat.jsf;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class IndexBean {
public String action(){
return "JPATutorial";
}
}
[/code]

6. JSF 2 Composite Component Demo

The below demonstration will show you how can create a composite component and make available for the pages author.

JSF 2 Composite Component

  • The TutorialLink component does use two type of jsf components (outputLink & outputText).
  • The ImageAction Link component does use one type of the jsf components (commandButton).
  • In the TutorialLink; the target and desc attributes realize the concept of valueExpression.
  • In the ImageAction; the image, label atrributes realize the concept of valueExpression.
  • In the ImageAction; the action atrribute realizes the concept of MethodExpression.
  • All of the listed links will be used for navigating the application. So the JPATutorial link will guide you for seeing the JPATutorial.xhtml and JSFTutorial link will do the samething.
  • The action listed will invoke the action method that defined in the IndexBean and it in turn will return a token that will be used by the navigation handler for navigating the JPATutorial view.
[wpdm_file id=28]

Category: JSFTag: JSF 2

About Amr Mohammed

Previous Post: « JSF 2 JavaScript Namespaces Example
Next Post: JSF 2 InputText with AJAX Example »

Reader Interactions

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.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

np.zeros

A Complete Guide To NumPy Functions in Python For Beginners

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact