Autopsy of
a Widget
The Internals of a
qooxdoo Widget
by Fabian Jakobs
@fjakobs

Web Application

Browser as Render Engine

Primitives
Image Text Rectangle

Tree of Primitives
•DOM tree
•Events
•CSS for styling
•JavaScript for behavior

The Body Widget

The Widget
•Spinner
•Number input
•Composed widget
new qx.ui.form.Spinner(20);

Static Structure:
Composed Widgets

Goal
•Create complex Widgets by
composing Widgets
•Use known GUI Concepts
•Abstraction over the
Browser

Goal
•Create complex Widgets by
composing Widgets
•Use known GUI Concepts
•Abstraction over the
Browser

qx.Class.define("qx.ui.form.Spinner",
{
extend : qx.ui.core.Widget,
construct : function(value)
{
this.base(arguments);
}
});

qx.Class.define("qx.ui.form.Spinner",
{
extend : qx.ui.core.Widget,
construct : function(value)
{
this.base(arguments);
var layout = new qx.ui.layout.Grid();
layout.setRowFlex(0, 1);
layout.setRowFlex(1, 1);
layout.setColumnFlex(1, 1);
this._setLayout(layout);
}
});

qx.Class.define("qx.ui.form.Spinner",
{
extend : qx.ui.core.Widget,
construct : function(value)
{
this.base(arguments);
var layout = new qx.ui.layout.Grid();
layout.setRowFlex(0, 1);
layout.setRowFlex(1, 1);
layout.setColumnFlex(1, 1);
this._setLayout(layout);
this._input = new qx.ui.form.TextField(value.toString());
this._add(this._input, {row: 0, column: 0, rowSpan: 2});
this._buttonUp = new qx.ui.form.Button();
this._buttonUp.setIcon("decoration/arrows/up-small.png");
this._add(this._buttonUp, {row: 0, column: 1});
this._buttonDown = new qx.ui.form.Button();
this._buttonDown.setIcon("decoration/arrows/down-small.png");
this._add(this._buttonDown, {row: 1, column: 1});
}
});

Demo
http://demo.qooxdoo.org/current/playground

DOM Structure

DOM Structure
new qx.ui.form.TextField("Anatomy");

DOM Structure
new qx.ui.form.TextField("Anatomy");
<div style="position: absolute; left: 10px; top: 10px; width: 102px; height: 22px;">
<input type="text" spellcheck="false" tabindex="1" style='position: absolute;
z-index: 10; left: 6px; top: 4px; width: 90px; height: 15px; ...'>
<div style="position: absolute; top: 0pt; left: 0pt; z-index: 5;">
...
</div>
</div>

Container
<div style="position: absolute; left: 10px; top: 10px; width: 102px; height: 22px;">
<input type="text" spellcheck="false" tabindex="1" style='position: absolute;
z-index: 10; left: 6px; top: 4px; width: 90px; height: 15px; ...'>
<div style="position: absolute; top: 0pt; left: 0pt; z-index: 5;">
...
</div>
</div>

Container
Decorator
<div style="position: absolute; left: 10px; top: 10px; width: 102px; height: 22px;">
<input type="text" spellcheck="false" tabindex="1" style='position: absolute;
z-index: 10; left: 6px; top: 4px; width: 90px; height: 15px; ...'>
<div style="position: absolute; top: 0pt; left: 0pt; z-index: 5;">
...
</div>
</div>

Container
Decorator
Content
<div style="position: absolute; left: 10px; top: 10px; width: 102px; height: 22px;">
<input type="text" spellcheck="false" tabindex="1" style='position: absolute;
z-index: 10; left: 6px; top: 4px; width: 90px; height: 15px; ...'>
<div style="position: absolute; top: 0pt; left: 0pt; z-index: 5;">
...
</div>
</div>

Summary
•2-3 DOM elements
•Absolute positioning
•Fixed sizes
•No explicit padding
<div style="position: absolute; left: 10px; top: 10px; width: 102px; height: 22px;">
<input type="text" spellcheck="false" tabindex="1" style='position: absolute;
z-index: 10; left: 6px; top: 4px; width: 90px; height: 15px; ...'>
<div style="position: absolute; top: 0pt; left: 0pt; z-index: 5;">
...
</div>
</div>

DOM Structure
Pro Con
Box Model Independence 2-3 DOM Elements
Flexible Styling Size Computation in JS
No Cross Browser Issues

Theming

The Guts:
Working With The DOM

new qx.ui.form.TextField("Anatomy");
???
<div style="position: absolute; left: 10px; top: 10px; width: 102px; height: 22px;">
<input type="text" spellcheck="false" tabindex="1" style='position: absolute;
z-index: 10; left: 6px; top: 4px; width: 90px; height: 15px; ...'>
<div style="position: absolute; top: 0pt; left: 0pt; z-index: 5;">
...
</div>
</div>

The DOM is a Mess
•Many cross browser issues IE
element.style.filter =
"alpha(opacity=" +
(opacity * 100) +
");";
others
element.style.opacity = opacity;

