click-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From sa...@apache.org
Subject 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
Date Mon, 08 Jun 2009 21:08:24 GMT
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>&nbsp;</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">
 &lt;table cellspacing="8" cellpadding="8">
    &lt;tr>
-      &lt;td> &lt;select name="customerSelect" onclick="<span class="red">onCustomerChange</span>(this);"&gt;...&lt;/select&gt;
&lt;/td>
+      &lt;td> &lt;select name="customerSelect"&gt;...&lt;/select&gt;
&lt;/td>
       &lt;td> &lt;div id="<span class="st">customerDetails</span>"/>
&lt;/td>
    &lt;/tr>
 &lt;/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">
-&lt;ajax-response&gt;
-  &lt;response type="element" id="<span class="st">customerDetails</span>"&gt;
-    <i>HTML content...</i>
-  &lt;/response&gt;
-&lt;/ajax-response&gt;
+&lt;table border="0" cellspacing="2" cellpadding="2">
+  &lt;tr>
+    &lt;td&gt;&lt;b&gt;Name&lt;/b&gt;&lt;/td&gt;
+    &lt;td>Alison Smart&lt;/td&gt;
+  &lt;/tr&gt;
+  ...
+&lt;/table&gt;
 </pre>
 
-The Rico ajaxEngine then sets the inner text of the page's registered
-&lt;div id='<span class="st">customerDetails</span>'/&gt; element with
the XML content of the 
-<span style="white-space:no-wrap;">&lt;response id="<span class="st">customerDetails</span>"&gt;</span>
element. Note these element
-ids must match.
+Prototype's Ajax.Updater then updates the inner HTML of the page registered
+&lt;div id='<span class="st">customerDetails</span>'/&gt; 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">
 &lt;html&gt;
 ...
-&lt;/html"&gt;
-<span class="red">$</span>jsImports
-&lt;script type='text/javascript' src='<a href="../assets/js/prototype.js">prototype.js</a>'&gt;&lt;/script&gt;
-&lt;script type='text/javascript' src='<a href="../assets/js/rico.js">rico.js</a>'&gt;&lt;/script&gt;
-&lt;script type='text/javascript'&gt;
-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);
-}
+&lt;body&gt;
+...
+
+  <span class="red">$</span>jsImports
+
+  &lt;script type='text/javascript' src='<a href="../assets/js/prototype.js">prototype.js</a>'&gt;&lt;/script&gt;
 
-addLoadEvent(registerAjax);
-&lt;/script&gt;
+  &lt;script type='text/javascript'&gt;
+    // 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}
+        });
+      });
+    });
+  &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
 </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}
         });
-    }
+    });
 });



Mime
View raw message