Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Data Binding in qooxdoo

6,020 views

Published on

My final presentation of my master thesis. The topic was the data binding layer of the javascript framework qooxdoo which i created during the thesis.

Published in: Technology, Business
  • Be the first to comment

Data Binding in qooxdoo

  1. 1. Data Binding in qooxdoo Intelligente und umfassende Datenbindung für moderne Webanwendungen in qooxdoo Master Thesis - Martin Wittemann martin.wittemann@1und1.de HS-Karlsruhe 1&1 Internet AG 16.04.2009
  2. 2. Introduction
  3. 3. Data Binding Model View
  4. 4. Data Binding Model View
  5. 5. Data Binding Formating Filtering Sorting Model View Validation Converting
  6. 6. Why? Faster Advantage over Bug 18 and 19 programming competitors
  7. 7. JavaScript • All objects are assoziative arrays • Different ways to call a function: var doFunc = function() { // function code } var obj = {do: doFunc}; obj.do(); // 1. obj[quot;doquot;](); // 2. obj.do.call(); // 3. obj[quot;doquot;][quot;callquot;](); // 4. doFunc.call(obj); // 5. doFunc[quot;callquot;](obj); // 6. obj[quot;doquot;].apply(); // 7. obj[quot;doquot;][quot;applyquot;](); // 8.
  8. 8. Analysis
  9. 9. Evaluation
  10. 10. Evaluation JavaScript Frameworks SproutCore SmartClient
  11. 11. Evaluation Alternative JavaScript Frameworks Frameworks SproutCore Flex SmartClient
  12. 12. Evaluation Alternative JavaScript Native Frameworks Frameworks Frameworks SproutCore Flex Cocoa Eclipse Data Binding WPF SmartClient
  13. 13. Features • Binding of single values • Binding of list widgets • Binding of tree widgets • Binding of JSON, XML, CSV • Formating, Conversion, Filtering, ... • Master detail view • ...
  14. 14. Use Cases • Synchronize two textfields • Fill a list with data from a JSON file • Fill a tree widget with data • Connect to the twitter REST service and display messages in a list • ...
  15. 15. Architecture
  16. 16. Structure DataStore Store Model Controller View Data Backend Binding UI Binding
  17. 17. Layers Store Model Controller qooxdoo
  18. 18. Store 1 Layers Store 2 ... Abstract Store Store N Data Array qooxdoo Classes with Properties Controller 1 Controller 2 Binding ... SingleValue Controller N
  19. 19. Single Value Binding
  20. 20. How could it work? • Change notification needed • Common way to access the data needed
  21. 21. How could it work? • Change notification needed • Common way to access the data needed qooxdoo Properties • Support for change events • Generated accessors
  22. 22. Idea a:A b:A + prop : 12 + prop :
  23. 23. Idea a:A b:A <<binding>> + prop : 12 + prop :
  24. 24. Idea a:A b:A <<binding>> + prop : 12 + prop : 12
  25. 25. Idea a:A b:A <<binding>> + prop : 23 + prop : 23
  26. 26. Idea a:A b:A <<binding>> + prop : 23 + prop : 30
  27. 27. Idea a:A b:A <<binding>> + prop : 23 + prop : 30 a.bind(quot;propquot;, b, quot;propquot;);
  28. 28. Deep Binding a:A c:B + child : b + prop : b:B + prop : 12
  29. 29. Deep Binding a:A c:B <<binding>> + child : b + prop : b:B + prop : 12
  30. 30. Deep Binding a:A c:B <<binding>> + child : b + prop : 12 b:B + prop : 12
  31. 31. Deep Binding a:A c:B <<binding>> + child : b + prop : 23 b:B + prop : 23
  32. 32. Deep Binding a:A c:B <<binding>> + child : b + prop : 23 b:B + prop : 23
  33. 33. Deep Binding a:A c:B <<binding>> + child : b + prop :
  34. 34. Deep Binding a:A c:B <<binding>> + child : b d + prop : 78 d:B + prop : 78
  35. 35. Deep Binding a:A c:B <<binding>> + child : b d + prop : 78 d:B + prop : 78 a.bind(quot;child.propquot;, b, quot;propquot;);
  36. 36. Realization • Properties and events as a basis • Using of the dynamic aspects of JavaScript var value = targetObject[quot;getquot; + propertyName]();
  37. 37. Challenges • highly dynamic a.bind(quot;c[1].d.e[0].namequot;, b, quot;propquot;); • Fallback textfield.bind(quot;inputquot;, label, quot;contentquot;);
  38. 38. Controller
  39. 39. Controller DataStore Store Model Controller View Data
  40. 40. Controller DataStore Store Model Controller View Data
  41. 41. Views List Tree Table SelectBox ComboBox Form Elements
  42. 42. Controller Object List Tree Table
  43. 43. Controller Object List Tree
  44. 44. Selection without data binding list.getSelected();
  45. 45. Selection without data binding list.getSelected(); ListItem
  46. 46. Selection without data binding with data binding 0 00 ctrl.getSelection()[0]; list.getSelected(); ListItem
  47. 47. Selection without data binding with data binding 0 00 ctrl.getSelection()[0]; list.getSelected(); ModelItem 4 ListItem
  48. 48. Problems • Default binding only to the label and the icon • Hard wired
  49. 49. Problems • Default binding only to the label and the icon • Hard wired Extension with the Delegate Pattern
  50. 50. Delegate Pattern var delegate = new DelegateOfA(); this.do = function() { A return delegate.do(); } delegate Delegate
  51. 51. Delegate Pattern in qooxdoo this.setDel = function(del) { this.delegate = del; } this.do = function() A { if ( this.delegate != null delegate && this.delegate.do != null ){ Delegate this.delegate.do(); } else { this.doDefault(); } }
  52. 52. Binding of other properties var delegate = { bindItem : function(controller, item, id) { controller.bindProperty( quot;onlinequot;, quot;checkedquot;, null, item, id ); } }; controller.setDelegate(delegate);
  53. 53. Binding of other properties var delegate = { bindItem : function(controller, item, id) { controller.bindProperty( quot;onlinequot;, quot;checkedquot;, null, item, id ); } }; controller.setDelegate(delegate); „The delegate structure provides great extensibility. Well done!“ [Wayne Si]
  54. 54. Model
  55. 55. Model DataStore Store Model Controller View Data
  56. 56. Model DataStore Store Model Controller View Data
  57. 57. Requirements • Regular qooxdoo classes hold the data • Properties with events on every change • Can hold every JavaScript datatype • Problem with data in native arrays • No change events will be fired
  58. 58. Requirements • Regular qooxdoo classes hold the data • Properties with events on every change • Can hold every JavaScript datatype • Problem with data in native arrays • No change events will be fired Custom array implementation is necessary
  59. 59. Stores
  60. 60. Stores DataStore Store Model Controller View Data
  61. 61. Stores DataStore Store Model Controller View Data
  62. 62. Possible Data Sources
  63. 63. Possible Data Sources JSON XML CSV SOAP JSON-RPC ...
  64. 64. Possible Data Sources JSON XML CSV SOAP JSON-RPC ...
  65. 65. Architecture var marshaler = new JsonMarshaler(); this.do = function() { JsonStore return marshaler.do(); } Json Marshaler
  66. 66. Responsibilities Fetches and provides JsonStore the data as model. Generates the model Json classes and instances. Marshaler
  67. 67. Creating Classes qx.Class.define(quot;namespace.namequot;, { extend : qx.core.Object, properties : { // ... } });
  68. 68. Creating Classes qx.Class.define(quot;namespace.namequot;, { extend : qx.core.Object, properties : p });
  69. 69. Creating Classes qx.Class.define(quot;namespace.namequot;, classDef);
  70. 70. What Distinguishes Models? • Models hold all data in properties
  71. 71. What Distinguishes Models? • Models hold all data in properties Only the property names are different
  72. 72. Identifying Model Classes Model Hash +b +a
  73. 73. Identifying Model Classes Model ba Hash +b +a
  74. 74. Identifying Model Classes Model ba Hash +b +a Model ab Hash +a +b
  75. 75. Identifying Model Classes Model ba ! Hash +b +a Model ab Hash +a +b
  76. 76. Identifying Model Classes Model Hash +b +a
  77. 77. Identifying Model Classes Model ab Hash +b +a
  78. 78. Identifying Model Classes Model ab Hash +b +a Model ab Hash + ab
  79. 79. Identifying Model Classes Model ab ! Hash +b +a Model ab Hash + ab
  80. 80. Identifying Model Classes Model Hash +b +a
  81. 81. Identifying Model Classes Model a$b Hash +b +a
  82. 82. Identifying Model Classes Model a$b Hash +b +a Model a$b Hash + a$b
  83. 83. Identifying Model Classes Model a$b ! Hash +b +a Model a$b Hash + a$b
  84. 84. Identifying Model Classes Model Hash +b +a
  85. 85. Identifying Model Classes Model aquot;b Hash +b +a
  86. 86. Identifying Model Classes Model aquot;b Hash +b +a ✔
  87. 87. Extended Stores Gears
  88. 88. Integration
  89. 89. Integration DataStore Store Model Controller View Data
  90. 90. Integration DataStore Store Model Controller View Data
  91. 91. The Data [ quot;aquot;, quot;bquot;, quot;cquot;, quot;dquot;, quot;equot;, quot;fquot;, quot;gquot;, quot;hquot;, quot;iquot;, quot;jquot;, quot;kquot;, quot;lquot; ] data.json
  92. 92. Application Code var list = new qx.ui.form.List(); this.getRoot().add(list); var controller = new qx.data.controller.List(null, list); var store = new qx.data.store.Json(quot;data.jsonquot;); store.bind(quot;modelquot;, controller, quot;modelquot;);
  93. 93. Result
  94. 94. Structure Data
  95. 95. Structure List Data
  96. 96. Structure target ListController List Data model null
  97. 97. Structure url target JsonStore ListController List Data model model null null
  98. 98. Structure url target JsonStore ListController List Data model model <<binding>> null null
  99. 99. Structure url target JsonStore ListController List Data model model <<binding>> null null Model
  100. 100. Structure url target JsonStore ListController List Data <<binding>> model model Model
  101. 101. Feed Reader
  102. 102. Feed Reader Data tion ec sel selection
  103. 103. Feed Reader Data selection TreeController ListController selection
  104. 104. Conclusion
  105. 105. Layers Twitter Store Flickr Store JSON Store Gears Store Data Array Classes with Properties qooxdoo Object Controller List Controller Binding SingleValue Tree Controller
  106. 106. Outlook • Remote model • Virtual widgets support • Table support • Optimization • Dynamic form widget
  107. 107. Give it a try!
  108. 108. More Information http://qooxdoo.org/documentation/0.8/data_binding http://demo.qooxdoo.org/current/feedreader/ Images source http://www.everystockphoto.com/
  109. 109. http://www.qooxdoo.org

×