SlideShare a Scribd company logo
Ample SDK: Standards-based GUI Framework  for Client-side Applications The Ajax Experience 2009 September 14-16 in Boston, MA
Sergey Ilinsky http://www.ilinsky.com http://twitter.com/ilinsky
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
October 17, 2007, Ajaxian.com Re-inventing XMLHttpRequest: Cross-browser implementation with sniffing capabilities

Recommended for you

Wordcamp abq cf-cpt
Wordcamp abq cf-cptWordcamp abq cf-cpt
Wordcamp abq cf-cpt

WordCamp ABQ presentation on WordPress Custom Post Types, Custom Fields and altering TinyMCE Editor to create a powerful flexible CMS.

wordpresswordcamp albuquerque
Jsf2 html5-jazoon
Jsf2 html5-jazoonJsf2 html5-jazoon
Jsf2 html5-jazoon

This document discusses HTML5 and how it can be used to enhance JavaServer Faces (JSF) 2.0 components. It provides an overview of HTML5 features such as new semantic elements, form controls, media elements, graphics with canvas, and JavaScript APIs. It also describes JSF 2.0's composite component model and how components can leverage HTML5 features like media playback and JavaScript integration. The document demonstrates a composite audio component that uses HTML5's audio element and JavaScript to control audio playback from JSF. It encourages leveraging HTML5 to promote rich user interfaces and future-proof JSF applications.

How to dockerize rails application compose and rails tutorial
How to dockerize rails application compose and rails tutorialHow to dockerize rails application compose and rails tutorial
How to dockerize rails application compose and rails tutorial

Follow this quick step-by-step tutorial on how to Dockerize Rails Application with the help of Docker Compose to build your own demo application.

tutorialdockerizerails app
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.
So I took on to  re-inventing (re-implementing) web browser
1. The Landscape of Client-Side GUI Technologies 1.1 Server-Side vs. Client-Side 1.2 Libraries vs. Frameworks 1.3 Web Browsers
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

Recommended for you

sMash at May NYPHP UG
sMash at May NYPHP UGsMash at May NYPHP UG
sMash at May NYPHP UG

The document summarizes WebSphere sMash, an agile web application platform from IBM that leverages dynamic scripting languages like Groovy and PHP. It discusses key features of WebSphere sMash including the event-driven programming model, use of a global context for state management, deployment and tooling. The document also provides an overview of building RESTful applications with WebSphere sMash and using PHP within the platform.

nyphpphppug
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5

The document discusses HTML5 game development. It covers various topics like game concepts, HTML5 components for games, developing a game step-by-step and advanced topics. It focuses on HTML5 canvas for graphics, local storage for data, and describes functions for animations, interactions, controls and other elements needed for game development. The document provides examples for drawing, colors, images and text on the canvas.

game development using html 5
Introduction to Groovy Monkey
Introduction to Groovy MonkeyIntroduction to Groovy Monkey
Introduction to Groovy Monkey

Introduction to the Eclipse scripting tool Groovy Monkey. Groovy Monkey allows for you to engage in API exploration, Task Automation, Plugin prototyping and collaboration in a lightweight and simple way.

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»
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
Hm..  But don't many libraries and frameworks clean that mess successfully  while adding missing glyphs?
Yes, they do. Every in its own way.

Recommended for you

Workshop: Symfony2 Intruduction: (Controller, Routing, Model)
Workshop: Symfony2 Intruduction: (Controller, Routing, Model)Workshop: Symfony2 Intruduction: (Controller, Routing, Model)
Workshop: Symfony2 Intruduction: (Controller, Routing, Model)

Here are the 4 main ways to define routes in Symfony: 1. Annotations: Put routing information directly in controllers as annotations. 2. YAML configuration: Define routes in the routing.yml configuration file. 3. XML configuration: Define routes in the routing.xml configuration file. 4. PHP configuration: Define routes by creating and returning RouteCollection instances from routing.php files. The YAML configuration method is most commonly used. It keeps routing separated from code and allows defining multiple routes in one centralized configuration file for better organization. Annotations can also be useful for simple applications. XML is not used much. And PHP configuration is only needed if routes need to be dynamically generated.

symfony2conferencessymfony
Ruby On Rails Seminar Basis Softexpo Feb2010
Ruby On Rails Seminar Basis Softexpo Feb2010Ruby On Rails Seminar Basis Softexpo Feb2010
Ruby On Rails Seminar Basis Softexpo Feb2010

This document provides an introduction and overview of Ruby on Rails (RoR), including its background, key features like MVC architecture and ActiveRecord ORM, and how it delivers business value through rapid application development. Rails simplifies and speeds up the web development process using conventions over configurations and Don't Repeat Yourself principles. It also includes examples of popular websites built with Rails and concludes with a discussion of actions, controllers and templates in the MVC framework.

[2015/2016] Apache Cordova
[2015/2016] Apache Cordova[2015/2016] Apache Cordova
[2015/2016] Apache Cordova

The Cordova framework Recurrent app architecture Cordova CLI Debugging Cordova applications My development environment This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016. http://www.ivanomalavolta.com

javascriptapache rippleapache cordova
2.  Ample SDK: Das Experiment 2.1 Objectives 2.2 Solution Architecture 2.3 Browser-within-a-browser? 2.4 Ample SDK Application Lifetime 2.5 Technologies Breakdown
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
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.
2.2 Solution Architecture Runtime - runtime.js UI Languages - xhtml/xhtml.js - xul/xul.js+xul/xul.css - svg/svg.js - ...

Recommended for you

HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1

Mobile applications are evolving to leverage HTML5 and rich web technologies. While native mobile applications currently have advantages in terms of performance and access to device features, HTML5 allows building applications that work across mobile devices and platforms using web standards. Frameworks like jQuery Mobile and Sencha Touch demonstrate how to build mobile-optimized interfaces using HTML, CSS, and JavaScript. HTML5 applications have the potential for broader reach and less development effort compared to building separate native apps, though performance compromises remain versus truly native apps.

w2e
Mozilla Firefox Extension Development, Course 1: Basic
Mozilla Firefox Extension Development, Course 1: BasicMozilla Firefox Extension Development, Course 1: Basic
Mozilla Firefox Extension Development, Course 1: Basic

This document provides an overview and examples of creating user interfaces with XML User Interface Language (XUL) in Mozilla Firefox extensions. It discusses XUL elements like boxes, buttons, menus and layout attributes. Code snippets demonstrate how to use these elements to build interfaces with labels, text boxes, checkboxes and nested menus. The document also explains how JavaScript and CSS can be used to add interactivity and styles to XUL interfaces.

extensionfirefoxmoztw
Powerful tools for building web solutions
Powerful tools for building web solutionsPowerful tools for building web solutions
Powerful tools for building web solutions

A 360-degree overview of the most popular technologies in web development to boost your productivity.

webjavascriptcss
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)
2.4 Ample SDK Application Lifetime
2.5 Technologies Breakdown - Runtime - Scripting Technologies - XML Technologies - Styling Technologies - UI Markup Technologies
Runtime: Scripting Technologies - Document Object Model - DOM Core (Level 2) - DOM Events (Level 3) - Selectors API - XML APIs - DOMParser, XMLSerializer - XSLTProcessor - XMLHttpRequest - UI Managers - Focus Manager - Drag&Drop Manager - Resize Manager - Capture Manager - SPI History Manager - Componentization Model

Recommended for you

Android | Busy Java Developers Guide to Android: UI | Ted Neward
Android | Busy Java Developers Guide to Android: UI | Ted NewardAndroid | Busy Java Developers Guide to Android: UI | Ted Neward
Android | Busy Java Developers Guide to Android: UI | Ted Neward

- The document provides an overview of key concepts for developing Android user interfaces (UIs), including activities, tasks, views, layouts, menus, and event handling. - It explains how to define and populate UIs using XML layout resources or programmatically in Java code, and how to move between activities using intents. - The document emphasizes that threading behavior differs in Android and blocking or UI modifications on non-UI threads can cause problems.

jaxjax londonandroid
[2015/2016] Backbone JS
[2015/2016] Backbone JS[2015/2016] Backbone JS
[2015/2016] Backbone JS

This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016. http://www.ivanomalavolta.com

hybrid mobile appsmobile appjavascript
Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....
Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....
Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....

In this session we are going to know the Xamarin Community Toolkit (XCT) along with all the options it offers like controls, converters, behaviors, etc.

xamarinxctxamarin community toolkit
Runtime: XML technologies - Xinclude 1.0 - SMIL3.0 (selected modules) - XML Schema 1.1 (datatypes module)
Runtime: Styling Technologies - CSS 2.1 - CSS3 Namespaces - CSS3-UI (pseudo-classes, pseudo-elements)
UI Markup Technologies - XHTML1 - XUL - SVG 1.2 Tiny - XHTML5 (in development) - XForms 1.1 (planned)
3. Using Ample SDK: Basics - XML for UI - CSS for Style - JavaScript for Logic

Recommended for you

Angular js
Angular jsAngular js
Angular js

- The document discusses AngularJS and single page applications. It provides an introduction and overview of key AngularJS concepts including modules, controllers, views, services, dependency injection, and filters. - Code samples and demos are referenced to illustrate concepts in more depth. Challenges with SEO and the benefits of TypeScript for adding type safety to JavaScript are also mentioned.

