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 Webentwicklung (mit JSF)

Diese Einführung zu meinem Tutorial "Webentwicklung mit JSF" gibt Ihnen einen Überblick über den geplanten Umfang. Das Tutorial werde ich entsprechend meinen jeweiligen zeitlichen Möglichkeiten erstellen. Änderungen in Umfang und Inhalt sind daher ausdrücklich möglich.

Webentwicklung – dies ist erst einmal ein sehr unkonkreter Begriff, der alles umfassen kann, was mit dem Internet zu tun hat, von einer einfachen HTML-Seite bis hin zu einer komplexen Anwendung. In diesem Tutorial bezieht sich dieser Begriff ganz konkret auf die Entwicklung von Applikationen, die via Browser nutzbar sind, mit den weiter unten genannten Technologien. Somit wird deutlich, dass es sich nicht um statische Internetseiten handelt, sondern um vollwertige Programme, die auf einem Server gehostet und an einem beliebigen Ort genutzt werden, freier Internetzugang vorausgesetzt. Dabei kann sich beispielsweise um eine Mitgliederverwaltung, ein Auskunftssystem, eine Kommunikationsplattform oder anderes handeln.

Um eine solche Applikation zu realisieren ist ein ganzes Bündel unterschiedlicher Technologien erforderlich. Zum einen benötigen die Browser darstellbare Webseiten, die von einem Server bereitgestellt werden. Zum anderen ist eine Programmiersprache erforderlich. Es wird aber nicht einfach ein lokal laufendes Programm erstellt, sondern eine Webapplikation. Dies erfordert in der Regel eine entsprechende Plattform oder Framework. Serverseitig muss der Entwickler das Rad nicht komplett neu erfinden. So wird als Ablaufumgebung im Folgenden ein Applikationsserver genutzt. Und was ist eine Applikation ohne Datenhaltung? Also werden eine Persistenzschicht sowie ein Datenbanksystem benötigt. Eine Webapplikation kommuniziert mit dem Anwender mittels Formularen und Dialogen. Die Validierung von Eingaben soll so schnell erfolgen, dass der Anwender flüssig arbeiten kann, ohne auf langwierige Reaktionen des Servers warten zu müssen. Somit wird ein Teil der Applikation, wie Eingabevalidierung, auf den Client verlagert.

In diesem Tutorial erfolgt die Webentwicklung mit diesen Technologien:

• HTML (Hypertext Markup Language) mit CSS (Cascading Style Sheets) zur Darstellung im Browser
• Java als serverseitige Programmiersprache
• JavaServer Faces 2.0 als Webframework
• Apache HTTP Server
• Java EE 6 compliant Application Server
• Java Persistence API (JPA) 2.0
• SQL Datenbank (JavaDB, MySQL, PostgreSQL)
• NoSQL Datenbank (CouchDB)
• JavaScript zur clientseitigen Programmierung
• AJAX als Technologie zum Update von Seiten
• XML Transformation zum Erzeugen von PDF-Inhalten
• WebServices zur Lösung spezieller Probleme

In einem Tutorial dürfen natürlich praktische Beispiele, Screenshots etc. nicht fehlen. Während die genannten Technologien mittels unterschiedlicher Entwicklungsumgebungen genutzt werden können, ist, um den Rahmen dieses Tutorials nicht zu sprengen, die Beschränkung auf eine bestimmte Umgebung erforderlich. Hier wurde NetBeans gewählt, da diese Umgebung alle erforderlichen Technologien "out of the box", also ohne weitere Konfiguration anbietet. Im Einführungsbeispiel wird aber gezeigt, wie dies alternativ mittels Eclipse erfolgen kann. Soweit Sie, lieber Leser, nicht mit NetBeans arbeiten möchten, können Sie die weitere Entwicklung entsprechend auf Eclipse oder eine andere Entwicklungsumgebung übertragen. Analog gilt dies auch für den Applikationsserver. NetBeans kommt mit GlassFish 3.x daher, der ohne weitere Konfiguration, Deployment etc. genutzt werden kann. Es wird aber gezeigt, wie Sie die Applikation losgelöst von NetBeans auf diesem Server installieren. Entsprechend können Sie jeden anderen JEE6 kompatiblen Server nutzen. Und viele Beispiele können Sie auch auf einem sogenannten Servlet Container wie Tomcat 7.x nachvollziehen.

Aufbau des Tutorials

Bei dem vorliegenden Werk handelt es sich um ein Tutorial. Das bedeutet nicht, dass Sie einfach eine Reihe von Screenshots mit wenig Text vorgesetzt bekommen, anhand derer Sie das Ganze praktisch nachvollziehen müssen. Vielmehr heißt dies, Sie erhalten Informationen aus der Praxis heraus. Mit soviel Screenshots, dass Sie das Ganze rein gedanklich nachvollziehen können. Es ist nicht erforderlich, dass Sie sich gleich vor Ihren Rechner setzen und in die Tasten hauen. Wer möchte, darf dies natürlich auch. Den Screenshots und Listings folgt jeweils eine ausführliche Erläuterung. Tutorial bedeutet hier also ausgehend vom praktischem Beispiel. Insofern unterscheidet es sich also von klassischen Büchern, die alles erklären und nur ein paar Beispiele einstreuen. Dieses Tutorial ist konkreter, ohne aber das theoretische Fundament auszulassen.

