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

 

Web Development with Java and JSF

A Journey through Java EE Technologies whilst developing Web Applications with JavaServer Faces.

Get your copy of my book here

This entry was posted in NetBeans, Programming, Tutorial, Web development and tagged , , , . Bookmark the permalink.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>