Ample SDK

From Wikipedia, the free encyclopedia
Jump to: navigation, search
Ample SDK
Amplesdk-logo-48.png
Stable release 0.9.4 / December 1, 2012 (2012-12-01)
Development status Active
Written in JavaScript
Type Web application framework
License Dual license: GPL / MIT[1]
Website www.amplesdk.com

Ample SDK is a lightweight JavaScript library intended to simplify cross-browser web application development. Although the 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.

Because its documentation is still sparse and the examples lack clear explanation, the Ample SDK is not suited for the beginning, casual web developer. For the experienced web guru however, it offers many features, listed below.

Features[edit]

The features of Ample include:

  • Full implementation of the core level of the DOM W3C technologies.
  • Every major web-browser is supported.
  • Cross-browser XUL (supporting a desktop-like UI), the XML user interface markup language developed by the Mozilla project.
  • Styleable HTML5 forms elements.
  • SVG in all supported browsers, including Internet Explorer 5.5-8.0
  • An optional API similar to jQuery.
  • Good run-time performance.
  • Extensible architecture.

Runtime[edit]

The runtime is the core module of the Ample SDK framework. It contains implementations for:

Scripting APIs[edit]

XML technologies[edit]

UI Managers[edit]

  • Drag & Drop
  • Resize
  • Focus
  • Capture
  • Selection

UI Markup Languages[edit]

The UI Markup Languages are implemented in JavaScript independently on each other:

Plugins[edit]

There is a jQuery-like plugin system in Ample SDK, some of the plugins coming with version 0.9.3:

  • Forms (unlike jQuery, in Ample SDK this module doesn't belong to the core technologies)
  • Cookie
  • Store
  • XPath
  • XSLT

Hello Ample! Example[edit]

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 additio—languages/xhtml/themes/default/style.css"/> </source> 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:

<html xmlns="http://www.w3.org/1999/xhtml"> ... </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:

<script type="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.

Standards-based web-development[edit]

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

<div id="abc" />

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.

User Interface[edit]

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.

<script type="application/ample+xml"
        xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <xul:listbox type="checkbox" height="200"
                 onselect="onListBoxSelect(event)">
        <xul:listhead>
            <xul:listheader width="30" minwidth="30" label="id"/>
            <xul:listheader width="200" minwidth="300" label="First Name"
                            tooltiptext="Shows first name of the person. Click to sort."/>
            <xul:listheader label="Profession" minwidth="200"
                            tooltiptext="Shows profession of the person. Click to sort."/>
            <xul:listheader width="200" minwidth="200" label="Location"
                            tooltiptext="Shows person location. Click to sort."/>
        </xul:listhead>
        <xul:listbody id="listbody">
            <xul:listitem class="test">
                <xul:listcell label="1" />
                <xul:listcell label="George"/>
                <xul:listcell label="House Painter"/>
                <xul:listcell label="USA"/>
            </xul:listitem>
            <xul:listitem class="test2">
                <xul:listcell label="2" />
                <xul:listcell label="Mary Ellen"/>
                <xul:listcell label="Candle Maker"/>
                <xul:listcell label="Java"/>
            </xul:listitem>
        </xul:listbody>
    </xul:listbox>
</script>

Logic[edit]

The Application Logic of your client web application is written in JavaScript. For example:

<script type="text/javascript">
function onListBoxSelect(oEvent) {
    if (oEvent.currentTarget.selectedItem)
        alert(oEvent.currentTarget.selectedItem.cells[0].getAttribute("label"));
}
</script>

Style[edit]

The styling of your application is done in CSS, for example:

<style type="text/ample+css">
@namespace xul "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.

Componentization model[edit]

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.

Related links[edit]

Notes[edit]

  1. ^ "Licensing – Ample SDK". Archived from the original on 28 November 2009. Retrieved 2009-11-26. 

External links[edit]