fh zittau/görlitz - fachbereich informatik dozent: lars rönisch d. israel, d. winter, c. schäfer,...
TRANSCRIPT
![Page 1: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/1.jpg)
AskIOnlinefragebogen
FH Zittau/Görlitz - Fachbereich Informatik
Dozent: Lars RönischD. Israel, D. Winter, C. Schäfer, M. Kohlsche
1
![Page 2: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/2.jpg)
Agenda
System – Allgemein Backend
Workflow Mail-Versand PDF-Erzeugung Chart-Erzeugung
Frontend GUI
Demo
2
![Page 3: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/3.jpg)
System - Allgemein
3
![Page 4: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/4.jpg)
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
![Page 5: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/5.jpg)
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
![Page 6: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/6.jpg)
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
![Page 7: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/7.jpg)
Backend
7
![Page 8: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/8.jpg)
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
![Page 9: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/9.jpg)
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
![Page 10: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/10.jpg)
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
![Page 11: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/11.jpg)
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
![Page 12: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/12.jpg)
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
![Page 13: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/13.jpg)
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
![Page 14: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/14.jpg)
PDF-Erzeugung IV
14
![Page 15: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/15.jpg)
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
![Page 16: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/16.jpg)
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
![Page 17: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/17.jpg)
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
![Page 18: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/18.jpg)
Chart-Erzeugung IV
18
![Page 19: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/19.jpg)
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
![Page 20: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/20.jpg)
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
![Page 21: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/21.jpg)
Fehlermeldungen III
Fehlermeldungen angepasstanlegen eines neuen Verwalters oder Login
Problem: Anpassung der Fehlermeldungen im Workflow
21
![Page 22: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/22.jpg)
Frontend
22
![Page 23: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/23.jpg)
Mockups I
Erste Entwürfe als HTML von allen Team-Mitgliedern
23
![Page 24: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/24.jpg)
Mockups II
24
![Page 25: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/25.jpg)
Mockups III
Zusammenfassung aller Ideen
25
![Page 26: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/26.jpg)
Oberfläche
Standard Grails Layout Anpassung der Grails
Styles mit CSS
26
![Page 28: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/28.jpg)
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
![Page 29: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/29.jpg)
Aufbau der GSPs II
Folgender Markup steht im Bodytag eines gewöhnlichen HTML-Grundgerüsts:
29
![Page 30: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/30.jpg)
Einfühung einer TagLib
Kapselt Markup Verbessert Lesbarkeit Steigerung der Wiederverwendbarkeit Verhinderung von duplicated Code
30
![Page 31: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/31.jpg)
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
![Page 32: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/32.jpg)
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
![Page 33: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/33.jpg)
Einsatz von Ajax III
Zu implementierende Teile: In GSP:
In UmfrageController:
33
![Page 34: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/34.jpg)
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
![Page 35: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/35.jpg)
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
![Page 36: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/36.jpg)
Hilfe-System III
„How-to“ für die Administration des Systems Erörterung der ersten Schritte
36
![Page 37: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/37.jpg)
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
![Page 38: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/38.jpg)
!Demo!
38
![Page 39: FH Zittau/Görlitz - Fachbereich Informatik Dozent: Lars Rönisch D. Israel, D. Winter, C. Schäfer, M. Kohlsche 1](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7349795902118c81c6/html5/thumbnails/39.jpg)
ENDEVIELEN DANK FÜR IHRE AUFMERKSAMKEIT
39