TRWResume-10-2016
TRWResume-10-2016TRWResume-10-2016
TRWResume-10-2016

Tommy Williams Jr is a full stack developer with a primary focus on Angular 2, Ionic 2, Node JS, and JavaScript. He has over 10 years of experience building both front-end and back-end applications. Currently he works as a lead UI developer at Office Depot, where he helped modernize their codebase and transition websites during an acquisition. In previous roles, he has developed on additional technologies like PHP, ColdFusion, and C++. He also runs his own company called Location Over Time LLC and works on personal projects involving new technologies like web components.

Chapter 16 2 Air Masses, Fronts And Weather Maps Andie
Chapter 16  2  Air Masses, Fronts And Weather Maps AndieChapter 16  2  Air Masses, Fronts And Weather Maps Andie
Chapter 16 2 Air Masses, Fronts And Weather Maps Andie

An air mass is a large volume of air that acquires consistent temperature and humidity characteristics based on the region over which it travels. There are four main types of air masses: maritime tropical, continental tropical, maritime polar, and continental polar. Weather fronts occur when different air masses meet, with the denser air mass pushing the less dense air mass. A cold front moves more quickly than a warm front and can produce severe weather like thunderstorms.

Hello World! <!DOCTYPE html> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title>Hello, World!</title>  <script type=&quot;text/javascript&quot; src=&quot;ample/runtime.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;ample/languages/xhtml/xhtml.js&quot;></script>  <style type=&quot;text/ample+css&quot;> b { color: red; } </style>  <script type=&quot;text/javascript&quot;> function alertHelloWorld(oEvent) { alert('Element &quot;' + oEvent.target.tagName + '&quot; was clicked'); } </script> </head> <body>  <script type=&quot;application/ample+xml&quot;> <b onclick=&quot;alertHelloWorld(event)&quot;>Hello, World!</b> </script> </body> </html>
The Programming Model Programming against Ample SDK is as simple as doing it against... right, cross-browser browser!
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
Embedding XML UI into a web page a) Inline, using a script tag with type=&quot;application/ample+xml&quot; <body>  <script type=&quot;application/ample+xml&quot;>  </script>  </body> b) Referencing a resource, using a script tag with src attribute <body>  <script type=&quot;application/ample+xml&quot; src=&quot;ui.xml&quot;></script>  </body> c) Inline, using ample.open() and ample.close() <body>  <script type=&quot;text/javascript&quot;>ample.open()</script>  <script type=&quot;text/javascript&quot;>ample.close()</script>  </body>

Recommended for you

11 оригинальных способов использования Wrike
11 оригинальных способов использования Wrike11 оригинальных способов использования Wrike
11 оригинальных способов использования Wrike

Узнайте, как команды используют Wrike для подготовки контента, неформального общения и многого другого.

project managementcollaborationcollaboration software
Control system
Control systemControl system
Control system

This document discusses the human sensory and nervous systems. It explains that humans have various sense organs like skin, eyes, ears, taste buds and nose that collect information about the environment. This information is detected by sensory receptors and transmitted via sensory neurons and nerves to either trigger instant reflex responses or alert the conscious brain. It also describes the endocrine system and how hormones released by glands produce longer-lasting responses than the nervous system to control various bodily functions and maintain homeostasis.

Ch 15 2 Energy And Heat Transfer
Ch 15   2 Energy And Heat TransferCh 15   2 Energy And Heat Transfer
Ch 15 2 Energy And Heat Transfer

The document discusses the key factors that influence weather and climate on Earth, including heat from the sun, atmospheric gases, and their interactions. It explains that the sun provides visible light, ultraviolet radiation, and infrared radiation that warm the Earth's surface and atmosphere. Gases like carbon dioxide in the atmosphere contribute to the greenhouse effect by trapping heat. The amount of solar energy reaching different locations on Earth depends on latitude and time of year due to variations in the sun's angle and the spread of its energy across larger areas.

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>
Using XUL (Mozilla technology) <xul:tabbox xmlns:xul=&quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul&quot;> <xul:tabs> <xul:tab label=&quot;checkbox&quot; /> <xul:tab label=&quot;textbox&quot; /> <xul:tab label=&quot;datepicker&quot; /> </xul:tabs> <xul:tabpanels> <xul:tabpanel> <xul:checkbox /> </xul:tabpanel> <xul:tabpanel> <xul:textbox /> </xul:tabpanel> <xul:tabpanel> <xul:datepicker /> </xul:tabpanel> </xul:tabpanels> </xul:tabbox>
Using SVG1.2 Tiny <svg:svg viewBox=&quot;0,0 400,400&quot; height=&quot;400px&quot; width=&quot;400px&quot; xmlns:svg=&quot;http://www.w3.org/2000/svg&quot; xmlns:smil=&quot;http://www.w3.org/2008/SMIL30/&quot;> <svg:circle cx=&quot;200&quot; cy=&quot;200&quot; r=&quot;10&quot; fill=&quot;red&quot; opacity=&quot;1&quot; stroke=&quot;black&quot; stroke-width=&quot;1&quot;> <smil:animate begin=&quot;click&quot; decelerate=&quot;0.5&quot; to=&quot;200&quot; attributeName=&quot;r&quot; dur=&quot;500ms&quot;/> </svg:circle> </svg:svg> Works in Internet Explorer 5.5 too Modules Implemented: 5. Document Structure 8. Paths 9. Basic Shapes 10. Text 12. Animation (SMIL)
Using DOM-Core for building UI dynamically var sXULNameSpace = &quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul&quot;; var popup = ample.getElementById(&quot;items-popup&quot;); var item4 =  ample.createElementNS (sXULNameSpace, &quot;xul:menuitem&quot;); popup.appendChild(item4); item3.setAttribute(&quot;label&quot;, &quot;Item 3&quot;); item3.setAttribute(&quot;value&quot;, &quot;3&quot;); var oRequest = new XMLHttpRequest; oRequest.open(&quot;GET&quot;, &quot;wizard.xml&quot;, false); oRequest.onreadystatechange = function() { if (oRequest.readyState == 4) { var oFragment =  ample.importNode (oRequest.responseXML.documentElement, true); ample.querySelector(&quot;#target&quot;).appendChild(oFragment); } }

Recommended for you

Invite5加入流程.
Invite5加入流程.Invite5加入流程.
Invite5加入流程.
Websockets en Ruby en 5 Minutos
Websockets en Ruby en 5 MinutosWebsockets en Ruby en 5 Minutos
Websockets en Ruby en 5 Minutos

This document discusses WebSockets in Ruby in 5 minutes. It introduces WebSockets and the WebSocket API. It then summarizes how to implement a Ruby WebSocket server using the EM-WebSocket library and a Ruby WebSocket client using the Web-Socket-Ruby library. It also discusses how to implement a JavaScript WebSocket client. Finally, it discusses some use cases for WebSockets like chat, games, and real-time notifications and encourages experimenting with building a chat, whiteboard, or todo list application.

ruby websockets html5
4.2 voorlichting
4.2 voorlichting4.2 voorlichting
4.2 voorlichting

Voorlichting innovatie management 4.2 uitstroomprofiel Technische bedrijfskunde aan de Hogeschool van Amsterdam

innoveren in elektrisch rijden
Using XInclude to merge XML documents 1. <div xmlns:xi=&quot;http://www.w3.org/2001/XInclude&quot;> 2.  <xi:include href=&quot;Menubar.xml&quot; /> 3.  <xi:include href=&quot;Editor.xml&quot; /> 4.  <xi:include href=&quot;Statusbar.xml&quot; /> 5. </div>
3.2 Styling Application UI Styling GUI is done with CSS... nicely.
Embedding CSS stylesheets in a web page a) Inline, using a style tag with type=&quot;text/ample+css&quot; <style type=&quot;text/ample+css&quot;> /* Ample SDK inline stylesheet */ </style> b) Referencing a resource, using a link tag with href attribute <link type=&quot;text/ample+css&quot; rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot;/>
Using CSS for styling UI 1) Namespaced selectors for styling component @namespace xul &quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul&quot;; xul|menulist { width: 200px; } 2) Pseudo-class selectors for styling component state @namespace xul &quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul&quot;; xul|datepicker:focus { background-color: pink; } 3) Pseudo-element selectors for styling component view @namespace xul &quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul&quot;; xul|colorpicker::input { border: solid 1px blue; } xul|colorpicker::button { background-image: url(&quot;colorpicker.png&quot;); }

Recommended for you

Network First Open Day presentation
Network First Open Day presentationNetwork First Open Day presentation
Network First Open Day presentation

Presentation made by Network First at the Berkhamsted School Open for IT gathering on February 28th, 2012.

itnetwork firstberkhamsted school
Transmedia and Augmented Reality
Transmedia and Augmented RealityTransmedia and Augmented Reality
Transmedia and Augmented Reality

Presentation, to pervasive media group, that suggests ways one might approach using AR in a transmedia experience.

