Szenenwechsel

Der einfache Rechner funktioniert soweit ganz gut. Nach Eingabe der beiden Parameter und Betätigung einer der Schaltflächen für die Grundrechenarten wird das Resultat unmittelbar darunter ausgegeben. Dies ist gut so, soll der Anwender doch auf der Seite bleiben und weiter rechnen. Es gibt aber durchaus Anwendungen, die aus einer Vielzahl von Seiten bestehen. Denken Sie beispielsweise an ein Buchungsystem oder einen Shop. Nach Abschluß der gewünschten Transation erhalten Sie meist eine Buchungsbestätigung auf einer separaten Seite. Dies möchte ich Ihnen anhand unseres Rechners demonstrieren: Das Ergebnis der Addition wird auf einer separaten Seite angezeigt. Von dort können Sie per Knopfdruck wieder zum Rechner gelangen. Nicht unbedingt anwenderfreundlich, aber hier geht es ja darum, erste Möglichkeiten der Seitennavigation kennen zu lernen.

Fügen Sie also eine neue JSF-Seite ein. Entweder öffnen Sie dazu in der Baumansicht im Projekt TinyCalculator mittels sekundärer (oft rechter) Maustaste das Kontextmenü und wählen “New, Other” (bzw. das entsprechende landessprachliche Pendant) oder Sie nutzen das Haupmenü “File, New File”. Alternativ tut es auch die Tastenkombination {Strg}+{n}.

Hinweis: Wie Sie sicherlich schon bemerkt haben, beziehen sich die Erläuterungen auf die englischsprachige Version von NetBeans. Sofern Sie eine andere Sprachvariante nutzen, dürfte es Ihnen aber nicht schwerfallen, dies entsprechend zu übertragen.

 

 Wählen Sie nun aus dem Bereich Web (oder JavaServer Faces) die JSF Page.

Weiter geht es mit [Next >].

 Ã„ndern Sie in obigem Dialog den Dateinamen in “result” und beenden Sie den Assistenten mit [Finish]. NetBeans fügt dem Projekt eine xhtml-Datei zu und öffnet diese im Editor.

Nun, die Ergebnis-Seite soll sich im Aussehen an die Rechner-Seite anlehnen. Da es sich um eine neue Seite handelt, soll nicht nur das Ergebnis, sondern die komplette Berechnung ausgegeben werden. Hier ist der Quelltext:

<?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:outputStylesheet library="css" name="CalculatorStyle.css"/>
    </h:head>
    <h:body>
        <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}"/>
            <br/>
            <br/>
            <h:commandButton value="Back" action="index"/>
        </h:form>
    </h:body>
</html>

Zur Ausgabe des Ergebnisses wird ein h:outputText genutzt. Schön zu erkennen ist, dass Sie im value Ausdrücke der Expression Language (EL) problemlos mit literalem Text mischen können. EL-Ausdrücke können aber nicht nur im value stehen – sie sind an jeder Stelle in der Seite möglich. Wichtig ist nur, dass einem sinnvollen Wert ergeben.

Der commandButton erhält die Aufschrift “Back” und als action “index”. Diese Angabe des Seitennamens reicht bereits, die Rechner-Seite (index.xhtml) aufzurufen.

Nun fehlt noch eins: Die Ergebnis-Seite ist aufzurufen. Nichts einfacher als das. Im Teil “Grundrechenarten” habe ich Sie darauf aufmerksam gemacht, dass unsere Rechen-Methoden einen (Leer-) String zurück liefern. Geben Sie hier einfach “result” aus.

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

Ähnlich wie bei unserem Button, reicht auch hier der String aus, um zur passenden Seite zu navigieren.

Sollten Sie einmal in die Verlegenheit kommen, alte Anwendungen mit JSF 1.2 oder älter warten zu müssen, so funktioniert dies leider nicht so einfach. In diesem Fall ist zusätzlich eine Konfiguration der Navigation mittels XML-Dateien erforderlich.

Starten Sie den TinyCalculator, geben Sie zwei Zahlen ein und klicken dann auf die Addition. JSF zeigt hnen die Ergebnisseite.

 

Ein Klick auf den Zurück-Button [Back] und Sie gelangen wieder zur Rechner-Seite.

JSF bietet über das hier gezeigte hinaus weitere Navigationsmöglichkeiten. Diese werden Sie später kennen lernen, wenn es um eine größere Applikation geht, nachdem wir einen Blick “hinter die Kulissen” geworfen haben. Doch vorher noch ein praktischer Teil:

Die Ergebnis-Seite ähnelt im Aufbau der Eingabe-Seite. Das “Gesicht” unserer kleinen Applikation präsentiert sich einheitlich. Es wäre sicherlich schön, alle Elemente, die auf beiden Seiten zum Einsatz kommen, nur einmal angeben zu müssen. Und genau dies ist mittels Templates möglich. Dies wird Thema des nächsten Teils.