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

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

1. Web Application Architecture Transition Server-Side Client-Side Back-End (Business Logic) Front-End (UI Logic +Rendering +Auth.) Browser Server-Side Client-Side Back-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

2. HTML5 and client-side GUI Technologies HTML5 [GUI concerns] 1) Limited amount of UI elements 2) Poor-to-none UI elements styling facilities 3) Hardly or not implemented in most of web browsers 4) 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) APIs 2) GUI is programmed (in JS+HTML), not declared

3. Demos first! - SVG in Internet Explorer - XUL Cross-Browser - Charts - HTML5

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

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

4. Introduction to the Ample SDK : The Big Picture Virtualizing browser technologies: - pass through if available - implement if not - fix if broken

5. Building GUI apps with Ample SDK Programming model is that of web-browser: 1) XML for UI (declarative UIs) 2) CSS for Style 3) JavaScript (DOM API) for Logic

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">  </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>  <script type="text/javascript">ample.close()</script>

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 >

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?

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

5.2 CSS for Style: Code Sample xul|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; }

5.2 CSS for Style: Technologies - CSS3 Namespaces @namespace xul url(http://...only.xul); xul| menuitem {font: normal 1em Verdana} - CSS3 UI xul|datepicker ::input {background-color:pink} - Pseudo-classes (:drag, :resize..) .mytarget :drop {border: dashed 1px red}

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.

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

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

6. Extending Ample SDK 1) Prototyping DOM Objects 2) Creating new UI elements / languages 3) Creating new UI managers

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

6.2 Creating new UI elements function cMyCombobox() { this.options = new AMLNodeList; } cMyCombobox.prototype = new AMLElement; cMyCombobox.prototype.options = null; // Class-level event handlers cMyCombobox.handlers = { "DOMNodeInsertedIntoDocument": function(oEvent) { }, "click": function(oEvent) { } } // Presentation cMyCombobox.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>'; }

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

6.3 Creating new UI managers // Adding base element object prototype member AMLElement.prototype.$selectable = null; // Registering Event Handlers with document ample.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; else if (oElement.$selectable === false) return !bAllow && oEvent.preventDefault(); } }, false);

Wrapping up: Why Ample SDK is relevant? 1) Uses standard APIs that will stay 2) Natural Programming Model (W3C) 3) Provides better UI building blocks, such as XUL 4) Fast rendering 5) Enables quite a bit of SVG1.1 in IE5.5, IE6-8 6) Enables creation of Domain Specific markup

Ample SDK Web-Site: http://www.amplesdk.com Source-Code: http://github.com/clientside/amplesdk Reference: http://www.amplesdk.com/reference Discussions: http://groups.google.com/group/amplesdk Sergey Ilinsky http://www.ilinsky.com http://twitter.com/ilinsky Thank you!

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

by Sergey Ilinsky on Jun 08, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 34

Statistics

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