augmented realityartransmedia
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.
Embedding JavaScript GUI Logic into a web page a) Inline, using a script tag with type=&quot;text/javascript&quot; <script type=&quot;text/javascript&quot;> /* JavaScript UI Logic */ </script> b) Referencing a resource, using script tag with src attribute <script type=&quot;text/javascript&quot; src=&quot;application.js&quot;></script>
The ample scripting object The  ample  scripting object in the Ample SDK is similar to the  document  scripting object available in the browser
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

Recommended for you

Test Analyst 3 + Yrs Manual Automation Theme
Test Analyst 3 + Yrs Manual Automation ThemeTest Analyst 3 + Yrs Manual Automation Theme
Test Analyst 3 + Yrs Manual Automation Theme

A Software Testing Professional Qualified, Experienced, Responsible, Dependable Software Test Engineer Seeking assignments for Testing Software, MANUAL/AUTOMATION, SECURITY Testing Comprehensive Knowledge of the SDLC (Software Development life cycle) and STLC (Software Testing Life Cycle), Spiral and V-MODEL activities within a leading organization.

To be present1 eso
To be present1 esoTo be present1 eso
To be present1 eso

El documento proporciona una tabla con las formas del verbo TO BE (ser o estar) en inglés para las personas singulares y plurales en las formas afirmativa, negativa e interrogativa. Se incluyen ejemplos de cada forma con los pronombres correspondientes.

to be present
Kurikulum 2013 SMP
Kurikulum 2013 SMPKurikulum 2013 SMP
Kurikulum 2013 SMP

Pada tugas DDP MIPA T.A 2014/2015 dapat memilih KD yang ada pada kurikulum K-13 sebagai berikut. Cantumkan nomor KD yang telah dipilih, pada kolom KD yang ada pada tabel identifikasi.

Registering Event Handlers and Handling UI Events a) Dynamically, using the DOM Events API // Alert event current target tagName oElement.addEventListener(&quot;click&quot;, function(oEvent) { alert(oEvent.currentTarget.tagName) },  true ); // Cancel user selection (Also in IE) oElement.addEventListener(&quot;mousedown&quot;, function(oEvent) { oEvent.preventDefault(); }, false) b) Inline, using a on{event} attribute <xul:scale onchange=&quot;alert(this.getAttribute('value'))&quot; min=&quot;0&quot; max=&quot;100&quot; value=&quot;50&quot;/>
Using Drag And Drop Manager Events:  dragstart, drag, dragend, dragenter, dragleave, drop Properties:  $draggable, $droppable Pseudo-classes:  drag, drop <div xmlns:aml=&quot;http://www.amplesdk.com/ns/aml&quot; ondrop=&quot;if (event.relatedTarget.parentNode != event.target) event.target.appendChild(event.relatedTarget)&quot;> <div aml:droppable=&quot;true&quot; class=&quot;droppable&quot;> <div aml:draggable=&quot;true&quot; class=&quot;draggable&quot;> Container 1: drag me and drop to another container </div> <div aml:draggable=&quot;true&quot; class=&quot;draggable&quot;> Container 2: drag me and drop to another container </div> </div> <div aml:droppable=&quot;true&quot; class=&quot;droppable&quot;> </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; }
Using Resize Manager Events:  resizestart, resize, resizeend CSS Pseudo-classes:  resize Properties:  $resizable <div aml:resizable=&quot;true&quot; class=&quot;resizable&quot; xmlns:aml=&quot;http://www.amplesdk.com/ns/aml&quot;> Resize me </div> @namespace &quot;http://www.w3.org/1999/xhtml&quot;; div.resizable { width:  250px; height: 250px; background-color:  pink; border: solid 1px red; max-width:  500px; } div.resizable:resize { background-color:  lightyellow; }
Using History Manager Methods:  $bookmark(state) Events:  hashchange ample.addEventListener(&quot;hashchange&quot;, function(oEvent) { // Implement logic alert(navigator.location.hash) }, false);

Recommended for you

Absolute Dating
Absolute DatingAbsolute Dating
Absolute Dating

This document discusses methods for determining the age of objects, including radioactive dating using carbon-14. Radioactive elements like carbon-14 decay at a steady rate, allowing scientists to calculate an object's age by comparing the amounts of stable and unstable atoms. Specifically, carbon dating works because carbon-14 is absorbed by plants and animals while alive but then decreases after death, following the radioactive half-life. By measuring carbon-14 and carbon-12 levels, the time since a plant or animal died can be estimated.

Trend Report July 2011: Facebook, Brands & TV in Germany
Trend Report July 2011:  Facebook, Brands & TV in GermanyTrend Report July 2011:  Facebook, Brands & TV in Germany
Trend Report July 2011: Facebook, Brands & TV in Germany

Whereas in the spring of 2010 only about a quarter of the top-100 TV advertisers were identified as having an official (German-language) Facebook presence, just one year later it was evident that the world's largest social network had attracted a far greater proportion of those companies. Working with the same selection method, in April 2011 we identified that half (75) of the companies and brands serving as our basis had official fan pages, of which almost half (30) were less than a year old. This was based on the top 150 TV advertising spenders in the first quarter of the year. Key issues for the second Trend Report: - Review and improvement of the benchmarks identified in 2010: - Re-evaluation of the different strategic patterns in the use of Facebook as a communication channel. - Review of the following hypotheses: 1. Fan pages for brands and companies show declining interaction rates in 2011. 2. The typology of communication strategies displays a shift towards dialogue-oriented forms. 3. The differences in the interaction rates are industry- and size-specific. 4. Brands communicate their Facebook presence more frequently in other communications channels such as TV commercials and corporate web sites than was the case a year ago.

anaylsisreportpr
Reported speech
Reported speech Reported speech
Reported speech

The document discusses the rules for changing direct speech into reported or indirect speech. It explains that verbs must change to past tense, pronouns and place/time references are adjusted, and that reporting verbs like "said" are used to indicate an statement was made indirectly. Indirect questions use "asked" and change word order. Indirect orders/requests use "told" or "asked" followed by an infinitive verb.

reported speech
Using Capture Manager Methods:  $setCapture/$releaseCapture, $setModal/$releaseModal Events:  capture, modal <div> <button onclick=&quot;alert('Hello')&quot;>alert</button> <div id=&quot;dialog&quot; style=&quot;border: solid 1px red&quot;> <button onclick=&quot;this.parentNode.$releaseCapture(true)&quot;>release capture</button> </div> <button onclick=&quot;ample.getElementById('dialog').$setCapture(true)&quot;>set capture</button> </div>
Using XML APIs Transforming XML document with XSL-T example // Load stylesheet document oXMLHttpRequest.open(&quot;GET&quot;, &quot;stylesheet.xsl&quot;, false); oXMLHttpRequest.send(null); var oStylesheet = oXMLHttpRequest.responseXML; // Load input document oXMLHttpRequest.open(&quot;GET&quot;, &quot;input.xml&quot;, 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));
JSON vs. XML JSON/XML for data XML/JSON for UI Whatever you like!
4. Extending on Ample SDK 4.1 Prototyping Objects / Creating new APIs 4.2 Creating Custom Markup Languages 4.3 Implementing Global UI Managers

Recommended for you

Creating a Successful Transmedia Project
Creating a Successful Transmedia ProjectCreating a Successful Transmedia Project
Creating a Successful Transmedia Project

Presentation to the San Francisco transmedia meetup group - Transmedia SF. Thanks to everyone who came out and for the passionate discussion afterwards. It was a huge pleasure!

transmedia storytellingtranslationtransmedia
1st Conditional
1st Conditional1st Conditional
1st Conditional

Conditional sentences contain two clauses: an if-clause expressing a condition and a consequence clause. The first conditional is used for probable present conditions and their likely future consequences, such as "If it rains tomorrow, we shall cancel the picnic" or "You will be tired if you do a lot of exercises." It typically uses the present simple in the if-clause and the future simple with will/won't in the consequence clause. Conditional sentences express possible outcomes based on stated conditions.

conditionalesl
Facebook, Brands and TV Preview Next Conference 2010 Berlin
Facebook, Brands and TV  Preview Next Conference 2010 BerlinFacebook, Brands and TV  Preview Next Conference 2010 Berlin
Facebook, Brands and TV Preview Next Conference 2010 Berlin

We wanted to know: What do the big “TV brands” in Germany actually do on Facebook (as biggest social network)? This is what they do...

tvbrandsfacebook
4.1 Prototyping objects/ Defining new APIs Objects inheritance in Ample SDK (simplified): AMLNode:: AMLDocument AMLCharacterData:: AMLText AMLElement:: MyComponent AMLElement.prototype.listenOnce = function(sEvent, fHandler) { this.addEventListener(sEvent, function(oEvent) { // Remove event listener this.removeEventListener(sEvent, arguments.callee, false); // Handle Event fHandler.call(this, oEvent); }, false) }
4.2 Creating Custom Markup Language // Create new Namespace object var MyNamespace = new AMLNamespace; // Register new Namespace with Ample SDK ample.domConfig.setNamespace(&quot;http://www.mysite.com/ns/ui&quot;);
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(&quot;button&quot;, MyButton);
Defining Component Presentation MyCombobox.prototype.$getTagOpen = function() { return '<div class=&quot;my-combobox&quot;> <input type=&quot;text&quot;  value=&quot;' + this.getAttribute(&quot;text&quot;)+ '&quot;  class=&quot;my-combobox—input&quot; /> <div class=&quot;my-combobox—button&quot;/> <div class=&quot;my-combobox—gateway&quot;>'; } MyCombobox.prototype.$getTagClose = function() { return ' </div> </div>'; }

Recommended for you

The Knoll 2
The Knoll 2The Knoll 2
The Knoll 2

Fast and easy to construct, environmental timber frame homes are precision engineered, energy efficient and warm. OFP timber frame homes are carefully fabricated in our own workshops in kent and the South East of England, using timber from managed resources. Each stage of production is carefully monitored to ensure that our customers receive a quality product, with delivery arranged to suit their build programme.

Using SVG with Ample SDK cross browser
Using SVG with Ample SDK cross browserUsing SVG with Ample SDK cross browser
Using SVG with Ample SDK cross browser

1) The document discusses using SVG cross-browser with the Ample SDK JavaScript GUI framework. It describes implementing SVG in Ample SDK and how to embed, modify, and style SVG fragments. 2) When implementing SVG, Ample SDK aims to equalize browser APIs without introducing new ones, extend browser UI technologies, and create reusable UI components. It virtualizes native technologies like SVG and VML. 3) Embedding SVG in HTML, dynamically modifying fragments via DOM or SMIL APIs, and styling with CSS classes, elements, or inline styles are demonstrated. Problems with VML performance and attributes in IE are also noted.

frameworksvgajax
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell

HTML 5 is a new version of HTML that is still being developed. It aims to evolve HTML instead of reinventing it. Key features include new form elements, input types, semantic elements, APIs for offline apps, and standardized video and audio embedding. Browser support is growing but the specification may not be finalized until 2022. However, many features are already implemented and can be used today through emulation if needed.

developmentwebbarcampghent2
Specifing attribute default values MyCombobox.attributes = { disabled: &quot;false&quot; }
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 } }
Handling Attribute changes MyCombobox.handlers = { &quot;DOMAttrModified&quot;: function(oEvent) { } }
Handling Component Insertion / Removal MyCombobox.handlers = { // Component inserted into document &quot;DOMNodeInsertedIntoDocument&quot;: function(oEvent) { }, // Component removed from document &quot;DOMNodeRemovedFromDocument&quot;: function(oEvent) { } }

Recommended for you

Location Based Services Without the Cocoa
Location Based Services Without the CocoaLocation Based Services Without the Cocoa
Location Based Services Without the Cocoa

Presented by Ben Butchart and Murray King at the Institutional Web Managers Workshop, 12 July 2010, Sheffield

Front-end development introduction (JavaScript). Part 2
Front-end development introduction (JavaScript). Part 2Front-end development introduction (JavaScript). Part 2
Front-end development introduction (JavaScript). Part 2

Presentation for NURE (Kharkiv National University of Radioelectronics) students about front-end development (JavaScript best practices, features).

introendcss
Angular js mobile jsday 2014 - Verona 14 may
Angular js mobile   jsday 2014 - Verona 14 mayAngular js mobile   jsday 2014 - Verona 14 may
Angular js mobile jsday 2014 - Verona 14 may

Building a responsive mobile application with AngularJs. Tips and Tricks. How to use Ionic and AppGyver to fill the Cordova performance gap.

ionicresponsiveangularjs
Defining Properties and Methods // Property MyCombobox.prototype.tabIndex = 0; // Method MyCombobox.prototype.selectItem = function(oItem) { }
A domain-specific UI markup technology?
Maybe &quot;CocoaML&quot;?
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?

Recommended for you

Declarative and standards-based web application development with the Ample SDK
Declarative and standards-based web application development with the Ample SDKDeclarative and standards-based web application development with the Ample SDK
Declarative and standards-based web application development with the Ample SDK

UI development in the browser can be done declaratively or programmatically. Declarative development uses markup languages like XUL to define UI layout and behavior separately from logic, improving readability, reusability, and team collaboration. The Ample SDK provides a declarative approach, generating a shadow DOM that normalizes browser APIs while allowing the use of standards-based markup languages to build reusable, modular UIs. It provides object models for documents, elements and other interfaces that wrap native browser APIs for cross-browser compatibility.

nextweb2011xmlbarcamp
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...

This document provides an overview of designing complex applications using HTML5 and KnockoutJS. It discusses HTML5 and why it is useful, introduces JavaScript and frameworks like KnockoutJS and SammyJS that help manage complexity. It also summarizes several JavaScript libraries and patterns including the module pattern, revealing module pattern, and MV* patterns. Specific libraries and frameworks discussed include RequireJS, AmplifyJS, UnderscoreJS, and LINQ.js. The document concludes with a brief mention of server-side tools like ScriptSharp.

sammyjshtml5javascript
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Web

This presentation has been presented at the Flex User Group in Berlin [1] on July 5th, 2012. I basically tried to cover the current state of Apache Flex, its possible future role in 2050 and compared Apache Flex with other Web technologies. I also tried to summarise my current work at Apache Flex. Hopefully, you'll find this presentation inspiring, too ;) [1] http://www.flash-kiez.de

javafxsilverlighthtml 5
5. Showcase
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)
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
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)

