JavaScript Data Binding mit jQuery Mobile - MobileTech Conference Spring 2012

1. Stefan Scheidt | OPITZ CONSULTING GmbH JavaScript Data Binding mit jQuery Mobile

2. Wer bin ich? [email protected] (@stefanscheidt)

3. Mission Märkte Wir entwickeln gemeinsam mit allen  Branchenübergreifend Branchen Lösungen, die dazu führen, dass  Über 600 Kunden sich diese Organisationen besser entwickeln 29% als ihr Wettbewerb. 29% Handel / Logistik / Dienstleistungen Industrie / Versorger / Unsere Dienstleistung erfolgt Telekommunikation partnerschaftlich und ist auf eine langjährige 42% Zusammenarbeit angelegt. Öffentliche Auftraggeber / Banken und Versicherungen / Vereine und Verbände Leistungsangebot Eckdaten  Business IT Alignment  Gründung 1990  Business Information Management  400 Mitarbeiter  Business Process Management  8 Standorte  Anwendungsentwicklung  SOA und System-Integration  IT-Infrastruktur-Management © OPITZ CONSULTING GmbH 2012 Seite 3

4. Wer sind Sie?

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

8. Die Beispiel-App ... http://tigbro.github.com/todo-mobile https://github.com/tigbro/todo-mobile

10. Architektur

11. "Multi 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. Komponenten-Bibliotheken

15. jQuery Mobile http://jquerymobile.com/

16. Die Beispiel-App

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

22. DOM-Transformation durch jQuery-Mobile

23. <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 Transformation

24. <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 Transformation

25. Two Way Data Binding

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'); $('#inputText').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 Declarative MVC with UI Templates Dependency Injection Two-Way Framework Data Binding http://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. Demo

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

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

42. <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 Scope Repeater Scope 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 }}

43. Damit ist das Ziel fast erreicht, aber...

44. jQuery Mobile und AngularJS Das Problem: Die DOM-Manipulationen von jQuery Mobile und AngularJS müssen koordiniert werden!

45. jQuery Mobile und AngularJS Die Lösung: jQuery Mobile Angular Adapter

46. jQuery Mobile Angular Adapter Koordination von jQuery Mobile und AngularJS Erweiterungen für mobile Web-Apps Open Source unter https://github.com/tigbro/ jquery-mobile-angular-adapter

47. Dependency Injection

48. Dependency Injection ist ein Entwurfsmuster und dient dazu, die Abhängigkeiten zwischen Komponenten zu minimieren. Es überträgt die Verantwortung für das Erzeugen und die Verknüpfung von Objekten an ein extern konfigurierbares Framework http://de.wikipedia.org/wiki/Dependency_Injection

49. Dependency Injection ist ein Entwurfsmuster und dient dazu, die Abhängigkeiten zwischen Komponenten zu minimieren. Es überträgt die Verantwortung für das Erzeugen und die Verknüpfung von Objekten an ein extern konfigurierbares Framework http://de.wikipedia.org/wiki/Dependency_Injection

50. Beispiel: Backend-Anbindung var readUrl = 'https://secure.openkeyval.org/'; TodoController.prototype.refreshTodos() { var self = this; read(readUrl, function(response) { self.todos = response; }); }

51. Beispiel: Backend-Anbindung var readUrl = 'https://secure.openkeyval.org/'; TodoController.prototype.refreshTodos() { var self = this; read(readUrl, function(response) { self.todos = response; }); }

52. Beispiel: Backend-Anbindung var readUrl = 'https://secure.openkeyval.org/'; function read(key, success) { var url = readUrl + key; waitdialog.show(); jsonp(url, function(data) { success(data); waitdialog.hide(); }); }

55. Beispiel: Backend-Anbindung waitDialog todoStore key value todoController key value ... ... key value read ... todoStore waitDialog jsonp jsonp key value ... ... created created by with "new" Factories

56. Beispiel: Backend-Anbindung waitDialog key value todoController todoStore ... ... key value key value todoStore waitDialog jsonp jsonp key value ... ... created by Dependency Injection

57. Services und DI mit Angular angular.service('jsonp', jsonpFactory); angular.service('waitdialog', waitdialogFactory);

