Upload
sergey-ilinsky
View
4.313
Download
0
Embed Size (px)
DESCRIPTION
Slides from my talk at the SWDC 2010
Citation preview
Building Complex GUI AppsThe Right Waywith Ample SDK
The Scandinavian Web Developers Conference2-3 June 2010, Stockholm, Sweden
Sergey Ilinsky
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
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
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> <!-- (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>
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 Style3) 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">
<!-- 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>
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 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;}
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}
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 Objects2) Creating new UI elements / languages3) 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 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>';
}
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 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);
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
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!