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
     Intelligente und umfassende Datenbindung für
            moderne Webanwendungen in qooxdoo


...
Introduction
Data Binding



  Model        View
Data Binding



  Model        View
Data Binding

           Formating


               Filtering
               Sorting
  Model                    View

    ...
Why?




   Faster     Advantage over
                               Bug 18 and 19
programming    competitors
JavaScript
• All objects are assoziative arrays
• Different ways to call a function:
         var doFunc = function() {
  ...
Analysis
Evaluation
Evaluation
 JavaScript
Frameworks




 SproutCore




 SmartClient
Evaluation
                Alternative
 JavaScript
               Frameworks
Frameworks




 SproutCore        Flex




 S...
Evaluation
                Alternative
 JavaScript                       Native
               Frameworks
Frameworks      ...
Features
• Binding of single values
• Binding of list widgets
• Binding of tree widgets
• Binding of JSON, XML, CSV
• Form...
Use Cases
• Synchronize two textfields
• Fill a list with data from a JSON file
• Fill a tree widget with data
• Connect to ...
Architecture
Structure


            DataStore
              Store       Model   Controller   View
 Data




        Backend Binding   ...
Layers




     Store    Model    Controller


             qooxdoo
Store 1
                                               Layers

                                  Store 2

                ...
Single Value
  Binding
How could it work?
• Change notification needed
• Common way to access the data needed
How could it work?
• Change notification needed
• Common way to access the data needed
qooxdoo Properties
• Support for cha...
Idea
           a:A           b:A
       + prop : 12   + prop :
Idea
           a:A                         b:A
                     <<binding>>
       + prop : 12                 + prop...
Idea
           a:A                         b:A
                     <<binding>>
       + prop : 12                 + prop...
Idea
           a:A                         b:A
                     <<binding>>
       + prop : 23                 + prop...
Idea
           a:A                         b:A
                     <<binding>>
       + prop : 23                 + prop...
Idea
           a:A                         b:A
                     <<binding>>
       + prop : 23                 + prop...
Deep Binding
         a:A           c:B
     + child : b   + prop :



         b:B
     + prop : 12
Deep Binding
         a:A                         c:B
                   <<binding>>
     + child : b                 + pr...
Deep Binding
         a:A                         c:B
                   <<binding>>
     + child : b                 + pr...
Deep Binding
         a:A                         c:B
                   <<binding>>
     + child : b                 + pr...
Deep Binding
         a:A                         c:B
                   <<binding>>
     + child : b                 + pr...
Deep Binding
         a:A                         c:B
                   <<binding>>
     + child : b                 + pr...
Deep Binding
         a:A                         c:B
                   <<binding>>
     + child : b
               d    ...
Deep Binding
         a:A                         c:B
                   <<binding>>
     + child : b
               d    ...
Realization
• Properties and events as a basis
• Using of the dynamic aspects of JavaScript

 var value = targetObject[quo...
Challenges
• highly dynamic
      a.bind(quot;c[1].d.e[0].namequot;, b, quot;propquot;);



• Fallback
     textfield.bind...
Controller
Controller
       DataStore
         Store     Model   Controller   View
Data
Controller
       DataStore
         Store     Model   Controller   View
Data
Views



  List        Tree       Table




SelectBox   ComboBox   Form Elements
Controller


   Object    List   Tree   Table
Controller


      Object   List   Tree
Selection
without data binding




       list.getSelected();
Selection
without data binding




       list.getSelected();




          ListItem
Selection
without data binding         with data binding



                               0
                             ...
Selection
without data binding         with data binding



                               0
                             ...
Problems
• Default binding only to the label and the icon
 • Hard wired
Problems
• Default binding only to the label and the icon
 • Hard wired




    Extension with the Delegate Pattern
Delegate Pattern

                      var delegate =
                        new DelegateOfA();

                      t...
Delegate Pattern in qooxdoo
                      this.setDel = function(del)
                      {
                    ...
Binding of other properties
  var delegate = {

    bindItem : function(controller, item, id)
    {
      controller.bindP...
Binding of other properties
  var delegate = {

    bindItem : function(controller, item, id)
    {
      controller.bindP...
Model
Model
       DataStore
         Store     Model   Controller   View
Data
Model
       DataStore
         Store     Model   Controller   View
Data
Requirements
• Regular qooxdoo classes hold the data
• Properties with events on every change
 • Can hold every JavaScript...
Requirements
• Regular qooxdoo classes hold the data
• Properties with events on every change
 • Can hold every JavaScript...
Stores
Stores
       DataStore
         Store     Model   Controller   View
Data
Stores
       DataStore
         Store     Model   Controller   View
Data
Possible Data Sources
Possible Data Sources


   JSON     XML      CSV


   SOAP   JSON-RPC      ...
Possible Data Sources


   JSON     XML      CSV


   SOAP   JSON-RPC      ...
Architecture

                  var marshaler =
                    new JsonMarshaler();

                  this.do = func...
Responsibilities

                 Fetches and provides
     JsonStore
                 the data as model.

              ...
Creating Classes

  qx.Class.define(quot;namespace.namequot;,
  {
    extend : qx.core.Object,

   properties :
   {
     ...
Creating Classes


  qx.Class.define(quot;namespace.namequot;,
  {
    extend : qx.core.Object,

   properties : p

  });
Creating Classes



  qx.Class.define(quot;namespace.namequot;, classDef);
What Distinguishes Models?
• Models hold all data in properties
What Distinguishes Models?
• Models hold all data in properties



    Only the property names are different
Identifying Model Classes

        Model
                Hash
   +b
   +a
Identifying Model Classes

        Model
                       ba
                Hash
   +b
   +a
Identifying Model Classes

        Model
                       ba
                Hash
   +b
   +a




        Model
    ...
Identifying Model Classes

        Model
                       ba

                            !
                Hash
   ...
Identifying Model Classes

        Model
                Hash
   +b
   +a
Identifying Model Classes

        Model
                       ab
                Hash
   +b
   +a
Identifying Model Classes

          Model
                         ab
                  Hash
   +b
   +a




          Mo...
Identifying Model Classes

          Model
                         ab

                              !
                  ...
Identifying Model Classes

        Model
                Hash
   +b
   +a
Identifying Model Classes

        Model
                       a$b
                Hash
   +b
   +a
Identifying Model Classes

           Model
                          a$b
                   Hash
   +b
   +a




        ...
Identifying Model Classes

           Model
                          a$b

                                !
             ...
Identifying Model Classes

        Model
                Hash
   +b
   +a
Identifying Model Classes

        Model
                       aquot;b
                Hash
   +b
   +a
Identifying Model Classes

        Model
                       aquot;b
                Hash
   +b
   +a




             ...
Extended Stores




 Gears
Integration
Integration
        DataStore
          Store     Model   Controller   View
Data
Integration
        DataStore
          Store     Model   Controller   View
Data
The Data

       [
           quot;aquot;, quot;bquot;, quot;cquot;, quot;dquot;,
           quot;equot;, quot;fquot;, quo...
Application Code


var list = new qx.ui.form.List();
this.getRoot().add(list);

var controller = new qx.data.controller.Li...
Result
Structure

 Data
Structure

            List
 Data
Structure

                             target
            ListController            List
 Data

                   model
...
Structure

        url                                    target
              JsonStore       ListController            L...
Structure

        url                                                  target
              JsonStore                    ...
Structure

        url                                                  target
              JsonStore                    ...
Structure

        url                                                  target
              JsonStore                    ...
Feed Reader
Feed Reader
  Data




               tion
            ec
         sel


                      selection
Feed Reader
     Data


                  selection
 TreeController               ListController




                     ...
Conclusion
Layers

                            Twitter Store

                             Flickr Store




             JSON Store
 ...
Outlook
• Remote model
• Virtual widgets support
• Table support
• Optimization
• Dynamic form widget
Give it a try!
More Information
http://qooxdoo.org/documentation/0.8/data_binding
http://demo.qooxdoo.org/current/feedreader/


Images so...
http://www.qooxdoo.org
Upcoming SlideShare
Loading in …5
×

Data Binding in qooxdoo

6,008 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

×