Scene change

The tiny calculator is now functional. After entering the two parameters ans clicking on one of the buttons for the basic arthimetics, you’ll get the result just below the buttons. This is well designed since the usuer usually wants to stay on this site and continues calculating. On the other side, lots of apps exists with quite a couple of pages. For example, think about a booking system or a shop. Finishing a transaction you’ll usually get es confirmation page. I like to demonstrate you something similar: The result od the addition will be presented on a different page. A button “back” leads you back to the calculator’s main page. This is not a very user friendly design, but it’s just to show you a first approach of page nagvigation.

First, you have to creat a new JSF page. You may right click the content tree and choose   “New, Other” or you navigate by the main menu “File, New File”. Alternatively you’ll simply use the key short cut {Strg}+{n}.


Within the domain Web (or JavaServer Faces) please choose JSF Page and click onto [Next >].



In the dialogue shown above, change the file name to “result” and click onto [Finish]. NetBeans now adds a xhtml file to the project and opens it in the editor.

Ok, the result page should get a similar look and feel. Since it is a different page, the whole culculation has to bee displayed. Here is the source code:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns=""
    <h:head >
        <title>Tiny calculator</title>
        <h:outputStylesheet library="css" name="CalculatorStyle.css"/>
        <h:graphicImage alt="BasicArithmetics" library="images" name="BasicArithmetics.png"/>
        <h1>Tiny calculator</h1>
        <h:form id="calculator">
            <h:outputLabel styleClass="label" for="result" value="Result"/>
            <h:outputText id="result"
                          value="#{calculatorBean.param1} + #{calculatorBean.param2} = #{calculatorBean.result}"/>
            <h:commandButton value="Back" action="index"/>

For the output of the result a h:outputText is used. In this nice example you’ll find as value some expressions of the Expression Lanuage (EL) mixed with literal text. Such expressions may not only be used as value, but everywhere on a page. Be shure to result meaningfull values.

The commandButton is labeled “Back” with an action “index”. This is the name of the main page. This simple action is all you need to call the calculator pageindex.xhtml.

Now just one thing is missing. After clicking onto add, the result page has to be invoked. This is quite easy. You may remember in part “basic arithmetics” the result of the calculation method? It had been an empty string. Allyou have to do is to change this to”result”.

public String add(){
    _result = Integer.toString(_param1 + _param2);
    return "result";

Like for the button, this is all we need to navigate to a different page.

If you hve to maintain a JSF 1.2 (or prior) app, you have to do something more. Additionally you’ll have to configure the navigation rules within a special XML file.

Now deploy and launch our TinyCalculator, input two numbers an click onto add. JSF shows you the result an the new page.


Just a click onto [Back] and you’ll get back to the calculator’s main page.

With JSF, there are some more options for site navigation. You’ll see them later whilst developping a bigger application, after we took a look inside processing JSF pages. Before, just one more practical part:

It had been a requirement to keep the look and feel the same. And it would be wonderfull if we need to code the common parts of our pages only once. That is exactly what you’re able to do with templates. This will be subject of the next part.


To web development content.