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

Introduction

Data Binding
Model View

Data Binding
Model View

Data Binding
Formating
Filtering
Sorting
Model View
Validation
Converting

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() {
// function code
}
var obj = {do: doFunc};
obj.do(); // 1.
obj[\"do\"](); // 2.
obj.do.call(); // 3.
obj[\"do\"][\"call\"](); // 4.
doFunc.call(obj); // 5.
doFunc[\"call\"](obj); // 6.
obj[\"do\"].apply(); // 7.
obj[\"do\"][\"apply\"](); // 8.

Analysis

Evaluation

Evaluation
JavaScript
Frameworks
SproutCore
SmartClient

Evaluation
Alternative
JavaScript
Frameworks
Frameworks
SproutCore Flex
SmartClient

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

Features
• Binding of single values
• Binding of list widgets
• Binding of tree widgets
• Binding of JSON, XML, CSV
• Formating, Conversion, Filtering, ...
• Master detail view
• ...

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

Architecture

Structure
DataStore
Store Model Controller View
Data
Backend Binding UI Binding

Layers
Store Model Controller
qooxdoo

Store 1
Layers
Store 2
...
Abstract Store
Store N
Data Array
qooxdoo
Classes with Properties
Controller 1
Controller 2
Binding
...
SingleValue
Controller N

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 change events
• Generated accessors

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 : 12

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

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

Idea
a:A b:A
<<binding>>
+ prop : 23 + prop : 30
a.bind(\"prop\", b, \"prop\");

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

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

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

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

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

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

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

Deep Binding
a:A c:B
<<binding>>
+ child : b
d + prop : 78
d:B
+ prop : 78
a.bind(\"child.prop\", b, \"prop\");

Realization
• Properties and events as a basis
• Using of the dynamic aspects of JavaScript
var value = targetObject[\"get\" + propertyName]();

Challenges
• highly dynamic
a.bind(\"c[1].d.e[0].name\", b, \"prop\");
• Fallback
textfield.bind(\"input\", label, \"content\");

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
00
ctrl.getSelection()[0];
list.getSelected();
ListItem

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

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();
this.do = function() {
A return delegate.do();
}
delegate
Delegate

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

Binding of other properties
var delegate = {
bindItem : function(controller, item, id)
{
controller.bindProperty(
\"online\", \"checked\", null, item, id
);
}
};
controller.setDelegate(delegate);

Binding of other properties
var delegate = {
bindItem : function(controller, item, id)
{
controller.bindProperty(
\"online\", \"checked\", null, item, id
);
}
};
controller.setDelegate(delegate);
„The delegate structure provides great extensibility. Well done!“
[Wayne Si]

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 datatype
• Problem with data in native arrays
• No change events will be fired

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

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 = function() {
JsonStore return marshaler.do();
}
Json
Marshaler

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

Creating Classes
qx.Class.define(\"namespace.name\",
{
extend : qx.core.Object,
properties :
{
// ...
}
});

Creating Classes
qx.Class.define(\"namespace.name\",
{
extend : qx.core.Object,
properties : p
});

Creating Classes
qx.Class.define(\"namespace.name\", 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
ab
Hash
+a
+b

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

Identifying Model Classes
Model
Hash
+b
+a

Identifying Model Classes
Model
ab
Hash
+b
+a

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

Identifying Model Classes
Model
ab
!
Hash
+b
+a
Model
ab
Hash
+ 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
Model
a$b
Hash
+ a$b

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

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
✔

Extended Stores
Gears

Integration

Integration
DataStore
Store Model Controller View
Data

Integration
DataStore
Store Model Controller View
Data

The Data
[
\"a\", \"b\", \"c\", \"d\",
\"e\", \"f\", \"g\", \"h\",
\"i\", \"j\", \"k\", \"l\"
]
data.json

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(\"data.json\");
store.bind(\"model\", controller, \"model\");

Result

Structure
Data

Structure
List
Data

Structure
target
ListController List
Data
model
null

Structure
url target
JsonStore ListController List
Data
model model
null null

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

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

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

Feed Reader

Feed Reader
Data
tion
ec
sel
selection

Feed Reader
Data
selection
TreeController ListController
selection

Conclusion

Layers
Twitter Store
Flickr Store
JSON Store
Gears Store
Data Array
Classes with Properties
qooxdoo
Object Controller
List Controller
Binding
SingleValue
Tree Controller

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 source
http://www.everystockphoto.com/

http://www.qooxdoo.org