Java script data binding mit jQuery Mobile

1. Tobias Bosch & Stefan Scheidt / OPITZ CONSULTING GmbH JavaScript Data Binding mit jQuery Mobile

2. Wer sind wir? tobias.bosch@opitz-‐consulQng.com (@Qgbro) stefan.scheidt@opitz-‐consulQng.com (@beezlebug)

3. Märkte Kunden Leistungs- Fakten angebot n Java n Branchen- n IT-Strategie n Gründung 1990 n SOA übergreifend n Beratung n 400 Mitarbeiter n ORACLE n Über 600 n Implementierung n 8 Standorte in D/ n BI/DWH Kunden n Betrieb PL n Outtasking n Training Industrie / Versorger / Handel / Logistik / Telekommunikation Dienstleistungen 29% 29% 42% Öffentliche Auftraggeber / Banken & Versicherungen / Vereine & Verbände 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 GmbH 2011 Seite 3

4. Wer sind Sie?

5. In diesem Vortrag geht‘s um... ...die Entwicklung testbarer und wartbarer mobiler Web-‐Apps

6. Unser Beispiel

7. Unser Beispiel...

9. Mobile Web-‐Apps

10. Architektur

11. "MulQ Page Web App" Browser Server HTML-‐Page Controller Data Backend UI Values

12. "AJAX Web App" Browser Server Change AJAX-‐ Controller Ba Data Engine Events

13. "Single Page Web App" Browser Server Controller Data Backend

14. Bibliotheken

15. jQuery Mobile h=p://jquerymobile.com/

16. Noch einmal unser Beispiel...

17. <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

23. DOM-‐TransformaQon durch jQuery Mobile

24. V orhe <input type="checkbox" id="todo1"/> r <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

25. <input type="checkbox" id="todo1"/> <label for="todo1">create a mobile todo app</label> Nach <div class="ui-‐checkbox"> her <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

26. Manuelles Binding

27. $('#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>'; }

35. Das Ziel ist aber: function TodoController() { this.todos = []; this.inputText = ''; } TodoController.prototype = { addTodo: function() { this.todos.push({ name: this.inputText, done: false }); this.inputText = ''; } }

36. Angular JS DeclaraQve MVC with UI Templates Dependency InjecQon Two-‐Way Framework Data Binding h=p://angularjs.org/#/

37. Two-‐Way Databinding read read write Data-‐ write DOM Controller binding watch watch

38. Scopes Scope Expressions $get(<expr>) 'inputText' 'todos.length' $set(<expr>, <value>) Object ... $watch(<expr>, <callback>)

39. <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

40. function TodoController() { this.todos = []; this.inputText = ''; } TodoController.prototype = { addTodo: function() { this.todos.push({ name: this.inputText, done: false }); this.inputText = ''; } } Der Controller

41. <div data-‐role="page" TodoController-‐Scope ng:controller="TodoController"> inputText: 'new todo' erzeugt <input type="text" todos: [...] name="inputText" bindet bindet <div ng:repeat="todo in todos"> erzeugt Repeater SScope Repeater cope Repeater Scope todo: { todo: { todo: { <input type="checkbox" name="todo.done"/> done: false done: false done: false bindet name: 'makemoney' name: 'makemoney' name: 'makemoney' <label> {{todo.name}} </label> bindet } } }

42. Damit ist das Ziel fast erreicht...

43. Die DOM-‐ManipulaQonen von jQuery Mobile und Angular JS müssen "nur noch" koordiniert werden.

44. Dazu später mehr!

45. Angular JS DeclaraQve MVC with UI Templates Dependency InjecQon Two-‐Way Framework Data Binding h=p://angularjs.org/#/

46. 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(); }); }

49. 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);

53. Di für Controller function TodoController(todoStore) { ... } TodoController.$inject = ['todoStore'];

56. One more thing... IntegraQon von AngularJS und jQuery Mobile

57. 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

58. 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>

61. Mobile Events <div id="main" data-‐role="page" ng:event="swipeleft:showSettings()"> ... </div> <div id="settings" data-‐role="page" ng:event="swiperight:back()"> ... </div>

62. 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"); } };

65. Wait-‐Dialog Service waitDialog.show('loading'); waitDialog.hide(); waitDialog.show('click to abort', onClickCallback);

66. Fazit Auch bei der Entwicklung von JavaScript Clients sollten geeignete Entwurfsmuster angewendet werden!

67. Fazit Bibliotheken und Frameworks helfen bei der Umsetzung!

68. Fazit Eine praxiserprobte KombinaQon: jQuery Mobile + AngularJS + Adapter

69. In the hive 11: nectar and pollen by Max xx, hep://www.ﬂickr.com/photos/max_westby/4567762490 Books By Rodrigo Galindez, hep://www.ﬂickr.com/photos/rodrigogalindez/4637637337/

70. Vielen Dank für Ihr Interesse! @Qgbro @beezlebug

Java script data binding mit jQuery Mobile

Recommended

More Related Content

More from Stefan Scheidt (7)

Java script data binding mit jQuery Mobile