58. Services und DI mit Angular angular.service('jsonp', jsonpFactory); angular.service('waitdialog', waitdialogFactory); function todoStoreFactory() { function read(key, success) { ... } // ... return { read: read // ... } }

59. Services und DI mit Angular angular.service('jsonp', jsonpFactory); angular.service('waitdialog', waitdialogFactory); function todoStoreFactory(jsonp, waitdialog) { function read(key, success) { ... } // ... return { read: read, // ... } } todoStoreFactory.$inject = ['jsonp', 'waitdialog'];

60. Services und DI mit Angular angular.service('jsonp', jsonpFactory); angular.service('waitdialog', waitdialogFactory); function todoStoreFactory(jsonp, waitdialog) { function read(key, success) { ... } // ... return { read: read // ... } } todoStoreFactory.$inject = ['jsonp', 'waitdialog']; angular.service('todoStore', todoStoreFactory);

61. DI für Controller // ... angular.service('todoStore', ...);

62. DI für Controller // ... angular.service('todoStore', ...); function TodoController(todoStore) { // do something with todoStore ... } TodoController.$inject = ['todoStore'];

63. jQuery Mobile Angular Adapter Koordination von jQuery Mobile und AngularJS Erweiterungen für mobile Web-Apps Open Source unter https://github.com/tigbro/ jquery-mobile-angular-adapter

64. jQuery Mobile Angular Adapter Mobile Events

65. <div id="main" data-role="page" ng:controller="TodoController" ngm:pagebeforeshow="refreshTodos()"> ... </div> Unterstütze Events: click swipe pagebeforeshow swiperight pageshow swipeleft pagebeforehide tap pagehide taphold

66. jQuery Mobile Angular Adapter Navigation

67. <a href="#welcomePage">

68. <a href="" ngm:click="$navigate('welcomePage')">

69. <a href="" ngm:click="$navigate(login(), 'success:welcomePage', 'failure:loginPage')">

70. <a href="" ngm:click="$navigate(login(), 'success:slide:welcomePage', 'failure:loginPage')">

71. jQuery Mobile Angular Adapter Shared Controller

72. LoginPage <div id="loginPage" Scope ng:controller="LoginController"> login <a ngm:click="login()">

73. LoginPage <div id="loginPage" Scope ng:controller="LoginController"> login <a ngm:click="login()"> <div id="welcomePage" WelcomePage ng:controller="WelcomeController"> Scope logout <a ngm:click="logout()">

74. LoginPage <div id="loginPage" Scope ngm:shared-controller= Authentication- "auth:AuthenticationController"> auth Controller Scope <a ngm:click="login()"> login logout <div id="welcomePage" WelcomePage ngm:shared-controller= Scope "auth:AuthenticationController"> auth <a ngm:click="logout()">

75. LoginPage <div id="loginPage" Scope ngm:shared-controller= Authentication- "auth:AuthenticationController"> auth Controller Scope <a ngm:click="auth.login()"> login logout <div id="welcomePage" WelcomePage ngm:shared-controller= Scope "auth:AuthenticationController"> auth <a ngm:click="auth.logout()">

76. jQuery Mobile Angular Adapter Wait Dialog

77. waitDialog.show('loading'); waitDialog.hide(); waitDialog.show('click to abort', onClickCallback);

78. One more thing...

79. Sencha Touch Angular Adapter Koordination von Sencha Touch und Angular JS Erweiterungen für mobile Web-Apps semantisches HTML Markup! Open Source unter https://github.com/tigbro/ sencha-touch-angular-adapter

80. Sencha Touch Angular Adapter Koordination von Sencha Touch und Angular JS Erweiterungen für mobile Web-Apps semantisches HTML Markup! Open Source unter https://github.com/tigbro/ sencha-touch-angular-adapter

81. Plain Sencha Touch <!DOCTYPE html> <html> <head> <title>TodoMobile</title> <link rel="stylesheet" href="lib/sencha-touch.css"/> <script src="lib/sencha-touch-1.1.0.js"></script> <script src="todo_sencha.js"></script> </head> <body> </body> </html>

82. new Ext.Application({launch: function() { new Ext.Carousel({ fullscreen: true, items: [{xtype: 'panel', scroll: true, dockedItems: [{xtype: 'toolbar', dock: 'top', title: 'Todos', items: [{xtype: 'button', text: 'Save'}, {xtype: 'spacer'}, {xtype: 'button', text: 'Settings'}]}], items: [{xtype: 'textfield', placeHolder: 'enter your todo here', listeners: {action: addTodo}}, todoPanel]} // Settings panel omitted ]}); }});

83. <st:carousel ng:controller="TodoController"> <st:panel id="todos"> <st:toolbar dock="top" title="Todos"> <st:button text="Save" st:event="{tap:'saveTodos()'}"/> </st:toolbar> <st:textfield name="inputText" st:event="{action:'addTodo()'}"/> <st:checkboxfield ng:repeat="todo in todos" name="todo.done" label="{{todo.name}}"/> </st:panel> </st:carousel>

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

85. Fazit Bibliotheken und Frameworks helfen bei der Umsetzung!

86. In the hive 11: nectar and pollen by Max xx, http://www.flickr.com/photos/max_westby/4567762490 Books By Rodrigo Galindez, http://www.flickr.com/photos/rodrigogalindez/4637637337/ IMG_1300-Edit by Susan E Adams, http://www.flickr.com/photos/susanad813/3912914836/ Doble Via by amslerPIX, http://www.flickr.com/photos/amslerpix/6242266697/ MacBook Pro Keyboard by superstrikertwo, http://www.flickr.com/photos/superstrikertwo/4989727256/ Stubborn Last Drop by RogueSun Media, http://www.flickr.com/photos/shuttercat7/627798443/

87. Vielen Dank für Ihr Interesse! @stefanscheidt

JavaScript Data Binding mit jQuery Mobile - MobileTech Conference Spring 2012

Recommended

More Related Content

What's hot (6)

Viewers also liked (8)

More from OPITZ CONSULTING Deutschland (20)

JavaScript Data Binding mit jQuery Mobile - MobileTech Conference Spring 2012