Sie möchten während Ihres Buildprozesses eine Textdatei mit folgendem Inhalt erzeugen:

Dies ist der Build vom 2011-08-02 18:35 mit Release Nummer 1.2.7. 
Die JavaDocs finden sich auf http:// magicadress.company.com/javadocs/1.2.7.

Die rot markierten Werte können über das Buildskript parametrisiert werden. Das Datum (blau) ist das Datum zum Zeitpunkt des Erzeugens.

Schreiben Sie einen ANT-Task.

Teil 1

Gegeben sei ein ANT-Skript: http://www.adevit.de/wiki/index.php?title=ANT.

• In welchem Verzeichnis liegen die Java-Source-Dateien?
• In welches Verzeichnis wird kompiliert?
• Im Laufe des Buildprozess werden Verzeichnisse erstellt. Werden/wurden diese (vorher) gelöscht?
• Werden bestehende Klassen gelöscht, bevor sie neu kompiliert werden? Achten Sie auch auf "depends".
• Wird der Code getestet, bevor er ausgeführt wird?
• Welches Artefakt wird schlussendlich erzeugt?

Teil 2

Erstellen Sie ein kleines Java-Projekt. Alternativ können Sie ein bestehendes Projekt nutzen.

1. Schreiben Sie die JavaDocs für zumindest zwei Klassen und zwei Methoden.
2. Erstellen Sie einen neue Source-Folder "test".
3. Legen Sie in diesem Verzeichnis eine JUnit-Testklasse an. Stellen Sie sicher, dass der Test erfolgreich durchläuft.
4. Lassen Sie sich durch Eclipse ein ANT-Skript erzeugen.
5. Ergänzen Sie das ANT-Skript so, dass 
   • alle Verzeichnisse erzeugt und der Code kompiliert werden
   • die JavaDocs erzeugt werden
   • die Tests aufgeführt werden
   • die Testergebnisse als JunitReport erzeugt werden
6. Lassen Sie das ANT-Skript aus Eclipse starten.
7. Lassen Sie das ANT-Skript von der Commandozeile aus starten. Das ist das, was später beim "Nighly Build" geschieht.

Sie bekommen in den TechDocs ein Hilfestellung.

1. Teilaufgabe 0 (einfach)
2. Teilaufgabe 1 (einfach)
3. Teilaufgabe 2 (schwerer)

Bilden Sie Gruppen zu vier Personen, wobei zwei Personen der Kundenseite und zwei der Auftragnehmerseite zuzuordnen sin

• Auf Kundenseite können Sie beispielsweise aus folgenden Rollen wählen: Finanzierer, Anwender, Betreiber, Betroffener, ...
• Auf Auftragnehmerseite soll der/die GeschäftsführerIn sowie der/die EntwicklungsleiterIn vertreten sein.

Bearbeiten Sie bitte eines der drei Szenarien.

• Kontextszenario 1: Am Semesterende schreiben die Studierenden Klausuren. Danach verabschieden sie sich möglichst rasch in die verdienten Semesterferien. Die Professoren machen sich dann an die Arbeit. Spätestens am Ende der Prüfungszeit müssen sie die Ergebnisse bekannt gegeben haben. Dazu nutzen sie das schwarze Brett. Allerdings sind zu diesem Zeitpunkt schon viele Studenten abgereist. In den Semesterferien gehen die Studenten in Urlaub, gehen arbeiten oder bereiten sich auf eine eventuelle Nachklausur vor. 
• Kontextszenario 2: Nach Studienende beginnen die Absolventen zu arbeiten und verlassen daher Konstanz. Gerne würden sie mit den Kommilitonen und Kommilitoninnen in Kontakt bleiben. Persönliche Netzwerke sind auch bei der Arbeitssuche hilfreich. Kontakte zu älteren und jüngeren Semestern würden dieses Netzwerk weiter verbreitern. Auch die älteren, bereits im Beruf stehenden Studenten sind an diesen Kontakten interessiert. Schließlich können sie darüber neue Kollegen für ihre Firma rekrutieren.
• Kontextszenario 3: Es geht um den Kontext einer Brauerei aus dem Hochschwarzwald. Lesen Sie hier mehr. Der Vorteil der Aufgabe besteht darin, dass Sie mehr Kontextinformationen zur Verfügung haben. Der Nachteil besteht darin, dass Sie mehr Kontextinformationen bearbeiten müssen.

