Java script data binding mit jQuery Mobile

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

description

JavaScript-Clients sind ein wichtiger Bestandteil des Mobile Computings, die wart- und testbare Entwicklung ist aber eine Herausforderung. Data Binding erleichtet das Unterfangen durch die klare Trennung von Anwendungscode und UI und vereinfacht den Code dadurch deutlich. Der Vortrag erläutert das Konzept und verdeutlicht die Vorteile an einem Beispiel unter Einsatz von AngularJS und jQuery Mobile.

Transcript of Java script data binding mit jQuery Mobile

Page 1: Java script data binding mit jQuery Mobile

JavaScript  Data  Binding  mit  jQuery  Mobile  

Tobias  Bosch  &  Stefan  Scheidt  /  OPITZ  CONSULTING  GmbH  

Page 2: Java script data binding mit jQuery Mobile

Wer  sind  wir?  

tobias.bosch@opitz-­‐consulQng.com  (@Qgbro)  

 stefan.scheidt@opitz-­‐consulQng.com  

(@beezlebug)    

Page 3: Java script data binding mit jQuery Mobile

© 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

Page 4: Java script data binding mit jQuery Mobile

Wer  sind  Sie?  

Page 5: Java script data binding mit jQuery Mobile

In  diesem  Vortrag  geht‘s  um...    

...die  Entwicklung  testbarer  und  wartbarer  mobiler  Web-­‐Apps  

Page 6: Java script data binding mit jQuery Mobile

Unser  Beispiel  

Page 7: Java script data binding mit jQuery Mobile

Unser  Beispiel...  

Page 8: Java script data binding mit jQuery Mobile
Page 9: Java script data binding mit jQuery Mobile

Mobile  Web-­‐Apps  

Page 10: Java script data binding mit jQuery Mobile

Architektur  

Page 11: Java script data binding mit jQuery Mobile

"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  

Page 12: Java script data binding mit jQuery Mobile

"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  

Page 13: Java script data binding mit jQuery Mobile

"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  

Page 14: Java script data binding mit jQuery Mobile

Bibliotheken  

Page 15: Java script data binding mit jQuery Mobile

jQuery  Mobile  

h=p://jquerymobile.com/  

Page 16: Java script data binding mit jQuery Mobile

Noch  einmal  unser  Beispiel...  

Page 17: Java script data binding mit jQuery Mobile

<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  

Page 18: Java script data binding mit jQuery Mobile

<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  

Page 19: Java script data binding mit jQuery Mobile

<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  

Page 20: Java script data binding mit jQuery Mobile

<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  

Page 21: Java script data binding mit jQuery Mobile

<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  

Page 22: Java script data binding mit jQuery Mobile

<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  

Page 23: Java script data binding mit jQuery Mobile

DOM-­‐TransformaQon  durch  jQuery  Mobile  

Page 24: Java script data binding mit 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  

Page 25: Java script data binding mit 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  

Nachher  

Page 26: Java script data binding mit jQuery Mobile

Manuelles  Binding  

Page 27: Java script data binding mit jQuery Mobile

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

Page 28: Java script data binding mit jQuery Mobile

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

Page 29: Java script data binding mit jQuery Mobile

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

Page 30: Java script data binding mit jQuery Mobile

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

Page 31: Java script data binding mit jQuery Mobile

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

Page 32: Java script data binding mit jQuery Mobile

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

Page 33: Java script data binding mit jQuery Mobile

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

Page 34: Java script data binding mit jQuery Mobile

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

Page 35: Java script data binding mit jQuery Mobile

function  TodoController()  {          this.todos  =  [];          this.inputText  =  '';  }    TodoController.prototype  =  {          addTodo:  function()  {                  this.todos.push({  

   name:  this.inputText,        done:  false      });  

               this.inputText  =  '';          }  }  

Das  Ziel  ist  aber:  

Page 36: Java script data binding mit jQuery Mobile

MVC  with  Dependency  InjecQon  

Angular  JS  

h=p://angularjs.org/#/  

Two-­‐Way  Data  Binding  

DeclaraQve  UI  Templates  

Framework  

Page 37: Java script data binding mit jQuery Mobile

