JavaBeat

JSF 2 Composite Component Example

by 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:

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]

About Amr Mohammed

Leave a Reply

Your email address will not be published.

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