Tutorial web development (with JSF) III: Basic arithmetics

Basic arithmetics

Ok, (hopefully) everybody knows about the basic arithmetic operations: Add, subtract, multiply and divide. To do this it needs two number,  one of the four operators and the computer spits out the result. A trivial task, you probably can solve by head. But why perform this effort? Let this do our computer so that we can use this in the browser. “Tutorial web development (with JSF) III: Basic arithmetics” weiterlesen

Tutorial Webentwicklung (mit JSF) III: Grundrechenarten

Grundrechenarten

Nun, die Grundrechenarten kennt (hoffentlich) doch jeder: Addieren, Subtrahieren, Multiplizieren und Dividieren. Dazu braucht es zwei Zahlen, die mit einem der vier Operatoren verknüpft werden und der Rechner spuckt das Ergebnis aus. Eine triviale Aufgabe, die Sie wahrscheinlich auch im Kopf oder schriftlich lösen können, aber warum die Mühe? Lassen wir dies unseren Computer erledigen und zwar so, dass wir dies im Browser nutzen können.

In diesem Teil des Tutorials lernen Sie die unter anderem serverseitige Verarbeitung mittels einer sogeannten managed Bean kennen.

Legen Sie dazu wahlweise ein neues Web-Projekt, wie unter „Die erste Webapplikation“ beschrieben an, mit dem Unterschied, dass Sie das Projekt „TinyCalulator“ nennnen oder nennen Sie das vorhandene Projekt um. Für Letzteres klicken Sie in der Projektansicht mit der sekundären (meist rechten) Maustaste auf das Projekt „JSFTutorial“ und wählen im Popupmenü „Rename…“. Es erscheint ein kleiner Dialog zum Umbennen des Projekts:

  

Wählen Sie als neuen Namen „TinyCalculator“ und markieren „Also Rename Project Folder“, um den Ordner gleichlautend umzubenennen.

Nun, was benötigen Sie für dieses Projekt? Da sind zwei Eingabefelder für die beiden Parameter, vier Buttons für die Operatoren und ein Feld für das Ergebnis. Editieren Sie dazu den Sourcecode der Seite index.xhtml

    

Die Abbildung zeigt dies im Kontext von NetBeans. Für die weitere Beschreibung verzichte ich auf solche Abbildungen. Stattdessen finden Sie jeweils den Sourcecode gelistet. So auch hier, um diesen einfach mittels copy and paste zu übernehmen (der Lerneffekt ist aber größer, wenn Sie selber editieren).

<?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>
            <h:outputLabel value="Param 1:"/>
            <h:inputText id="param1"/>
            <br/>
            <h:outputLabel value="Param 2:"/>
            <h:inputText id="param2"/>
            <br/>
            <h:commandButton value="add"/>
            <h:commandButton value="substract"/>
            <h:commandButton value="multiply"/>
            <h:commandButton value="divide"/>
            <br/>
            <h:outputLabel value="Result:"/>
            <h:outputText id="result"/>
        </h:form>
    </h:body>
</html>

Wie Sie erkennen können, gibt es neben ein paar beschreibenden Labeln die erforderlichen Komponenten (inputText, commandButton und outputText). Gerechnet wird an dieser Stelle noch nicht. Starten Sie die Applikation.

        

In den beiden Eingabefeldern können Sie Werte eingeben. Klicken Sie auf einer der Schaltflächen, so scheint nicht zu passieren. Wenn Sie jedoch genau darauf achten, werden Sie bemerken, dass die Seite neu geladen wird.

Nun schauen Sie sich einmal den Sourcecode der Seite an (hier ein bisschen „schöner“ formatiert).