Two-­‐Way  Databinding  

Data-­‐binding  

Controller  DOM  

read  write  

watch  

read  write  

watch  

Page 38: Java script data binding mit jQuery Mobile

Scopes  

Scope  

Object  

$watch(<expr>,  <callback>)  

$set(<expr>,  <value>)  

$get(<expr>)  Expressions  

'inputText'  

'todos.length'  

...  

Page 39: Java script data binding mit jQuery Mobile

<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  

Page 40: Java script data binding mit jQuery Mobile

function  TodoController()  {          this.todos  =  [];          this.inputText  =  '';  }    TodoController.prototype  =  {          addTodo:  function()  {                  this.todos.push({  

   name:  this.inputText,        done:  false      });  

               this.inputText  =  '';          }  }  

Der  Controller  

Page 41: Java script data binding mit jQuery Mobile

   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  

Page 42: Java script data binding mit jQuery Mobile

Damit  ist  das  Ziel  fast  erreicht...  

Page 43: Java script data binding mit jQuery Mobile

Die  DOM-­‐ManipulaQonen  von  

jQuery  Mobile  und  Angular  JS  

müssen  "nur  noch"  koordiniert  werden.  

Page 44: Java script data binding mit jQuery Mobile

Dazu  später  mehr!  

Page 45: Java script data binding mit jQuery Mobile

MVC  with  Dependency  InjecQon  

Angular  JS  

h=p://angularjs.org/#/  

Two-­‐Way  Data  Binding  

DeclaraQve  UI  Templates  

Framework  

Page 46: Java script data binding mit jQuery Mobile

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  

Page 47: Java script data binding mit jQuery Mobile

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  

Page 48: Java script data binding mit jQuery Mobile

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  

Page 49: Java script data binding mit jQuery Mobile

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  

Page 50: Java script data binding mit jQuery Mobile

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  

Page 51: Java script data binding mit jQuery Mobile

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  

Page 52: Java script data binding mit jQuery Mobile

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  

Page 53: Java script data binding mit jQuery Mobile

function  TodoController(todoStore)  {      ...  }    TodoController.$inject  =  ['todoStore'];  

Di  für  Controller  

Page 54: Java script data binding mit jQuery Mobile

function  TodoController(todoStore)  {      ...  }    TodoController.$inject  =  ['todoStore'];  

Di  für  Controller  

Page 55: Java script data binding mit jQuery Mobile

function  TodoController(todoStore)  {      ...  }    TodoController.$inject  =  ['todoStore'];  

Di  für  Controller  

Page 56: Java script data binding mit jQuery Mobile

One  more  thing...    

IntegraQon  von  AngularJS  und  jQuery  Mobile  

Page 57: Java script data binding mit 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  

Page 58: Java script data binding mit jQuery Mobile

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>  

Page 59: Java script data binding mit jQuery Mobile

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>  

Page 60: Java script data binding mit jQuery Mobile

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>  

Page 61: Java script data binding mit jQuery Mobile

Mobile  Events  

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

Page 62: Java script data binding mit jQuery Mobile

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

Page 63: Java script data binding mit jQuery Mobile

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

Page 64: Java script data binding mit jQuery Mobile

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

Page 65: Java script data binding mit jQuery Mobile

Wait-­‐Dialog  Service  

waitDialog.show('loading');    waitDialog.hide();  

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

Page 66: Java script data binding mit jQuery Mobile

Fazit  

Auch  bei  der  Entwicklung    von  JavaScript  Clients  

sollten  geeignete  Entwurfsmuster  angewendet  werden!  

 

Page 67: Java script data binding mit jQuery Mobile

Fazit  

Bibliotheken  und  Frameworks  helfen  bei  der  Umsetzung!  

 

Page 68: Java script data binding mit jQuery Mobile

Fazit  

Eine  praxiserprobte  KombinaQon:    

jQuery  Mobile  +  AngularJS  +  Adapter  

 

Page 69: Java script data binding mit jQuery Mobile

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/    

Page 70: Java script data binding mit jQuery Mobile

Vielen  Dank  für  Ihr  Interesse!  

 @Qgbro  

@beezlebug