Teilaufgabe a): Kontextanalyse

Dokumentieren Sie als Auftragnehmer:

1. Wer sind die Stakeholder? Welche dieser Stakeholder sind potentielle Nutzer des Systems? Beschreiben sie einen Vertreter der letzteren Gruppe mit Hilfe der "Personas".
2. Was sind die Kernaufgaben der Nutzer?
3. Füllen Sie eine Tabelle mit den Spalten aus:
   
   • Kontextszenario/Nutzungskontext (dabei den obigen Text nur ergänzen)
   • Erfordernis
   • Nutzungsanforderung

Teilaufgabe b): Vervollständigen des Lastenhefts

1. Sehen Sie weitere Anforderungen? z.B. Gesetzliche, organisatorische, ...?
2. Leiten Sie mögliche nicht-funktionale Anforderungen ab. Nutzen Sie die Checkliste (Link in Vorlesung erfragen). Notieren Sie sich die Punkte, bei denen Sie eine Antwort vom Kunden benötigen.
3. Kennzeichnen/nummerieren Sie alle Anforderungen eindeutig.
4. Optional: Beschreiben Sie kurz mögliche Tests

Teilaufgabe c): Pflichtenheft

Wählen Sie eine der Kernaufgaben und zerlegen sie diese in Teilaufgaben. Leiten Sie daraus ein Kontextszenario ab, indem Sie eine Tabelle mit folgenden Spalten ausfüllen:

1. Teilaufgabe
2. Aktion des Benutzers
3. Reaktion des Systems
4. Damit erfüllte Nutzungsanforderung

Welche Werkzeuge und welche Nutzungsobjekte können Sie bereits jetzt identifizieren? Wie könnte die GUI aussehen, die diese Elemente darstellt?

 

Hinweis: Einige werden ihre Dokumente der ganzen Gruppe vorstellen.

Erstellen Sie eine kleine Webanwendung, mit der Sie die Fussballergebnisse publizieren können. Diese Anwendung hat im oberen Teil der GUI ein Formular mit folgenden Elementen:

• Verein (Freitext oder Listbox)
• Tore Gast (Textfeld)
• Tore Gastgeber (Textfeld)
• Submit-Button

Im unteren Teil der GUI ist eine Tabelle, welche über die folgenden Spalten verfügt:

• Platz (optional)
• Verein
• Punkte
• Torverhältnis (optional)

Sie müssen bei dieser Aufgabe den SQL-Code in den Klassen kapseln. Er darf nicht Teil des PHP-Skripts sein, mit dem das Formular und die Tabelle erzeugt wird.

Teil 1

Setzen Sie die Aufgabe zu den Servlets (StudiVZ) mit Hilfe von PHP um.

Teil 2

Auch die AJAX-Aufgabe lässt sich mit PHP schnell umsetzen. Sie müssen jedoch nicht eine Datei einlesen. Es genügt, wenn Sie ein Array mit einigen Werten füllen (z.B. Dom, Dominik, Doris, Dieter, Dunja). Zeigen Sie, wie sich im Browser die angezeigten Werte umso weiter einengen, je genauer der eingegebene Suchstring übereinstimmt. Bei der Eingabe von "Do" werden beispielsweise Dieter und Dunja nicht angezeigt.

Die Lösungen bis einschließlich  Aufgabe 11 müssen bis 14:00 am 2. Dezember 2011 fertiggestellt sein.

Schreiben Sie ein "Custom-Tag", das sich "Alter" nennt. Als Parameter/Attribut kann man diesem Tag ein (Geburts-) Datum, die Sprache und die Anweisung übergeben, wie das Datum formatiert ist.

Beispiel:

<htwg:alter format="yyyy-MM-dd" language="de">1923-02-17</htwg:alter>

Als Ergebnis würde angezeigt werden "87 Jahre". Würde man "en" als Sprache übergeben, würde "87 years ausgegeben.

Hinweise:

1. Es gibt eine Klasse SimpleDateFormat.
2. Nützlich mag auch dieses Code-Snippets sein:
   

   <jsp:doBody var="getDate"></jsp:dobody>
   <%String s =(String) jspContext.getAttribute("getDate");>

