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

AskI Oberfläche

27

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