1 Aski OnlinefragebogenFachhochschule Zittau/Görlitz Fachbereich Informatik Denny Israel, Daniel Winter Christian Schäfer, Michael Kohlsche Dozent: Lars Rönisch

2 Aski - Einleitung Web-Anwendung zur Durchführung einer BefragungBefragung zum Thema Kinder mir Downsyndrom Erstellt von René Hofmann Umsetzung des Systems mit Grails Web-Framework Basiert auf Sprache Groovy

3 Aski - Anforderungen Aufüllung des Fragebogens Auswertung SonstigesOnline Durch Passwort zu schützen Auswertung Durch angemeldete Manager (Passwortschutz) Mittels Diagrammen Sonstiges -Versandt von Einladungen Einladungen als PDF-Dokument

4 Aski - System Nutzung der von Grails vorgegebenen ProjektstrukturMVC-Pattern Datenmodell durch Domain-Klassen Logik durch Controller Oberfläche durch Grails- Server-Pages (vgl. JSP) Programmierung in Groovy, Unterstützt durch Java

5 Aski - Workflow Umfrageausführung als Web-FlowGrails 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

6 Aski - Workflow States der UmfrageausführungStart – Begrüßungsseite, evtl. Eingabemöglichkeit für Ticket-Passwort Zwischenstates - Eingabeseiten für jede Kategorie (1- 6) Ende – Abschlusseite

7 Aski - Mail Nutzung der Java-Mail-API Versandt über SMTPDaten 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

8 PDF-Erzeugung I PDF-Erzeugung mit iTextmä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

9 PDF-Erzeugung II neues Dokument wir erstelltDocument document = new Document(); Ränder werden gesetzt document.setMargins(75, 75, 75, 75); Paragraphen werden hinzugefügt Paragraph paragraph = new Paragraph(); Font font = new Font(); Schriftgröße, Style font.setSize(14); font.setStyle(Font.BOLD); paragraph.setFont(font); paragraph.add(subject); document.add(paragraph); Dokument wird geschlossen document.close();

10 PDF-Erzeugung III PDF-Datei wird nicht auf die Festplatte geschriebenals 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

11 PDF-Erzeugung IV

12 Chart-Erzeugung I Chart-Erzeugung mit JFreeChartsehr 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

13 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

14 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

15 Chart-Erzeugung IV

16 Fehlermeldungen I Fehlermeldungen wichtig für den Userum zu erkennen was er falsch gemacht hat! und wie er es richtig machen kann! falsche Fehlermeldungen verwirren nur

17 Fehlermeldungen II Standard-Fehlermeldungen von Grailstreffen allgemeine Aussagen über die Fehler sind ungeeignet für den normalen Nutzer zu spezifisch zu viele Informationen

18 Fehlermeldungen III Fehlermeldungen angepasstanlegen eines neuen Verwalters oder Login Problem: Anpassung der Fehlermeldungen im Workflow

19 Mockups I Erste Entwürfe als HTML von allen Team-Mitgliedern

20 Mockups II

21 Mockups III Zusammenfassung aller Ideen> 3 Mockups als Inspiration / Anregung

22 Oberfläche Standard Grails Layout Anpassung der Grails Styles mit CSS

23 AskI Oberfläche Navi Progressbar Frage-abschnitte I18n-buttons

24 Aufbau der GSPs I Grundlayout für alle GSPs in main.gspDefinition von immer sichtbaren Bereichen CSS-Includes, Locale-Auswahl, Kopf- und Fußzeilen Die eigentlichen Inhalte werden zur Laufzeit mit eingefügt GSPs die nicht auf main.gsp basieren > startUmfrage > endUmfrage

25 Aufbau der GSPs II Folgender Markup steht im Bodytag eines gewöhnlichen HTML-Grundgerüsts: SubmitButton  veranlasst action Möglichst wenig hart gecodete Texte Verwenden von messages für i18n Kapseln von markup mit taglib  Wird erstellt mit „grails create-tag-lib“

26 Einfühung einer TagLibKapselt Markup Verbessert Lesbarkeit Steigerung der Wiederverwendbarkeit Verhinderung von duplicated Code >Taglib für ProgressBar >Current step und vorhergende steps werden gefärbt >Andere steps sind weiß

27 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

28 Einsatz von Ajax II Lösung: Einsatz von AjaxFüllen der 2. Liste bei onChange()-Event Gute Unterstützung durch Grails  einfache Umsetzung Unstützte JavaScript Bibliotheken: Prototype Dojo Yahoo UI Library (YUI)

29 Einsatz von Ajax III Zu implementierende Teile: In GSP:In UmfrageController: Ander libs: dojo yahoo ui

30 Aski - Demo DEMO – Aski 0.9

31 VIELEN DANK FÜR IHRE AUFMERKSAMKEITENDE VIELEN DANK FÜR IHRE AUFMERKSAMKEIT