Recommended for you

Hyperion EPM APIs - Added value from HFM, Workspace, FDM, Smartview, and Shar...
Hyperion EPM APIs - Added value from HFM, Workspace, FDM, Smartview, and Shar...Hyperion EPM APIs - Added value from HFM, Workspace, FDM, Smartview, and Shar...
Hyperion EPM APIs - Added value from HFM, Workspace, FDM, Smartview, and Shar...

Application Programming Interfaces allow developers to leverage existing program code in an effort to build additional functionality, automate processes or present existing functionality in a different format. APIs exist for many of Hyperion products; however, clear examples of how to use them are not always easy to find nor are applications for the API readily available. Proper application of the APIs for HFM, Workspace, FDM, Smartview and Shared Services can simplify the daily routines of end users and administrators. This session will provide a high level overview of how each of the APIs work. Additionally, real-world examples for each API will be provided. Fully working code will be available for download from the ODTUG 12 site which attendees can use in their own environments.

hfm fdm smartview epm hyperion oracle api .net sha
Ajax
Ajax Ajax
Ajax

AJAX is a web development technique that uses asynchronous JavaScript and XML to make web pages more interactive. It allows asynchronous data retrieval and manipulation of page elements without reloading the entire page. Several frameworks, toolkits, and libraries have been developed to help build AJAX applications and simplify development by providing reusable widgets and hiding complex functionality. These include both communication libraries that handle browser differences and user interface toolkits with common UI controls. Larger AJAX frameworks provide fully integrated shared libraries and development tools.

IPhone Web Development With Grails from CodeMash 2009
IPhone Web Development With Grails from CodeMash 2009IPhone Web Development With Grails from CodeMash 2009
IPhone Web Development With Grails from CodeMash 2009

These are slides from my CodeMash 2009 presentation on developing iPhone web applications using Grails, Groovy and iUI.

2009codemash
Questions?
Thanks!

More Related Content

What's hot

Multi modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.jsMulti modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.js
David Amend
 
WordCamp ABQ 2013: Making the leap from Designer to Designer/Developer
WordCamp ABQ 2013: Making the leap from Designer to Designer/DeveloperWordCamp ABQ 2013: Making the leap from Designer to Designer/Developer
WordCamp ABQ 2013: Making the leap from Designer to Designer/Developer
my easel
 
Taking Advantage of Client Side / JavsScript Templates in Rich Internet Appli...
Taking Advantage of Client Side / JavsScript Templates in Rich Internet Appli...Taking Advantage of Client Side / JavsScript Templates in Rich Internet Appli...
Taking Advantage of Client Side / JavsScript Templates in Rich Internet Appli...
Mahbubur Rahman
 
Wordcamp abq cf-cpt
Wordcamp abq cf-cptWordcamp abq cf-cpt
Wordcamp abq cf-cpt
my easel
 
Jsf2 html5-jazoon
Jsf2 html5-jazoonJsf2 html5-jazoon
Jsf2 html5-jazoon
Roger Kitain
 
How to dockerize rails application compose and rails tutorial
How to dockerize rails application compose and rails tutorialHow to dockerize rails application compose and rails tutorial
How to dockerize rails application compose and rails tutorial
Katy Slemon
 
sMash at May NYPHP UG
sMash at May NYPHP UGsMash at May NYPHP UG
sMash at May NYPHP UG
Project Zero
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5
osa_ora
 
Introduction to Groovy Monkey
Introduction to Groovy MonkeyIntroduction to Groovy Monkey
Introduction to Groovy Monkey
jervin
 
Workshop: Symfony2 Intruduction: (Controller, Routing, Model)
Workshop: Symfony2 Intruduction: (Controller, Routing, Model)Workshop: Symfony2 Intruduction: (Controller, Routing, Model)
Workshop: Symfony2 Intruduction: (Controller, Routing, Model)
Antonio Peric-Mazar
 
Ruby On Rails Seminar Basis Softexpo Feb2010
Ruby On Rails Seminar Basis Softexpo Feb2010Ruby On Rails Seminar Basis Softexpo Feb2010
Ruby On Rails Seminar Basis Softexpo Feb2010
arif44
 