Dabei geht es ganz sachte los. Im ersten Beispiel wird gezeigt, wie Sie eine Webapplikation anlegen und ausführen. Dazu wird anfangs nur der generierte Code genutzt und aus der Entwicklungsumgebung gestartet. Sodann erfahren Sie, wie Sie die Applikation auf einem Applikationsserver – losgelöst von der Entwicklungsumgebung – bereitstellen. Dieses erste Besipiel wird anschließend mittels Eclipse nachgebaut. Im späteren Verlauf des Tutorials sei dies dem interessierten Leser selber überlassen.

Erst nach und nach kommt eigener Code zur Anwendung dazu. Es entsteht ein einfacher Rechner für einige Grundrechenarten. So klein dieses Besipiel ist, zeigt es bereits serverseitige Programmierung, Eingabevalidierung und Einbindung von Stylesheets. Dazu gehört dann u. a. auch das theoretische Fundament zum Lebenszyklus einer JSF-Anfrage. Weitere Anwendungen zeigen die Nutzung von JSF-Templates, mittels derer Sie einen (optischen) Rahmen für Ihre Anwendung schaffen können.

Die Mitgliederverwaltung eines Vereins ist die erste größere Anwendung. Sie soll nur für einen bestimmten Personenkreis zugänglich sein. Dabei wird unterschieden zwischen Personen, die einen Ausschnitt der Daten sichten dürfen und solchen, die sämtliche Daten sichten und editieren können. Hier sind also Persistenz und Authentisierung gefragt.

Die zweite größere Applikation stellt eine Fakturierung dar. Im Fallbeispiel sollen Rechnungen direkt beim Kunden erfasst und ausgedruckt werden können. Die Belege werden serverseitig als PDF erzeugt, so dass sie vor Ort auf einem beliebigen Drucker ausgegeben werden können. Dieses Beispiel geht davon aus, dass sich der Applikationsserver in einer DMZ (demilitarisierte Zone) befindet. Die Datenbank soll aber nicht an einer solch exponierten Stelle installiert werden, sondern sich im lokalen Netz befinden. Desweiteren ist ein direkter Zugriff von der DMZ auf den Datenbankport verboten. Der Zugriff erfolgt daher indirekt mittels einem weiteren Applikationsserver, der via Webservices angesprochen wird.

Als Brückenschlag zu anderen Webtechnologien wird schließlich gezeigt, wie diese Webservices von einer Dot.NET-Applikation angesprochen werden können. Desweiteren wird die alternative Datenspeicherung mittels CouchDB dargestellt.

Auch wenn es in diesem Tutorial speziell um Webapplikationen geht, so ist ein wesentlicher Bestandteil von Internetangeboten eine reine Information: Es werden statische oder dynamisch generierte Inhalte angezeigt. Dies beherrscht ein HTTP- (oder einfach Web-) Server in der Regel besser als ein Applikationsserver. Und so lernen Sie die Nutzung des Applikationsservers hinter einem HTTP-Server. Dabei nimmt der HTTP-Server die Anfragen aus dem Web entgegen, und entscheidet dann, ob er einfach Inhalte ausliefert oder aber die Anfrage an die Applikation weiterleitet.

Auch wenn dieses Tutorial mit einem kleinen Beispiel anfängt, so richtet es in erster Linie an Personen, die bereits über Programmierkenntnisse in Java verfügen. HTML und CSS gehören zwar in das Repertoire eines jeden Webentwicklers, aber gerade beim Einstieg in diesen Bereich verfügt nicht jeder Java-Entwickler über entsprechende Kenntnisse. Daher finden Sie zugehörige Informationen in kompakter Form eingestreut sowie Links auf vertiefende Informationen.

Der Schwerpunkt dieses Tutorials liegt auf der Entwicklung von Applikationen, nicht auf der Installation der Ablaufumgebung. Daher startet der praktische Teil auch nicht mit ausgedehnten Installationsanleitungen.

Am besten können Sie dieses Tutorial mittels NetBeans nachvollziehen. Diese Entwicklungsumgebung finden Sie unter http://netbeans.org/downloads/index.html. Wählen Sie dort entweder das Paket "Java" oder "All" und installieren dies gemäß Anleitung. Vorraussetzung ist ein installiertes Java JDK. Falls Sie dies noch nicht installiert haben solten, so finden Sie im Downloadbereich von NetBeans den passenden Link.

 

Mehr Arbeit als gedacht war die Erstellung der Liste meiner Rezensionen (siehe Bücher), zumal die Liste während der Arbeit immer länger wurde. Die nächsten Magazine kommen bestimmt…

Doch nun habe ich mit der Erstellung eines JSF-Tutorials begonnen, das ich demnächst hier vorstellen werde. Da ich dies auch benötige, um meine Kollegen zu schulen, wird dies hoffentlich recht bald fertig.