Sprachen
Seiten
Rechtliche
JavaScript Data Binding mit jQuery Mobile
Tobias Bosch & Stefan Scheidt / OPITZ CONSULTING GmbH
Wer sind wir?
tobias.bosch@opitz-‐consulQng.com (@Qgbro)
stefan.scheidt@opitz-‐consulQng.com
(@beezlebug)
© OPITZ CONSULTING GmbH 2011 Seite 3
Das Bild kann nicht angezeigt werden. Dieser Computer verfügt möglicherweise über zu wenig Arbeitsspeicher, um das Bild zu öffnen, oder das
OPITZ CONSULTING Vorlage Powerpoint 2011; Version 1.3; 10.05.2011; TGA, KSH
1Pager • Layout ausschließlich für den
1Pager • Einsatz ist bei Konferenzen,
ext. Veranstaltungen etc. obligatorisch. Die Folie ist Folie 2 (nach der Titelfolie)
• Der Inhalt darf nicht verändert werden.
• Ausnahme: Der Block Märkte darf situativ um Partnerlogos (ORACLE, etc.) ergänzt werden
© OPITZ CONSULTING GmbH 2011
Märkte n Java n SOA n ORACLE n BI/DWH n Outtasking
Kunden n Branchen-
übergreifend n Über 600
Kunden
Leistungs- angebot n IT-Strategie n Beratung n Implementierung n Betrieb n Training
Fakten n Gründung 1990 n 400 Mitarbeiter n 8 Standorte in D/
PL
Industrie / Versorger / Telekommunikation
29%
Handel / Logistik / Dienstleistungen 29%
42% Öffentliche Auftraggeber /
Banken & Versicherungen / Vereine & Verbände
Wer sind Sie?
In diesem Vortrag geht‘s um...
...die Entwicklung testbarer und wartbarer mobiler Web-‐Apps
Unser Beispiel
Unser Beispiel...
Mobile Web-‐Apps
Architektur
"MulQ Page Web App"
Design: • Das Farbschema ist im Design als „OC 2009“ hinterlegt.
• Ebenso sind die Schri\arten als „OC 2009“ hinterlegt.
• Die Standardfarben sind:
Browser Server
Controller Backend
HTML-‐Page
UI Values Data
"AJAX Web App"
Design: • Das Farbschema ist im Design als „OC 2009“ hinterlegt.
• Ebenso sind die Schri\arten als „OC 2009“ hinterlegt.
• Die Standardfarben sind:
Browser
AJAX-‐ Engine
Server
Controller Change
Events Data Backend
"Single Page Web App"
Design: • Das Farbschema ist im Design als „OC 2009“ hinterlegt.
• Ebenso sind die Schri\arten als „OC 2009“ hinterlegt.
• Die Standardfarben sind:
Browser Server
Controller Backend Data
Bibliotheken
jQuery Mobile
h=p://jquerymobile.com/
Noch einmal unser Beispiel...
<div id="main" data-‐role="page"> <div data-‐role="header"> <h1>Todos</h1> <a href="">Save</a> <a href="#settings">Settings</a> </div> <div data-‐role="content"> <div data-‐role="fieldcontain"> <form data-‐ajax="false"> <input type="text"> </form> </div> <fieldset data-‐role="controlgroup"> <input type="checkbox" id="todo1"/> <label for="todo1">create a mobile todo app</label> </fieldset> </div> </div> jQuery Mobile Markup
<div id="main" data-‐role="page"> <div data-‐role="header"> <h1>Todos</h1> <a href="">Save</a> <a href="#settings">Settings</a> </div> <div data-‐role="content"> <div data-‐role="fieldcontain"> <form data-‐ajax="false"> <input type="text"> </form> </div> <fieldset data-‐role="controlgroup"> <input type="checkbox" id="todo1"/> <label for="todo1">create a mobile todo app</label> </fieldset> </div> </div> jQuery Mobile Markup
<div id="main" data-‐role="page"> <div data-‐role="header"> <h1>Todos</h1> <a href="">Save</a> <a href="#settings">Settings</a> </div> <div data-‐role="content"> <div data-‐role="fieldcontain"> <form data-‐ajax="false"> <input type="text"> </form> </div> <fieldset data-‐role="controlgroup"> <input type="checkbox" id="todo1"/> <label for="todo1">create a mobile todo app</label> </fieldset> </div> </div> jQuery Mobile Markup
<div id="main" data-‐role="page"> <div data-‐role="header"> <h1>Todos</h1> <a href="">Save</a> <a href="#settings">Settings</a> </div> <div data-‐role="content"> <div data-‐role="fieldcontain"> <form data-‐ajax="false"> <input type="text"> </form> </div> <fieldset data-‐role="controlgroup"> <input type="checkbox" id="todo1"/> <label for="todo1">create a mobile todo app</label> </fieldset> </div> </div> jQuery Mobile Markup
<div id="main" data-‐role="page"> <div data-‐role="header"> <h1>Todos</h1> <a href="">Save</a> <a href="#settings">Settings</a> </div> <div data-‐role="content"> <div data-‐role="fieldcontain"> <form data-‐ajax="false"> <input type="text"> </form> </div> <fieldset data-‐role="controlgroup"> <input type="checkbox" id="todo1"/> <label for="todo1">create a mobile todo app</label> </fieldset> </div> </div> jQuery Mobile Markup
<div id="main" data-‐role="page"> <div data-‐role="header"> <h1>Todos</h1> <a href="">Save</a> <a href="#settings">Settings</a> </div> <div data-‐role="content"> <div data-‐role="fieldcontain"> <form data-‐ajax="false"> <input type="text"> </form> </div> <fieldset data-‐role="controlgroup"> <input type="checkbox" id="todo1"/> <label for="todo1">create a mobile todo app</label> </fieldset> </div> </div> jQuery Mobile Markup
DOM-‐TransformaQon durch jQuery Mobile
<input type="checkbox" id="todo1"/> <label for="todo1">create a mobile todo app</label> <div class="ui-‐checkbox"> <input type="checkbox" name="todo.done" id="todo1"> <label class="ui-‐btn ui-‐btn-‐up-‐c ui-‐btn-‐icon-‐left ui-‐btn-‐corner-‐all ui-‐checkbox-‐off" for="todo1" data-‐theme="c"> <span class="ui-‐btn-‐inner ui-‐btn-‐corner-‐all"> <span class="ui-‐btn-‐text">create a mobile todo app</span> <span class="ui-‐icon ui-‐icon-‐checkbox-‐off ui-‐icon-‐shadow"></span> </span> </label> </div>
jQuery Mobile Markup TransformaIon
Vorher
<input type="checkbox" id="todo1"/> <label for="todo1">create a mobile todo app</label> <div class="ui-‐checkbox"> <input type="checkbox" name="todo.done" id="todo1"> <label class="ui-‐btn ui-‐btn-‐up-‐c ui-‐btn-‐icon-‐left ui-‐btn-‐corner-‐all ui-‐checkbox-‐off" for="todo1" data-‐theme="c"> <span class="ui-‐btn-‐inner ui-‐btn-‐corner-‐all"> <span class="ui-‐btn-‐text">create a mobile todo app</span> <span class="ui-‐icon ui-‐icon-‐checkbox-‐off ui-‐icon-‐shadow"></span> </span> </label> </div>
jQuery Mobile Markup TransformaIon
Nachher
Manuelles Binding
$('#addTodo').submit(function(event) { addTodo(); event.preventDefault(); }); function addTodo() { var inputText = $('#inputText').val(); var list = $('#todos'); var entryCount = list.find('input').length; list.append(entryTemplate(entryCount, inputText)); list.trigger('create'); $('#input').val(''); } function entryTemplate(index, name) { var id = 'todo' + index; return '<input type="checkbox" id="' + id + '"/>' + '<label for="' + id + '">' + name + '</label>'; }
$('#addTodo').submit(function(event) { addTodo(); event.preventDefault(); }); function addTodo() { var inputText = $('#inputText').val(); var list = $('#todos'); var entryCount = list.find('input').length; list.append(entryTemplate(entryCount, inputText)); list.trigger('create'); $('#input').val(''); } function entryTemplate(index, name) { var id = 'todo' + index; return '<input type="checkbox" id="' + id + '"/>' + '<label for="' + id + '">' + name + '</label>'; }
$('#addTodo').submit(function(event) { addTodo(); event.preventDefault(); }); function addTodo() { var inputText = $('#inputText').val(); var list = $('#todos'); var entryCount = list.find('input').length; list.append(entryTemplate(entryCount, inputText)); list.trigger('create'); $('#input').val(''); } function entryTemplate(index, name) { var id = 'todo' + index; return '<input type="checkbox" id="' + id + '"/>' + '<label for="' + id + '">' + name + '</label>'; }
$('#addTodo').submit(function(event) { addTodo(); event.preventDefault(); }); function addTodo() { var inputText = $('#inputText').val(); var list = $('#todos'); var entryCount = list.find('input').length; list.append(entryTemplate(entryCount, inputText)); list.trigger('create'); $('#input').val(''); } function entryTemplate(index, name) { var id = 'todo' + index; return '<input type="checkbox" id="' + id + '"/>' + '<label for="' + id + '">' + name + '</label>'; }
$('#addTodo').submit(function(event) { addTodo(); event.preventDefault(); }); function addTodo() { var inputText = $('#inputText').val(); var list = $('#todos'); var entryCount = list.find('input').length; list.append(entryTemplate(entryCount, inputText)); list.trigger('create'); $('#input').val(''); } function entryTemplate(index, name) { var id = 'todo' + index; return '<input type="checkbox" id="' + id + '"/>' + '<label for="' + id + '">' + name + '</label>'; }
$('#addTodo').submit(function(event) { addTodo(); event.preventDefault(); }); function addTodo() { var inputText = $('#inputText').val(); var list = $('#todos'); var entryCount = list.find('input').length; list.append(entryTemplate(entryCount, inputText)); list.trigger('create'); $('#input').val(''); } function entryTemplate(index, name) { var id = 'todo' + index; return '<input type="checkbox" id="' + id + '"/>' + '<label for="' + id + '">' + name + '</label>'; }
$('#addTodo').submit(function(event) { addTodo(); event.preventDefault(); }); function addTodo() { var inputText = $('#inputText').val(); var list = $('#todos'); var entryCount = list.find('input').length; list.append(entryTemplate(entryCount, inputText)); list.trigger('create'); $('#input').val(''); } function entryTemplate(index, name) { var id = 'todo' + index; return '<input type="checkbox" id="' + id + '"/>' + '<label for="' + id + '">' + name + '</label>'; }
$('#addTodo').submit(function(event) { addTodo(); event.preventDefault(); }); function addTodo() { var inputText = $('#inputText').val(); var list = $('#todos'); var entryCount = list.find('input').length; list.append(entryTemplate(entryCount, inputText)); list.trigger('create'); $('#input').val(''); } function entryTemplate(index, name) { var id = 'todo' + index; return '<input type="checkbox" id="' + id + '"/>' + '<label for="' + id + '">' + name + '</label>'; }
function TodoController() { this.todos = []; this.inputText = ''; } TodoController.prototype = { addTodo: function() { this.todos.push({
name: this.inputText, done: false });
this.inputText = ''; } }
Das Ziel ist aber:
MVC with Dependency InjecQon
Angular JS
h=p://angularjs.org/#/
Two-‐Way Data Binding
DeclaraQve UI Templates
Framework
Two-‐Way Databinding
Data-‐binding
Controller DOM
read write
watch
read write
watch
Scopes
Scope
Object
$watch(<expr>, <callback>)
$set(<expr>, <value>)
$get(<expr>) Expressions
'inputText'
'todos.length'
...
<div id="main" data-‐role="page"> <div data-‐role="header"> <h1>Todos</h1> <a href="">Save</a> <a href="#settings">Settings</a> </div> <div data-‐role="content"> <div data-‐role="fieldcontain"> <form data-‐ajax="false"> <input type="text"> </form> </div> <fieldset data-‐role="controlgroup"> <input type="checkbox" id="todo1"/> <label for="todo1">create a mobile todo app</label> </fieldset> </div> </div> Das DOM
function TodoController() { this.todos = []; this.inputText = ''; } TodoController.prototype = { addTodo: function() { this.todos.push({
name: this.inputText, done: false });
this.inputText = ''; } }
Der Controller
inputText: 'new todo' todos: [...]
TodoController-‐Scope
todo: { done: false name: 'makemoney' }
Repeater Scope todo: { done: false name: 'makemoney' }
Repeater Scope todo: { done: false name: 'makemoney' }
Repeater Scope
<div data-‐role="page" ng:controller="TodoController">
<input type="text" name="inputText"
<div ng:repeat="todo in todos">
<input type="checkbox" name="todo.done"/>
<label> {{todo.name}} </label>
erzeugt
bindet
bindet
erzeugt
bindet
bindet
Damit ist das Ziel fast erreicht...
Die DOM-‐ManipulaQonen von
jQuery Mobile und Angular JS
müssen "nur noch" koordiniert werden.
Dazu später mehr!
MVC with Dependency InjecQon
Angular JS
h=p://angularjs.org/#/
Two-‐Way Data Binding
DeclaraQve UI Templates
Framework
var readUrl = 'https://secure.openkeyval.org/'; var jsonp = ...; var waitdialog = ...; function read(key, success) { var url = readUrl + key; waitdialog.show(); jsonp(url, function(data) { success(data); waitdialog.hide(); }); }
Backend-‐Anbindung
var readUrl = 'https://secure.openkeyval.org/'; var jsonp = ...; var waitdialog = ...; function read(key, success) { var url = readUrl + key; waitdialog.show(); jsonp(url, function(data) { success(data); waitdialog.hide(); }); }
Backend-‐Anbindung
var readUrl = 'https://secure.openkeyval.org/'; var jsonp = ...; var waitdialog = ...; function read(key, success) { var url = readUrl + key; waitdialog.show(); jsonp(url, function(data) { success(data); waitdialog.hide(); }); }
Backend-‐Anbindung
angular.service('jsonp', jsonpFactory); angular.service('waitdialog', waitdialogFactory); function todoStoreFactory(jsonp, waitdialog) { function read(...) { ... } function write(...) { ... } return { read: read, write: write } } todoStoreFactory.$inject = ['jsonp', 'waitdialog']; angular.service('todostore', todoStoreFactory);
Services und DI mit Angular
angular.service('jsonp', jsonpFactory); angular.service('waitdialog', waitdialogFactory); function todoStoreFactory(jsonp, waitdialog) { function read(...) { ... } function write(...) { ... } return { read: read, write: write } } todoStoreFactory.$inject = ['jsonp', 'waitdialog']; angular.service('todostore', todoStoreFactory);
Services und DI mit Angular
angular.service('jsonp', jsonpFactory); angular.service('waitdialog', waitdialogFactory); function todoStoreFactory(jsonp, waitdialog) { function read(...) { ... } function write(...) { ... } return { read: read, write: write } } todoStoreFactory.$inject = ['jsonp', 'waitdialog']; angular.service('todostore', todoStoreFactory);
Services und DI mit Angular
angular.service('jsonp', jsonpFactory); angular.service('waitdialog', waitdialogFactory); function todoStoreFactory(jsonp, waitdialog) { function read(...) { ... } function write(...) { ... } return { read: read, write: write } } todoStoreFactory.$inject = ['jsonp', 'waitdialog']; angular.service('todostore', todoStoreFactory);
Services und DI mit Angular
function TodoController(todoStore) { ... } TodoController.$inject = ['todoStore'];
Di für Controller
function TodoController(todoStore) { ... } TodoController.$inject = ['todoStore'];
Di für Controller
function TodoController(todoStore) { ... } TodoController.$inject = ['todoStore'];
Di für Controller
One more thing...
IntegraQon von AngularJS und jQuery Mobile
jquery-‐mobile-‐angular-‐adapter
KoordinaQon von jQuery Mobile und Angular JS
Erweiterungen für mobile Web-‐Apps
Open Source unter heps://github.com/Qgbro/
jquery-‐mobile-‐angular-‐adapter
Paging in Listen
<div ng:repeat= "todo in todos.$paged()">
... </div> <div ng:if= "todos.$paged().hasMorePages()"> <a href="#" ngm:click= "todos.$paged().loadNextPage()"> Load more </a> </div>
Paging in Listen
<div ng:repeat= "todo in todos.$paged()">
... </div> <div ng:if= "todos.$paged().hasMorePages()"> <a href="#" ngm:click= "todos.$paged().loadNextPage()"> Load more </a> </div>
Paging in Listen
<div ng:repeat= "todo in todos.$paged()">
... </div> <div ng:if= "todos.$paged().hasMorePages()"> <a href="#" ngm:click= "todos.$paged().loadNextPage()"> Load more </a> </div>
Mobile Events
<div id="main" data-‐role="page" ng:event="swipeleft:showSettings()"> ... </div> <div id="settings" data-‐role="page" ng:event="swiperight:back()"> ... </div>
NavigaQon über Pages
function TodoController(todoStore, activePage) { ... } TodoController.prototype = { onActivate: function(prevscope) { if (prevscope && prevscope.storageKey) { this.storageKey = prevscope.storageKey; this.refreshTodos(); } }, showSettings: function() { this.activePage("#settings"); } };
NavigaQon über Pages
function TodoController(todoStore, activePage) { ... } TodoController.prototype = { onActivate: function(prevscope) { if (prevscope && prevscope.storageKey) { this.storageKey = prevscope.storageKey; this.refreshTodos(); } }, showSettings: function() { this.activePage("#settings"); } };
NavigaQon über Pages
function TodoController(todoStore, activePage) { ... } TodoController.prototype = { onActivate: function(prevscope) { if (prevscope && prevscope.storageKey) { this.storageKey = prevscope.storageKey; this.refreshTodos(); } }, showSettings: function() { this.activePage("#settings"); } };
Wait-‐Dialog Service
waitDialog.show('loading'); waitDialog.hide();
waitDialog.show('click to abort', onClickCallback);
Fazit
Auch bei der Entwicklung von JavaScript Clients
sollten geeignete Entwurfsmuster angewendet werden!
Fazit
Bibliotheken und Frameworks helfen bei der Umsetzung!
Fazit
Eine praxiserprobte KombinaQon:
jQuery Mobile + AngularJS + Adapter
In the hive 11: nectar and pollen by Max xx, hep://www.flickr.com/photos/max_westby/4567762490
Books
By Rodrigo Galindez, hep://www.flickr.com/photos/rodrigogalindez/4637637337/
Vielen Dank für Ihr Interesse!
@Qgbro
@beezlebug
Top Related