JSF 2.2: Composite components in taglibs

JSF 2.0 introduced composite components and a simple but limited way to include them into custom tag libraries. In my fourth post of the series on JSF 2.2 features I will show a new and more flexible way to add tags for composite components to custom taglibs.

In my post building a custom component library I already showed how to build a custom tag library with classic and composite components. For this post, I simply created a taglib config with a namespace and the element composite-library-name containing the composite component resource library folder name. The tag lib config looked like this:

<facelet-taglib version="2.0">

One disadvantage of using composite-library-name is, that it only supports the integration of exactly one resource library. Additionally, the tag names are determined from the names of the composite component files. There is no way to specify a custom name.

JSF 2.2 allows to declare tags for specific composite components in tag libraries. As the composite component (and its resource library) is specified per tag, the tag library is no longer restricted to composite components coming from one library. In the taglib.xml file, a composite component tag is declared inside a tag element with the tag name in tag-name and the resource ID of the composite component (including library and name) in component/resource-id.

The following listing shows a taglib with tags for two composite components: collapsiblePanel.xhtml (library jsflive) and panelBox.xhtml (library test). As you can see, the tag name and the name of the .xhtml file can be different.

<facelet-taglib version="2.2"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facelettaglibrary_2_2.xsd">

In the listing you probably noticed, that JSF 2.2 introduces a new version, a new namespace and a new schema location for taglib config files.

The following listing shows an example view using the taglib from above:

<html xmlns="http://www.w3.org/1999/xhtml"
  <title>JSFlive JSF 2.2 - Example 04</title>
  <h:form id="form">
    <jl:collapsible id="panel">
      <f:facet name="header">Header</f:facet>
      <h:outputText value="Just some text."/>
      <f:facet name="header">Info</f:facet>
      Info in a box tag.

The source code for the JSF 2.2 series examples can be found in the JSFlive Github repository jsf22-examples (module jsf22-composite-component-tags).

Further official details about JSF 2.2 can be found in the JSR 344: JavaServer Faces 2.2.


7 responses to “JSF 2.2: Composite components in taglibs

  1. Pingback: Building a custom component library | JSFlive: Michael Kurz's JSF Weblog

  2. Francisco Huezo

    I’ve learnt a lot reading your blog, thanks.

    But, I have a trouble trying this one. I always get
    The component library http://jsflive.at/taglib does not contain component collapsible warning message on development time

    Any sugestion about that wrong?

    BTW. I ‘m working with gf4, netbeans 7.31 and my maven projecte webapp-javaee7

  3. Francisco Huezo

    thank for your time.

    The example works. .. but when I try to add the library to another project don’t work at all.

    • Do you use JSF 2.2 in the other project (only works with 2.2)? Or maybe some path is wrong. The resource library MUST be in /resources in the webapp root folder for JSF to find it.

  4. Hey Michael, this is an awesome post and exactly what I’ve been looking for. However, have you gotten this to work with “hot deploy”? One of the things I would like to do is to be able to tweak the component or css and not have to build/redeploy the projects. Any thoughts on how to accomplish this?

    • You would have to start Jetty in debug mode – but I have never configured it. I personally start my applications on Tomcat in debug mode via IntelliJ. Then hot deployment works like a charm.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s