Interaktive Medien 2

Hochschule der Medien
Interaktive Medien 2
Client-Server Anwendungen im Netz
Aufgaben und Übungen
Prof. Uwe Schulz
Sommersemester 2006
HDM Stuttgart, Uwe Schulz
Aufgabensammlung Interaktive Medien 2 – 2006
Installation der Programme auf der Begleit-CD
Die Begleit-CD enthält eine ganze Reihe von Softwarepaketen für die Übungen. Bitte installieren un Konfigurieren
Sie diese in der folgenden Reihenfolge:
1. fz302.exe
installiert das Programm FilZip zum entpacken von .zip-Archiven. Dies ist nur notwendig,
wenn Sie noch keine entsprechende Software wiez. B WinZip auf Ihrem Rechner haben.
2. jdk-1_5_0-doc.zip enthält die Dokumentation zu den standard Java-Klassen. Entpacken Sie diese Dateien auf
die Festplatte, z. B. in das Verzeichnis c:\javadoc und öffnen Sie die Datei index.html in
einem Browser bzw. merken Sie sich die Adresse in Ihren Favoriten (Bookmarks).
3. HKSetup.exe
installiert das Programm HTML-Kit zur Bearbeitung von HTML-Seiten
4. jdk-1_5_0_06-windows-i586-p.exe installiert das Java Developer Kit Version 5 Der auf der CD enthaltene
Tomcat Server Version 5.5 läuft nur mit der neuesten Java Version.
5. apache-tomcat-5.5.15.exe Installiert den Tomcat web-Server Version 5.5. Diese Version läuft nur wenn Java
Version 5 installiert ist. Bitte merken Sie sich unbedingt das Administrator-Passwort, dass
Sie während der Installation eingeben! Nach der Installation öffnen Sie mit HTML-KIT die
Datei C:\Programme\Apache Software Foundation\Tomcat 5.5\conf\web.xml
und entfernen die Kommentare um die Zeilen 99-111 sowie 340-345. Damit ist das
sogenannte Invoker-Servlet aktiviert, das automatisch jede neue Servlet-Klasse registriert.
Ohne diese Änderung müssen Sie jedes neue Servlet individuell beim Server anmelden, was
sehr lästig ist.
6.eclipse-SDK-3.1.2-win32.zip enthält die Eclipse Entwicklungsumgebung: entpacken Sie die Dateien in ein
Verzeichnis Ihrer Wahl, z. B. C:\eclipse31 und starten Sie das Programm durch Doppelklick
auf die Datei Eclipse.exe. Sie können z. B. eine Verknüpfung auf dem Desktop erstellen,
damit Sie das Programm in Zukunft leichter finden. Starten Sie Eclipse und nehmen Sie unter
Window->Preferences->General->Editors->File Associations als Associated Editor für die
File-Typen .html und .htm den Text Editor sowie das Programm HTML-Kit an, um zu
verhindern, dass beim Bearbeiten einer HTML-Datei in Eclipse ein Browser geöffnet wird.
Überprüfen Sie ausserdem die Java Einstellungen, unter
Window->Preferences->Java->Compiler sollte Comiler-Level 5.0 ausgewählt sein.
7. tomcatPluginV31.zip Dieses Plugin zu Eclipse erlaubt das Starten und Stoppen von Tomcat aus Eclipse
heraus und erleichtert die Organisation von Tomcat-Projekten in Eclipse. Zum Installieren
entpacken Sie den Inhalt dieser .zip-Datein in das Verzeichnis
C:\eclipse31\plugins. Überprüfen Sie, dass dort das neue Unterverzeichnis
com.sysdeo.eclipse.tomcat_3.1.0 erzeugt wurde und starten Sie Eclipse neu. In der
Menüleiste müsste jetzt das neue Menü "Tomcat" existieren und darunter drei neue Symbole
einer Katze, mit denen man Tomcat starten, stoppen und restarten kann.
Nehmen Sie in Eclipse unter Window->Preferences->Tomcat folgende Einstellungen vor:
- Version 5.x
- Das Tomcat Home Verzeichnis (C:\Programme\Apache Software Foundation\Tomcat 5.5)
2
HDM Stuttgart, Uwe Schulz
Aufgabensammlung Interaktive Medien 2 – 2006
Aufgabe 1
Eclipse und Tomcat konfigurieren
Falls Sie diese Aufgabe auf Ihrem eigenen Rechner durchführen, muß dort zunächst das JDK, der Tomcat-Server,
Eclipse sowie das Eclipse-Plugin für Tomcat installiert sein. Diese Beschreibung beruht auf der Installation dieser
Software im Übungsraumaum 108, die noch individuell konfiguiriert werden muss. Zuhause sind die Schritte 1-3
nicht notwendig.
1.
Stellen Sie sicher, dass Ihr Homeverzeichnis als Laufwerk H: verbunden ist.
2.
Starten Sie die Softwareentwicklungsumgebung Eclipse – dabei wird das Verzeichnis H:\eclipse angelegt,
in dem Ihre Projekte abgelegt werden.
3.
Kopieren Sie die Datei C:\Programme\Apache Group\Tomcat 5.5\conf\server.xml in das Verzeichnis
H:\eclipse
4.
Öffnen Sie in Eclipse Window-Preferences und dort Tomcat. Setzen Sie die Tomcat-Version auf 5.x und
legen Sie als Tomcat-Home das Verzeichnis C:\Programme\Apache Group\Tomcat 5.5 sowie als
Konfigurationsdatei H:\eclipse\server.xml fest. Klicken Sie auf Apply und OK.
5.
Öffnen Sie in Eclipse Window->Preferences->General->Editors und dort zu File Associations. Geben Sie
für die File-Typen *.htm und *.html als Associated Editor den Text Editor (default) fest (unterer AddButton) und nehmen Sie den Web-Browser weg (Remove) um zu verhindern, dass zum Editieren einer
HTML-Datei das Programm Netscape gestartet wird.
6.
Editieren Sie die Datei C:\Programme\Apache Group\Tomcat\conf\web.xml und Entfernen Sie die
Kommentare um die beiden untenstehende Zeilenblöcke:
<servlet>
<servlet-name>invoker</servlet-name>
<servlet-class>
org.apache.catalina.servlets.InvokerServlet
</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>0</param-value>
</init-param>
<load-on-startup>2</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>invoker</servlet-name>
<url-pattern>/servlet/*</urlpattern>
</servlet-mapping>
Die Schritte 2-6 müssen Sie nur beim ersten Mal durchführen.
•
Legen Sie ein neues Java-Tomcat-Projekt an (auf File->New->Project klicken und dort unter Java Tomcat
Projekt auswählen). Nennen Sie das Projekt a1. Im Verzeichnis H:\eclipse gibt es jetzt das
Unterverzeichnis a1 sowie die Dateien server.xml, server.xml.backup und server.xml.old.
•
Wechseln Sie in Eclipse in die Java-Perspektive
und fügen Sie zum Projekt a1 die Datei
index.html hinzu. (Rechte Maustaste auf dem
Projekt a1, new, file). Index.html sollte im
Hauptverzeichnis von a1 liegen und
nebenstehenden Inhalt haben.
•
Starten Sie den Tomcat-Server indem Sie in
Eclipse auf das Symbol mit der Katze klicken. Warten Sie, bis die Startup-Meldungen im unteren Fenster
fertig sind.
•
Starten Sie einen Browser und geben Sie als URL http://localhost:8080 ein. Sie sollten die Startseite von
Tomcat sehen. Geben Sie jetzt http://localhost:8080/a1 ein. Sie sehen Ihre HTML-Seite.
<html><head></head>
<body>
<h1>Mein erstes Tomcat Projekt!</h1>
</body>
</html>
Tomcat und Eclipse sind jetzt einsatztbereit.
3
HDM Stuttgart, Uwe Schulz
Aufgabensammlung Interaktive Medien 2 – 2006
Aufgabe 2
Eclipse kennenlernen
Zunächst wollen wir eine gewöhnliche Java-Anwendung schreiben um Eclipse kennenzulernen.
Legen Sie das neue Eclipse-Projekt a2 an, diesmal aber nicht als Tomcat-Projekt sondern als gewöhnliches JavaProjekt.
Erzeugen Sie die neue Klasse a1 und geben Sie an, dass die Methode main angelegt werden soll. Fügen Sie dann in
Main die folgenden Zeilen ein:
JFrame f = new JFrame("Hallo Welt");
f.setSize(200,300);
f.setVisible(true);
Die Klasse JFrame wird nicht erkannt, weil die entsprechenden import-Anweisungen fehlen. Deshalb wird das Wort
JFrame von Eclipse rot unterstrichen und am linken Rand ein Fehler-Symbol angezeigt. Eclipse bietet die
Möglichkeit, die import-Befehle automatisch zu generieren: ein rechter Mausklick bring ein Kontextmenü, dort
Source->Organize Imports wählen. Alle notwendigen Import-Befehle werden automatisch eingefügt.
Speichern Sie die Datei durch <strg>-s ab. Sie wird dabei automatisch kompiliert.
Starten Sie die Anwendung durch Klick auf das weiße Dreieck im grünen Kreis, wählen Sie Java Application und
klicken Sie auf New. Eclipse findet die Klasse a1 als (einzige) Klasse, die eine ‚main’- Methode enthält. Mit Run
wird das Programm gestartet.
Fügen Sie einen JButton mit der Aufschrift „Nicht Klicken“ hinzu und starten Sie das Programm erneut (vorher
müssen Sie wieder mit Source->Organize Imports die Klasse JButton importieren. Folgende Zeilen werden dazu
vor setVisible(true) eingefügt.
JButton b = new JButton("Nicht klicken!");
f.getContentPane().add(b);
Eine sehr schöne Eigenschaft von Eclipse ist die Vervollständigung von Namen. Schreiben Sie den folgenden
Beginn einer Zeile hiter JButton b=...:
b.set
und drücken Sie jetzt die Tasten <strg>+Leertaste. Es erscheint ein Tiptool-Fenster mit allen Methoden der Klasse
JButton, die mit set... beginnen. Tippen Sie zusätzlich den Buchstaben T und die Auswahl reduziert sich auf alle
Methoden die mit setT... beginnen. Wählen Sie die Methode setText und es erscheint der Hinweis, dass die
Parameterliste einen Paramter vom Typ String umfasst. Dies ist eine große Hilfe ist beim Programmieren.
Viele Syntaxfehler erkennt Eclipse auch ohne dass die Datei kompiliert wird: löschen Sie ein Semikolon. Das Ende
der Anweisung wird rot unterstrichen und am rechten Rand erscheint ein kleines rotes Rechteck als Hinweis auf
einen Fehler. Verweilen Sie mit dem Cursor über der fehlerhaften Stelle, so erscheint ein Tooltip mit einem
Hinweis zur Fehlerquelle, der in der Regel aussagekräftiger ist als die entsprechende meldung des Java-Compilers.
Probieren Sie verschiedene Fehler aus: fehlende Hochkommata, Klammern, falsch geschriebene Methoden.
Der Streifen am linken Rand des Editor-Fensters zeigt durch einen senkrechten Strich die Ausdehnung der aktuellen
Methode bzw. Klasse an, sobald sich der Cursor in diesem Bereich befindet. Durch Klick auf die Dreiecke in
diesem Streifen klappen Sie Methode und Klassen ein bzw. aus um die Ansicht übersichtlicher zu gestalten.
Sie können einen Namen automatisch umbenennen: markieren Sie die Variable b (egal wo), klicken Sie mit der
rechten Maustaste und wählen Sie Refactor->Rename. Eventuell werden Sie zunächst aufgefordert, die Datei zu
speichern. Geben Sie als neuen Namen button1 ein. Diese Änderung ist auch bei Namen von öffentlichen Methoden
möglich oder bei Klassen. Alle Referenzen auf diesen Namen werden dann überall im Projekt geändert!
Um festzustellen, was Sie wann in Ihrer Klasse geändert haben, klicken Sie auf die rechte Maustaste und wählen
Local History->Compare with. Jede Änderung an der aktuellen Datei wird mit Datum und Uhrzeit angezeigt und
durch Anklicken werden in einer komfortablen Ansicht aktuelle und alte Version verglichen. Der Vergleich kann
sich auf eine Methode, eine Klasse oder die ganze Datei beziehen.
Die Liste der Vorteile von Eclipse ist unglaublich lang, ich hoffe Sie sind auf den Geschmack gekommen.
4
HDM Stuttgart, Uwe Schulz
Aufgabensammlung Interaktive Medien 2 – 2006
Aufgabe 3
Java Servlets
Die Java Servlet Technologie ermöglicht es, dynamische Webseiten mit Java zu entwickeln und dabei auf viele
nützliche Standardklassen zuzugreifen. Ähnlich wie bei PHP und ASP dient Tomcat als spezieller Web-Server, der
neben HTML-Dateien auch Java-Programme kompilieren und starten kann.
Um ein Hello World Servlet zu starten, gehen Sie wie folgt vor:
•
Legen Sie ein neues Java-Tomcat-Projekt an (auf File->New->Project klicken und dort unter Java Tomcat
Projekt auswählen). Nennen Sie das Projekt a3. Im Verzeichnis H:\eclipse gibt es jetzt das
Unterverzeichnis a3.
•
Erstellen Sie die Datei
<html>
<body>
index.html und starten Sie
<h1>Aufgabe 3</h1>
Tomcat neu, um das Projekt
<a href="servlet/HalloWelt">Hallo Welt Servlet</a>
bekannt zu machen (Klick auf
</body>
Katze mit blauem
</html>
kreisförmigen Pfeil). Geben
Sie die URL
http://localhost/:8080/a3 ein, Sie sollten die HTML-Seite sehen.
•
Erzeugen Sie im Projekt a3 im Verzeichnis WEB-inf/src die neue Klasse HalloWelt:
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class HalloWelt extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
response.setContentType("text/html");
PrintWriter writer = response.getWriter();
writer.println("<html><head>");
writer.println("<title>Hello World</title>");
writer.println("</head><body bgcolor=white>");
writer.println("<h2>Hallo Welt</h2>");
writer.println("</body></html>");
}
}
•
Speichern Sie die Java Datei durch <strg>-s ab. Klicken
Sie im Browser auf den Link „Hallo Welt Servlet“. Das
Servlet-Programm sollte die nebenstehende Ausgabe
erzeugen..
•
Ändern Sie Ihr Java Programm, so dass es eine andere Ausgabe erzeugt, speichern Sie es ab und prüfen Sie
im Browserfenster dass bei „Reload“ die geänderte Ausgabe erscheint.
Der Entwicklung von Java-Servlets steht nun nichts mehr im Weg!
5