For jQuery Users - Ample SDK

Hello World!Getting Started Development Roles Application Development Extensions Development Technical Articles For jQuery Users Presentations

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
Syntax Variations
jQuery API Availability Table
CSS Selectors Support

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.

Initialization
Ajax
Effects
CSS
- Class Attribute
Events
Attributes
Dimensions
Offset
Manipulation
Traversal
Miscellaneous
- DOM Element Methods
Data
Collections
Forms
Ample SDK-specific modules
- History
- Modal
Properties of Result Object
Plugins Authoring

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

Ample SDK for jQuery Users

Embedding Ample SDK content into a web page

Syntax Variations

jQuery API Availability Table

Initialization

Ajax

Effects

CSS

Class Attribute

Events

Attributes

Dimensions

Offset

Manipulation

Traversal

DOM Element Methods

Data

Collections

Forms

History

Modal

Properties of Result Object

Plugins Authoring

CSS Selectors Support

Basic

Hierarchy

CSS Namespaces Module

Attribute

Basic Filter

Child Filter

Content Filter

Visibility

Form