Javascript API
Japano offers two features which normally require client-side javascript to work:
-
Javascript views
Javascript views are a javascript view on a server-side object. A japano action is invoked and returns a javascript object which can be used to dynamically update the page -
Partial page updates
Parts of a JSP page can be marked so that they can be reloaded or loaded into other pages without doing a full update of the current HTML page in question.
Take a look at the sample webapplication for an example of both features. Note that if you can ignore the javascript API if you don't use javascript views or partial updates.
Using the Javascrip API
To use the japano javascript API you must include the "japano.js" file included in the japano distribution. The japano js file contains AJAX related methods and style and event related functions that enable compatibility with Internet Explorer.japano
- japano.get(URL, fn, params, waitCursor)
- Calls the given URL with the given associative parameter array params and feeds the evaluated JSON response to the function fn. If waitCursor is set to true, a wait cursor is set until a response is received.
- japano.getText(URL, fn, params, waitCursor)
- Calls the given URL with the given associative parameter array params and feeds the text response to the function fn. If waitCursor is set to true, a wait cursor is set until a response is received.
- japano.getHTML(URL, fn, params, waitCursor)
- Calls the given URL with the given associative parameter array params and feeds the received HTML element to the function fn. If waitCursor is set to true, a wait cursor is set until a response is received.
- japano.getXML(URL, fn, params, waitCursor)
- Calls the given URL with the given associative parameter array params and feeds the XML response to the function fn. If waitCursor is set to true, a wait cursor is set until a response is received.
- japano.readParameter(formElement)
- Reads the content of the given form element into an associative array.
- japano.commit(id, fn)
- Commits the form with the given id and reloads it via partial Update.
- japano.isError(o)
- Returns true if the given object is a japano Error object.
- japano.dump(o, fn)
- Dumps the given Object as HTML.
- japano.forElement( type, className, fn)
-
Calls the given function for every DOM element of the given type which has the given class.
The function fn has the following signature:
function fn(element, data)- element
- the DOM element.
- data
- data object embedded in the onclick handler. forElement() supports hiding data in the onclick handler like this:
This allows you to annotate your DOM nodes with javascript meta-data.<span class="marked" onclick="return { foo: 1; bar: 2 };" ></span>
This is best illustrated with an example:
The japano framework uses forElement to create the buttons of <jpn:button> tags. The button tag inserts something like this into the page.
<span class="jpn_button" onclick="return {button:'Push me!',fn:'doStuff'};"></span>
Japano calls forElement() like this:
japano.forElement("SPAN", "jpn_button", function(span, data) { span.onclick=null; // if we really have a data object if (data) { // get the function object from its name eval("var fn="+data.fn+";"); // create a new button var button=document.createElement("BUTTON"); // append the button text to the button button.appendChild(document.createTextNode(data.button)); // add our method as click event japano.addEvent(button, "click", fn); // remove all children of the span while (span.hasChildNodes()) { span.removeChild(span.firstChild); } // add button to the span span.appendChild(button); } });
forElement() searches the DOM for spans containing "jpn_button" in their class attributes. Then it calls the function with the span element and the evaluated data object. The function creates the button with the given text that calls the given function when pushed. Without javascript only an empty span is there. fallback code can be added in <noscript></noscript> after that.
- japano.Error(code, response)
- This Object is thrown by japano to indicate an error.
japano.style
- japano.style.setClass(elem,class)
- Sets the class of the given element to the given class.
- japano.style.getClass(elem)
- Returns the class of the given Element.
- japano.style.addClass(elem,class)
- Adds the class to the classes of the given element.
- japano.style.removeClass(elem,class)
- Removes the class from the classes of the given element.
japano.event
- japano.event.onload(fn)
- Registers the given function to be executed when the page is loaded. Multiple functions can be registered.
- japano.event.add(elem, type, fn)
- Cross-Browser addEvent method. Registers a given function to be executed on an event of the given type for the given DOM element. (code taken from quirksmode.org.)
- japano.event.remove(elem, type, fn)
- Cross-Browser removeEvent method