[2015/2016] Apache Cordova
[2015/2016] Apache Cordova[2015/2016] Apache Cordova
[2015/2016] Apache Cordova
Ivano Malavolta
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
James Pearce
 
Mozilla Firefox Extension Development, Course 1: Basic
Mozilla Firefox Extension Development, Course 1: BasicMozilla Firefox Extension Development, Course 1: Basic
Mozilla Firefox Extension Development, Course 1: Basic
littlebtc
 
Powerful tools for building web solutions
Powerful tools for building web solutionsPowerful tools for building web solutions
Powerful tools for building web solutions
Andrea Tino
 
Android | Busy Java Developers Guide to Android: UI | Ted Neward
Android | Busy Java Developers Guide to Android: UI | Ted NewardAndroid | Busy Java Developers Guide to Android: UI | Ted Neward
Android | Busy Java Developers Guide to Android: UI | Ted Neward
JAX London
 
[2015/2016] Backbone JS
[2015/2016] Backbone JS[2015/2016] Backbone JS
[2015/2016] Backbone JS
Ivano Malavolta
 
Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....
Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....
Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....
Javier Suárez Ruiz
 
Angular js
Angular jsAngular js
Angular js
Mauro Servienti
 
TRWResume-10-2016
TRWResume-10-2016TRWResume-10-2016
TRWResume-10-2016
Tommy Williams
 

What's hot (20)

Multi modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.jsMulti modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.js
 
WordCamp ABQ 2013: Making the leap from Designer to Designer/Developer
WordCamp ABQ 2013: Making the leap from Designer to Designer/DeveloperWordCamp ABQ 2013: Making the leap from Designer to Designer/Developer
WordCamp ABQ 2013: Making the leap from Designer to Designer/Developer
 
Taking Advantage of Client Side / JavsScript Templates in Rich Internet Appli...
Taking Advantage of Client Side / JavsScript Templates in Rich Internet Appli...Taking Advantage of Client Side / JavsScript Templates in Rich Internet Appli...
Taking Advantage of Client Side / JavsScript Templates in Rich Internet Appli...
 
Wordcamp abq cf-cpt
Wordcamp abq cf-cptWordcamp abq cf-cpt
Wordcamp abq cf-cpt
 
Jsf2 html5-jazoon
Jsf2 html5-jazoonJsf2 html5-jazoon
Jsf2 html5-jazoon
 
How to dockerize rails application compose and rails tutorial
How to dockerize rails application compose and rails tutorialHow to dockerize rails application compose and rails tutorial
How to dockerize rails application compose and rails tutorial
 
sMash at May NYPHP UG
sMash at May NYPHP UGsMash at May NYPHP UG
sMash at May NYPHP UG
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5
 
Introduction to Groovy Monkey
Introduction to Groovy MonkeyIntroduction to Groovy Monkey
Introduction to Groovy Monkey
 
Workshop: Symfony2 Intruduction: (Controller, Routing, Model)
Workshop: Symfony2 Intruduction: (Controller, Routing, Model)Workshop: Symfony2 Intruduction: (Controller, Routing, Model)
Workshop: Symfony2 Intruduction: (Controller, Routing, Model)
 
Ruby On Rails Seminar Basis Softexpo Feb2010
Ruby On Rails Seminar Basis Softexpo Feb2010Ruby On Rails Seminar Basis Softexpo Feb2010
Ruby On Rails Seminar Basis Softexpo Feb2010
 
[2015/2016] Apache Cordova
[2015/2016] Apache Cordova[2015/2016] Apache Cordova
[2015/2016] Apache Cordova
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
 
Mozilla Firefox Extension Development, Course 1: Basic
Mozilla Firefox Extension Development, Course 1: BasicMozilla Firefox Extension Development, Course 1: Basic
Mozilla Firefox Extension Development, Course 1: Basic
 
Powerful tools for building web solutions
Powerful tools for building web solutionsPowerful tools for building web solutions
Powerful tools for building web solutions
 
Android | Busy Java Developers Guide to Android: UI | Ted Neward
Android | Busy Java Developers Guide to Android: UI | Ted NewardAndroid | Busy Java Developers Guide to Android: UI | Ted Neward
Android | Busy Java Developers Guide to Android: UI | Ted Neward
 
[2015/2016] Backbone JS
[2015/2016] Backbone JS[2015/2016] Backbone JS
[2015/2016] Backbone JS
 
Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....
Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....
Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....
 
Angular js
Angular jsAngular js
Angular js
 
TRWResume-10-2016
TRWResume-10-2016TRWResume-10-2016
TRWResume-10-2016
 

Viewers also liked

Chapter 16 2 Air Masses, Fronts And Weather Maps Andie
Chapter 16  2  Air Masses, Fronts And Weather Maps AndieChapter 16  2  Air Masses, Fronts And Weather Maps Andie
Chapter 16 2 Air Masses, Fronts And Weather Maps Andie
charsh
 
11 оригинальных способов использования Wrike
11 оригинальных способов использования Wrike11 оригинальных способов использования Wrike
11 оригинальных способов использования Wrike
Wrike
 
Control system
Control systemControl system
Control system
snozza66
 
Ch 15 2 Energy And Heat Transfer
Ch 15   2 Energy And Heat TransferCh 15   2 Energy And Heat Transfer
Ch 15 2 Energy And Heat Transfer
charsh
 
Invite5加入流程.
Invite5加入流程.Invite5加入流程.
Invite5加入流程.
ERIC CHUANG
 
Websockets en Ruby en 5 Minutos
Websockets en Ruby en 5 MinutosWebsockets en Ruby en 5 Minutos
Websockets en Ruby en 5 Minutos
damianmarti
 
4.2 voorlichting
4.2 voorlichting4.2 voorlichting
4.2 voorlichting
Jurjen Helmus
 
Network First Open Day presentation
Network First Open Day presentationNetwork First Open Day presentation
Network First Open Day presentation
Victoria College
 
Transmedia and Augmented Reality
Transmedia and Augmented RealityTransmedia and Augmented Reality
Transmedia and Augmented Reality
Robert Pratten
 
Test Analyst 3 + Yrs Manual Automation Theme
Test Analyst 3 + Yrs Manual Automation ThemeTest Analyst 3 + Yrs Manual Automation Theme
Test Analyst 3 + Yrs Manual Automation Theme
amitcitm
 
To be present1 eso
To be present1 esoTo be present1 eso
To be present1 eso
IES - Junta de Andalucia
 
Kurikulum 2013 SMP
Kurikulum 2013 SMPKurikulum 2013 SMP
Kurikulum 2013 SMP
Dasrieny Pratiwi
 
Absolute Dating
Absolute DatingAbsolute Dating
Absolute Dating
charsh
 
Trend Report July 2011: Facebook, Brands & TV in Germany
Trend Report July 2011:  Facebook, Brands & TV in GermanyTrend Report July 2011:  Facebook, Brands & TV in Germany
Trend Report July 2011: Facebook, Brands & TV in Germany
Zucker.Kommunikation
 
Reported speech
Reported speech Reported speech
Reported speech
IES - Junta de Andalucia
 
Creating a Successful Transmedia Project
Creating a Successful Transmedia ProjectCreating a Successful Transmedia Project
Creating a Successful Transmedia Project
Robert Pratten
 
1st Conditional
1st Conditional1st Conditional
1st Conditional
IES - Junta de Andalucia
 
Facebook, Brands and TV Preview Next Conference 2010 Berlin
Facebook, Brands and TV  Preview Next Conference 2010 BerlinFacebook, Brands and TV  Preview Next Conference 2010 Berlin
Facebook, Brands and TV Preview Next Conference 2010 Berlin
Zucker.Kommunikation
 
The Knoll 2
The Knoll 2The Knoll 2
The Knoll 2
OFP Timber Frame
 

Viewers also liked (20)

Chapter 16 2 Air Masses, Fronts And Weather Maps Andie
Chapter 16  2  Air Masses, Fronts And Weather Maps AndieChapter 16  2  Air Masses, Fronts And Weather Maps Andie
Chapter 16 2 Air Masses, Fronts And Weather Maps Andie
 
11 оригинальных способов использования Wrike
11 оригинальных способов использования Wrike11 оригинальных способов использования Wrike
11 оригинальных способов использования Wrike
 
Control system
Control systemControl system
Control system
 
Ch 15 2 Energy And Heat Transfer
Ch 15   2 Energy And Heat TransferCh 15   2 Energy And Heat Transfer
Ch 15 2 Energy And Heat Transfer
 
Invite5加入流程.
Invite5加入流程.Invite5加入流程.
Invite5加入流程.
 
Websockets en Ruby en 5 Minutos
Websockets en Ruby en 5 MinutosWebsockets en Ruby en 5 Minutos
Websockets en Ruby en 5 Minutos
 
4.2 voorlichting
4.2 voorlichting4.2 voorlichting
4.2 voorlichting
 
150321 bagian isi
150321 bagian isi150321 bagian isi
150321 bagian isi
 
Network First Open Day presentation
Network First Open Day presentationNetwork First Open Day presentation
Network First Open Day presentation
 
Transmedia and Augmented Reality
Transmedia and Augmented RealityTransmedia and Augmented Reality
Transmedia and Augmented Reality
 