The DOM is a Mess
•Many cross browser issues var el = document.createElement("div");
document.body.appendChild(el);
•Small mistakes can degrade el.style.position = absolute;
// more style changes
performance

The DOM is a Mess
•Many cross browser issues var el = document.createElement("div");
document.body.appendChild(el);
•Small mistakes can degrade el.style.position = absolute;
// more style changes
performance
var el = document.createElement("div");
el.style.position = absolute;
// more style changes
document.body.appendChild(el);

The DOM is a Mess
•Many cross browser issues
•Small mistakes can degrade
performance var width = parseInt(el.style.width);
var height = parseInt(el.style.height);
•Reading styles/attributes is
slow

The DOM is a Mess
•Many cross browser issues
•Small mistakes can degrade
performance var width = parseInt(el.style.width);
var height = parseInt(el.style.height);
•Reading styles/attributes is
slow

DOM Wrapper
•Wrap DOM elements
•Lazy DOM element creation
•Batch DOM manipulations
•Cache styles/attributes

qx.Class.define("qx.ui.core.Widget", Container
{
extend : qx.core.Object,
construct : function()
{
this.base(arguments);
this._container = new qx.html.Element("div");
this._content = new qx.html.Element("div").setStyles({
position: "absolute",
zIndex: 10,
overflow: "hidden"
});
this._container.add(this._content);
this._decorator = new qx.html.Element("div").setStyles({
position: "absolute",
zIndex: 10
});
this._container.add(this._decorator);
}
});

qx.Class.define("qx.ui.core.Widget", Container
{
extend : qx.core.Object, Decorator
construct : function()
{
this.base(arguments);
this._container = new qx.html.Element("div");
this._content = new qx.html.Element("div").setStyles({
position: "absolute",
zIndex: 10,
overflow: "hidden"
});
this._container.add(this._content);
this._decorator = new qx.html.Element("div").setStyles({
position: "absolute",
zIndex: 10
});
this._container.add(this._decorator);
}
});

qx.Class.define("qx.ui.core.Widget", Container
{
extend : qx.core.Object, Decorator
construct : function()
Content
{
this.base(arguments);
this._container = new qx.html.Element("div");
this._content = new qx.html.Element("div").setStyles({
position: "absolute",
zIndex: 10,
overflow: "hidden"
});
this._container.add(this._content);
this._decorator = new qx.html.Element("div").setStyles({
position: "absolute",
zIndex: 10
});
this._container.add(this._decorator);
}
});

DOM Wrapper
Pro Con
Cross browser API Memory overhead
Performance Additional complexity
Keeps widget code clean

Dynamic Structure:
Layouts

Initial Sizes

Initial Sizes

Initial Sizes

Dynamic Update

Layout
•Compute widgets sizes
based on
•Available space
•Layout constraints
•Preferred widget sizes
•Widget size constraints

Algorithm
2 Passes

Algorithm
2 Passes
1st Pass
Compute Preferred Size

Algorithm
2 Passes
1st Pass 2nd Pass
Compute Preferred Size Render Size

1st Pass
Spinner Grid
getSizeHint() getSizeHint()
getLayout() getLayoutChildren()
computeLayout(hints)
TextField Button
Button
getSizeHint() getSizeHint()
getSizeHint()
measureTextHeight() getImageSize()
getImageSize()

1st Pass
Spinner.getSizeHint = function() {
Spinner Grid
return this.getLayout().getSizeHint();
}
getSizeHint() getSizeHint()
getLayout() getLayoutChildren()
computeLayout(hints)
TextField Button
Button
getSizeHint() getSizeHint()
getSizeHint()
measureTextHeight() getImageSize()
getImageSize()

1st Pass
Grid.getSizeHint = function()
{ Spinner Grid
var childrenHints = [];
var children =getSizeHint()
this.getLayoutChildren(); getSizeHint()
for (var i=0; i<children.length; i++) {
getLayout()
childrenHints.push(children[i].getSizeHint()); getLayoutChildren()
}
computeLayout(hints)
return this.computeLayout(childrenHints);
}
TextField Button
Button
getSizeHint() getSizeHint()
getSizeHint()
measureTextHeight() getImageSize()
getImageSize()

1st Pass
Spinner Grid
getSizeHint()
TextField.getSizeHint = function() getSizeHint()
{ getLayout() getLayoutChildren()
return {
height: this.measureTextHeight(), computeLayout(hints)
width: 100
} Button.getSizeHint = function() {
} return this.getImageSize()
}
TextField Button
Button
getSizeHint() getSizeHint()
getSizeHint()
measureTextHeight() getImageSize()
getImageSize()

2nd Pass
Spinner Grid
renderLayout(bounds) renderLayout()
getLayout()
getLayoutChildren()
updateWidgetSize(bounds)
computeChildrenSizes(bounds)
TextField Button
Button
renderLayout() renderLayout()
renderLayout()
updateWidgetSize(bounds) updateWidgetSize(bounds)
updateWidgetSize(bounds)