<?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">
  <head>
    <title>Tiny calculator</title>
  </head>
  <body>
    <h1>Tiny calculator</h1>
    <form id="j_idt8" name="j_idt8" method="post" 
            action="/TinyCalculator/index.xhtml" 
            enctype="application/x-www-form-urlencoded">
      <input type="hidden" name="j_idt8" value="j_idt8" />
      <label>Param 1:</label>
      <input id="j_idt8:param1" type="text" name="j_idt8:param1" />
      <br />
      <label>Param 2:</label>
      <input id="j_idt8:param2" type="text" name="j_idt8:param2" />
      <br />
      <input type="submit" name="j_idt8:j_idt13" value="add" />
      <input type="submit" name="j_idt8:j_idt14" value="substract" />
      <input type="submit" name="j_idt8:j_idt15" value="multiply" />
      <input type="submit" name="j_idt8:j_idt16" value="divide" />
      <br />
      <label>Result:</label>
      <span id="j_idt8:result"></span>
      <input type="hidden" name="javax.faces.ViewState" 
            id="javax.faces.ViewState" 
            value="3061588258500397437:-7913731195929753954" 
            autocomplete="off" />
    </form>
  </body>
</html>

Hier ist bereits deutlich mehr passiert als in der ersten Applikation. Und es wird Zeit, zumindest ein paar der Ersetzungen genauer unter die Lupe zu nehmen.

Unser Quelltext

<h:head>
   <title>Tiny calculator</title>
</h:head>

erreicht den Browser als

<head>
    <title>Tiny calculator</title>
</head>

Das haben Sie bereits bei der ersten Applikation gesehen. Was passiert eigentlich, wenn Sie das Präfix „h:“ einfach auslassen? Nun, hier erst einmal nichts: Der Browser erhält zur Darstellung den gleichen HTML-Code. Später werden Sie jedoch sehen, dass es Komponenten gibt, die in den Header gehören. Und ohne den Namensraum zur Kennzeichnung als Tag, weiß JSF dann damit nichts anzufangen. Geben Sie den Präfix also einfach immer an. Er schadet nicht, und wenn Sie ihn brauchen,ist er da. Entsprechendes gilt auch für den Body.

Deutlich mehr passiert bereits bei „h:form“

<h:form> 
    [...] 
</h:form>

Im Browserquelltext wird dies regelrecht aufgebläht.

<form id="j_idt8" name="j_idt8" method="post" 
        action="/TinyCalculator/index.xhtml" 
        enctype="application/x-www-form-urlencoded">
  <input type="hidden" name="j_idt8" value="j_idt8" />
[...]
  <input type="hidden" name="javax.faces.ViewState" 
        id="javax.faces.ViewState" 
        value="3061588258500397437:-7913731195929753954" 
        autocomplete="off" />
</form>

Da ist zum einen eine id. Diese können Sie auch selber festlegen. Sie muss für die Seite eindeutig sein und dient dem serverseitigen Aufbau des Komponentenbaums. Interessant sind auch zwei versteckte Eingabefelder, die JSF nutzt, um Informationen mitzuführen. So müssen die Status der einzelnen Komponenten zwischengespeichert werden. Dies geschieht je nach Konfiguration auf dem Server oder auf dem Client. Der Wert des versteckten Eingabefeldes mit der ID „javax.faces.ViewState“ stellt einen Identifier dar, unter dem die Status serverseitig gespeichert werden. Er ändert sich bei jedem Aufruf. Bei clientseitiger Speicherung kann der Wert je nach Größe des Formulars deutlich größer ausfallen. Weitergehende Informationen finden Sie in späteren Teilen dieses Tutorials beim JSF-Lebenszyklus sowie der Konfiguration

Der Rest im Schnelldurchgang: Ein outputLabel wird in ein label übersetzt, ein inputText in input type „text“, ein commandButton in input type „submit“ sowie der outputText in ein span. In dieser Applikation. Denn je nach Kontext können einzelne Komponenten auch schon einmal anders übersetzt werden. Insofern stellen diese Tags ein Abstraktion von HTML-Elementen dar. Und jede Komponente erhält eine eindeutige ID bzw. Namen, in dem sich die Schachtelung der Komponenten widerspiegelt.

