You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@click.apache.org by sa...@apache.org on 2009/06/08 23:08:24 UTC
svn commit: r782785 - in /incubator/click/trunk/click/examples:
src/org/apache/click/examples/page/ajax/AjaxCustomer.java
src/org/apache/click/examples/page/ajax/AjaxSelect.java
webapp/ajax/ajax-select.htm webapp/ajax/ajax-select.js
Author: sabob
Date: Mon Jun 8 21:08:23 2009
New Revision: 782785
URL: http://svn.apache.org/viewvc?rev=782785&view=rev
Log:
updated ajax-select docs
Modified:
incubator/click/trunk/click/examples/src/org/apache/click/examples/page/ajax/AjaxCustomer.java
incubator/click/trunk/click/examples/src/org/apache/click/examples/page/ajax/AjaxSelect.java
incubator/click/trunk/click/examples/webapp/ajax/ajax-select.htm
incubator/click/trunk/click/examples/webapp/ajax/ajax-select.js
Modified: incubator/click/trunk/click/examples/src/org/apache/click/examples/page/ajax/AjaxCustomer.java
URL: http://svn.apache.org/viewvc/incubator/click/trunk/click/examples/src/org/apache/click/examples/page/ajax/AjaxCustomer.java?rev=782785&r1=782784&r2=782785&view=diff
==============================================================================
--- incubator/click/trunk/click/examples/src/org/apache/click/examples/page/ajax/AjaxCustomer.java (original)
+++ incubator/click/trunk/click/examples/src/org/apache/click/examples/page/ajax/AjaxCustomer.java Mon Jun 8 21:08:23 2009
@@ -60,12 +60,12 @@
}
/**
- * Ensure the Http response Content-type is "text/xml".
+ * Ensure the Http response Content-type is "text/html; charset=UTF-8".
*
* @see Page#getContentType()
*/
public String getContentType() {
- return "text/xml; charset=UTF-8";
+ return "text/html; charset=UTF-8";
}
}
Modified: incubator/click/trunk/click/examples/src/org/apache/click/examples/page/ajax/AjaxSelect.java
URL: http://svn.apache.org/viewvc/incubator/click/trunk/click/examples/src/org/apache/click/examples/page/ajax/AjaxSelect.java?rev=782785&r1=782784&r2=782785&view=diff
==============================================================================
--- incubator/click/trunk/click/examples/src/org/apache/click/examples/page/ajax/AjaxSelect.java (original)
+++ incubator/click/trunk/click/examples/src/org/apache/click/examples/page/ajax/AjaxSelect.java Mon Jun 8 21:08:23 2009
@@ -18,12 +18,12 @@
*/
package org.apache.click.examples.page.ajax;
-import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.annotation.Resource;
+import org.apache.click.Context;
import org.apache.click.control.Option;
import org.apache.click.control.Select;
import org.apache.click.element.JsImport;
@@ -31,6 +31,7 @@
import org.apache.click.examples.domain.Customer;
import org.apache.click.examples.page.BorderPage;
import org.apache.click.examples.service.CustomerService;
+import org.apache.click.util.ClickUtils;
import org.springframework.stereotype.Component;
/**
@@ -66,13 +67,15 @@
// the web folder "/click/prototype/"
headElements.add(new JsImport("/click/prototype/prototype.js"));
+ Context context = getContext();
+
// Create a model to pass to the Page JavaScript template. The
- // template recognizes three Velocity variables:
- // $context, $selector and $target
- Map model = new HashMap();
+ // template recognizes the following Velocity variables:
+ // $context, $path, $selector and $target
+ Map model = ClickUtils.createTemplateModel(this, context);
- // Add the application context path -> "/click-examples"
- model.put("context", getContext().getRequest().getContextPath());
+ // Set path to the AjaxCustomer Page path
+ model.put("path", context.getPagePath(AjaxCustomer.class));
// Add a CSS selector, in this case the customerSelect ID attribute
model.put("selector", customerSelect.getId());
Modified: incubator/click/trunk/click/examples/webapp/ajax/ajax-select.htm
URL: http://svn.apache.org/viewvc/incubator/click/trunk/click/examples/webapp/ajax/ajax-select.htm?rev=782785&r1=782784&r2=782785&view=diff
==============================================================================
--- incubator/click/trunk/click/examples/webapp/ajax/ajax-select.htm (original)
+++ incubator/click/trunk/click/examples/webapp/ajax/ajax-select.htm Mon Jun 8 21:08:23 2009
@@ -17,7 +17,8 @@
under the License.*#
-->
-This <a target="blank" class="external" href="http://en.wikipedia.org/wiki/AJAX">AJAX</a> example pulls the customer details for the selected customer and shows the
+This <a target="blank" class="external" href="http://en.wikipedia.org/wiki/AJAX">AJAX</a>
+example pulls the customer details for the selected customer and shows the
results without refreshing the page.
Please select one of the customers:
@@ -32,9 +33,9 @@
<p> </p>
-The <a target="blank" class="external" href="http://openrico.org/">Rico</a> JavaScript
-library is used in this example. Please also see the
-<a target="blank" class="external" href="http://openrico.org/docs/RicoAjaxEngine.pdf">RicoAjaxEngine</a>
+The <a target="blank" class="external" href="http://www.prototypejs.org/">Prototype</a>
+JavaScript library is used in this example. Please also see the
+<a target="blank" class="external" href="http://www.prototypejs.org/learn/introduction-to-ajax">Introduction to Ajax</a>
for a good tutorial.
<p/>
This HTML page contains a customer Select control
@@ -43,54 +44,74 @@
<pre class="codeHtml">
<table cellspacing="8" cellpadding="8">
<tr>
- <td> <select name="customerSelect" onclick="<span class="red">onCustomerChange</span>(this);">...</select> </td>
+ <td> <select name="customerSelect">...</select> </td>
<td> <div id="<span class="st">customerDetails</span>"/> </td>
</tr>
</table>
</pre>
<p/>
-When you click on the select a HTTP request (e.g. <tt>GET ajax-customer.htm?customerId=4424</tt>)
+When you click on the select, an HTTP request (e.g. <tt>GET ajax-customer.htm?customerId=4424</tt>)
is made to the
<a href="$context/source-viewer.htm?filename=WEB-INF/classes/org/apache/click/examples/page/ajax/AjaxCustomer.java">AjaxCustomer</a>
-page to get the customers details. These details are returned as XML/HTML with a content-type of 'text/xml':
+page to get the customers details. These details are returned as HTML with a content-type of 'text/html':
<pre class="codeHtml">
-<ajax-response>
- <response type="element" id="<span class="st">customerDetails</span>">
- <i>HTML content...</i>
- </response>
-</ajax-response>
+<table border="0" cellspacing="2" cellpadding="2">
+ <tr>
+ <td><b>Name</b></td>
+ <td>Alison Smart</td>
+ </tr>
+ ...
+</table>
</pre>
-The Rico ajaxEngine then sets the inner text of the page's registered
-<div id='<span class="st">customerDetails</span>'/> element with the XML content of the
-<span style="white-space:no-wrap;"><response id="<span class="st">customerDetails</span>"></span> element. Note these element
-ids must match.
+Prototype's Ajax.Updater then updates the inner HTML of the page registered
+<div id='<span class="st">customerDetails</span>'/> element with the HTML
+content returned from the server.
<p/>
-The Rico ajaxEngine is initialised through the JavaScript page body onload function:
+Below is the necessary JavaScript to perform the Ajax request.
+<p/>
+As soon as the browser DOM is loaded, Prototype's
+<a target="_blank" class="external" href="http://www.prototypejs.org/api/event/observe">observe</a>
+function is used to register a "<span class="green">change</span>" listener on the
+"<span class="blue">customerSelect</span>" control. When you select an
+option, the Ajax.Updater is invoked to retrieve the customer details and update the
+target "<span class="red">customerDetails</span>" div:
<pre class="codeHtml">
<html>
...
-</html">
-<span class="red">$</span>jsImports
-<script type='text/javascript' src='<a href="../assets/js/prototype.js">prototype.js</a>'></script>
-<script type='text/javascript' src='<a href="../assets/js/rico.js">rico.js</a>'></script>
-<script type='text/javascript'>
-function <span class="maroon">registerAjax</span>() {
- ajaxEngine.registerRequest('<span class="green">getCustomerInfo</span>', '<a href="$context/source-viewer.htm?filename=ajax/ajax-customer.htm">ajax-customer.htm</a>');
- ajaxEngine.registerAjaxElement('<span class="st">customerDetails</span>');
-}
-
-function <span class="red">onCustomerChange</span>(select) {
- ajaxEngine.sendRequest('<span class="green">getCustomerInfo</span>', 'customerId=' + select.value);
-}
+<body>
+...
+
+ <span class="red">$</span>jsImports
+
+ <script type='text/javascript' src='<a href="../assets/js/prototype.js">prototype.js</a>'></script>
-addLoadEvent(registerAjax);
-</script>
+ <script type='text/javascript'>
+ // Wait until browser DOM is loaded
+ document.observe("dom:loaded", function() {
+
+ // Observe the selected element's "change" event, which triggers the given function.
+ // Note that $selector is a Velocity variable passed in from the AjaxSelect.java Page
+ $('<span class="blue">customerSelect</span>').observe('<span class="green">change</span>', function(event){
+
+ // Retrieve the source of the event, in this case the Select control
+ var select = Event.element(event);
+
+ // Ajax.Updater requests the customer for the given customerId parameter
+ // and replaces the inner HTML of customerDetails div
+ new <span class="maroon">Ajax.Updater</span>('<span class="red">customerDetails</span>', '<span class="blue">/click-examples/ajax/ajax-customer.htm</span>', {
+ <span class="green">method</span>: 'get',
+ <span class="green">parameters</span>: {customerId : select.value}
+ });
+ });
+ });
+ </script>
+</body>
+</html>
</pre>
The initialization code above is contained in the
-<a href="$context/source-viewer.htm?filename=ajax/ajax-include.htm">ajax-include.htm</a> file.
-Note when including the JavaScript prototype.js and rico.js files, ensure prototype.js is before rico.js
-as rico is dependent upon prototype.
\ No newline at end of file
+<a href="$context/source-viewer.htm?filename=ajax/ajax-select.js">ajax-select.js</a>
+template.
Modified: incubator/click/trunk/click/examples/webapp/ajax/ajax-select.js
URL: http://svn.apache.org/viewvc/incubator/click/trunk/click/examples/webapp/ajax/ajax-select.js?rev=782785&r1=782784&r2=782785&view=diff
==============================================================================
--- incubator/click/trunk/click/examples/webapp/ajax/ajax-select.js (original)
+++ incubator/click/trunk/click/examples/webapp/ajax/ajax-select.js Mon Jun 8 21:08:23 2009
@@ -16,32 +16,24 @@
// under the License.
/**
- * The ajax-select Page JavaScript.
+ * The ajax-select JavaScript template.
*/
// Wait until browser DOM is loaded
document.observe("dom:loaded", function() {
- // Observe the selected element's "change" event, which triggers the given function
+ // Observe the selected element's "change" event, which triggers the given function.
+ // Note that $selector is a Velocity variable passed in from the AjaxSelect.java Page
$('$selector').observe('change', function(event){
+
+ // Retrieve the source of the event, in this case the Select control
var select = Event.element(event);
- onCustomerChange(select);
- });
- // This function uses an Ajax request to retrieve customer details that matches
- // the ID value of a select element
- function onCustomerChange(select) {
- // The Ajax url points to the AjaxCustomer Click Page
- new Ajax.Request('${context}/ajax/ajax-customer.htm', {
+ // $target, $context and $path are Velocity variables that are passed in
+ // from the AjaxSelect.java Page
+ new Ajax.Updater('$target', '$context$path', {
method: 'get',
- parameters: {customerId : select.value},
- onSuccess: function(transport){
- // On a successful request, update the given target with the server response
- $('$target').update(transport.responseText);
- },
- onFailure: function(){
- alert('An error occurred.')
- }
+ parameters: {customerId : select.value}
});
- }
+ });
});