So einfach geht modernes Roaming fuer Notes und Nomad.pdf
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
1. Building Complex GUI Apps The Right Way with Ample SDK The Scandinavian Web Developers Conference 2-3 June 2010, Stockholm, Sweden Sergey Ilinsky
2. 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
3. 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
4. 3. Demos first! - SVG in Internet Explorer - XUL Cross-Browser - Charts - HTML5
5. 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
7. 4. Introduction to the Ample SDK : The Big Picture Virtualizing browser technologies: - pass through if available - implement if not - fix if broken
8. 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
9. 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>
11. 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?
12. 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"/>
15. 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.
16. 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
17. 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
18. 6. Extending Ample SDK 1) Prototyping DOM Objects 2) Creating new UI elements / languages 3) Creating new UI managers
19. 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); });
21. 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
22. 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);
23. 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