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.

 

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>