Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
1
Web App-Entwicklung – der richtige Technologiemix macht’s
Tekom Frühjahrstagung Prof. Dr. Volkert Brosda Lic. Inform. José-Luis Muñoz
2
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
3
Mobile Kfz Schadensdokumentation
4
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
5
Web App
6
Typische Architektur Das macht der TR!
7
Problem Keine saubere Trennung, Keine Wiederver–wendung
8
Der richtige Technologiemix
9
Grundidee - Modularisierung
Sammlung von Variablen und Unterprogrammen Module für den Gebrauch bereitstellen Unterprogramme aus bereitgestellten Modulen aufrufen Trennung von Interface und Implementierung
10
Grundidee - Ablauf
11
Grundidee - Komponenten
Objekt basiert, Ereignis orientiert
12
Struktur X(HT)ML5- Template XML API/DOM, XML Werkzeuge, XML Sprachen
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns=" <head> ... <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href=" jquery.mobile min.css" /> <link rel="stylesheet" href=“myProject.css" /> <script src=" <script src=" jquery.mobile 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
13
Layout Sammlung von CSS Layoutklassen .myProject-rot {color:red;} ...
14
Ereignisbehandlung Anwendungsklassen Event Handler, andere Unter–
programme
15
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);
16
(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");
17
(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!
18
(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);
19
(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);
20
(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);
21
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; ... },
22
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
23
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“!
24
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!
25
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
26
XML zur Web App Client- Beschreibung
Codegenerierung mit XSLT <xsl:stylesheet xmlns:xsl=" version="2.0"> <xsl:variable name="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);
27
Fazit
28
Fazit Technische Redakteure können Web App Clients systematisch
aus wiederverwendbaren Komponenten entwickeln.
29
Vielen Dank für Ihre Aufmerksamkeit
Für Rückfragen:
Ähnliche Präsentationen
