FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer,...
-
Upload
immanuel-neiser -
Category
Documents
-
view
114 -
download
10
Transcript of FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer,...
AskIOnlinefragebogen
FH Zittau/Görlitz - Fachbereich Informatik
Dozent: Lars RönischD. Israel, D. Winter, C. Schäfer, M. Kohlsche
1
Agenda
System – Allgemein Backend
Workflow Mail-Versand PDF-Erzeugung Chart-Erzeugung
Frontend GUI
Demo
2
System - Allgemein
3
Einleitung
Web-Anwendung zur Durchführung einer Befragung Befragung zum Thema Kinder mir Downsyndrom Erstellt von René Hofmann
Umsetzung des Systems mit Grails Web-Framework Basiert auf Sprache Groovy
4
Anforderungen
Ausfüllung des Fragebogens Online Durch Passwort zu schützen
Auswertung Durch angemeldete Manager (Passwortschutz) Mittels Diagrammen
Sonstiges E-Mail-Versandt von Einladungen Einladungen als PDF-Dokument
5
System
Nutzung der von Grails vorgegebenen Projektstruktur
MVC-Pattern Datenmodell durch
Domain-Klassen Logik durch Controller Oberfläche durch Grails-
Server-Pages (vgl. JSP) Programmierung in
Groovy, Unterstützt durch Java
6
Backend
7
Workflow I
Umfrageausführung als Web-Flow Grails Web-Flow System, basiert auf Spring Web Flow Festlegung Start-, End- und Zwischenstates Web Flow System kontrolliert Ablauf, ein „Mittenrein“-
Springen ist somit unmöglich → sichert Datenkonsistenz Eingabenkontrolle beim Absenden einer Maske Speicherung der Ergebnisse am Ende des Flows
8
Workflow II
States der Umfrageausführung Start – Begrüßungsseite, evtl. Eingabemöglichkeit für
Ticket-Passwort Zwischenstates - Eingabeseiten für jede Kategorie (1-6) Ende – Abschlusseite
9
E-Mail-Versand
Nutzung der Java-Mail-API Versandt über SMTP Daten für SMTP werden in der Konfiguration gespeichert
und sind im Admin-Bereich einstellbar Nutzung für das Versenden von Einladungen Einladungstext ist ebenfalls in der Konfig. einstellbar Nutzung auch für Versandt zurückgesetzter Passwörter
der Manager
10
PDF-Erzeugung I
PDF-Erzeugung mit iText mächtiges Open-Source Framework für Java um PDF-Dateien zu
erstellen und zu erweitern
ausgelagert in extra Klasse PDF erhält kurzen Text, URL und ein Ticket
11
PDF-Erzeugung II
neues Dokument wir erstelltDocument 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();
12
PDF-Erzeugung III
PDF-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
13
PDF-Erzeugung IV
14
Chart-Erzeugung I
Chart-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
15
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
16
Chart-Erzeugung III
Chart wird erzeugtCategoryDataset 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
17
Chart-Erzeugung IV
18
Fehlermeldungen I
Fehlermeldungen wichtig für den User um zu erkennen was er falsch gemacht hat! und wie er es richtig machen kann!
falsche Fehlermeldungen verwirren nur
19
Fehlermeldungen II
Standard-Fehlermeldungen von Grails treffen allgemeine Aussagen über die Fehler
sind ungeeignet für den normalen Nutzer
zu spezifisch zu viele Informationen
20
Fehlermeldungen III
Fehlermeldungen angepasstanlegen eines neuen Verwalters oder Login
Problem: Anpassung der Fehlermeldungen im Workflow
21
Frontend
22
Mockups I
Erste Entwürfe als HTML von allen Team-Mitgliedern
23
Mockups II
24
Mockups III
Zusammenfassung aller Ideen
25
Oberfläche
Standard Grails Layout Anpassung der Grails
Styles mit CSS
26
Aufbau der GSPs I
Grundlayout für alle GSPs in main.gsp
Definition von immer sichtbaren Bereichen CSS-Includes, Locale-Auswahl, Kopf- und Fußzeilen
Die eigentlichen Inhalte werden zur Laufzeit mit <g:layoutBody /> eingefügt
28
Aufbau der GSPs II
Folgender Markup steht im Bodytag eines gewöhnlichen HTML-Grundgerüsts:
29
Einfühung einer TagLib
Kapselt Markup Verbessert Lesbarkeit Steigerung der Wiederverwendbarkeit Verhinderung von duplicated Code
30
Einsatz von Ajax I
Problem: Abhängig von Auswahl eines Listen-Items soll andere
Liste gefüllt werden Klick zum Aktualisieren der zweiten Liste dem Nutzer
möglichst ersparen
31
Einsatz von Ajax II
Lösung:
Einsatz von Ajax Füllen der 2. Liste bei onChange()-Event Gute Unterstützung durch Grails einfache Umsetzung
Unstützte JavaScript Bibliotheken: Prototype Dojo Yahoo UI Library (YUI)
32
Einsatz von Ajax III
Zu implementierende Teile: In GSP:
In UmfrageController:
33
Hilfe-System
Erreichbar von jeder Seite, da in main.gsp
Erklärung der Umfrage/ des Admin-Bereichs
Angelehnt an *.CHM Hierarchischer Aufbau Navigation über „Bücher“
und Step-Bar
34
Hilfe-System II
Erklärung der Elemente für nicht versiertere Benutzer Erörterung der Navigation und der Vorgänge während des
Ausfüllens der Umfrage
35
Hilfe-System III
„How-to“ für die Administration des Systems Erörterung der ersten Schritte
36
Schlussbemerkungen
Weitestgehend Browserunabhängig W3C-valider HTML und CCS-Code Skalierbar
Optimiert für Firefox und IE Workaround für min-width und visibility
performant, da kaum Grafiken Dafür ca. 80 CSS-Klassen
37
!Demo!
38
ENDEVIELEN DANK FÜR IHRE AUFMERKSAMKEIT
39