JSF 2.2 is on it’s way. In this lesson I want to introduce one of the new features, HTML5 friendly markup (using Pass Through Elements).

So, take a look on the tiny calculator in it’s simplest version:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="http://www.w3.org/1999/xhtml"
       <h:head >
               <title>Tiny calculator</title>
               <h1>Tiny calculator</h1>
               <h:form id="calculator">
                   <h:outputLabel for="param1" value="Param 1:"/>
                   <h:inputText id="param1" value="#{calculatorBean.param1}"/>
                   <h:outputLabel for="param2" value="Param 2:"/>
                   <h:inputText id="param2" value="#{calculatorBean.param2}"/>
                   <h:commandButton action="#{calculatorBean.add}" value="add"/>
                   <h:commandButton action="#{calculatorBean.substract}" value="substract"/>
                   <h:commandButton action="#{calculatorBean.multiply}" value="multiply"/>
                   <h:commandButton action="#{calculatorBean.divide}" value="divide"/>
                   <h:outputLabel for="result" value="Result:"/>
                   <h:outputText id="result" value="#{calculatorBean.result}"/>

In this page, a couple of tags of the jsf/html libray (prefixed by h:) are used. JSF internally uses this to build up the component tree.

In pure HTML, for a submit button, you may use

<input type="submit" value="myButton"/>

JSF 2.2 introduces a feature which is often called HTML5 friendly markup. If you take a look into the facelets tag specification, the official name is Pass Through Elements. The idea is, to use HTML tags as they are, and enrich them with JSF tags. If a tag for this library (usually jsf:) is submitted, the element has to be included into the component tree. The following example shows, how to add an action to this button.

<input type="submit" value="myButton" jsf:action="#{myBean.myAction}"/>

In fact this correlates to

<h:commandButton action="#{myBean.myAction}" value="myButton"/>

And here you see the calculator page refined:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
           xmlns:jsf="http://java.sun.com/jsf" >
       <head jsf:id="head">
               <title>Tiny calculator</title>
       <body jsf:id="body">
               <h1>Tiny calculator</h1>
               <form jsf:id="calculator">
                       <label jsf:for="param1">Param 1: </label>
                       <input jsf:id="param1" type="text" jsf:value="#{calculatorBean.param1}"/>
                       <label jsf:for="param2">Param 2: </label>
                       <input jsf:id="param2" type="text" jsf:value="#{calculatorBean.param2}"/>
                       <input type="submit" value="add" jsf:action="#{calculatorBean.add}"/>
                       <input type="submit" value="substract" jsf:action="#{calculatorBean.substract}"/>
                       <input type="submit" value="multiply" jsf:action="#{calculatorBean.multiply}"/>
                       <!-- following example shows button as an alternative -->
                       <button type="submit" jsf:action="#{calculatorBean.divide}">divide</button>
                       <label>Result: #{calculatorBean.result}</label>

The CalculatorBean remains unchanged, as it is in part III ot this tutorial [1].

This lesson had been quite short. It’s only intention is to give you a quick impression of one of the new features.

For NetBeans, there is a branch, which supports Java EE 7. I guess it will become trunk just after the release of   NetBeans 7.3

To test JSF 2.2 you my download an early build of GlassFish 4 [2].

[1] http://blog.mueller-bruehl.de/programming/tutorial-web-development-with-jsf-iii-basic-arithmetics/

[2] http://dlc.sun.com.edgesuite.net/glassfish/4.0/promoted/


To web development content.