Test Analyst 3 + Yrs Manual Automation Theme
Test Analyst 3 + Yrs Manual Automation ThemeTest Analyst 3 + Yrs Manual Automation Theme
Test Analyst 3 + Yrs Manual Automation Theme
 
To be present1 eso
To be present1 esoTo be present1 eso
To be present1 eso
 
Kurikulum 2013 SMP
Kurikulum 2013 SMPKurikulum 2013 SMP
Kurikulum 2013 SMP
 
Absolute Dating
Absolute DatingAbsolute Dating
Absolute Dating
 
Trend Report July 2011: Facebook, Brands & TV in Germany
Trend Report July 2011:  Facebook, Brands & TV in GermanyTrend Report July 2011:  Facebook, Brands & TV in Germany
Trend Report July 2011: Facebook, Brands & TV in Germany
 
Reported speech
Reported speech Reported speech
Reported speech
 
Creating a Successful Transmedia Project
Creating a Successful Transmedia ProjectCreating a Successful Transmedia Project
Creating a Successful Transmedia Project
 
1st Conditional
1st Conditional1st Conditional
1st Conditional
 
Facebook, Brands and TV Preview Next Conference 2010 Berlin
Facebook, Brands and TV  Preview Next Conference 2010 BerlinFacebook, Brands and TV  Preview Next Conference 2010 Berlin
Facebook, Brands and TV Preview Next Conference 2010 Berlin
 
The Knoll 2
The Knoll 2The Knoll 2
The Knoll 2
 

Similar to Sergey Ilinsky Presentation Ample Sdk

Using SVG with Ample SDK cross browser
Using SVG with Ample SDK cross browserUsing SVG with Ample SDK cross browser
Using SVG with Ample SDK cross browser
Sergey Ilinsky
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
Lennart Schoors
 
Location Based Services Without the Cocoa
Location Based Services Without the CocoaLocation Based Services Without the Cocoa
Location Based Services Without the Cocoa
EDINA, University of Edinburgh
 
Front-end development introduction (JavaScript). Part 2
Front-end development introduction (JavaScript). Part 2Front-end development introduction (JavaScript). Part 2
Front-end development introduction (JavaScript). Part 2
Oleksii Prohonnyi
 
Angular js mobile jsday 2014 - Verona 14 may
Angular js mobile   jsday 2014 - Verona 14 mayAngular js mobile   jsday 2014 - Verona 14 may
Angular js mobile jsday 2014 - Verona 14 may
Luciano Amodio
 
Declarative and standards-based web application development with the Ample SDK
Declarative and standards-based web application development with the Ample SDKDeclarative and standards-based web application development with the Ample SDK
Declarative and standards-based web application development with the Ample SDK
Béla Varga
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
Fabio Franzini
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Web
masuland
 
Hyperion EPM APIs - Added value from HFM, Workspace, FDM, Smartview, and Shar...
Hyperion EPM APIs - Added value from HFM, Workspace, FDM, Smartview, and Shar...Hyperion EPM APIs - Added value from HFM, Workspace, FDM, Smartview, and Shar...
Hyperion EPM APIs - Added value from HFM, Workspace, FDM, Smartview, and Shar...
Charles Beyer
 
Ajax
Ajax Ajax
IPhone Web Development With Grails from CodeMash 2009
IPhone Web Development With Grails from CodeMash 2009IPhone Web Development With Grails from CodeMash 2009
IPhone Web Development With Grails from CodeMash 2009
Christopher Judd
 
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Sergey Ilinsky
 
Integrate any Angular Project into WebSphere Portal
Integrate any Angular Project into WebSphere PortalIntegrate any Angular Project into WebSphere Portal
Integrate any Angular Project into WebSphere Portal
Himanshu Mendiratta
 
HTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game TechHTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game Tech
vincent_scheib
 
Web II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side developmentWeb II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side development
Randy Connolly
 
Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0
Estelle Weyl
 
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayHTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
Todd Anglin
 
TestUpload
TestUploadTestUpload
TestUpload
ZarksaDS
 
Angular JS 2_0 BCS CTO_in_Res V3
Angular JS 2_0 BCS CTO_in_Res V3Angular JS 2_0 BCS CTO_in_Res V3
Angular JS 2_0 BCS CTO_in_Res V3
Bruce Pentreath
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
Nathan Smith
 

Similar to Sergey Ilinsky Presentation Ample Sdk (20)

Using SVG with Ample SDK cross browser
Using SVG with Ample SDK cross browserUsing SVG with Ample SDK cross browser
Using SVG with Ample SDK cross browser
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
 
Location Based Services Without the Cocoa
Location Based Services Without the CocoaLocation Based Services Without the Cocoa
Location Based Services Without the Cocoa
 
Front-end development introduction (JavaScript). Part 2
Front-end development introduction (JavaScript). Part 2Front-end development introduction (JavaScript). Part 2
Front-end development introduction (JavaScript). Part 2
 
Angular js mobile jsday 2014 - Verona 14 may
Angular js mobile   jsday 2014 - Verona 14 mayAngular js mobile   jsday 2014 - Verona 14 may
Angular js mobile jsday 2014 - Verona 14 may
 
Declarative and standards-based web application development with the Ample SDK
Declarative and standards-based web application development with the Ample SDKDeclarative and standards-based web application development with the Ample SDK
Declarative and standards-based web application development with the Ample SDK
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Web
 
Hyperion EPM APIs - Added value from HFM, Workspace, FDM, Smartview, and Shar...
Hyperion EPM APIs - Added value from HFM, Workspace, FDM, Smartview, and Shar...Hyperion EPM APIs - Added value from HFM, Workspace, FDM, Smartview, and Shar...
Hyperion EPM APIs - Added value from HFM, Workspace, FDM, Smartview, and Shar...
 
Ajax
Ajax Ajax
Ajax
 
IPhone Web Development With Grails from CodeMash 2009
IPhone Web Development With Grails from CodeMash 2009IPhone Web Development With Grails from CodeMash 2009
IPhone Web Development With Grails from CodeMash 2009
 
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
 
Integrate any Angular Project into WebSphere Portal
Integrate any Angular Project into WebSphere PortalIntegrate any Angular Project into WebSphere Portal
Integrate any Angular Project into WebSphere Portal
 
HTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game TechHTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game Tech
 
Web II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side developmentWeb II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side development
 
Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0
 
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayHTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
 
TestUpload
TestUploadTestUpload
TestUpload
 
Angular JS 2_0 BCS CTO_in_Res V3
Angular JS 2_0 BCS CTO_in_Res V3Angular JS 2_0 BCS CTO_in_Res V3
Angular JS 2_0 BCS CTO_in_Res V3
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 

More from Ajax Experience 2009

Eric Beland Ajax Load Testing Considerations
Eric Beland Ajax Load Testing ConsiderationsEric Beland Ajax Load Testing Considerations
Eric Beland Ajax Load Testing Considerations
Ajax Experience 2009
 
Chanhao Jiang And David Wei Presentation Quickling Pagecache
Chanhao Jiang And David Wei Presentation Quickling PagecacheChanhao Jiang And David Wei Presentation Quickling Pagecache
Chanhao Jiang And David Wei Presentation Quickling Pagecache
Ajax Experience 2009
 
Jason.O Keefe.Genuitec.Presentation.Final
Jason.O Keefe.Genuitec.Presentation.FinalJason.O Keefe.Genuitec.Presentation.Final
Jason.O Keefe.Genuitec.Presentation.Final
Ajax Experience 2009
 
Jenny Donnelly
Jenny DonnellyJenny Donnelly
Jenny Donnelly
Ajax Experience 2009
 
Colin Clark Accessible U Is With J Query And Infusion[1]
Colin Clark Accessible U Is With J Query And Infusion[1]Colin Clark Accessible U Is With J Query And Infusion[1]
Colin Clark Accessible U Is With J Query And Infusion[1]
Ajax Experience 2009
 
Scott Isaacs Presentationajaxexperience (Final)
Scott Isaacs Presentationajaxexperience (Final)Scott Isaacs Presentationajaxexperience (Final)
Scott Isaacs Presentationajaxexperience (Final)
Ajax Experience 2009
 
Chris Williams Presentation Dissident
Chris Williams Presentation DissidentChris Williams Presentation Dissident
Chris Williams Presentation Dissident
Ajax Experience 2009
 
Andrew Sutherland Presentation
Andrew Sutherland PresentationAndrew Sutherland Presentation
Andrew Sutherland Presentation
Ajax Experience 2009
 
Bill Scott Presentation
Bill Scott PresentationBill Scott Presentation
Bill Scott Presentation
Ajax Experience 2009
 
Ted Husted Presentation Testing Ajax Applications Ae2009
Ted Husted Presentation Testing Ajax Applications Ae2009Ted Husted Presentation Testing Ajax Applications Ae2009
Ted Husted Presentation Testing Ajax Applications Ae2009
Ajax Experience 2009
 
Ted Husted Api Doc Smackdown Ae2009
Ted Husted Api Doc Smackdown Ae2009Ted Husted Api Doc Smackdown Ae2009
Ted Husted Api Doc Smackdown Ae2009
Ajax Experience 2009
 
