24
Building Complex GUI Apps The Right Way with Ample SDK The Scandinavian Web Developers Conference 2-3 June 2010, Stockholm, Sweden Sergey Ilinsky

Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

Embed Size (px)

DESCRIPTION

Slides from my talk at the SWDC 2010

Citation preview

Page 1: Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

Building Complex GUI AppsThe Right Waywith Ample SDK

The Scandinavian Web Developers Conference2-3 June 2010, Stockholm, Sweden

Sergey Ilinsky

Page 2: Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

1. Web Application Architecture Transition

Server-Side Client-SideBack-End(Business

Logic)

Front-End(UI Logic+Rendering+Auth.)

Browser

Server-Side Client-SideBack-End(Business

Logic)

Front-End

(Auth.)

Front-End(UI Logic+Rendering)

Previously

Now

UI&Data

Data(Form data)

UI

Data(JSON/XML)

Data(JSON/XML)

Browser

Page 3: Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

2. HTML5 and client-side GUI Technologies

HTML5 [GUI concerns]1) Limited amount of UI elements2) Poor-to-none UI elements styling facilities3) Hardly or not implemented in most of web browsers4) No extensibility (until XBL2 lands)5) Too low-level abstraction for applications needs

JavaScript GUI Frameworks (ExtJS, Dojo, Qooxdoo, jQuery UI..)1) Proprietary (hence->inconsistent) APIs2) GUI is programmed (in JS+HTML), not declared

Page 4: Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

3. Demos first!

- SVG in Internet Explorer- XUL Cross-Browser- Charts- HTML5

Page 5: Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

4. Introduction to the Ample SDK

Ample SDK is a JavaScript GUI Framework that smartly re-uses concepts and technologies of web-browsers but also brings them to a new level, closer to client-side apps needs.

Original goals of the experiment:- equalize browsers APIs without introducing new ones- extend browser UI technologies stacks- provide a platform for reusable UI components

Page 6: Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

4. Introduction to the Ample SDK : Hello World!<!DOCTYPE html><html xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <head> <title>Hello, World!</title> <!-- (A) Ample SDK runtime and UI language --> <script type="text/javascript" src="ample/runtime.js"></script> <script type="text/javascript" src="ample/languages/xul/xul.js"></script> <link type="text/ample+css" src="ample/languages/xul/themes/default/xul.css"/> <!-- (1) Styling --> <style type="text/ample+css">

@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; xul|button { color: red; } </style> <!-- (2) Logic --> <script type="text/javascript"> function alertHelloWorld(oEvent) { alert('Element "' + oEvent.target.localName + '" was clicked'); } </script> </head> <body> <!-- (3) Layout --> <script type="application/ample+xml"> <xul:button onclick="alertHelloWorld(event)">Hello, World!</b> </script> </body></html>

Page 7: Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

4. Introduction to the Ample SDK : The Big Picture

Virtualizing browser technologies:- pass through if available- implement if not- fix if broken

Page 8: Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

5. Building GUI apps with Ample SDK

Programming model is that of web-browser:1) XML for UI (declarative UIs)2) CSS for Style3) JavaScript (DOM API) for Logic

Page 9: Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

5.1 XML for UI layout: Embedding Ample XML in HTML

a) Inline, using a script tag with type="application/ample+xml"<script type="application/ample+xml">

<!-- Ample SDK inline XML markup --></script>

b) Referencing a resource, using a script tag with src attribute<script type="application/ample+xml" src="ui.xml"></script>

c) Inline, using ample.open() and ample.close()<script type="text/javascript">ample.open()</script><!-- Ample SDK inline XML markup --><script type="text/javascript">ample.close()</script>

Page 10: Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

5.1 XML for UI layout: Code Sample<xul:toolbox> <xul:toolbar> <xul:toolbargrippy /> <xul:toolbarbutton type="menu" image="img/statuses/jab/off.gif" tooltiptext="Click to change status"> <xul:menupopup> <xul:menuitem type="checkbox" label="Invisible" /> <xul:menuseparator/> <xul:menuitem label="Online" image="img/statuses/jab/on.gif"/> <xul:menuitem label="Away" image="img/statuses/jab/away.gif"/> <xul:menuitem label="Don't disturb" image="img/statuses/jab/dnd.gif"/> <xul:menuitem label="Not available" image="img/statuses/jab/xa.gif"/> <xul:menuitem label="Offline" image="img/statuses/jab/off.gif"/> </xul:menupopup> </xul:toolbarbutton> </xul:toolbar></xul:toolbox>

Page 11: Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

5.1 XML for UI layout: Technologies

- HTML 5 (in development)- SVG 1.1 (Scalable Vector Graphics, W3C)- XHTML (eXtensible Hyper Text Markup Language, W3C)- XUL (XML User interface Language, Mozilla)- Charts (in development)- your own?

Page 12: Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

5.2 CSS for Style: Embedding Ample CSS in HTML

a) Inline, using a style tag with type="text/ample+css"<style type="text/ample+css">

