Fakultät ET/IT, Institut für Automatisierungstechnik, Professur für Prozessleittechnik Päsentation zur Belegarbeit: XML & Web Angela Wobar XML & Web Angela Wobar

1.Einordnung 2.Anforderungen 3.Vorgehen 4.D3js 5.Auswertung 6.Vorstelllung der Lösung 2 Gliederung XML & Web Angela Wobar

Warum modellgetriebene Softwareentwicklung? Ziel der Arbeit ist die generische Erstellung einer Prozessvisualisierung 3 Einordnung XML & Web Angela Wobar

Funktionale Anforderungen F1 Die Prozessvisualisierung soll eine grafische Darstellung der Prozesswerte enthalten F2 Die Prozessvisualisierung soll eine tabellarische Darstellung der Prozesswerte enthalten F3 Die dargestellten Werte sollen zyklisch mittels WebServices aktualisiert werden Qualitätsmerkmale Q1 Die Clientanwendung kann plattformunabhängig verwendet werden Q2 Die Clientanwendung soll moderne Webstandards umsetzen und möglichst intuitiv bedienbar sein Q3 Die zu erstellende Transformation soll umgebungsunabhängig implementiert werden Q4 Die Verwendung der Transformation und damit der Clientanwendung kann unabhängig von der vorhandenen Kleinversuchsanlage erfolgen. 4 Anforderungen XML & Web Angela Wobar

Erstellung einer XSD zur Validierung einer XML -> daraus wird via XSL Transformation eine HTML Seite geschaffen 5 Vorgehen XML & Web Angela Wobar

XML-Schema: 6 Vorgehen XML & Web Angela Wobar

XML-Schema: 7 Vorgehen XML & Web Angela Wobar

Entwicklung einer Webbasierten Lösung unter Verwendung von jQuery, HTML5, CSS3 Unterstützung von responsive Webdesign Font Awesome Icons und jQuery UI Themeroller zur einfachen Anpassbarkeit des Aussehens Einbinden grafischer Elemente unter Verwendung von D3js 8 Vorgehen XML & Web Angela Wobar

JavaScript Bibliothek zur Manipulation von datenbasierten Dokumenten unter Nutzung von HTML, SVG, CSS 9 D3 js - DataDrivenDocuments XML & Web Angela Wobar Quelle:

Bietet Methoden zur einfachen, performanten und dynamischen DOM-Manipulation 10 D3 js XML & Web Angela Wobar

Für die Prozessvisualisierung: Nutzung eines Projekts der D3-Community: D3 Liquid Fill Gauge Erstellung einer eigenen Funktion zur Darstellung von index- basierten Liniendiagrammen: lineChart.js 11 D3 js XML & Web Angela Wobar

Funktionelle Anforderungen konnten erfüllt werden Qualitative Anforderungen nur teilweise: Q1 und Q2 erfüllt (durch Entwicklung einer intuitiv nutzbaren Webanwendung) Responsive Web nur teilweise umsetzbar (abhängig von zugrundeliegender XML) Q4 (Unabhängigkeit von der Kleinversuchsanlage) konnte nicht erfüllt werden 12 Auswertung XML & Web Angela Wobar

13 Vorstellung des Ergebnisses XML & Web Angela Wobar

XML & Web Angela Wobar