Mit dieser Aufgaben können Sie das Zusammenspiel von Servlets und JSPs, wie man es bei MVS(2) Architekturen oft findet, ausprobieren.

Schreiben Sie eine Klasse DispatcherServlet, das die Anfrage an eine JSP-Datei weiterleitet. Dazu kann Ihnen folgender Code nützlich sein:

ServletContext context = getServletContext();  
RequestDispatcher dispatcher =  context.getRequestDispatcher("/dispatcher.jsp");
dispatcher.include(request, response);

Die JSP-Datei gibt dann tabellarisch alle Request-Parameter und deren Werte tabellarisch aus.

Lösungshinweis:

• JSPs kennen das implizite Objekt request, auf dem eine Methode getParameterMap() definiert ist.
• Zum Testen können Sie ihr Servlet im Browser aufrufen. Abhängig von Ihren Definitionen kann das wie folgt aussehen: http:// localhost:8080/WebTechnologies/Dispatcher?vorname=gerd&nachname=mueller

Sie wollen in einer JSP-Seite die Werte einer Map tabellarisch ausgeben:

 

Drachenfels	Heiko von
Johner	Christian

Die Werte entstammen einer Java-Bean:

public class TestBean {
  public Map getPersons() {
    Map<String, String> persons = new TreeMap<String, String>();
    persons.put("Drachenfels", "Heiko von");
    persons.put("Johner", "Christian");
    return persons;
  } 
}

 

Schreiben Sie die dazu notwendige JSP-Seite.

Schreiben Sie eine JSP Seite, welche ein Formular aus 3 Texteingabefeldern enthält. In das erste und zweite Feld kann man zwei Zahlen, in das dritte einen Operator (+, - , x, /) eingeben. Nach Knopfdruck wird das Ergebnis der Berechung angezeigt. Eine Validierung der Eingabefelder ist nicht notwendig.

Setzen Sie eine AJAX Bibliothek ein. Beispielsweise das DOJO Toolkit oder das Prototype JavaScript Framework.

Falls Ihnen kein interessantes Beispiel einfällt, nutzen Sie dieses:

Die Daten im Formular Ihres Mini-StudiVZ sollen zum Server geschickt werden, ohne (!) dass die Seite neu geladen wird. Der Response (die HTML-Tabelle) wird einfach unten an die Seite angehängt.

Rezept:

• Laden Sie sich das Protype Framework herunter
• Bei Click auf den Absende-Button wird eine JavaScript-Funktion aufgerufen, die new Ajax.Request aufruft. Als Parameter können Sie das komplette Formular übergeben.
• Lesen Sie das kurze Tutorial für weitere Erklärungen.

Schreiben Sie eine einfache HTML-Seite, die im Wesentlichen nur ein Text-Eingabefeld enthält. Sobald man in dieses Feld einen Buchstaben oder eine Buchstaben-Kombination eingibt, wird der erste gefundene Vorname eingetragen, der mit diesem Buchstaben bzw. dieser Buchstaben-Kombination beginnt.

Eine Liste von circa 200 Vornamen finden Sie auf dieser Seite.

Abnahme von Aufgaben 1-5 zu Beginn der Stunde am 11. November 2011.

Teilaufgabe 1

Sie schreiben ein Mini-StudiVZ. Man kann persönliche Daten in ein Formular eintragen, welche nachher auf einer Webseite angezeigt werden.

Rezept:

• Legen Sie ein Dynamic WebProject an
• Schreiben Sie ein einfaches HTML-Formular
• Schreiben Sie ein Servlet, das die Formulardaten ausliest und eine HTML-Seite erzeugt. Diese Seite enthält eine dreispaltige Tabelle mit eben diesen Daten:
  1. Spalte: Feldbeschreibung, z.B. "Vorname"
  2. Spalte: Wert, z.B. Fredi
  3. Spalte: bleibt noch leer
• Ändern Sie den URL-Pfad ("URL Mapping") auf "HtwgBook"
• Lassen Sie sich die generierte Seite anzeigen

Teilaufgabe 2

Beschreiben Sie, wie Sie vorgehen würden, wenn Ihnen Eclipse nur als IDE, nicht aber als Umgebung mit integriertem Tomcat zur Verfügung stünde. Sie dürften nur "normale" Java-Projekte anlegen.

 Teilaufgabe 3

