fv1_brosda_munoz
Werbung
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
Typische Architektur
Web App Client – Problem der Wiederverwendung
Der richtige Technologiemix
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)ML5Template
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, 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=“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>
12
Layout
Sammlung von CSS Layoutklassen
.myProject-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.responseXML.documentElement);
}
JQuery,
AJAX
template.xhtml
X(HT)ML5
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
$("#seite1 > div > p").html(gen_link("Seite 2")).
find("a").attr("href","#seite2");
Funktionsaufruf,
wiederverwendbare
Funktion “gen_link“,
“href“ wird
nachgeliefert
16
(Callback-) Funktionen
Beispiel: Event Handler anbinden
$(document).on("pageshow", "#seite1", function(){
...
$(“h1“).addClass(“myProject-rot");
So nicht
...
wieder–
}
verwend–
);
bar!
Callback,
Übergabe
eines Event
Handler als
anonyme
Funktion
17
(Callback-) Funktionen
Benannter Event Handler
function myProject_layout_assign1(){
...
$(“h1“).addClass(“myProject-rot");
...
}
Callback,
Funktionsübergabe
an „on“ –
wiederverwend–
bar, aber keine
Parameter!
Ereignis zur Layoutanbindung auslösen
$(document).on("pageshow", "#seite1", myProject_layout_assign1);
18
(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“
function myProject_layout_assign1(event){
...
f(event.data.param);
...
}
„on“ hat den
Parameter “event“
für CallbackParametrisierung
vorgesehen!
$(document).on("pageshow", "#seite1", {param:[“h1“,“myProject-rot“]},
myProject_layout_assign1);
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.responseXML.documentElement);
}
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().
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;
...
},
21
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
22
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“!
23
XML zur Web App ClientBeschreibung 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 ClientBeschreibung
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>
Aufruf der Funktion
<event_layout ref="layout_assign1">
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>
25
XML zur Web App ClientBeschreibung
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">
Konkrete Syntax
<xsl:text>$(</xsl:text>
z.B. für JQuery
...
Version XXX
</xsl:stylesheet>
$(document).on("pageshow", "#seite1", {param:[“h1“,“myProject-rot“]},
myProject_layout_assign1);
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:
[email protected]
29