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 Mobile Kfz Schadensdokumentation Web App Motivation Demo Web App Typische Architektur Web App Client – Problem der Wiederverwendung Der richtige Technologiemix Grundidee Code erzeugen mittels XML Templates (Callback-) Funktionen Anwendungsklassen XML zur Web App Client-Beschreibung nutzen Fazit
Mobile Kfz Schadensdokumentation
Motivation Schnelle Schadenserfassung Schnelle Schadensregulierung Hohe Kontrolle Hohe Aktualität Fassen Sie es als all diejenigen Aktivitäten auf, die den Wissenserwerb unterwegs von einem Mobilgerät aus ermöglichen
Web App
Typische Architektur Das macht der TR!
Problem Keine saubere Trennung, Keine Wiederver–wendung
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
Grundidee - Ablauf
Grundidee - Komponenten Objekt basiert, Ereignis orientiert
Struktur X(HT)ML5- Template XML API/DOM, XML Werkzeuge, XML Sprachen <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ... <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/ jquery.mobile-1.4.0.min.css" /> <link rel="stylesheet" href=“myProject.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="seite1"> <div role="main" class="ui-content"> <p>Page content goes here.</p> </div><!-- /content --> </div><!-- /page --> </body> </html> X(HT)ML5- Template XML API/DOM, XML Werkzeuge, XML Sprachen
Layout Sammlung von CSS Layoutklassen .myProject-rot {color:red;} ...
Ereignisbehandlung Anwendungsklassen Event Handler, andere Unter– programme
Code erzeugen mittels XML Templates function code_gen(response, status, xhr){ $(selektor).html(xhr.responseXML.documentElement); } JQuery, AJAX X(HT)ML5 Template template.xhtml selektor=“.content“;//global $.get("template.xhtml", code_gen);
(Callback-) Funktionen Link dynamisch per Funktion erzeugen function gen_link(name){ return '<a href="" data-role="link">'+name+'</a>'; } Funktionsaufruf, wiederverwendbare Funktion “gen_link“, “href“ wird nachgeliefert „Link-Ereignis“ anbinden $("#seite1 > div > p").html(gen_link("Seite 2")). find("a").attr("href","#seite2");
(Callback-) Funktionen Beispiel: Event Handler anbinden Callback, Übergabe eines Event Handler als anonyme Funktion $(document).on("pageshow", "#seite1", function(){ ... $(“h1“).addClass(“myProject-rot"); } ); So nicht wieder–verwend–bar!
(Callback-) Funktionen Benannter Event Handler Callback, Funktions-übergabe an „on“ – wiederverwend–bar, aber keine Parameter! function myProject_layout_assign1(){ ... $(“h1“).addClass(“myProject-rot"); } Ereignis zur Layoutanbindung auslösen $(document).on("pageshow", "#seite1", myProject_layout_assign1);
(Callback-) Funktionen Parameter über Funktionsschema nutzen f=function(param){$(param[0]).addClass(param[1]);} f([“h1“,“my...“]) liefert $(“h1“).addClass(“my..."); Parametrisierung über lokales Objekt “event“ „on“ hat den Parameter “event“ für Callback-Parametrisierung vorgesehen! function myProject_layout_assign1(event){ ... f(event.data.param); } $(document).on("pageshow", "#seite1", {param:[“h1“,“myProject-rot“]}, myProject_layout_assign1);
(Callback-) Funktionen Parameter global vorgegeben, höhere Wiederverwend–barkeit! Parameter bei bestehenden Funktonen ergänzen function code_gen(response, status, xhr){ $(selektor).html(xhr.responseXML.documentElement); } template.xhtml selektor=“.content“;//global $.get("template.xhtml", code_gen);
Anwendungsklassen “inst“/XML wird hier generisch genutzt! function Superklasse(xml){ this.klasse=“Superklasse"; this.inst=new DOMParser(). parseFromString(xml,"text/xml"); this.inst_=xml; this.methods=["get",...]; // Liste der Methodennamen } Superklasse.prototype={ get: function eineMethode0(){ return this.inst.getElementsByTagName(“name")[0].firstChild.data; ... },
Anwendungsklassen function Subklasse(xml){ this.klasse=“Subklasse"; this.inst=new DOMParser(). parseFromString(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>Artikel1</name><preis>12</preis></artikel>"); o_sub[o_sub.methods[1]](); //anonymer Methodenaufruf
Anwendungsklassen Objekt lokal speichern o_sub.inst=o_sub.inst_; //XML-Instanz durch String ersetzen localStorage.objekt=JSON.stringify(o_sub); „stringify“ funktioniert nur mit „string“!
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!
XML zur Web App Client- Beschreibung Beispiel: Event Handler zur Layoutanbindung Definition der Funktion layout_assign1 <?xml version="1.0" encoding="UTF-8"?> <web_app_client projekt=„myProject"> <layout_assign id="layout_assign1"> ... </layout_assign> <event_layout ref="layout_assign1"> <selektor>document</selektor> <events>pageshow</events> <event_data>{param:[“h1“,“myProject-rot“]}</event_data> <selektor_zur_anbindung>#seite1</selektor_zur_anbindung> </event_layout> ... </web_app_client> Aufruf der Funktion layout_assign1
XML zur Web App Client- Beschreibung Codegenerierung mit XSLT <xsl:stylesheet xmlns:xsl="http://www.w3.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"> <xsl:text>$(</xsl:text> ... </xsl:stylesheet> Konkrete Syntax z.B. für JQuery Version XXX $(document).on("pageshow", "#seite1", {param:[“h1“,“myProject-rot“]}, myProject_layout_assign1);
Fazit
Fazit Technische Redakteure können Web App Clients systematisch aus wiederverwendbaren Komponenten entwickeln.
Vielen Dank für Ihre Aufmerksamkeit Für Rückfragen: volkert.brosda@hs-hannover.de