Home  |   Blog  |   Sitemap  |   Search  
Home
JavaScript UI FrameworkTutorialsFor jQuery Users

Ample SDK for jQuery Users

This guide is written for people with jQuery background who want to start developing even more complex client-side applications with Ample SDK. Next to the awesome HTML4/CSS1 technology familiar to you from the world of jQuery, you now can use HTML5, CSS3, SVG, SMIL, XUL (Mozilla's UI technology), Charts and more - all cross-browser (of course including the "ugly duckling" IE6 and the half-way ran IE8)!

Embedding Ample SDK content into a web page

Unlike jQuery, Ample SDK can only operate on content designated for its use. See below two ways of designating content for Ample SDK (Under "Application UI")

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World!</title>
        <!-- Ample SDK resources (include SVG and XUL when needed) -->
        <script type="text/javascript" src="ample/runtime.js"></script>
        <script type="text/javascript" src="ample/languages/xhtml/xhtml.js"></script>
        <link type="text/ample+css" rel="stylesheet"
                   href="ample/languages/xhtml/themes/default/style.css"/>
        <!-- Application Logic -->
        <script type="text/javascript">
            ample.ready(function() {
                ample.query("form").bind("submit", function(oEvent) {
                    // Disable submit button
                    ample.query("button[type=submit]", this).attr("disabled", "true");
                    // Prevent Default
                    oEvent.preventDefault();
                })
            })
        </script>
        <!-- Application Style -->
        <style type="text/ample+css">
        input[type=datetime]:required {
            background-color: pink;
        }
        </style>
    </head>
    <body>
        <!-- Application UI (Hidden from search engines) -->
        <script type="application/ample+xml">
            <form>
                <input type="datetime" />
                <button type="submit">Submit</button>
            </form>
        </script>
        <!-- Application UI (Search engines friendly) -->
        <script>ample.open()</script>
        <form>
            <input type="number" value="2"/>
            <button type="submit">Submit</button>
        </form>
        <script>ample.close()</script>
    </body>
</html>

Syntax Variations

There are very few minor differences between jQuery API implemented in Ample SDK and the one found in jQuery library itself. Below is an overview of those.

jQuery Syntax Ample SDK Syntax
The entry point to jQuery API is it's jQuery function (or $ shortcut). In Ample SDK the corresponding function is ample.query, when executed it also returns a collection.
// Query document for nodes
jQuery(query);
$(query);
// Query document for nodes
ample.query(query);
jQuery allows passing in document object as its argument: jQuery(document), in Ample SDK similar call (ample.query(ample)) is not allowed and all methods applicable to such constructions should be queried on ample object directly.
// Invoke method on "document" object
jQuery(document).method(args);
// Invoke method on "document" object
ample.method(args);
Next to generic bind/trigger methods in jQuery it has many specialized methods defined on collections such as click, mousedown, keyup etc. which are used to either register an event listener or trigger a specific event. In Ample SDK the specialized methods are not present so you will always need to use the generic APIs.
Note! In Ample SDK it is not allowed to trigger core UI and Mutation events, such as click, DOMAttrModified etc.
// Register a handler (shortcut)
jQuery(query).event(fHandler);
// Trigger an event (shortcut)
jQuery(query).event();
//
ample.query(query).bind(event, fHandler);
//
ample.query(query).trigger(event);

jQuery API Availability Table

Ample SDK has decided to adopt only the good parts of jQuery (about 95%!) In the table below you will find what jQuery methods are supported in Ample SDK and which are not.

jQuery Syntax Ample SDK Syntax
Initialization
// Register an onload handler
jQuery.ready(fCallback);
jQuery(fCallback);
// Register an onload handler
ample.ready(fCallback);
Ajax
// Perform an HTTP (Ajax) request
jQuery.ajax(args);
// Load data using a HTTP POST request
jQuery.post(args);
// Load data using a HTTP GET request
jQuery.get(args);
// Load HTML and render
jQuery(query).load(args);
// Abort load HTML request
/* Not supported */
// Perform an HTTP (Ajax) request
ample.ajax(args);
// Load data using a HTTP POST request
ample.post(args);
// Load data using a HTTP GET request
ample.get(args);
// Load HTML/XML and render
ample.query(query).load(args);
// Abort load HTML/XML request
ample.query(query).abort();
Effects
// Perform CSS animation
jQuery(query).animate(args);
// Stop CSS animation
jQuery(query).stop();
// Delays subsequent CSS animations
jQuery(query).delay(args);
// Perform transition
jQuery(query).show(args);
jQuery(query).hide(args);
jQuery(query).toggle(args);
jQuery(query).fadeIn(args);
jQuery(query).fadeOut(args);
jQuery(query).fadeTo(args);
jQuery(query).slideUp(args);
jQuery(query).slideDown(args);
jQuery(query).slideToggle(args);
// Perform CSS animation
ample.query(query).animate(args);
// Stop CSS animation
ample.query(query).stop();
// Delays subsequent CSS animations
ample.query(query).delay(args);
// Perform transition
ample.query(query).show(args);
ample.query(query).hide(args);
/* Not supported */
ample.query(query).fadeIn(args);
ample.query(query).fadeOut(args);
ample.query(query).fadeTo(args);
ample.query(query).slideUp(args);
ample.query(query).slideDown(args);
/* Not supported */
CSS
// Get/Set css property value
jQuery(query).css(args);
// Get/Set css property value
ample.query(query).css(args);
Class Attribute
//
jQuery(query).addClass(args);
jQuery(query).hasClass(args);
jQuery(query).removeClass(args);
jQuery(query).hasClass(args);
//
/*
  The pseudo-classes are managed internally.
  Use in CSS: input[type=checkbox]:disabled {}
*/
Events
// Register a handler for an event
jQuery(query).bind(args);
// Trigger an event
jQuery(query).trigger(args);
// Register a handler for an event
ample.query(query).bind(args);
// Trigger an event
ample.query(query).trigger(args);
Attributes
// Get/Set attribute value
jQuery(query).attr(args);
// Remove attribute
jQuery(query).removeAttr(sName);
// Get/Set attribute value
ample.query(query).attr(args);
// Remove attribute
ample.query(query).attr(sName, null);
Dimensions
// Get/Set width
jQuery(query).width(args);
// Get/Set height
jQuery(query).height(args);
// Get inner width
jQuery(query).innerWidth();
// Get inner height
jQuery(query).innerHeight();
// Get outer width
jQuery(query).outerWidth();
// Get outer height
jQuery(query).outerHeight();
// Get/Set width
ample.query(query).width(args);
// Get/Set height
ample.query(query).height(args);
// Get inner width
ample.query(query).innerWidth();
// Get inner height
ample.query(query).innerHeight();
// Get outer width
ample.query(query).outerWidth();
// Get outer height
ample.query(query).outerHeight();
Offset
// Get coordinates of the element
jQuery(query).offset();
// Get the parent offset element
jQuery(query).offsetParent();
// Get coordinates of the element
jQuery(query).position();
// Get/Set scrollTo of the element
jQuery(query).scrollTop();
// Get/Set scrollLeft of the element
jQuery(query).scrollLeft();
// Get coordinates of the element
ample.query(query).offset();
// Get the parent offset element
ample.query(query).offsetParent();
// Get coordinates of the element
ample.query(query).position();
// Get/Set scrollTo of the element
ample.query(query).scrollTop();
// Get/Set scrollLeft of the element
ample.query(query).scrollLeft();
Manipulation
// DOM Insertion, Outside
jQuery(query).after(args);
jQuery(query).before(args);
jQuery(query).insertAfter(args);
jQuery(query).insertBefore(args);
// DOM Insertion, Inside
jQuery(query).append(args);
jQuery(query).appendTo(args);
jQuery(query).prepend(args);
jQuery(query).prependTo(args);
//
jQuery(query).html(args);
jQuery(query).text(args);
// DOM Insertion, Around
jQuery(query).unwrap(args);
jQuery(query).wrap(args);
jQuery(query).wrapAll(args);
jQuery(query).wrapInner(args);
// DOM Replacement
jQuery(query).replaceAll(args);
jQuery(query).replaceWith(args);
// DOM Removal
jQuery(query).detach(args);
jQuery(query).empty(args);
jQuery(query).remove(args);
// Copying
jQuery(query).clone(args);
// DOM Insertion, Outside
ample.query(query).after(args);
ample.query(query).before(args);
ample.query(query).insertAfter(args);
ample.query(query).insertBefore(args);
// DOM Insertion, Inside
ample.query(query).append(args);
ample.query(query).appendTo(args);
ample.query(query).prepend(args);
ample.query(query).prependTo(args);
//
ample.query(query).html(args);
ample.query(query).text(args);
// DOM Insertion, Around
/* Not supported */
/* Not supported */
/* Not supported */
/* Not supported */
// DOM Replacement
ample.query(query).replaceAll(args);
ample.query(query).replaceWith(args);
// DOM Removal
/* Not supported */
ample.query(query).empty(args);
ample.query(query).remove(args);
// Copying
jQuery(query).clone(args);
Traversal
// Tree Traversal
jQuery(query).children(args);
jQuery(query).closest(args);
jQuery(query).find(args);
jQuery(query).next(args);
jQuery(query).nextAll(args);
jQuery(query).nextUntil(args);
jQuery(query).parent(args);
jQuery(query).parents(args);
jQuery(query).parentsUntil(args);
jQuery(query).prev(args);
jQuery(query).prevAll(args);
jQuery(query).prevUntil(args);
jQuery(query).siblings(args);
// Misc
jQuery(query).contents(args);
// Tree Traversal
ample.query(query).children(args);
ample.query(query).closest(args);
ample.query(query).find(args);
ample.query(query).next(args);
ample.query(query).nextAll(args);
ample.query(query).nextUntil(args);
ample.query(query).parent(args);
ample.query(query).parents(args);
ample.query(query).parentsUntil(args);
ample.query(query).prev(args);
ample.query(query).prevAll(args);
ample.query(query).prevUntil(args);
ample.query(query).siblings(args);
// Misc
/* Not supported */
DOM Element Methods
//
jQuery(query).get(args);
jQuery(query).index(args);
jQuery(query).size(args);
jQuery(query).toArray(args);
//
ample.query(query).get(args);
/* Not implemented */
ample.query(query).size(args);
ample.query(query).toArray(args);
Data
// Get/Set data
jQuery(query).data(args);
// Remove data
jQuery(query).removeData(sName);
// Get/Set data
ample.query(query).data(args);
// Remove data
ample.query(query).data(sName, null);
Collections
// Manipulation
jQuery(query).each(args);
// Filtering
jQuery(query).eq(args);
jQuery(query).filter(args);
jQuery(query).first(args);
jQuery(query).has(args);
jQuery(query).is(args);
jQuery(query).last(args);
jQuery(query).map(args);
jQuery(query).not(args);
jQuery(query).slice(args);
jQuery(query).splice(args);
// Miscellaneous
jQuery(query).add(args);
jQuery(query).andSelf(args);
jQuery(query).end(args);
// Manipulation
ample.query(query).each(args);
// Filtering
ample.query(query).eq(args);
/* Not implemented */
ample.query(query).first(args);
/* Not implemented */
/* Not supported */
ample.query(query).last(args);
/* Not supported */
/* Not supported */
ample.query(query).slice(args);
ample.query(query).splice(args);
// Miscellaneous
/* Not supported */
/* Not supported */
/* Not implemented */
Forms

The jQuery Forms module is not built into the Ample SDK Runtime and is available as a plugin, hence it has to be linked when needed. The location is ample/plugins/form/form.js

//
jQuery(query).val(args);
jQuery(query).blur(args);
jQuery(query).focus(args);
jQuery(query).change(args);
jQuery(query).select(args);
jQuery(query).serialize(args);
jQuery(query).serializeArray(args);
jQuery(query).submit(args);
/* Not supported */
//
ample.query(query).val(args);
ample.query(query).blur(args);
ample.query(query).focus(args);
ample.query(query).change(args);
ample.query(query).select(args);
ample.query(query).serialize(args);
ample.query(query).serializeArray(args);
ample.query(query).submit(args);
ample.query(query).reset(args);
History
//
/* Not applicable */
//
/* Not applicable */
// Add state to the browser history
ample.bookmark(sHash/*[*/, sTitle/*]*/);
// Register handler for navigation event
ample.bind("hashchange", fCallback);
Modal
//
/* Not applicable */
// Sets/resets element modal state
ample.modal(oElement);
Properties of Result Object
// The DOM node context used
jQuery(query).context
// The number of elements in the collection
jQuery(query).length
// A selector used
jQuery(query).selector
// Namespace resolver function used
/* Not applicable */
// The DOM node context used
ample.query(query).context
// The number of elements in the collection
ample.query(query).length
// A selector used
ample.query(query).selector
// Namespace resolver function used
ample.query(query).resolver
Plugins Authoring
// Extend jQuery object
jQuery.extend(oPlugin);
// Extend jQuery collection object
jQuery.fn.extend(oPlugin);
//
/* Not applicable */
//
/* Not applicable */
//
/* Not applicable */
//
/* Not applicable */
// Extend ample object
ample.extend(oPlugin);
// Extend ample collection object
ample.extend(oPlugin, ample.classes.Query.prototype);
// Register ample XML element class
ample.extend(fElement);
// Register ample XML attribute class
ample.extend(fAttribute);
// Validate plugin arguments
ample.guard(aArguments, aParameters);
// Publish object
ample.publish(oSource, sName[, oTarget = window]);

CSS Selectors Support

Ample SDK supports all standard CSS3 selectors. In addition it also supports some of jQuery-specific selectors, but not all. Please consult the table below for detailed information.

Selector Type Comment jQuery Syntax Ample SDK Syntax
Basic
All Selector * *
Class Selector .class .class
Element Selector element element
ID Selector #id #id
Multiple Selector selector1, selector2, selectorN selector1, selector2, selectorN
Hierarchy
Child Selector parent > child parent > child
Descendant Selector ancestor descendant ancestor descendant
Next Adjacent Selector prev + next prev + next
Next Siblings Selector prev ~ siblings prev ~ siblings
CSS Namespaces Module
Element Namespace Selector Not supported prefix|element
Has Attribute Namespace Selector Not supported [prefix|attribute]
Attribute
Attribute Contains Prefix Selector [name|=value] [name|=value]
Attribute Contains Selector [name*=value] [name*=value]
Attribute Contains Word Selector [name~=value] [name~=value]
Attribute Ends With Selector [name$=value] [name$=value]]
Attribute Equals Selector [name=value] [name=value]]
Attribute Not Equal Selector non-standard [name!=value] Not supported
Attribute Starts With Selector [name^=value] [name^=value]
Has Attribute Selector [name] [name]
Multiple Attribute Selector [name=value][name2=value2] [name=value][name2=value2]
Basic Filter
non-standard :animated :animated
non-standard Not supported :load
non-standard :eq() Not supported
non-standard :even Not supported
non-standard :gt() Not supported
non-standard :header Not supported
non-standard :first Not supported
non-standard :lt() Not supported
non-standard :last Not supported
:not() :not()
non-standard :odd Not supported
Child Filter
:first-child :first-child
:last-child :last-child
:nth-child() :nth-child()
:nth-last-child() :nth-last-child()
:only-child :only-child
Content Filter
:contains() :contains()
:empty :empty
non-standard :has() Not supported
non-standard :parent Not supported
Visibility
non-standard :hidden :hidden
non-standard :visible :visible
Form
non-standard :button Not supported
non-standard :checkbox Not supported
:checked :checked
:disabled :disabled
:enabled :enabled
non-standard :file Not supported
non-standard :image Not supported
non-standard :input Not supported
non-standard :password Not supported
non-standard :radio Not supported
non-standard :reset Not supported
non-standard :selected Not supported
non-standard :submit Not supported
non-standard :text Not supported