Web AppEntwicklung der richtige Technologiemix machts Tekom Frhjahrstagung
Web App-Entwicklung – der richtige Technologiemix macht’s Tekom Frühjahrstagung 10. 04. 2014 Prof. Dr. Volkert Brosda Lic. Inform. José-Luis Muñoz
Inhalt n Mobile Kfz Schadensdokumentation ¡ ¡ n Web App ¡ ¡ n Typische Architektur Web App Client – Problem der Wiederverwendung Der richtige Technologiemix ¡ ¡ ¡ n Motivation Demo Grundidee Code erzeugen mittels XML Templates (Callback-) Funktionen Anwendungsklassen XML zur Web App Client-Beschreibung nutzen Fazit 2
Mobile Kfz Schadensdokumentation
Motivation § § Schnelle Schadenserfassung Schnelle Schadensregulierung Hohe Kontrolle Hohe Aktualität 4
Web App
Typische Architektur Das macht der TR! 6
Problem Keine saubere Trennung, Keine Wiederver– wendung 7
Der richtige Technologiemix
Grundidee - Modularisierung § § Sammlung von Variablen und Unterprogrammen Module für den Gebrauch bereitstellen Unterprogramme aus bereitgestellten Modulen aufrufen Trennung von Interface und Implementierung 9
Grundidee - Ablauf 10
Grundidee - Komponenten Objekt basiert, Ereignis orientiert 11
Struktur X(HT)ML 5 Template XML API/DOM, XML Werkzeuge, XML Sprachen <? xml version="1. 0" encoding="UTF-8"? > <!DOCTYPE html> <html xmlns="http: //www. w 3. org/1999/xhtml"> <head>. . . <meta name="viewport" content="width=device-width, initialscale=1"/> <link rel="stylesheet" href="http: //code. jquery. com/mobile/1. 4. 0/ jquery. mobile-1. 4. 0. min. css" /> <link rel="stylesheet" href=“my. Project. css" /> <script src="http: //code. jquery. com/jquery. min. js"></script> <script src="http: //code. jquery. com/mobile/1. 4. 0/ jquery. mobile-1. 4. 0. min. js"></script>. . . </head> <body> <div data-role="page" id="seite 1">. . . <div role="main" class="ui-content"> <p>Page content goes here. </p> </div><!-- /content -->. . . </div><!-- /page -->. . . </body> </html> 12
Layout Sammlung von CSS Layoutklassen . my. Project-rot {color: red; }. . . 13
Ereignisbehandlung Anwendungsklassen Event Handler, andere Unter– programme 14
Code erzeugen mittels XML Templates function code_gen(response, status, xhr){ $(selektor). html(xhr. response. XML. document. Element); } JQuery, AJAX template. xhtml X(HT)ML 5 Template selektor=“. content“; //global $. get("template. xhtml", code_gen); 15
(Callback-) Funktionen Link dynamisch per Funktion erzeugen function gen_link(name){ return '<a href="" data-role="link">'+name+'</a>'; } „Link-Ereignis“ anbinden $("#seite 1 > div > p"). html(gen_link("Seite 2")). find("a"). attr("href", "#seite 2"); Funktionsaufruf, wiederverwendbare Funktion “gen_link“, “href“ wird nachgeliefert 16
(Callback-) Funktionen Beispiel: Event Handler anbinden $(document). on("pageshow", "#seite 1", function(){. . . $(“h 1“). add. Class(“my. Project-rot"); So nicht. . . wieder– } verwend– ); bar! Callback, Übergabe eines Event Handler als anonyme Funktion 17
(Callback-) Funktionen Benannter Event Handler function my. Project_layout_assign 1(){. . . $(“h 1“). add. Class(“my. Project-rot"); . . . } Callback, Funktionsübergabe an „on“ – wiederverwend– bar, aber keine Parameter! Ereignis zur Layoutanbindung auslösen $(document). on("pageshow", "#seite 1", my. Project_layout_assign 1); 18
(Callback-) Funktionen Parameter über Funktionsschema nutzen f=function(param){$(param[0]). add. Class(param[1]); } f([“h 1“, “my. . . “]) liefert $(“h 1“). add. Class(“my. . . "); Parametrisierung über lokales Objekt “event“ function my. Project_layout_assign 1(event){. . . f(event. data. param); . . . } „on“ hat den Parameter “event“ für Callback. Parametrisierung vorgesehen! $(document). on("pageshow", "#seite 1", {param: [“h 1“, “my. Project-rot“]}, my. Project_layout_assign 1); 19
(Callback-) Funktionen Parameter bei bestehenden Funktonen ergänzen Parameter global vorgegeben, höhere Wiederverwend– barkeit! function code_gen(response, status, xhr){ $(selektor). html(xhr. response. XML. document. Element); } template. xhtml selektor=“. content“; //global $. get("template. xhtml", code_gen); 20
Anwendungsklassen “inst“/XML wird hier generisch genutzt! function Superklasse(xml){ this. klasse=“Superklasse"; this. inst=new DOMParser(). parse. From. String(xml, "text/xml"); this. inst_=xml; this. methods=["get", . . . ]; // Liste der Methodennamen } Superklasse. prototype={ get: function eine. Methode 0(){ return this. inst. get. Elements. By. Tag. Name(“name")[0]. first. Child. data; . . . }, 21
Anwendungsklassen function Subklasse(xml){ this. klasse=“Subklasse"; this. inst=new DOMParser(). parse. From. String(xml, "text/xml"); this. inst_=xml; this. methods=["get“, “neu“]; // Liste der Methodennamen } function erweitert(){. . . }; //Implementation von “neu“ Subklasse. prototype=Superklasse. prototype; Subklasse. prototype["neu"]=erweitert; o_sub=new Subklasse( "<artikel><name>Artikel 1</name><preis>12</preis></artikel>"); o_sub[o_sub. methods[1]](); //anonymer Methodenaufruf 22
Anwendungsklassen Objekt lokal speichern o_sub. inst=o_sub. inst_; //XML-Instanz durch String ersetzen local. Storage. objekt=JSON. stringify(o_sub); „stringify“ funktioniert nur mit „string“! 23
XML zur Web App Client. Beschreibung nutzen • Layoutklassen dokumentieren • Anwendungsklassen beschreiben • Event Handler beschreiben • Web App erstellen, um Web App Client zu generieren In XML wird eine Abstrakte Syntax für Web App Client definiert! 24
XML zur Web App Client. Beschreibung Beispiel: Event Handler zur Layoutanbindung Definition der Funktion layout_assign 1 <? xml version="1. 0" encoding="UTF-8"? > <web_app_client projekt=„my. Project"> <layout_assign id="layout_assign 1">. . . </layout_assign> Aufruf der Funktion <event_layout ref="layout_assign 1"> layout_assign 1 <selektor>document</selektor> <events>pageshow</events> <event_data>{param: [“h 1“, “my. Project-rot“]}</event_data> <selektor_zur_anbindung>#seite 1</selektor_zur_anbindung> </event_layout>. . . </web_app_client> 25
XML zur Web App Client. Beschreibung Codegenerierung mit XSLT <xsl: stylesheet xmlns: xsl="http: //www. w 3. org/1999/XSL/Transform". . . version="2. 0"> <xsl: variable name="projekt" select="/web_app_client/@projekt"/> <xsl: template match="web_app_client">. . . <xsl: apply-templates select="event_layout“/> </xsl: template>. . . <xsl: template match="event_layout"> Konkrete Syntax z. B. <xsl: text>$(</xsl: text> für JQuery Version. . . XXX </xsl: stylesheet> $(document). on("pageshow", "#seite 1", {param: [“h 1“, “my. Project-rot“]}, my. Project_layout_assign 1); 26
Fazit
Fazit Technische Redakteure können Web App Clients systematisch aus wiederverwendbaren Komponenten entwickeln. 28
Vielen Dank für Ihre Aufmerksamkeit Für Rückfragen: volkert. brosda@hs-hannover. de 29
- Slides: 29