Eine Menge Stoff bisher, und die Anwendung kann noch nicht einmal rechnen. Zum Glück fällt der Quelltext bisher recht übersichtlich aus. Und vielmehr wird es auch nicht. Denn die Berechnung hat nichts in der xhtml-Seite zu suchen, schließlich erfolgt sie serverseitig. Aber wo?

Nun, dazu benötigt es eine Kaffeebohne (JavaBean). Eine JavaBean zeichnet sich dadurch aus, dass der Zugriff auf die Attribute (Objektvariablen) einem bestimmten Schema folgt, nämlich getund set, wobei Siedurch den gewünschten Methodennamen (in Anlehnung an das jeweilige Attribut ersetzen. Auch bekannt als Getter/Setter.

Legen Sie dazu eine neue Klasse vom Typ „JSF Managed Bean“ an.

                            

Geben Sie als Klassennamen „CalculatorBean“ an. Diesen Namen finden Sie weiter unten – mit kleinem Anfangsbuchstaben – als Name wieder.

        

Unter „Package“ vergeben Sie einen beliebigen Paketnamen, im Beispiel „calculator“. Eine interessante Einstellung können Sie bei „Scope“ vornehmen. Damit legen Sie fest, ob die Bean beispielsweise nur für eine Anfrage, eine Sitzung oder die gesamte Applikation gültig ist. Mehr dazu später. Belassen Sie dies hier auf „request“ und beenden Sie den Assistenten mit [Finish]. Der Assistent legt Ihnen nun die Klasse an sowie diverse Einträge in den Konfigurationsdateien, die ich später erkläre. Sollten Sie einmal eine „normale“ Java-Klasse anlegen, müssen Sie all diese Einstellungen manuell vornehmen, um sie als JSF Managed Bean nutzen zu können. Ein Lob auf den Assistenten 😉

Vervollständigen Sie den Quelltext wie folgt:

package calculator;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

/**
 *
 * @author mmueller
 */
@ManagedBean
@RequestScoped
public class CalculatorBean {
    private int _param1;
    private int _param2;
    private String _result;

    public CalculatorBean() {
    }

    // 
    public int getParam1() {
        return _param1;
    }

    public void setParam1(int param1) {
        _param1 = param1;
    }

    public int getParam2() {
        return _param2;
    }

    public void setParam2(int param2) {
        _param2 = param2;
    }

    public String getResult() {
        return _result;
    }
    // 

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

    public String substract(){
        _result = Integer.toString(_param1 - _param2);
        return "";
    }

    public String multiply(){
        _result = Integer.toString(_param1 * _param2);
        return "";
    }

    public String divide(){
        _result = _param2 == 0 ? "n/a" : Double.toString(_param1 / (double)_param2);
        return "";
    }

}

Zwei Attribute entsprechen unseren Parametern und das dritte ist das Ergebnis. Das Ergebnis wird in vier Methoden, die wie die Grundrechenarten heißen berechnet und im Attribut abgelegt. Das sieht ungewöhnlich aus, geben Sie doch normalerweise das Ergebnis als Rückgabewert der Methode (Funktion) aus. Hier liefern die Methoden stattdessen einen Leerstring (es darf auch null sein). Weiterhin fallen zwei Annotationen auf, die Ihre Eingaben im Assistenten wiederspiegeln. Wozu das Ganze gut ist, sehen Sie in Kürze. Wenn Sie möchten, schreiben Sie jetzt einen Unit-Test, um die Funktion der Bean zu überprüfen.

Wenden wir uns wieder der Webseite zu. Ergänzen Sie den Quelltext entsprechend dem folgenden Listing.

<?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>

Zum einen erhalten Formular und Texte eine ID und die Labels werden daran gebunden. Diese Ids ersetzen die automatisch generierten und sind für den Entwickler deutlich besser zu lesen.

Zum anderen werden die Texte an die Getter/Setter gebunden. Nun, die Wertebindung kann in beide Richtungen erfolgen, und so wird einfach nur der Methodenname ohne „get“ oder „set“ angegeben. Dies wird intern automatisch ergänzt (genauer gesagt kommt hier Reflection zum Einsatz). Vielleicht kennen Sie die Properties aus C#? Ohne get/set sieht dies den Properties doch sehr ähnlich. Und wenn Sie sich Microsofts CLR ansehen, so werden Sie feststellen, dass die Properties intern mittels Getter und Setter realisiert sind. Oh wundersame Welt der Sprachen…

Und die Buttons werden an die Rechenmethoden gebunden. Sie sind nur der Auslöser, um die entsprechenden Methoden aufzurufen. Das Ergebnis wiederum ist als Wert (getter!) an den outputText gebunden. Zur Bindung dienen die Ausdrücke in der Form „#{…}“. Diese sind in der sogenannten Expression Language verfasst. Davon später mehr. Hier das Resultat der bisherigen Arbeit (Starten Sie die App mit F6).  

        

Das sieht wie gehabt aus. Wenn Sie nun aber Werte eingeben und einen der Buttons betätigen, so wird tatsächlich gerechnet.

Und wie von Zauberhand werden unpassende Eingaben kommentiert und abgewiesen.

        

Doch das ist eine andere Geschichte und davon erzähle ich später…

Tutorial web development (with JSF) II

A first web application

Next, we will create a very basic web application. This will be done only so far as generated by NetBeans. No more function is added. Even then, this introduction shows some of the basics.

You may build up this app on your pc, or you simply follow this tutorial by its screenshots, depending on your preferred way to learn new technologies.

After starting NetBeans, choose a new project (menu file, new project or simply be pressing {Ctrl}+{Shift}+{n}). The dialog shown below appears. Please choose „Java Web“ and then“Web Application“. The screens may look a bit different, depending on version, language and operating system.

Now click onto [Next]. In the following screen, please choose an appropriate project name. Here I used „JSFTutorial“. If you like to store your project in a different directory than default, change the „Project Location“. Then click [Next].

If you use NetBeans starting with version 6.9 in dstandard configuration, it offers you GlassFish Sever 3.0 oder newer during the next dialogue. If you use a prior version of NetBeans, please update [As of this translation, NB 7.1.2 is available]. All Java Enterprise examples in this tutorial are build upon JEE6. With the rise  of JEE7, which is expected in late 2012, this may change.

This dialog offers you the opportunity to select context and dependency injection (CDI). This enables „injecting“ objects into your application. This might be done by a simple annotation. If you use CDI, this affects the usage of beans (named beans instead of managed beans) too. And the bean’s scope differs a bit. For the moment, we don’t use this great feature, but we will do so for bigger projects.

With Context Path you configure the relative path to invoke your app within the browser. It defaults to the project name and you can use it as is. If needed, this path may be changed later on.

As usual, continue with [Next].

In this dialog please choose the JavaServer Faces as your framework. Below, a tab control appears for a basic JSF configuration. If your server is JEE6 compliant, like GlassFish, it has JSF libraries already available. Thus, you may keep the default. If you use a different server, e.g. Apache Tomcat, you may have to provide the JSF libraries. In such a case you have to choose between registered (within NetBeans) libraries or you have to add your own.

Before closing this dialog, please choose the tab „Configuration“ and change the URL pattern to „*.xhtml“. NetBeans here proposes „/faces/*“. This results in a bit longer path, showing everybody which framework you use. For the JSF functionalitiy itself it doesn’t matter. It’s your choice.

The preferred page language defaluts to „Facelets“ . Alternaivily you may choose „JSP“ (Java Server Pages). In both cases appropriate namespaces are needed and will be included by NetBeans, as well as tag libraries, which allow you to include special statements within your HTML page. These statements will be processed on server side before delivering the page to the browser.

JSP exists for a long term. And they had been standard for JSF till version 1.2. Because they had been developed independent (and before) JSF, they posesses a bit other lifecycle than JSF. Facelets have been especially developed for JSF. Since version 2, Facelets are part of the JSF standard specification and became the preferred page language.

Now you’ve choosen enough and end the dialog by [Finish].

NetBeans generates a complete runnable project and opens the first page, Index.xhtml in it’s code editor.

As distinguishable at the delaration, it is a XHTML page. In the opening HTML tag you’ll find the appropriate namespace and additional a namespace for jsf/html. Traditional the prefix „h“ is used for this. You may recognize a first usage at the tags of head and body. Even though these tages are prefixed, after server side processiong you just find these prefixes (in browser, page source code) removed and the standard HTML tags being used. Nothing spectactular happend so far.

Take a look onto the project tree on the left side. NetBeans also generated som config files, which will be descriped later on. Furthermore, all needed libraries hvae been included. Shortly, everything you need to launch the project is available. Let’s start with {F6}.

The first start takes a bit more time: NetBeans starts the app server, deploys your application and then starts it too. Next project start (of the same NetBeans session) will be faster, because GlassFish is already started. In a productive environment, your server is usually up all time. How to deploy in such an environment, even though manually or scripted, will be described in a later part of this tutorial.

After strating the application, NetBeans launches the browser and display the page: Hello from Facelets.

A look onto the URL highlights that the browser requested the local server, and there, the path to JSFTutorial. Remember you? This is exactly the context path choosen within the wizzard on project setup.

A view to the page’s sourc code presents normal XHTML:

<?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">
    <head>
        <title>Facelet Title</title>
    </head>
    <body>
      Hello from Facelets
    </body>
</html>

Comparing with the source within NetBeans, all the JSF/HTML specific namespaces disappeared, as well as the „h:“ prefixes. This shows that thes server did some work in background: All specific tags became analyzed and replaced. In this simple project just by some HTML code.

It would be usefull to explain what happens on server side. But before that, in the next part an other application with some server side calculations to be displayed at the client side. It’s getting exiting next.

 

To web development content.

Tutorial Webentwicklung (mit JSF) II

Die erste Webapplikation

Im Folgenden wird eine rudimentäre Webapplikation erstellt – und zwar nur soweit, wie sie als Grundgerüst von Netbeans generiert wird. Weitere Funktionalität wird noch nicht zugefügt. Und doch liefert dieser Einstieg wichtige Grundlagen.

Sie können das Beispiel wahlweise an Ihrem Rechner nachvollziehen – oder aber einfach den Screenshots folgen, abhängig von Ihrer persönlichen Vorliebe zum Erlernen neuer Technologien.

Nach dem Start von NetBeans wählen ein neues Projekt (Tastenkombination {Strg}+{Umschalt}+{N}). Es erscheint der folgende Dialog, in dem Sie „Java Web“ und daraus „Web Application“ wählen. Der Dialog kann bei Ihnen eventuell etwas anders aussehen, je nachdem, welche (Sprach-) Version von NetBeans und welches Betriebssystem Sie nutzen.

Betätigen Sie die Schaltfläche [Next]. Im folgenden Dialog wählen Sie einen passenden Projektnamen, hier „JSFTutorial“. Soweit Sie Ihre Projekte in einem anderen Verzeichnis als dem vorgeschlagenen Standard ablegen möchten, passen Sie noch das Projektverzeichnis (Project Location) an. Weiter geht es wieder mit [Next].

Soweit Sie NetBeans ab Version 6.9 in der Standard-Konfiguration nutzen, sollte bei Ihnen im folgenden Dialog der GlassFish Sever 3.0 oder jünger voreingestellt sein. Sofern Sie noch eine ältere Version nutzen, ist jetzt der ideale Zeitpunkt für ein Update gekommen. Für die Beispiele in diesem Buch wird die Java Enterprise Edition in der Version 6 genutzt.

 

Wie Sie erkennen können, bietet Ihnen der Dialog die Möglichkeit, Context und Dependency Injection (CDI) nutzen zu können. Damit versetzen Sie den Application Server in die Lage, Objekte in Ihre Applikation zu „injizieren“. Mittels einer einfachen Annotation weisen Sie so den Server an, Ihnen innerhalb einer sogenannten Bean Referenzen auf bestimmte Objekte zur Verfügung zu stellen. Die Lebensdauer einer solchen Bean können Sie festlegen, sei es, dass sie für eine Anfrage, eine Sitzung oder sonstiges gilt. Auch mit JSF können Sie die Lebensdauer einer Bean festlegen. Leider verhalten sich CDI und JSF hier leicht unterschiedlich, so dass wir dieses starke Feature vorerst nicht nutzen.

Mittels Context Path geben Sie an, unter welchem Pfad die Applikation angesprochen wird. Dieser ist mit dem Projektnamen vorbelegt und Sie können dies so belassen. Bei Bedarf lässt sich der Pfad zu einem späteren Zeitpunkt auch wieder ändern.

Wie gewohnt geht es weiter mit [Next].

In diesem Dialog wählen Sie die JavaServerFaces als Framework. Darunter erscheint ein Tabulator-Element zur Konfiguration. Ein JEE6 kompatibler Server wie GlassFish verfügt bereits über die passenden Bibliotheken und so können Sie diese Vorreinstellung belassen. Bei Nutzung eines anderen Servers, z. B. Apache Tomcat, müssen Sie ggf. Die JSF-Bibliotheken mit bereitstellen. In einem solchen Fall wählen Sie „Registered Libraries“. Bevor Sie den Dialog abschließen, wählen Sie noch den Reiter „Configuration“ und ändern das URL Pattern auf „*.xhtml“. NetBeans schlägt hier standardmäßig „/faces/*“ vor. Dies führt dazu, dass der Pfad im Browser scheinbar um ein Verzeichnis länger wird. Der Funktionalität tut dies keinen Abbruch. Hier müssen Sie selber entscheiden.

Die bevorzugte Seitensprache ist mit „Facelets“ vorbelegt. Alternativ ist auch „JSP“ (Java Server Pages) möglich. In beiden Fällen werden bestimmte Namensräume bzw. Bibliotheken (Tag Libraries) eingebunden, die es Ihnen ermöglichen, spezielle Anweisungen in der HTML-Seite unterzubringen, die serverseitig vor Auslieferung an den Browser abgearbeitet werden. JSP existieren schon länger und waren bis JSF 1.2 die Standard-Seitensprache. Sie haben jedoch einen etwas anderen Lebenszyklus als JSF. Facelets wurden dagegen speziell für JSF entwickelt und sind seit JSF 2 Teil der Spezifikation und bevorzugte Seitensprache.

Nun ist genug gewählt und Sie beenden den Dialog mittels [Finish].

Daraufhin generiert NetBeans ein vollständig lauffähiges Projekt und öffnet die Seite Index.xhtml im Sourcecode-Editor.

Wie an der Deklaration zu erkennen, handelt sich dabei um eine XHTML-Seite. Im öffnenden HTML-Tag ist entsprechend der Namensraum für xhtml angegeben und zusätzlich der Namensraum für jsf/html. Dieser erhält traditionell das Präfix „h“. Eine erste Nutzung erkennen Sie in den Tags für head und body. Hier ist dieses Präfix vorangestellt. Vor Auslieferung der Seite wird dies verarbeitet – und dabei werden diese Tags einfach durch die Standard-HTML-Tags ersetzt. Insofern passiert hier nichts Aufregendes.

Auf der linken Seite erkennen Sie im Projekt-Tree, dass NetBeans Ihnen neben dieser Seite auch einige Konfigurationsdateien, die weiter unten beschrieben werden, generiert hat. Des Weiteren wurden die benötigten Bibliotheken in das Projekt eingebunden. Kurz, es ist alles vorhanden, um das Projekt starten zu können. Dies geschieht mittels {F6}.

Der erste Start dauert etwas länger. NetBeans startet GlassFish, stellt die Applikation bereit und startet diese. Das Bereitstellen der Applikation wird als „Deploy“ bezeichnet. Dies alles erledigt NetBeans für Sie. In einer produktiven Umgebung werden Sie jedoch nicht den lokalen Server nutzen – und den Server schon gar nicht jeweils neu starten. Hier müssen Sie vielmehr manuell deployen oder scripten – wie dies vonstatten geht, erfahren Sie in einem späteren Teil des Tutorials.

Nachdem der Server gestartet wurde, ruft NetBeans den Browser auf. Das Ergebnis ist rech unspektakulär: Hello from Facelets.

Ein Blick auf die URL zeigt, dass hier eine Anfrage an den lokalen Server gestellt wurde, und zwar im Verzeichnis JSFTutorial. Erinnern Sie sich? Dies ist genau der Context Path, den Sie im Assistenten angegeben haben, bzw. der aus dem Projektnamen übernommen wurde.

Ein Blick auf den Sourcecode der Seite (bei Firefox mittels {Ctrl}{u} erreichbar), zeigt normales XHTML:

<?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">
    <head>
        <title>Facelet Title</title>
    </head>
    <body>
      Hello from Facelets
    </body>
</html>

Vergleichen Sie dies mit dem Sourcecode, so fällt auf, dass die Angabe des JSF-HTML Namespaces verschwunden sind, ebenso wie die „h:“ Präfixe. Hier hat also bereits der Server im Hintergrund gewerkelt: Die spezifischen Tags wurden analysiert und ersetzt. Im vorliegenden Fall nur durch einfachen HTML Code. In späteren Projekten auch dynamisch durch die Ausgabe der Applikationen. Es wird also spannend.

An diesere Stelle sollte sich eigentlich eine Erläuterung dessen anschließen, was denn da serverseitig so alles passiert. Doch vor einem solch „trockenem“ Thema gibt es im nächsten Abschnitt erst einmal eine kleine interaktive Applikation. Sie haben doch sicherlich auch erst einmal erlebt, wie ein Auto fährt, bevor Sie selbst zur Fahrschule gingen, oder?

Tutorial web development (with JSF) I

Tutorial Web Development (with JSF)

This introduction to my tutorial „Web Development (with JSF)“ gives you an overview abaut the planned extent. I will provide the tutorial according to my respective temporal possibilities. Hence, changes in extent and content are expressly possible.

Web development – this is first of all a very unconcrete concept which can enclose everything what has to act with the Internet, from an easy HTML page up to a complicated application. In this tutorial this concept refers quite specifically to the development of applications which are usable via browser with the further undermentioned technologies. Therefore it becomes clear that it concerns not static Internet pages, but full applications which are hosted on a server and are available at any place, free Internet access provided. This might be for example, a member’s management, an information system, a communication platform or other.

To realize such an application a whole bundle of different technologies is necessary. On the one hand, the browsers need the representable web pages which are provided by a server. To the other a computer language is necessary. However,not simply a locally running program is created, but a web application.  This usually requires an appropriate platform or Framework. Server-sided the developer must not invent the wheel completely anew. Thus as running environment in the following an application server is used. And what is an application without data storage? Thus a persistence layer as well as a data base system are required. A web application communicates with the user by means of forms and dialogs. The validation of inputs is to take place so fast that the user can work liquid, without having to wait for lengthy reactions of the server. Therefore a part of the application, like input validation, is shifted to the client.

In this tutorial the web development with these technologies takes place:

  • HTML (hypertext Markup LANGUAGE) with CSS (Cascading Style Sheets) to the representation in the browser
  • Java as server-sideprogramming language
  • JavaServer Faces 2,0 as webframework
  • Apache HTTP server
  • Java EE 6 compliant application server
  • Java Persistence API (JPA) 2.0
  • SQL data base (JavaDB, MySQL, PostgreSQL)
  • NoSQL data base (CouchDB)
  • JavaScript for client side programming
  • AJAX as technology to update a page partly
  • XML transformation for producing pdf contents
  • Web services for the solution of special problems

In a tutorial naturally practical examples, screenshots etc. may not be missing. While the technologies mentioned can be used by means of different development environments, is, in order not to blow up the extend of this tutorial, the restriction on a certain environment necessarily. Here NetBeans was selected, since this environment offers all necessary technologies „out of the box“ without further configuration. In the introduction example however is shown, how this can take place alternatively by means of Eclipse. As far as you would like to work not with NetBeans, you may transfer the further development accordingly to Eclipse or another development environment of your choice. Similarly this is valid also for the application server. NetBeans comes along with GlassFish 3.x, which can be used without further configuration, manualy deployment etc.. It is however shown, how you install the application detached by NetBeans on this server. Accordingly you can use every other JEE6 comliant server. And for most parts of this tutorial you may use a servlet container like Tomcat 7.x.

Structure of the tutorial

This series of articles is a tutorial. This doesn’t mean that you get presented only simply a set of Screenshots with little explaining textof which you must understand the whole practically. Rather this denotes, you receive information from the practice. With so much Screenshots that you can understand the whole purely mental. It is not necessary that you sit down equal before your computer and strike into the keys. Who would like, may do this naturally also.  A detailed explanation follows the screenshots and listings in each case. Tutorial stands here here for outgoing from the practical example. In this respect it differs from classical books which explain everything and intersperse only a few examples. This tutorial is more concrete, without omitting however the theoretical foundation.

Besides, it goes off quite gently. In the first example it is shown how you create a web application and start it. In the beginning only the generated code is used for it and is launched out of the developing environment. Then you get to know, how you make the application available on an application server – detached from the development environment. Afterwards, this first example is re-implemented by using the Eclipse IDE. In the later process of the tutorials this is left to the interested reader.

Only bit by bit own code is added to the application. An easy calculator originates for some basic arithmetical operations. Even though this example is still quite simple, it already shows server-sided programming, input validation and integration of cascading stylesheets. Some theoretical foundation belongs to that example as well as a quick look to JSF lifecycle. Further applications show the usage of JSF templates, by means of which you can create a (optical) frame for your application.

The member’s management of an association is the first bigger application. It should be accessible only to a certain group of peaple. Besides, is distinguished between persons who may browse a part of the data and those who can select and edit all data. Here thus persistence and authentication are requested.

The second larger application represents an invoicing. In the case study invoices should be able to be edited and printed at the customer’s location. The documents are generated server-sided as a PDF, so that they can be send to any local printer. This example assumes the application server is located in a DMZ (demilitarized zone). However, the data base should be installed not at such an exposed place, but be in the local area network.Furthermore direct access to the data base is forbidden within that DMZ . Hence, the access occurs indirectly by means of an other application server which is addressed via web services.

As bridge to other web technologies it is shown later on, how these web services can be addressed by a Dot.NET application. Further the alternative data storage is represented by means of CouchDB.

Although this tutorial especially concerns web applications, an essential component of Internet offers is pure information: Static or dynamically generated contents are displayed. This performs a HTTP (or simply Web) server usually better than an application server. And in such a way you learn the use of the application server behind a HTTP server. Besides, the HTTP server accepts the inquiries from the web, and then decides whether it simply delivers contents or or forwards however the request to the application.

Even if this tutorial starts a small example, it primarily addresses persons who already have programming knowledge in Java. Indeed, HTML and CSS belong in the repertoire of every web developer, but just with the entrance in this area some Java developer may not have suitable knowledge. Hence, you find some accompanying information in compact form as well as links on deepening information.

The main focus of this tutorial is on the development of applications, not on the installation of the environment. Hence, the practical part also does not start with vast installation instructions.

Best of all you can understand of this tutorial by means of NetBeans. You find this development environment under http://netbeans.org/downloads/index.html. Select there either the package „Java EE“ or “ All“ and install this according to instructions. Prerequsite is an installed Java JDK. If you do not have installed this yet, then you find a suitable link in the download area of NetBeans.

 

To web development content.