Tutorial web development (with JSF) XI: Brave New World

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.


2 thoughts on “Tutorial web development (with JSF) XI: Brave New World”

  1. 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.

    1. Which kind of problems?
      Maybe my book would be helpfull. It is a superset of my tutorial facing different Java EE technologies, including JPA.



Leave a Reply

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