• Go Fullstack: Webanwendungen mit Java EE 6 bauen
• JSF und JPA effizient kombinieren

The examples for the sessions can be found on the JSFlive github. For JSF und JPA effizient kombinieren the location is: MyMail OWB and for Go Fullstack: Webanwendungen mit Java EE 6 bauen it is: MyGourmet EE.

Currently, every click on the button results in a complete page refresh. The goal is to collapse and expand the panel with ajax. The intended behavior is that a click on the the button just updates the button itself (we need to change from plus to minus and vice versa) and the content panel.

The first step is to prepare the content panel. So far this panel was a simple h:panelGroup component with a rendered attribute. This approach won’t work with ajax. Components that should be updated with ajax must always be rendered. Otherwise the component has no representation in the DOM tree and cannot be updated.

The simplest solution for this is to place a second h:panelGroup component around the existing one. The following listing shows the updated content panel section.

<h:panelGroup id="panel-content" layout="block">
  <h:panelGroup rendered="#{!cc.collapsed}">
    <cc:insertChildren/>
  </h:panelGroup>
</h:panelGroup>

The second step is to add ajax behavior to the h:commandButton component. This is done by adding f:ajax as child element to the button. The attribute render takes a list of component IDs that should be rendered and updated as a result of the ajax request. In our case the attribute contains two IDs: @this stands for the component triggering the request (the button) and panel-content for the content panel. The following listing shows the code (without images and style):

<h:commandButton id="toggle" actionListener="#{cc.toggle}">
  <f:ajax render="@this panel-content"/>
</h:commandButton>

The next listing shows the f:ajax tag with additional attributes. event specifies the event triggering the ajax request (action mapps to onclick for command components). execute takes a list of IDs for which the lifecycle is executed on the server (@this stands for the component triggering the request again). As the values you see for those attributes in the listing are the default values we don’t have to set them explicitly.

<h:commandButton id="toggle" actionListener="#{cc.toggle}">
  <f:ajax event="action" execute="@this"
      render="@this panel-content"/>
</h:commandButton>

The following listing shows the complete composite component collapsiblePanel with ajax behavior.

<cc:interface componentType="at.jsflive.CollapsiblePanel">
  <cc:attribute name="collapsed"/>
  <cc:actionSource name="toggle"/>
  <cc:facet name="header"/>
</cc:interface>
<cc:implementation>
  <h:panelGroup layout="block" styleClass="collapsiblePanel-header">
    <h:commandButton id="toggle" actionListener="#{cc.toggle}"
        styleClass="collapsiblePanel-img"
        image="#{resource[cc.collapsed 
            ? 'jsflive:plus.png' : 'jsflive:minus.png']}">
      <f:ajax render="@this panel-content"/>
    </h:commandButton>
    <cc:renderFacet name="header"/>
  </h:panelGroup>
  <h:panelGroup id="panel-content" layout="block">
    <h:panelGroup rendered="#{!cc.collapsed}">
      <cc:insertChildren/>
    </h:panelGroup>
  </h:panelGroup>
  <h:outputStylesheet library="jsflive" name="components.css"/>
</cc:implementation>

That’s it! The rest of the example was not changed for the ajax integration.

Tools like Firebug or the Chrome Developer Tools allow to check the type and contents of requests and responses. This way it is easy to determine that JSF now really sends ajax requests. You could further check what happens if the f:ajax tag is removed again (a classic JSF request will be sent).

For simplicity’s sake the source code for the presented example is based on collapsiblePanel02 and not collapsiblePanel03. It can be found in the Github repository collapsible04.

The example can be found on the JSFlive github: JSF 2 Ajax Herbstcampus 2011@Github.

The example can be found on the JSFlive github: MyGourmet CONFESS 2011@Github.

The example can be found on the JSFlive github: MyMail JAX 2011@Github.

I updated all previous posts with the related link.

Basically, all we have to do is put the artefacts of our component in a jar file. In our case this would be the folder of the resource library jsflive and the component class CollapsiblePanel.

First, we put class CollapsiblePanel into the jar file. As the component is registered with @FacesComponent no xml configuration is necessary. However, we still need an empty faces-config.xml in the jar. JSF only scans for annotations in jar files having a faces-config.xml. This file must be placed in the META-INF folder with the name faces-config.xml or a name ending with .faces-config.xml. The following listing shows the empty config file.

<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
    version="2.0">
</faces-config>

Second, we move the resource library jsflive into the folder /META-INF/resources in the jar file. With this step finished, the composite component can already be used. Put the jar in the classpath of your application and declare a prefix for namespace http://java.sun.com/jsf/composite/jsflive. The following listing shows an example view.

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:jl="http://java.sun.com/jsf/composite/jsflive">
<h:head>
  <title>JSFlive test page</title>
</h:head>
<h:body>
  <h:form id="form">
    <jl:collapsiblePanel id="panel">
      <f:facet name="header">Header</f:facet>
      <h:outputText value="Just some text."/>
    </jl:collapsiblePanel>
  </h:form>
</h:body>
</html>

As I talked about a custom component library in the beginning, our jar might one day be extended with classic components, converters or validators. For this case we need a taglib config file to define tags for those artefacts. With JSF 2 it is possible to import a composite component resource library into a taglib. All composite components in the library are then available under the namespace of the taglib.

For our example we simply create a taglib config with a namespace and the element composite-library-name with the name of our resource library folder. The following listing shows the complete taglib configuration file.

<facelet-taglib version="2.0" xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facelettaglibrary_2_0.xsd">
  <namespace>http://jsflive.at/taglib</namespace>
  <composite-library-name>jsflive</composite-library-name>
</facelet-taglib>

JSF automatically loads taglib config files from jar files in the classpath on startup. All we have to do is give the file a name ending with .taglib.xml and place it in the META-INF folder.

With the above taglib config file we can change the namespace in the above example view to http://jsflive.at/taglib.

The following figure shows the structure of the jar file for our component library.

Now that the jar file is finished you probably want to use the component library in your applications. All you have to do is put the jar file in the classpath and declare a prefix for the namespace.

The source code for the presented example can be found in the Github repository collapsible03.