@namespace xul url(http://...only.xul);xul|menu:hover {

font-variant: italic;}xul|datepicker::value {

background-color: red;}

</style>

b) Referencing a resource, using a link tag with href attribute<link type="text/ample+css"

rel="stylesheet" href="stylesheet.css"/>

Page 13: Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

5.2 CSS for Style: Code Samplexul|menuitem:disabled {

color: GrayText;}xul|menuitem[type]::image {

background-repeat: no-repeat;width: 16px;height: 16px;vertical-align: middle;

}xul|menuitem[type=checkbox]::image {

background-position: 0px 16px; /* hidden */background-image: url(media/menuitem_checkbox.gif);

}xul|menuitem[type=radio]::image {

background-position: 0px 16px; /* hidden */background-image: url(media/menuitem_radio.gif);

}xul|menuitem::image:checked {

background-position: 0px 0px;}

Page 14: Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

5.2 CSS for Style: Technologies

- CSS3 Namespaces@namespace xul url(http://...only.xul);xul|menuitem {font: normal 1em Verdana}

- CSS3 UIxul|datepicker::input {background-color:pink}

- Pseudo-classes (:drag, :resize..).mytarget:drop {border: dashed 1px red}

Page 15: Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

5.3 JS/DOM for UI Logic: Embedding JS in HTML

<script type="text/javascript">ample.addEventListener("load", function(oEvent) {

var oNode = this.querySelector("svg|circle");oNode.setAttribute("r", 10);

}, false);</script>

"ample" is an object in Ample SDK similar to "document" object in web browser, it provides access to the document built of all XML fragments found on the page.

Page 16: Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

5.3 JS/DOM for UI Logic: Technologies

Document Object Model- Core (Level 2)- Events (Level 3)- Selectors API

Componentization Model API

UI Managers- Focus- Drag&Drop- Resize- Capture- SPI History- Text selection

Page 17: Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

5.3 JS/DOM for UI Logic: More Technologies

JavaScript objects - DOMParser, XMLSerializer- XSLTProcessor- XMLHttpRequest- JSON- JavaScript up to 1.8 objects prototypes

XML APIs - SMIL3.0 (selected modules), - XInclude 1.0- XML Schema 1.1 (Part 2 - Datatypes)

CSS pre-processors - CSS2.1 (fixes)- CSS3-Namespaces- CSS3-UI

Page 18: Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

6. Extending Ample SDK

1) Prototyping DOM Objects2) Creating new UI elements / languages3) Creating new UI managers

Page 19: Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

6.1 Prototyping DOM Objects

Prototype method on base AMLNode object:

AMLNode.prototype.on = function(sType, fHandler) {this.addEventListener(sType, fHandler, false);

}function _(sQuery) {

return ample.querySelector(sQuery);}

Use it for any element:

_(“#myelement”).on(“click”, function(event) {alert(event.target.tagName);

});

Page 20: Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

6.2 Creating new UI elements

function cMyCombobox() {this.options = new AMLNodeList;

}cMyCombobox.prototype = new AMLElement;cMyCombobox.prototype.options = null;

// Class-level event handlerscMyCombobox.handlers = {

"DOMNodeInsertedIntoDocument": function(oEvent) { },"click": function(oEvent) { }

}

// PresentationcMyCombobox.prototype.$getTagOpen = function() {

return '<div class="my-combobox">\<div>

<input class="my-combobox--input"/>\<button class="my-combobox--button"/>\

</div>\<div class="my-combobox--gateway">';

}cMyCombobox.prototype.$getTagClose = function() {

return '</div>\</div>';

}

Page 21: Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

6.2 Componentization model explained

Web-browser DOM (shadow tree) (HTML4, SVG/VML)

Ample SDK DOM(XHTML, XUL, SVG)

select

option option

div

div div

div div input button

div div

Page 22: Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

6.3 Creating new UI managers

// Adding base element object prototype memberAMLElement.prototype.$selectable = null;

// Registering Event Handlers with documentample.addEventListener("mousedown", function(oEvent) {

for (var oElement = oEvent.target, bAllow = false; oElement.nodeType != AMLNode.DOCUMENT_NODE; oElement = oElement.parentNode) {

if (oElement.$selectable === true)bAllow = true;

elseif (oElement.$selectable === false)

return !bAllow && oEvent.preventDefault();}

}, false);

Page 23: Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

Wrapping up: Why Ample SDK is relevant?

1) Uses standard APIs that will stay2) Natural Programming Model (W3C)3) Provides better UI building blocks, such as XUL4) Fast rendering5) Enables quite a bit of SVG1.1 in IE5.5, IE6-86) Enables creation of Domain Specific markup

Page 24: Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010

Ample SDK

Web-Site: http://www.amplesdk.comSource-Code: http://github.com/clientside/amplesdkReference: http://www.amplesdk.com/referenceDiscussions: http://groups.google.com/group/amplesdk

Sergey Ilinsky

http://www.ilinsky.comhttp://twitter.com/ilinsky

Thank you!