Autopsy Of A Widget

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

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

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

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

http://news.qooxdoo.org	208
http://speakerrate.com	26
http://www.slideshare.net	11
http://news.new.qooxdoo.org	3
http://feeds2.feedburner.com	3
http://planet.blog.tennessee.schlund.de	2
http://planet.blog.tennessee.1und1.de	2
http://webtechfe-test01.schlund.de	1
http://swik.net	1
http://feeds.feedburner.com	1

Autopsy Of A Widget

by Fabian Jakobs on Nov 09, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 258

Statistics

Autopsy Of A Widget — Presentation Transcript