Fachhochschule Zittau/GörlitzFachbereich Informatik

Denny Israel, Daniel WinterChristian Schäfer, Michael Kohlsche

Dozent: Lars Rönisch

Aski - EinleitungWeb-Anwendung zur Durchführung einer

BefragungBefragung zum Thema Kinder mir

DownsyndromErstellt von René Hofmann

Umsetzung des Systems mit GrailsWeb-FrameworkBasiert auf Sprache Groovy

Aufüllung des FragebogensOnlineDurch Passwort zu schützen

AuswertungDurch angemeldete Manager (Passwortschutz)Mittels Diagrammen

SonstigesE-Mail-Versandt von EinladungenEinladungen als PDF-Dokument

Aski - Anforderungen

Aski - SystemNutzung der von Grails

vorgegebenen ProjektstrukturMVC-PatternDatenmodell durch

Domain-KlassenLogik durch ControllerOberfläche durch Grails-

Server-Pages (vgl. JSP)Programmierung in Groovy,

Unterstützt durch Java

Aski - WorkflowUmfrageausführung als Web-Flow

Grails Web-Flow System, basiert auf Spring Web FlowFestlegung Start-, End- und ZwischenstatesWeb Flow System kontrolliert Ablauf, ein „Mittenrein“-

Springen ist somit unmöglich → sichert Datenkonsistenz

Eingabenkontrolle beim Absenden einer MaskeSpeicherung der Ergebnisse am Ende des Flows

Aski - WorkflowStates der Umfrageausführung

Start – Begrüßungsseite, evtl. Eingabemöglichkeit für Ticket-Passwort

Zwischenstates - Eingabeseiten für jede Kategorie (1-6)

Ende – Abschlusseite

Aski - MailNutzung der Java-Mail-APIVersandt über SMTPDaten für SMTP werden in der Konfiguration

gespeichert und sind im Admin-Bereich einstellbarNutzung für das Versenden von Einladungen

Einladungstext ist ebenfalls in der Konfig. einstellbarNutzung auch für Versandt zurückgesetzter

Passwörter der Manager

PDF-Erzeugung IPDF-Erzeugung mit iText mächtiges Open-Source Framework für Java

um PDF- Dateien zu erstellen und zu erweitern

ausgelagert in extra KlassePDF erhält kurzen Text, URL und ein Ticket

PDF-Erzeugung IIneues Dokument wir erstellt

Document document = new Document(); Ränder werden gesetztdocument.setMargins(75, 75, 75, 75);

Paragraphen werden hinzugefügtParagraph paragraph = new Paragraph();

Font font = new Font(); Schriftgröße, Stylefont.setSize(14);

font.setStyle(Font.BOLD);

paragraph.setFont(font);

paragraph.add(subject);

document.add(paragraph);

Dokument wird geschlossendocument.close();

PDF-Erzeugung IIIPDF-Datei wird nicht auf die Festplatte

geschrieben als Byte-Array weiter gegeben und verarbeitet

ByteArrayOutputStream output = new ByteArrayOutputStream();

PdfWriter.getInstance(document, output);

...

return output.toByteArray();

übernimmt die Änderungen und füllt Stream

gibt Stream als Byte-Array zurück

PDF-Erzeugung IV

Chart-Erzeugung IChart-Erzeugung mit JFreeChart sehr populäres Open-Source Framework für

Java um Diagramme zu erstellen

für jede Frage kann ein BarChart erzeugt werden

zeigen die Antworten in % an

Chart-Erzeugung II

DataSet wird erzeugtDefaultCategoryDataset dataset = new DefaultCategoryDataset();

for(String key : keySet) {

double value = values.get(key) / allValues * 100;

dataset.addValue(value, key, "");

}

DataSet wird gefüllt

Chart-Erzeugung IIIChart wird erzeugt

CategoryDataset dataset = createDataSet(values);

JFreeChart chart = ChartFactory.createBarChart(

"" +question, // chart title

"", // domain axis label

"%", // range axis label

dataset, // data

PlotOrientation.VERTICAL, // orientation

true, // include legend

true, // tooltips

false // URLs

);

setzen das DataSet

Chart-Erzeugung IV

Fehlermeldungen IFehlermeldungen wichtig für den User um zu erkennen was er falsch gemacht hat! und wie er es richtig machen kann!

falsche Fehlermeldungen verwirren nur

Fehlermeldungen IIStandard-Fehlermeldungen von Grails treffen allgemeine Aussagen über die Fehler

sind ungeeignet für den normalen Nutzer zu spezifisch zu viele Informationen

Fehlermeldungen IIIFehlermeldungen angepasst anlegen eines neuen Verwalters oder Login

Problem: Anpassung der Fehlermeldungen im Workflow

Mockups IErste Entwürfe als HTML von allen Team-

Mitgliedern

Mockups II

Mockups III

Zusammenfassung aller Ideen

OberflächeStandard Grails Layout

Anpassung der Grails Styles mit CSS

AskI Oberfläche

Aufbau der GSPs IGrundlayout für alle GSPs in main.gsp

Definition von immer sichtbaren BereichenCSS-Includes, Locale-Auswahl, Kopf- und

FußzeilenDie eigentlichen Inhalte werden zur Laufzeit

mit <g:layoutBody /> eingefügt

Folgender Markup steht im Bodytag eines gewöhnlichen HTML-Grundgerüsts:

Aufbau der GSPs II

Einfühung einer TagLib

Kapselt MarkupVerbessert LesbarkeitSteigerung der WiederverwendbarkeitVerhinderung von duplicated Code

Einsatz von Ajax IProblem:

Abhängig von Auswahl eines Listen-Items soll andere Liste gefüllt werden

Klick zum Aktualisieren der zweiten Liste dem Nutzer möglichst ersparen

Lösung:

Einsatz von AjaxFüllen der 2. Liste bei onChange()-EventGute Unterstützung durch Grails

einfache UmsetzungUnstützte JavaScript Bibliotheken:

PrototypeDojoYahoo UI Library (YUI)

Einsatz von Ajax II

Zu implementierende Teile:In GSP:

In UmfrageController:

Einsatz von Ajax III

Aski - Demo

DEMO – Aski 0.9

ENDE

VIELEN DANK FÜR IHRE

AUFMERKSAMKEIT