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"
"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">
<h:head >
<title>Tiny calculator</title>
</h:head>
<h:body>
<h1>Tiny calculator</h1>
<h:form id="calculator">
<h:outputLabel for="param1" value="Param 1:"/>
<h:inputText id="param1" value="#{calculatorBean.param1}"/>
<br/>
<h:outputLabel for="param2" value="Param 2:"/>
<h:inputText id="param2" value="#{calculatorBean.param2}"/>
<br/>
<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"/>
<br/>
<h:outputLabel for="result" value="Result:"/>
<h:outputText id="result" value="#{calculatorBean.result}"/>
</h:form>
</h:body>
</html>
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>
</head>
<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}"/>
<br/>
<label jsf:for="param2">Param 2: </label>
<input jsf:id="param2" type="text" jsf:value="#{calculatorBean.param2}"/>
<br/>
<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>
<br/>
<label>Result: #{calculatorBean.result}</label>
</form>
</body>
</html>
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.
Need to learn jsf for my project.
Actually I have to make project which does C_R_U_D operations using hibernate and ejb session beans and make U I using jsf for the following and link the UI with the ejb – Hibernate project . I am using rational Application developer (RAD) and websphere 7.0
jsf 1.2. As all this is new to me I am facing problems.
Which kind of problems?
Maybe my book would be helpfull. It is a superset of my tutorial facing different Java EE technologies, including JPA.
Greetings,
Michael