2nd Pass
Spinner.renderLayout = function(bounds)
Spinner { Grid
this.updateWidgetSize(bounds);
renderLayout(bounds) renderLayout()
this.getLayout().renderLayout(bounds);
getLayout() }
getLayoutChildren()
updateWidgetSize(bounds)
computeChildrenSizes(bounds)
TextField Button
Button
renderLayout() renderLayout()
renderLayout()
updateWidgetSize(bounds) updateWidgetSize(bounds)
updateWidgetSize(bounds)

2nd Pass
Grid.renderLayout = function(bounds)
{ Spinner Grid
var sizes = this.computeChildrenSizes(bounds);
renderLayout(bounds)
var children = this.getLayoutChildren(); renderLayout()
getLayout()
for (var i=0; i<children.length; i++) {
children[i].renderLayout(childrenSizes[i]); getLayoutChildren()
}
updateWidgetSize(bounds)
computeChildrenSizes(bounds)
}
TextField Button
Button
renderLayout() renderLayout()
renderLayout()
updateWidgetSize(bounds) updateWidgetSize(bounds)
updateWidgetSize(bounds)

2nd Pass
Spinner Grid
renderLayout(bounds) renderLayout()
getLayout()
getLayoutChildren()
updateWidgetSize(bounds)
computeChildrenSizes(bounds)
Widget.renderLayout = function(bounds) {
this.updateWidgetSize(bounds);
}
TextField Button
Button
renderLayout() renderLayout()
renderLayout()
updateWidgetSize(bounds) updateWidgetSize(bounds)
updateWidgetSize(bounds)

Layout Summary
•Reflow computation in JavaScript
•Large collection of layout managers
•Highly optimized

Layout Summary
•Reflow computation in JavaScript
•Large collection of layout managers
•Highly optimized
„If a feature is missing
we can easily add it!“

Layout
Pro Con
Cross Browser Slower than CSS layouts
Custom Layout Managers Complex Implementation
Highly Customizable
Sensible Default Sizes

Events

„DOM events are a
huge stinking pile
of mess!“

Different API
IE W3C DOM Events
attachEvent(...) addEventListener(...)
e.returnValue = false e.preventDefault()
e.cancelBubble = true e.stopPropagation()
... ...

„It‘s getting
worse“

Different Features
•Event capturing phase
•Mouse capturing (only IE)
•Both features are highly desirable

„Worst ...“

Different Behavior
•Different mouse event sequences
•keyCode and charCode depend on
•browser
•operating system
•locale
•...

Goal
qx.Class.define("qx.ui.form.Spinner",
{
extend : qx.ui.core.Widget,
construct : function(value)
{
this.base(arguments);
// ...
this._buttonUp.addListener("click", this._increaseValue, this);
this._buttonDown.addListener("click", this._decreaseValue, this);
},
members :
{
_increaseValue : function() { /* .. */},
_decreaseValue : function() { /* .. */},
}
});

Naive
e.onclick = onClick
e.onkeyPress = onKeyPress

Mouse Handler

listen
Mouse Handler

listen
Mouse Handler
Registration

listen
Mouse Handler
Registration

listen
Mouse Handler
Registration
qx.event.Registration.addListener(element, "click", function(e) {
alert("you clicked me");
});

listen
Mouse Handler
Registration
qx.event.Registration.addListener(element, "click", function(e) {
alert("you clicked me");
});

listen
Mouse Handler
Registration
qx.event.Registration.addListener(element, "click", function(e) {
alert("you clicked me");
});

listen
Mouse Handler
Registration
qx.event.Registration.addListener(element, "click", function(e) {
alert("you clicked me");
});

listen
Mouse Handler
Registration
qx.event.Registration.addListener(element, "click", function(e) {
alert("you clicked me");
});

listen
Mouse Handler
Registration
qx.event.Registration.addListener(element, "click", function(e) {
alert("you clicked me");
});

listen
Mouse Handler
Registration
qx.event.Registration.addListener(element, "click", function(e) {
alert("you clicked me");
});

listen
Mouse Handler
Registration
qx.event.Registration.addListener(element, "click", function(e) {
alert("you clicked me");
});

listen
Mouse Handler
Registration
qx.event.Registration.addListener(element, "click", function(e) {
alert("you clicked me");
});

Events
Pro Con
W3C DOM API Performance
Mouse capturing Code Size
Unified behavior

Summary

Composed Widgets DOM Structure Theming
DOM Wrapper Layout Events

Image Reference
•Anatomy exhibit
•University of Michigan Health Sciences
Libraries Rare Book Room
•http://www.flickr.com/photos/
rosefirerising/sets/
72157606558666166

Demo
•http://bit.ly/39RDkP
•http://bit.ly/2sllO4
•http://bit.ly/1fAevz
•http://bit.ly/38ZUYR
•http://bit.ly/1Rrb9O