Die angezeigte Webseite, welche die Tabelle mit den persönlichen Daten enthält, soll jetzt auch editierbar sein: In der dritten Spalte befindet sich nun ein Button "ändern". Drückt man diesen Knopf, so erscheint ein Eingabefeld, in das man den neuen Wert eingeben kann. Nach "submit" wir die Tabelle mit dem neuen Wert angezeigt. Die anderen Tabellenzeilen bleiben unverändert.

Rezept

• Passen Sie Ihr Servlet so an, dass es eine dreispaltige Tabelle mit den Formularfeldern ausgibt. Außerdem sollte es in der Lage sein, sich alle Werte zu "merken". Denken Sie an eine Klasse des Collection-Frameworks und die Möglichkeit, Daten Request-übergreifend zu speichern.
• Das erzeugte Formular hat als "Action-Ziel" das gleiche Servlet. Mit einem Parameter (URL) könnten Sie dafür sorgen, dass Sie den Request an eine andere Methode des Servlets oder an eine Hilfsklasse weiterleiten.

Mein StudiVz

Parameter	Wert	--
Vorname	Simon
Nachname	Wagner
Wohnort	Konstanz
Hobby	Programmieren

Teilaufgabe a)

Schreiben Sie einen Taschenrechner mit JavaScript. Sie können sich entscheiden, ob man die Zahlen per Button oder direkt über die Tastatur in ein Formularfeld eingeben kann.

Teilaufgabe b)

Lernen Sie auf der Seite http://www.homepage-total.de/javascript/hor_dhtml-menue.php# wie aufklappbare Menüs mit JavaScript erzeugt werden. Erklären Sie dies Ihren KommilitonInnen. Wie sieht das gezeigte Beispiel ohne JavaScript aus?

Teilaufgabe c)

Nutzen Sie ein bestehendes JavaScript Framework wie JQuery, um div-Elemente zu animieren. Laden Sie dazu jQuery herunter und binden Sie die Bibliothek ein. Verwenden Sie daraus definierte Funktionen wie slideUp(). Die Seite von jQuery bietet einfach nachzuprogrammierende Beispiele(1 Zeile Code) und Tutorials.

Schreiben Sie eine einfache HTML Seite, die ein Formular enthält. In dieses Formular kann man Text eingeben. Sobald man einen Button klickt, wird dieser Text in die HTML-Seite eingefügt.

Sie formatieren Ihren Lebenslauf. Dazu sollten Sie die folgenden Optionen nutzen:

• Sie ändern die Farbe des Hintergrunds und mindestens eines Textes
• Sie positionieren das Passbild oben rechts
• Die Spaltenüberschriften der Tabelle sind in heller Farbe auf dunklem Hintergrund
• Die Überschriften sind in Großbuchstaben gesetzt
• Sie haben Text in einem bestimmten Tag, z.B. <p>, den Sie anders formatieren als den Text in der übrigen (<p>-) Tags

Die Formatierung erfolgt ausschließlich über CSS.

 

Schreiben Sie eine HTML-Seite mit Ihrem Lebenslauf. Diese sollte enthalten:

• Name, Anschrift, Kontaktdaten (können anonymisiert oder verfälscht sein)
• Ihr Passbild. Falls Sie keines haben, können Sie dieses nutzen.
• Tabellarische Darstellung der wichtigsten Stationen (z.B. Schule, Abi, Jobs, Studium, Wehr- oder Ersatzdienst)
• Hobbies oder Interessen als Aufzählungsliste
• Formular (noch nicht funktionierend), mit dem man Ihnen eine Nachricht hinterlassen kann. Der Nutzer kann die Priorität seiner Nachricht klassifizieren (sehr wichtig, wichtig, eilt nicht), wozu Sie "Radio-Buttons" nutzen. Weiter kann man das Thema aus einer Liste auswählen (Job-Angebot, Nur-mal-so, private Nachricht, Sonstiges).
• die einzelnen Abschnitte sind durch Überschriften von einander getrennt.
• Sie verwenden mindestens einen Link, beispielsweise den auf die Seite der Hochschule.

Die HTML-Seite darf keine Formatierungsinformationen enthalten.