Patrick Lightbody Presentation Tae Slides
Patrick Lightbody Presentation Tae SlidesPatrick Lightbody Presentation Tae Slides
Patrick Lightbody Presentation Tae Slides
Ajax Experience 2009
 
Laurens Van Den Oever Xopus Presentation
Laurens Van Den Oever Xopus PresentationLaurens Van Den Oever Xopus Presentation
Laurens Van Den Oever Xopus Presentation
Ajax Experience 2009
 
Jon Trelfa Presentation From Desktop To Web – Getting It Right
Jon Trelfa Presentation From Desktop To Web – Getting It RightJon Trelfa Presentation From Desktop To Web – Getting It Right
Jon Trelfa Presentation From Desktop To Web – Getting It Right
Ajax Experience 2009
 
Joe Mc Cann Tae Aria Presentation
Joe Mc Cann Tae Aria PresentationJoe Mc Cann Tae Aria Presentation
Joe Mc Cann Tae Aria Presentation
Ajax Experience 2009
 
Douglas Crockford Presentation Goodparts
Douglas Crockford Presentation GoodpartsDouglas Crockford Presentation Goodparts
Douglas Crockford Presentation Goodparts
Ajax Experience 2009
 
Douglas Crockford Presentation Jsonsaga
Douglas Crockford Presentation JsonsagaDouglas Crockford Presentation Jsonsaga
Douglas Crockford Presentation Jsonsaga
Ajax Experience 2009
 
David Wei And Changhao Jiang Presentation
David Wei And Changhao Jiang PresentationDavid Wei And Changhao Jiang Presentation
David Wei And Changhao Jiang Presentation
Ajax Experience 2009
 
Brian Le Roux Presentation Introducing Phone Gap
Brian Le Roux Presentation Introducing Phone GapBrian Le Roux Presentation Introducing Phone Gap
Brian Le Roux Presentation Introducing Phone Gap
Ajax Experience 2009
 
Ted Husted Presentation Testing The Testers Ae2009
Ted Husted Presentation Testing The Testers Ae2009Ted Husted Presentation Testing The Testers Ae2009
Ted Husted Presentation Testing The Testers Ae2009
Ajax Experience 2009
 

More from Ajax Experience 2009 (20)

Eric Beland Ajax Load Testing Considerations
Eric Beland Ajax Load Testing ConsiderationsEric Beland Ajax Load Testing Considerations
Eric Beland Ajax Load Testing Considerations
 
Chanhao Jiang And David Wei Presentation Quickling Pagecache
Chanhao Jiang And David Wei Presentation Quickling PagecacheChanhao Jiang And David Wei Presentation Quickling Pagecache
Chanhao Jiang And David Wei Presentation Quickling Pagecache
 
Jason.O Keefe.Genuitec.Presentation.Final
Jason.O Keefe.Genuitec.Presentation.FinalJason.O Keefe.Genuitec.Presentation.Final
Jason.O Keefe.Genuitec.Presentation.Final
 
Jenny Donnelly
Jenny DonnellyJenny Donnelly
Jenny Donnelly
 
Colin Clark Accessible U Is With J Query And Infusion[1]
Colin Clark Accessible U Is With J Query And Infusion[1]Colin Clark Accessible U Is With J Query And Infusion[1]
Colin Clark Accessible U Is With J Query And Infusion[1]
 
Scott Isaacs Presentationajaxexperience (Final)
Scott Isaacs Presentationajaxexperience (Final)Scott Isaacs Presentationajaxexperience (Final)
Scott Isaacs Presentationajaxexperience (Final)
 
Chris Williams Presentation Dissident
Chris Williams Presentation DissidentChris Williams Presentation Dissident
Chris Williams Presentation Dissident
 
Andrew Sutherland Presentation
Andrew Sutherland PresentationAndrew Sutherland Presentation
Andrew Sutherland Presentation
 
Bill Scott Presentation
Bill Scott PresentationBill Scott Presentation
Bill Scott Presentation
 
Ted Husted Presentation Testing Ajax Applications Ae2009
Ted Husted Presentation Testing Ajax Applications Ae2009Ted Husted Presentation Testing Ajax Applications Ae2009
Ted Husted Presentation Testing Ajax Applications Ae2009
 
Ted Husted Api Doc Smackdown Ae2009
Ted Husted Api Doc Smackdown Ae2009Ted Husted Api Doc Smackdown Ae2009
Ted Husted Api Doc Smackdown Ae2009
 
Patrick Lightbody Presentation Tae Slides
Patrick Lightbody Presentation Tae SlidesPatrick Lightbody Presentation Tae Slides
Patrick Lightbody Presentation Tae Slides
 
Laurens Van Den Oever Xopus Presentation
Laurens Van Den Oever Xopus PresentationLaurens Van Den Oever Xopus Presentation
Laurens Van Den Oever Xopus Presentation
 
Jon Trelfa Presentation From Desktop To Web – Getting It Right
Jon Trelfa Presentation From Desktop To Web – Getting It RightJon Trelfa Presentation From Desktop To Web – Getting It Right
Jon Trelfa Presentation From Desktop To Web – Getting It Right
 
Joe Mc Cann Tae Aria Presentation
Joe Mc Cann Tae Aria PresentationJoe Mc Cann Tae Aria Presentation
Joe Mc Cann Tae Aria Presentation
 
Douglas Crockford Presentation Goodparts
Douglas Crockford Presentation GoodpartsDouglas Crockford Presentation Goodparts
Douglas Crockford Presentation Goodparts
 
Douglas Crockford Presentation Jsonsaga
Douglas Crockford Presentation JsonsagaDouglas Crockford Presentation Jsonsaga
Douglas Crockford Presentation Jsonsaga
 
David Wei And Changhao Jiang Presentation
David Wei And Changhao Jiang PresentationDavid Wei And Changhao Jiang Presentation
David Wei And Changhao Jiang Presentation
 
Brian Le Roux Presentation Introducing Phone Gap
Brian Le Roux Presentation Introducing Phone GapBrian Le Roux Presentation Introducing Phone Gap
Brian Le Roux Presentation Introducing Phone Gap
 
Ted Husted Presentation Testing The Testers Ae2009
Ted Husted Presentation Testing The Testers Ae2009Ted Husted Presentation Testing The Testers Ae2009
Ted Husted Presentation Testing The Testers Ae2009
 

Recently uploaded

Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
Awais Yaseen
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 

Recently uploaded (20)

Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 

