3. 1. The Landscape of Client-side GUI Technologies 2. Ample SDK: Das Experiment 3. Using Ample SDK: Basics 4. Extending on Ample SDK 5. Showcase 6. Resources 7. Q&A Agenda
4. October 17, 2007, Ajaxian.com Re-inventing XMLHttpRequest: Cross-browser implementation with sniffing capabilities
5. Highlights: Fully functional implementation of XHR for IE7- Some 20 issues fixed in native implementations. (New reports are still coming) Extended to support [transparent] request sniffing.
6. So I took on to re-inventing (re-implementing) web browser
7. 1. The Landscape of Client-Side GUI Technologies 1.1 Server-Side vs. Client-Side 1.2 Libraries vs. Frameworks 1.3 Web Browsers
8. 1.1 Server-Side vs. Client-Side Server-Side - app is orchestrated on the server - data and UI communicated to client combined - client-side hooks are not welcome Client-Side - app is orchestrated on the client (browser) - data communicated separately from UI
9. 1.2 GUI Libraries vs. Frameworks Libraries: - help executing smaller development tasks - often used to «pimp-up» web-pages Frameworks: - bring another abstraction level - used to build «rich applications»
10. 1.3 Web Browsers Two camps: Internet Explorer vs. Modern Browsers Problems: - Incompatible (sometimes incomplete) APIs - Too many versions, cool stuf in latest versions - Poor GUI facilities
11. Hm.. But don't many libraries and frameworks clean that mess successfully while adding missing glyphs?
14. 2.1 Objectives Do not have: - new programming model - new APIs Do have: - ease of use (eliminate learning curve if possible) - better GUI technologies - separation of concerns - extensible architecture
15. Meet Ample SDK Ample SDK is a piece of software that runs transparently in the layer between web browser and application. While running it provides the Logic of the application with standard cross-browser access to the User Interface.
17. 2.3 Browser-within-a-browser? Ample SDK is in a way a web-browser (GUI aspect) - understands MLs (XHTML, XUL, SVG..) - provides DOM APIs (Core, Events, Selectors APIs) - uses CSS for styling (pseudo-classes, pseudo-elemnts)
26. The Programming Model Programming against Ample SDK is as simple as doing it against... right, cross-browser browser!
27. 3.1 Laying out Application UI Application GUI is created with XML or JS staticly: XML (XHTML, XUL, SVG..) dynamicly: JavaScript (DOM) or XML + importNode
28. Embedding XML UI into a web page a) Inline, using a script tag with type="application/ample+xml" <body> <!-- other HTML code --> <script type="application/ample+xml"> <!-- Ample SDK inline XML markup --> </script> <!-- other HTML code --> </body> b) Referencing a resource, using a script tag with src attribute <body> <!-- other HTML code --> <script type="application/ample+xml" src="ui.xml"></script> <!-- other HTML code --> </body> c) Inline, using ample.open() and ample.close() <body> <!-- other HTML code --> <script type="text/javascript">ample.open()</script> <!-- Ample SDK inline XML markup --> <script type="text/javascript">ample.close()</script> <!-- other HTML code --> </body>
29. Using XHTML 1 and XHTML 5 <article> <header> <h1>Apples</h1> <p>Tasty, delicious fruit!</p> </header> <p>The apple is the pomaceous fruit of the apple tree.</p> <section> <h1>Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p> </section> <section> <h1>Granny Smith</h1> <p>These juicy, green apples and make a great filling for apple pies.</p> </section> <footer> <h1>Apples</h1> <p>Tasty, delicious fruit!</p> </footer> </article>
35. Embedding CSS stylesheets in a web page a) Inline, using a style tag with type="text/ample+css" <style type="text/ample+css"> /* Ample SDK inline stylesheet */ </style> b) Referencing a resource, using a link tag with href attribute <link type="text/ample+css" rel="stylesheet" href="stylesheet.css"/>
36. Using CSS for styling UI 1) Namespaced selectors for styling component @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; xul|menulist { width: 200px; } 2) Pseudo-class selectors for styling component state @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; xul|datepicker:focus { background-color: pink; } 3) Pseudo-element selectors for styling component view @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; xul|colorpicker::input { border: solid 1px blue; } xul|colorpicker::button { background-image: url("colorpicker.png"); }
37. 3.3 Writing Application Logic Implementing application [View] logic is about receiving UI events and updating UI state appropriately. In Ample SDK the Application UI is represented by a DOM tree (mainly built with UI elements), that you can access or modify in a standard and consistent way. UI events are fired on elements in the tree with which the user interacts. Once dispatched they propagate through the tree and can be picked up for handling.
38. Embedding JavaScript GUI Logic into a web page a) Inline, using a script tag with type="text/javascript" <script type="text/javascript"> /* JavaScript UI Logic */ </script> b) Referencing a resource, using script tag with src attribute <script type="text/javascript" src="application.js"></script>
39. The ample scripting object The ample scripting object in the Ample SDK is similar to the document scripting object available in the browser
40. Navigating / Altering UI Document Tree a) Navigating the tree - firstChild, lastChild, previousSibling, nextSibling, childNodes, parentNode etc. - getElementById, getElementsByTagName and getElementsByTagNameNS - querySelector and querySelectorAll b) Altering the tree - setAttribute / setAttributeNS, getAttribute / getAttributeNS and removeAttribute / removeAttributeNS - createElement / createElementNS, createTextNode, appendChild, insertBefore, removeChild and replaceChild - importNode
41. Registering Event Handlers and Handling UI Events a) Dynamically, using the DOM Events API // Alert event current target tagName oElement.addEventListener("click", function(oEvent) { alert(oEvent.currentTarget.tagName) }, true ); // Cancel user selection (Also in IE) oElement.addEventListener("mousedown", function(oEvent) { oEvent.preventDefault(); }, false) b) Inline, using a on{event} attribute <xul:scale onchange="alert(this.getAttribute('value'))" min="0" max="100" value="50"/>
42. Using Drag And Drop Manager Events: dragstart, drag, dragend, dragenter, dragleave, drop Properties: $draggable, $droppable Pseudo-classes: drag, drop <div xmlns:aml="http://www.amplesdk.com/ns/aml" ondrop="if (event.relatedTarget.parentNode != event.target) event.target.appendChild(event.relatedTarget)"> <div aml:droppable="true" class="droppable"> <div aml:draggable="true" class="draggable"> Container 1: drag me and drop to another container </div> <div aml:draggable="true" class="draggable"> Container 2: drag me and drop to another container </div> </div> <div aml:droppable="true" class="droppable"> </div> </div> .draggable { width: 100px; height: 100px; background-color: pink; border: solid 1px red; cursor: move; } .droppable { width: 300px; height: 320px; padding: 10px; float: left; background-color: lightgreen; border: solid 1px green; } div:drag { border-color: black; position: relative; } div:drop { border-style: dashed; }
46. Using XML APIs Transforming XML document with XSL-T example // Load stylesheet document oXMLHttpRequest.open("GET", "stylesheet.xsl", false); oXMLHttpRequest.send(null); var oStylesheet = oXMLHttpRequest.responseXML; // Load input document oXMLHttpRequest.open("GET", "input.xml", false); oXMLHttpRequest.send(null); var oInput = oXMLHttpRequest.responseXML; // Create XSLTProcessor and import stylesheet into it var oXSLTProcessor = new XSLTProcessor; oXSLTProcessor.importStylesheet(oStylesheet); // Transform input document to output document and alert result var oOutput = oXSLTProcessor.transformToDocument(oInput); alert(new XMLSerializer().serializeToString(oOutput));
47. JSON vs. XML JSON/XML for data XML/JSON for UI Whatever you like!
48. 4. Extending on Ample SDK 4.1 Prototyping Objects / Creating new APIs 4.2 Creating Custom Markup Languages 4.3 Implementing Global UI Managers
50. 4.2 Creating Custom Markup Language // Create new Namespace object var MyNamespace = new AMLNamespace; // Register new Namespace with Ample SDK ample.domConfig.setNamespace("http://www.mysite.com/ns/ui");
51. Creating Custom Component // Define Component Constructor var MyButton = function() { // This is the constructor }; // Set Component Prototype MyButton.prototype = new AMLElement; // Register new Component with Namespace MyNamespace.setElement("button", MyButton);
54. Handling UI Events at the Component Level Event handlers defined on component classes are executed at the bubbling or target phase only if event default action was not prevented MyCombobox.handlers = { focus: function(oEvent) { // TODO: dispatch DOMActivate event } }
60. 4.3 Writing Global UI Managers A UI Manager is a plugin that reacts to primitive UI events and synthetizes other more enhanced ones Mouse Gesture UI Manager?
62. Implementation Aspects: Application Logic: PAC approach UI Technology: XHTML+XUL+Custom components Server-side — 2 services: - Static for UI - Dynamic for Data (JSON to SOAP)
63. Wrapping up: Why Ample SDK is relevant? - Natural programming model - Uses APIs that will stay - Better UI building bricks — XUL et alii - Enables quite a bit of SVG in Internet Explorer - Allows creating DS markup technologies
64. 6. Resources IRC Channels #amplesdk on irc.freenode.net #amplesdk-dev on irc.freenode.net (Framework Developers) Mailing Lists / Discussion Groups http://groups.google.com/group/amplesdk http://groups.google.com/group/amplesdk-dev (Framework Developers) Bugtracker http://www.amplesdk.com/bugtracker/ Documentation (online/offline) http://www.amplesdk.com/reference/ Developer Tools Aptana IDE plugin Firebug plugin (in development)