JSF 2: Creating & Using Composite Components

Facelet code can be reused by using composite components-a new feature of jsf 2.0. Also we can pass arguments to composite components.


In this example I will show you how to create a simple composite component.

Basic Component File: Outline
(resources/dirname/componentfilename.xhtml)

<?xml version='1.0' encoding='UTF-8' ?>
<!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:cc="http://java.sun.com/jsf/composite">

    <!-- INTERFACE -->
    <cc:interface>

    </cc:interface>

    <!-- IMPLEMENTATION -->
    <cc:implementation>

    </cc:implementation>
</html>

-Using composite namespace in component file

<html … 
       xmlns:cc="http://java.sun.com/jsf/composite">

– Define available attributes inside cc:interface
– Build output inside cc:implementation

Creating Components with Attributes

cc:interface defines attributes

<cc:interface>
<cc:attribute name="attributeName"/>
</cc:interface>

cc:implementation uses attributes with cc.attrs

<cc:implementation>
…#{cc.attrs.attributeName}…
</cc:implementation>

Using from .xhtml page

<dirname:componentfilename attributeName="…"/>

About cc.attrs

“cc” is predefined variable
– Stands for “composite component”
– Refers to top-level component in component file, of type UINamingContainer
Main property is “attrs”
– This is a specially defined attribute that contains a Map of the attributes used to call the component

Using Component File: Outline(web/filename.xhtml)

<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://java.sun.com/jsf/html"
      xmlns:dirname="http://java.sun.com/jsf/composite/dirname">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
          <dirname:componentfilename/>
    </h:body>
</html>

Using component namespace in facelets page

<html …
xmlns:dirname="http://java.sun.com/jsf/composite/dirname">

Using the component in facelets page

 <dirname:componentfilename/> 

Creating Our Example:

I will generate a list using ui:repeat in cc:implementation.

Project Structure:

jsf_cc_directory

resources/javaknowledge/mycomponent.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!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:cc="http://java.sun.com/jsf/composite"
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <!-- INTERFACE -->
    <cc:interface>
        <cc:attribute name="value" required="true"/>
        <cc:attribute name="styleClass" default="italic"/>
    </cc:interface>

    <!-- IMPLEMENTATION -->
    <cc:implementation>
        <ul class="#{cc.attrs.styleClass}">
            <ui:repeat var="listItem" value="#{cc.attrs.value}">
                <li>#{listItem}</li>
            </ui:repeat>
        </ul>
    </cc:implementation>
</html>

index.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://java.sun.com/jsf/html"
      xmlns:javaknowledge="http://java.sun.com/jsf/composite/javaknowledge">
    <h:head>
        <title>Facelet Title</title>
        <h:outputStylesheet name="default.css" library="css"/>
    </h:head>
    <h:body>
        <h2>Java Knowledge's Developer</h2>
        <ul>
            <li>Level: #{person.level}</li>
            <li>First name: #{person.firstName}</li>
            <li>Last name: #{person.lastName}</li>
            <li>Languages: <javaknowledge:mycomponent value="#{person.languages}"
                                       styleClass="blue"/></li>
        </ul>
    </h:body>
</html>

Screenshot:

jsf_cc_example

 

admin

Hello! I am Md. Abdul Bari; founder and admin of javaknowledge; currently providing training as a J2EE faculty in The Computers Ltd. Dhaka, Bangladesh under an IT Scholarship project provided by IDB-BISEW. I am a self learner and passionate about training and writing. I am always trying my best to share my knowledge through my blog.

More Posts - Website

Follow Me:
TwitterFacebookGoogle Plus

4,345` Total Views

Leave a Reply

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


eight − = 4