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.

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

3. Data Binding
Model View

4. Data Binding
Model View

5. Data Binding
Formating
Filtering
Sorting
Model View
Validation
Converting

6. Why?
Faster Advantage over
Bug 18 and 19
programming competitors

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

9. Evaluation

10. Evaluation
JavaScript
Frameworks
SproutCore
SmartClient

11. Evaluation
Alternative
JavaScript
Frameworks
Frameworks
SproutCore Flex
SmartClient

12. Evaluation
Alternative
JavaScript Native
Frameworks
Frameworks Frameworks
SproutCore Flex
Cocoa
Eclipse Data
Binding
WPF
SmartClient

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

16. Structure
DataStore
Store Model Controller View
Data
Backend Binding UI Binding

17. Layers
Store Model Controller
qooxdoo

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. Single Value
Binding

20. How could it work?
• Change notification needed
• Common way to access the data needed

21. How could it work?
• Change notification needed
• Common way to access the data needed
qooxdoo Properties
• Support for change events
• Generated accessors

22. Idea
a:A b:A
+ prop : 12 + prop :

23. Idea
a:A b:A
<<binding>>
+ prop : 12 + prop :

24. Idea
a:A b:A
<<binding>>
+ prop : 12 + prop : 12

25. Idea
a:A b:A
<<binding>>
+ prop : 23 + prop : 23

26. Idea
a:A b:A
<<binding>>
+ prop : 23 + prop : 30

27. Idea
a:A b:A
<<binding>>
+ prop : 23 + prop : 30
a.bind(quot;propquot;, b, quot;propquot;);

28. Deep Binding
a:A c:B
+ child : b + prop :
b:B
+ prop : 12

29. Deep Binding
a:A c:B
<<binding>>
+ child : b + prop :
b:B
+ prop : 12

30. Deep Binding
a:A c:B
<<binding>>
+ child : b + prop : 12
b:B
+ prop : 12

31. Deep Binding
a:A c:B
<<binding>>
+ child : b + prop : 23
b:B
+ prop : 23

32. Deep Binding
a:A c:B
<<binding>>
+ child : b + prop : 23
b:B
+ prop : 23

33. Deep Binding
a:A c:B
<<binding>>
+ child : b + prop :

34. Deep Binding
a:A c:B
<<binding>>
+ child : b
d + prop : 78
d:B
+ prop : 78

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. Realization
• Properties and events as a basis
• Using of the dynamic aspects of JavaScript
var value = targetObject[quot;getquot; + propertyName]();

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

39. Controller
DataStore
Store Model Controller View
Data

40. Controller
DataStore
Store Model Controller View
Data

41. Views
List Tree Table
SelectBox ComboBox Form Elements

42. Controller
Object List Tree Table

43. Controller
Object List Tree

44. Selection
without data binding
list.getSelected();

45. Selection
without data binding
list.getSelected();
ListItem

46. Selection
without data binding with data binding
0
00
ctrl.getSelection()[0];
list.getSelected();
ListItem

47. Selection
without data binding with data binding
0
00
ctrl.getSelection()[0];
list.getSelected();
ModelItem 4
ListItem

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

49. Problems
• Default binding only to the label and the icon
• Hard wired
Extension with the Delegate Pattern

50. Delegate Pattern
var delegate =
new DelegateOfA();
this.do = function() {
A return delegate.do();
}
delegate
Delegate

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. Binding of other properties
var delegate = {
bindItem : function(controller, item, id)
{
controller.bindProperty(
quot;onlinequot;, quot;checkedquot;, null, item, id
);
}
};
controller.setDelegate(delegate);

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

55. Model
DataStore
Store Model Controller View
Data

56. Model
DataStore
Store Model Controller View
Data

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

60. Stores
DataStore
Store Model Controller View
Data

61. Stores
DataStore
Store Model Controller View
Data

62. Possible Data Sources

63. Possible Data Sources
JSON XML CSV
SOAP JSON-RPC ...

64. Possible Data Sources
JSON XML CSV
SOAP JSON-RPC ...

65. Architecture
var marshaler =
new JsonMarshaler();
this.do = function() {
JsonStore return marshaler.do();
}
Json
Marshaler

66. Responsibilities
Fetches and provides
JsonStore
the data as model.
Generates the model
Json
classes and instances.
Marshaler

67. Creating Classes
qx.Class.define(quot;namespace.namequot;,
{
extend : qx.core.Object,
properties :
{
// ...
}
});

68. Creating Classes
qx.Class.define(quot;namespace.namequot;,
{
extend : qx.core.Object,
properties : p
});

69. Creating Classes
qx.Class.define(quot;namespace.namequot;, classDef);

70. What Distinguishes Models?
• Models hold all data in properties

71. What Distinguishes Models?
• Models hold all data in properties
Only the property names are different

72. Identifying Model Classes
Model
Hash
+b
+a

73. Identifying Model Classes
Model
ba
Hash
+b
+a

74. Identifying Model Classes
Model
ba
Hash
+b
+a
Model
ab
Hash
+a
+b

75. Identifying Model Classes
Model
ba
!
Hash
+b
+a
Model
ab
Hash
+a
+b

76. Identifying Model Classes
Model
Hash
+b
+a

77. Identifying Model Classes
Model
ab
Hash
+b
+a

78. Identifying Model Classes
Model
ab
Hash
+b
+a
Model
ab
Hash
+ ab

79. Identifying Model Classes
Model
ab
!
Hash
+b
+a
Model
ab
Hash
+ ab

80. Identifying Model Classes
Model
Hash
+b
+a

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

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

83. Identifying Model Classes
Model
a$b
!
Hash
+b
+a
Model
a$b
Hash
+ a$b

84. Identifying Model Classes
Model
Hash
+b
+a

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

86. Identifying Model Classes
Model
aquot;b
Hash
+b
+a
✔

87. Extended Stores
Gears

88. Integration

89. Integration
DataStore
Store Model Controller View
Data

90. Integration
DataStore
Store Model Controller View
Data

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

94. Structure
Data

95. Structure
List
Data

96. Structure
target
ListController List
Data
model
null

97. Structure
url target
JsonStore ListController List
Data
model model
null null

98. Structure
url target
JsonStore ListController List
Data
model model
<<binding>>
null null

99. Structure
url target
JsonStore ListController List
Data
model model
<<binding>>
null null
Model

100. Structure
url target
JsonStore ListController List
Data
<<binding>>
model
model
Model

101. Feed Reader

102. Feed Reader
Data
tion
ec
sel
selection

103. Feed Reader
Data
selection
TreeController ListController
selection

104. Conclusion

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. Outlook
• Remote model
• Virtual widgets support
• Table support
• Optimization
• Dynamic form widget

107. Give it a try!

108. More Information
http://qooxdoo.org/documentation/0.8/data_binding
http://demo.qooxdoo.org/current/feedreader/
Images source
http://www.everystockphoto.com/

109. http://www.qooxdoo.org