It is proposed that this article be deleted because of the following concern: Not notable. There are no independent sources If you can address this concern by improving, copyediting, sourcing, renaming, or merging the page, please edit this page and do so. You may remove this message if you improve the article or otherwise object to deletion for any reason. Although not required, you are encouraged to explain why you object to the deletion, either in your edit summary or on the talk page. If this template is removed, do not replace it . Contents
The article may be deleted if this message remains in place for seven days, i.e., after 18:52, 26 May 2018 (UTC). Nominator: Please consider notifying the author/project: {{subst:proposed deletion notify |Ample SDK|concern=Not notable. There are no independent sources}} ~~~~ |
This article needs additional citations for verification . (April 2016) (Learn how and when to remove this template message) |
Stable release | 0.9.4 / December 1, 2012 |
---|---|
Written in | JavaScript |
Type | Web application framework |
License | Dual license: GPL / MIT [1] |
Website | www |
Ample SDK is a pre-release stage lightweight JavaScript library intended to simplify cross-browser web application development. Although Ample SDK allows you to do client-side scripting in a very similar way as jQuery and many other JavaScript libraries, its main purpose is to enable development of declarative GUI's for Rich Internet applications rather than enhancing HTML pages. The last release of Ample SDK was in December 2012 although work continues on GitHub along with developers responding to issues and multiple active forks.
A JavaScript library is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies.
In computing, a web application or web app is a client–server computer program which the client runs in a web browser. Common web applications include webmail, online retail sales, and online auction.
Because its documentation is still sparse and the examples lack clear explanation, the Ample SDK is not suited for beginners. For the experienced web developer however, it offers many features, listed below.
The features of Ample include:
The Document Object Model (DOM) is a cross-platform and language-independent application programming interface that treats an HTML, XHTML, or XML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.
XUL, which stands for XML User Interface Language, is a user interface markup language developed by Mozilla. XUL is implemented as an XML dialect, enabling graphical user interfaces to be written in a similar manner to web pages. Such applications must be created using the Mozilla codebase ; the most prominent example is the Firefox web browser.
Extensible Markup Language (XML) is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. The W3C's XML 1.0 Specification and several other related specifications—all of them free open standards—define XML.
The runtime is the core module of the Ample SDK framework. It contains implementations for:
The UI Markup Languages are implemented in JavaScript independently on each other:
There is a jQuery-like plugin system in Ample SDK, some of the plugins coming with version 0.9.3:
The Ample web page is an HTML document with decorations. To use the Ample framework you would include the runtime library in the head section of the HTML document and in addition the library for one or more GUI languages.
Here is an example which includes the runtime and XHTML as a GUI language:
<scripttype="text/javascript"src="../ample/runtime.js"></script><scripttype="text/javascript"src="../ample/languages/xhtml/xhtml.js"></script><linktype="text/css"rel="stylesheet"href="../ample/languages/xhtml/themes/default/style.css"/>
We also included a CSS style sheet for the XHTML library.
A further note to make is that the document should contain namespace declarations for the GUI languages used, which is most conveniently placed in the HTML tag:
<htmlxmlns="http://www.w3.org/1999/xhtml"{{deadlink|date=July2017|bot=InternetArchiveBot|fix-attempted=yes}}> ... </html>
If you would like to introduce dynamic behavior, you can include JavaScript functions, in a very similar way as most JavaScript libraries allow you to include behavior: as body of a document ready function:
<scripttype="text/javascript">ample.ready(function(){ample.query("b").bind("click",function(oEvent){alert('Element "'+oEvent.target.firstChild.nodeValue+'" was clicked');})})</script>
This script says something like: for every b element in the part of the document that is controlled by Ample, there will be an alert with showing the nodeValue of the firstChild of the element.
On purpose we were talking about part of the document, because you can designate a number of sections within the body of an HTML document to be processed by Ample and the rest of the document will remain untouched:
<script>ample.open()</script><b>Hello, World!</b><script>ample.close()</script>
Therefore, if the HTML document would contain more b elements outside the Ample sections, the alert would not occur when you would click on it.
So far, we have shown nothing that could not be done slightly more easily in a JavaScript library like jQuery. The power of declarative GUI development will become clear with the next example, showing a table with a rich interface. You should contrast the source code shown in the example below, with similar functionality in a jQuery plugin, where you probably would see only a
<divid="abc"></div>
on a page and where you would have to guess what the final appearance of the element would be from looking at the JavaScript code.
In the next example we will use XUL as the GUI language. XUL is an XML Markup Language, developed by Mozilla and used for example for the Firefox browser. Ample offers a full implementation of XUL.
<scripttype="application/ample+xml"xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><xul:listboxtype="checkbox"height="200"onselect="onListBoxSelect(event)"><xul:listhead><xul:listheaderwidth="30"minwidth="30"label="id"/><xul:listheaderwidth="200"minwidth="300"label="First Name"tooltiptext="Shows first name of the person. Click to sort."/><xul:listheaderlabel="Profession"minwidth="200"tooltiptext="Shows profession of the person. Click to sort."/><xul:listheaderwidth="200"minwidth="200"label="Location"tooltiptext="Shows person location. Click to sort."/></xul:listhead><xul:listbodyid="listbody"><xul:listitemclass="test"><xul:listcelllabel="1"/><xul:listcelllabel="George"/><xul:listcelllabel="House Painter"/><xul:listcelllabel="USA"/></xul:listitem><xul:listitemclass="test2"><xul:listcelllabel="2"/><xul:listcelllabel="Mary Ellen"/><xul:listcelllabel="Candle Maker"/><xul:listcelllabel="Java"/></xul:listitem></xul:listbody></xul:listbox></script>
The Application Logic of your client web application is written in JavaScript. For example:
<scripttype="text/javascript">functiononListBoxSelect(oEvent){if(oEvent.currentTarget.selectedItem)alert(oEvent.currentTarget.selectedItem.cells[0].getAttribute("label"));}</script>
The styling of your application is done in CSS, for example:
<styletype="text/ample+css">@namespacexul"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";.test{font-weight:bold;}xul|listitem:selected{background-color:blue;color:white;}</style>
From the XUL code it is easy to see what the layout of the table will be. The assumption is that for web-designers it is much easier to look at a declarative page that uses familiar, HTML like tags. The application developers can concentrate on specifying the behavior for the GUI elements. There is also a good separation between layout, styling and processing.
Although there is a set of pre-defined UI Markup Languages (including XUL, XHTML, SVG and HTML5) it is easy to extend the base (to adjust it to certain application needs) and create new languages and UI components. This is done by either prototyping objects in JavaScript and registering them with the framework, or by implementing these components in XBL2. The UI Languages that are currently present in Ample are prototype implementations.