Sergey Ilinsky Presentation Ample Sdk

  • 1. Ample SDK: Standards-based GUI Framework for Client-side Applications The Ajax Experience 2009 September 14-16 in Boston, MA
  • 2. Sergey Ilinsky http://www.ilinsky.com http://twitter.com/ilinsky
  • 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?
  • 12. Yes, they do. Every in its own way.
  • 13. 2. Ample SDK: Das Experiment 2.1 Objectives 2.2 Solution Architecture 2.3 Browser-within-a-browser? 2.4 Ample SDK Application Lifetime 2.5 Technologies Breakdown
  • 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.
  • 16. 2.2 Solution Architecture Runtime - runtime.js UI Languages - xhtml/xhtml.js - xul/xul.js+xul/xul.css - svg/svg.js - ...
  • 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)
  • 18. 2.4 Ample SDK Application Lifetime
  • 19. 2.5 Technologies Breakdown - Runtime - Scripting Technologies - XML Technologies - Styling Technologies - UI Markup Technologies
  • 20. Runtime: Scripting Technologies - Document Object Model - DOM Core (Level 2) - DOM Events (Level 3) - Selectors API - XML APIs - DOMParser, XMLSerializer - XSLTProcessor - XMLHttpRequest - UI Managers - Focus Manager - Drag&Drop Manager - Resize Manager - Capture Manager - SPI History Manager - Componentization Model
  • 21. Runtime: XML technologies - Xinclude 1.0 - SMIL3.0 (selected modules) - XML Schema 1.1 (datatypes module)
  • 22. Runtime: Styling Technologies - CSS 2.1 - CSS3 Namespaces - CSS3-UI (pseudo-classes, pseudo-elements)
  • 23. UI Markup Technologies - XHTML1 - XUL - SVG 1.2 Tiny - XHTML5 (in development) - XForms 1.1 (planned)
  • 24. 3. Using Ample SDK: Basics - XML for UI - CSS for Style - JavaScript for Logic
  • 25. Hello World! <!DOCTYPE html> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title>Hello, World!</title> <!-- (A) Ample SDK runtime and UI language --> <script type=&quot;text/javascript&quot; src=&quot;ample/runtime.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;ample/languages/xhtml/xhtml.js&quot;></script> <!-- (1) Styling --> <style type=&quot;text/ample+css&quot;> b { color: red; } </style> <!-- (2) Logic --> <script type=&quot;text/javascript&quot;> function alertHelloWorld(oEvent) { alert('Element &quot;' + oEvent.target.tagName + '&quot; was clicked'); } </script> </head> <body> <!-- (3) Layout --> <script type=&quot;application/ample+xml&quot;> <b onclick=&quot;alertHelloWorld(event)&quot;>Hello, World!</b> </script> </body> </html>
  • 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=&quot;application/ample+xml&quot; <body> <!-- other HTML code --> <script type=&quot;application/ample+xml&quot;> <!-- 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=&quot;application/ample+xml&quot; src=&quot;ui.xml&quot;></script> <!-- other HTML code --> </body> c) Inline, using ample.open() and ample.close() <body> <!-- other HTML code --> <script type=&quot;text/javascript&quot;>ample.open()</script> <!-- Ample SDK inline XML markup --> <script type=&quot;text/javascript&quot;>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>
  • 30. Using XUL (Mozilla technology) <xul:tabbox xmlns:xul=&quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul&quot;> <xul:tabs> <xul:tab label=&quot;checkbox&quot; /> <xul:tab label=&quot;textbox&quot; /> <xul:tab label=&quot;datepicker&quot; /> </xul:tabs> <xul:tabpanels> <xul:tabpanel> <xul:checkbox /> </xul:tabpanel> <xul:tabpanel> <xul:textbox /> </xul:tabpanel> <xul:tabpanel> <xul:datepicker /> </xul:tabpanel> </xul:tabpanels> </xul:tabbox>
  • 31. Using SVG1.2 Tiny <svg:svg viewBox=&quot;0,0 400,400&quot; height=&quot;400px&quot; width=&quot;400px&quot; xmlns:svg=&quot;http://www.w3.org/2000/svg&quot; xmlns:smil=&quot;http://www.w3.org/2008/SMIL30/&quot;> <svg:circle cx=&quot;200&quot; cy=&quot;200&quot; r=&quot;10&quot; fill=&quot;red&quot; opacity=&quot;1&quot; stroke=&quot;black&quot; stroke-width=&quot;1&quot;> <smil:animate begin=&quot;click&quot; decelerate=&quot;0.5&quot; to=&quot;200&quot; attributeName=&quot;r&quot; dur=&quot;500ms&quot;/> </svg:circle> </svg:svg> Works in Internet Explorer 5.5 too Modules Implemented: 5. Document Structure 8. Paths 9. Basic Shapes 10. Text 12. Animation (SMIL)
  • 32. Using DOM-Core for building UI dynamically var sXULNameSpace = &quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul&quot;; var popup = ample.getElementById(&quot;items-popup&quot;); var item4 = ample.createElementNS (sXULNameSpace, &quot;xul:menuitem&quot;); popup.appendChild(item4); item3.setAttribute(&quot;label&quot;, &quot;Item 3&quot;); item3.setAttribute(&quot;value&quot;, &quot;3&quot;); var oRequest = new XMLHttpRequest; oRequest.open(&quot;GET&quot;, &quot;wizard.xml&quot;, false); oRequest.onreadystatechange = function() { if (oRequest.readyState == 4) { var oFragment = ample.importNode (oRequest.responseXML.documentElement, true); ample.querySelector(&quot;#target&quot;).appendChild(oFragment); } }
  • 33. Using XInclude to merge XML documents 1. <div xmlns:xi=&quot;http://www.w3.org/2001/XInclude&quot;> 2. <xi:include href=&quot;Menubar.xml&quot; /> 3. <xi:include href=&quot;Editor.xml&quot; /> 4. <xi:include href=&quot;Statusbar.xml&quot; /> 5. </div>
  • 34. 3.2 Styling Application UI Styling GUI is done with CSS... nicely.
  • 35. Embedding CSS stylesheets in a web page a) Inline, using a style tag with type=&quot;text/ample+css&quot; <style type=&quot;text/ample+css&quot;> /* Ample SDK inline stylesheet */ </style> b) Referencing a resource, using a link tag with href attribute <link type=&quot;text/ample+css&quot; rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot;/>
  • 36. Using CSS for styling UI 1) Namespaced selectors for styling component @namespace xul &quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul&quot;; xul|menulist { width: 200px; } 2) Pseudo-class selectors for styling component state @namespace xul &quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul&quot;; xul|datepicker:focus { background-color: pink; } 3) Pseudo-element selectors for styling component view @namespace xul &quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul&quot;; xul|colorpicker::input { border: solid 1px blue; } xul|colorpicker::button { background-image: url(&quot;colorpicker.png&quot;); }
  • 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=&quot;text/javascript&quot; <script type=&quot;text/javascript&quot;> /* JavaScript UI Logic */ </script> b) Referencing a resource, using script tag with src attribute <script type=&quot;text/javascript&quot; src=&quot;application.js&quot;></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(&quot;click&quot;, function(oEvent) { alert(oEvent.currentTarget.tagName) }, true ); // Cancel user selection (Also in IE) oElement.addEventListener(&quot;mousedown&quot;, function(oEvent) { oEvent.preventDefault(); }, false) b) Inline, using a on{event} attribute <xul:scale onchange=&quot;alert(this.getAttribute('value'))&quot; min=&quot;0&quot; max=&quot;100&quot; value=&quot;50&quot;/>
  • 42. Using Drag And Drop Manager Events: dragstart, drag, dragend, dragenter, dragleave, drop Properties: $draggable, $droppable Pseudo-classes: drag, drop <div xmlns:aml=&quot;http://www.amplesdk.com/ns/aml&quot; ondrop=&quot;if (event.relatedTarget.parentNode != event.target) event.target.appendChild(event.relatedTarget)&quot;> <div aml:droppable=&quot;true&quot; class=&quot;droppable&quot;> <div aml:draggable=&quot;true&quot; class=&quot;draggable&quot;> Container 1: drag me and drop to another container </div> <div aml:draggable=&quot;true&quot; class=&quot;draggable&quot;> Container 2: drag me and drop to another container </div> </div> <div aml:droppable=&quot;true&quot; class=&quot;droppable&quot;> </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; }
  • 43. Using Resize Manager Events: resizestart, resize, resizeend CSS Pseudo-classes: resize Properties: $resizable <div aml:resizable=&quot;true&quot; class=&quot;resizable&quot; xmlns:aml=&quot;http://www.amplesdk.com/ns/aml&quot;> Resize me </div> @namespace &quot;http://www.w3.org/1999/xhtml&quot;; div.resizable { width: 250px; height: 250px; background-color: pink; border: solid 1px red; max-width: 500px; } div.resizable:resize { background-color: lightyellow; }
  • 44. Using History Manager Methods: $bookmark(state) Events: hashchange ample.addEventListener(&quot;hashchange&quot;, function(oEvent) { // Implement logic alert(navigator.location.hash) }, false);
  • 45. Using Capture Manager Methods: $setCapture/$releaseCapture, $setModal/$releaseModal Events: capture, modal <div> <button onclick=&quot;alert('Hello')&quot;>alert</button> <div id=&quot;dialog&quot; style=&quot;border: solid 1px red&quot;> <button onclick=&quot;this.parentNode.$releaseCapture(true)&quot;>release capture</button> </div> <button onclick=&quot;ample.getElementById('dialog').$setCapture(true)&quot;>set capture</button> </div>
  • 46. Using XML APIs Transforming XML document with XSL-T example // Load stylesheet document oXMLHttpRequest.open(&quot;GET&quot;, &quot;stylesheet.xsl&quot;, false); oXMLHttpRequest.send(null); var oStylesheet = oXMLHttpRequest.responseXML; // Load input document oXMLHttpRequest.open(&quot;GET&quot;, &quot;input.xml&quot;, 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
  • 49. 4.1 Prototyping objects/ Defining new APIs Objects inheritance in Ample SDK (simplified): AMLNode:: AMLDocument AMLCharacterData:: AMLText AMLElement:: MyComponent AMLElement.prototype.listenOnce = function(sEvent, fHandler) { this.addEventListener(sEvent, function(oEvent) { // Remove event listener this.removeEventListener(sEvent, arguments.callee, false); // Handle Event fHandler.call(this, oEvent); }, false) }
  • 50. 4.2 Creating Custom Markup Language // Create new Namespace object var MyNamespace = new AMLNamespace; // Register new Namespace with Ample SDK ample.domConfig.setNamespace(&quot;http://www.mysite.com/ns/ui&quot;);
  • 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(&quot;button&quot;, MyButton);
  • 52. Defining Component Presentation MyCombobox.prototype.$getTagOpen = function() { return '<div class=&quot;my-combobox&quot;> <input type=&quot;text&quot; value=&quot;' + this.getAttribute(&quot;text&quot;)+ '&quot; class=&quot;my-combobox—input&quot; /> <div class=&quot;my-combobox—button&quot;/> <div class=&quot;my-combobox—gateway&quot;>'; } MyCombobox.prototype.$getTagClose = function() { return ' </div> </div>'; }
  • 53. Specifing attribute default values MyCombobox.attributes = { disabled: &quot;false&quot; }
  • 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 } }
  • 55. Handling Attribute changes MyCombobox.handlers = { &quot;DOMAttrModified&quot;: function(oEvent) { } }
  • 56. Handling Component Insertion / Removal MyCombobox.handlers = { // Component inserted into document &quot;DOMNodeInsertedIntoDocument&quot;: function(oEvent) { }, // Component removed from document &quot;DOMNodeRemovedFromDocument&quot;: function(oEvent) { } }
  • 57. Defining Properties and Methods // Property MyCombobox.prototype.tabIndex = 0; // Method MyCombobox.prototype.selectItem = function(oItem) { }
  • 58. A domain-specific UI markup technology?
  • 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)