click-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From sa...@apache.org
Subject svn commit: r962809 - in /click/trunk/click/examples: src/org/apache/click/examples/page/ajax/form/ webapp/WEB-INF/ webapp/ajax/form/ webapp/assets/css/
Date Sat, 10 Jul 2010 11:10:08 GMT
Author: sabob
Date: Sat Jul 10 11:10:08 2010
New Revision: 962809

URL: http://svn.apache.org/viewvc?rev=962809&view=rev
Log:
added simple and advanced form demos

Added:
    click/trunk/click/examples/src/org/apache/click/examples/page/ajax/form/AdvancedFormAjaxPage.java
    click/trunk/click/examples/src/org/apache/click/examples/page/ajax/form/SimpleFormAjaxPage.java
      - copied, changed from r962426, click/trunk/click/examples/src/org/apache/click/examples/page/ajax/form/FormAjaxDemoPage.java
    click/trunk/click/examples/webapp/ajax/form/advanced-form-ajax.htm
    click/trunk/click/examples/webapp/ajax/form/advanced-form-ajax.js
    click/trunk/click/examples/webapp/ajax/form/simple-form-ajax.htm
      - copied, changed from r962419, click/trunk/click/examples/webapp/ajax/form/form-ajax-demo.htm
    click/trunk/click/examples/webapp/ajax/form/simple-form-ajax.js
      - copied, changed from r962419, click/trunk/click/examples/webapp/ajax/form/form-ajax-demo.js
Removed:
    click/trunk/click/examples/src/org/apache/click/examples/page/ajax/form/FormAjaxDemoPage.java
    click/trunk/click/examples/webapp/ajax/form/form-ajax-demo.htm
    click/trunk/click/examples/webapp/ajax/form/form-ajax-demo.js
Modified:
    click/trunk/click/examples/webapp/WEB-INF/menu.xml
    click/trunk/click/examples/webapp/assets/css/style.css

Added: click/trunk/click/examples/src/org/apache/click/examples/page/ajax/form/AdvancedFormAjaxPage.java
URL: http://svn.apache.org/viewvc/click/trunk/click/examples/src/org/apache/click/examples/page/ajax/form/AdvancedFormAjaxPage.java?rev=962809&view=auto
==============================================================================
--- click/trunk/click/examples/src/org/apache/click/examples/page/ajax/form/AdvancedFormAjaxPage.java
(added)
+++ click/trunk/click/examples/src/org/apache/click/examples/page/ajax/form/AdvancedFormAjaxPage.java
Sat Jul 10 11:10:08 2010
@@ -0,0 +1,102 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+package org.apache.click.examples.page.ajax.form;
+
+import java.util.HashMap;
+import java.util.List;
+import org.apache.click.Control;
+import org.apache.click.ControlRegistry;
+import org.apache.click.Partial;
+import org.apache.click.ajax.AjaxBehavior;
+import org.apache.click.control.Form;
+import org.apache.click.control.Submit;
+import org.apache.click.control.TextField;
+import org.apache.click.element.Element;
+import org.apache.click.element.JsImport;
+import org.apache.click.element.JsScript;
+import org.apache.click.examples.page.BorderPage;
+import org.apache.click.extras.control.DateField;
+import org.apache.click.extras.control.IntegerField;
+
+/**
+ * Advanced Form Ajax Demo example using the jQuery JavaScript library.
+ */
+public class AdvancedFormAjaxPage extends BorderPage {
+
+    private static final long serialVersionUID = 1L;
+
+    private Form form = new Form("form");
+
+    private TextField nameField = new TextField("name", true);
+    private IntegerField ageField = new IntegerField("age");
+    private DateField dateField = new DateField("date");
+
+    private Submit save = new Submit("save");
+    private Submit cancel = new Submit("cancel");
+
+    public AdvancedFormAjaxPage() {
+        addControl(form);
+        form.add(nameField);
+        form.add(ageField);
+        form.add(dateField);
+        form.add(save);
+        form.add(cancel);
+
+        save.addBehavior(new AjaxBehavior() {
+
+            @Override
+            public Partial onAction(Control source) {
+                // Update the form which might contain errors
+                return new Partial(form.toString(), Partial.HTML);
+            }
+        });
+
+        cancel.addBehavior(new AjaxBehavior() {
+
+            @Override
+            public Partial onAction(Control source) {
+                // Update the form and ensure errors and values have been cleared
+                form.clearValues();
+                form.clearErrors();
+                return new Partial(form.toString(), Partial.HTML);
+            }
+        });
+
+        // NOTE: we add a Behavior to Form so that Click registers the Form as an Ajax target
+        // ALSO NOTE: we don't implement the onAction method as the save and cancel Submits
+        // handles the Behavior action event
+        form.addBehavior(new AjaxBehavior());
+
+        // Instead of adding a behavior, the same can be achived by explicitly registering
the Form as an Ajax Target:
+        // ControlRegistry.registerAjaxTarget(form);
+    }
+
+    /**
+     * Add the jQuery and page JavaScript template to the Page HEAD elements.
+     */
+    @Override
+    public List<Element> getHeadElements() {
+        if (headElements == null) {
+            headElements = super.getHeadElements();
+            headElements.add(new JsImport("/assets/js/jquery-1.4.2.js"));
+            headElements.add(new JsScript("/ajax/form/advanced-form-ajax.js", new HashMap()));
+        }
+        return headElements;
+    }
+}

Copied: click/trunk/click/examples/src/org/apache/click/examples/page/ajax/form/SimpleFormAjaxPage.java
(from r962426, click/trunk/click/examples/src/org/apache/click/examples/page/ajax/form/FormAjaxDemoPage.java)
URL: http://svn.apache.org/viewvc/click/trunk/click/examples/src/org/apache/click/examples/page/ajax/form/SimpleFormAjaxPage.java?p2=click/trunk/click/examples/src/org/apache/click/examples/page/ajax/form/SimpleFormAjaxPage.java&p1=click/trunk/click/examples/src/org/apache/click/examples/page/ajax/form/FormAjaxDemoPage.java&r1=962426&r2=962809&rev=962809&view=diff
==============================================================================
--- click/trunk/click/examples/src/org/apache/click/examples/page/ajax/form/FormAjaxDemoPage.java
(original)
+++ click/trunk/click/examples/src/org/apache/click/examples/page/ajax/form/SimpleFormAjaxPage.java
Sat Jul 10 11:10:08 2010
@@ -23,6 +23,7 @@ import java.util.List;
 import org.apache.click.Control;
 import org.apache.click.Partial;
 import org.apache.click.ajax.AjaxBehavior;
+import org.apache.click.control.Field;
 import org.apache.click.control.Form;
 import org.apache.click.control.Submit;
 import org.apache.click.control.TextField;
@@ -30,65 +31,49 @@ import org.apache.click.element.Element;
 import org.apache.click.element.JsImport;
 import org.apache.click.element.JsScript;
 import org.apache.click.examples.page.BorderPage;
-import org.apache.click.extras.control.DateField;
-import org.apache.click.extras.control.IntegerField;
 
 /**
- * Basic Form Ajax Demo example using the jQuery JavaScript library.
+ * Simple Form Ajax Demo example using the jQuery JavaScript library.
  */
-public class FormAjaxDemoPage extends BorderPage {
-
-    private static final long serialVersionUID = 1L;
+public class SimpleFormAjaxPage extends BorderPage {
 
     private Form form = new Form("form");
+    private Field nameFld = new TextField("name");
+    private Submit saveBtn = new Submit("save");
 
-    private TextField nameField = new TextField("name", true);
-    private IntegerField ageField = new IntegerField("age");
-    private DateField dateField = new DateField("date");
-
-    private Submit save = new Submit("save");
-    private Submit cancel = new Submit("cancel");
-
-    public FormAjaxDemoPage() {
+    public SimpleFormAjaxPage() {
         addControl(form);
-        form.add(nameField);
-        form.add(ageField);
-        form.add(dateField);
-        form.add(save);
-        form.add(cancel);
-
-        save.addBehavior(new AjaxBehavior() {
-
-            @Override
-            public Partial onAction(Control source) {
-                // Update the form which might contain errors
-                return new Partial(form.toString(), Partial.HTML);
-            }
-        });
+        form.add(nameFld);
+        form.add(saveBtn);
 
-        cancel.addBehavior(new AjaxBehavior() {
+        saveBtn.addBehavior(new AjaxBehavior() {
 
             @Override
             public Partial onAction(Control source) {
-                // Update the form and ensure errors and values have been cleared
-                form.clearValues();
-                form.clearErrors();
-                return new Partial(form.toString(), Partial.HTML);
+                // Return a success response
+                // Form data can be saved here
+                return new Partial("Hello " + nameFld.getValue(), Partial.HTML);
             }
         });
 
         // NOTE: we add a Behavior to Form so that Click registers the Form as an Ajax target
-        // ALSO NOTE: we don't implement the onAction method as the save and cancel Submits
+        // ALSO NOTE: we don't implement the onAction method as the ok Submit
         // handles the Behavior action event
         form.addBehavior(new AjaxBehavior());
+
+        // Instead of adding a behavior, the same can be achived by explicitly registering
the Form as an Ajax Target:
+        // ControlRegistry.registerAjaxTarget(form);
     }
 
+    /**
+     * Add the jQuery and page JavaScript template to the Page HEAD elements.
+     */
     @Override
     public List<Element> getHeadElements() {
         if (headElements == null) {
             headElements = super.getHeadElements();
             headElements.add(new JsImport("/assets/js/jquery-1.4.2.js"));
-            headElements.add(new JsScript("/ajax/form/form-ajax-demo.js", new HashMap()));
+            headElements.add(new JsScript("/ajax/form/simple-form-ajax.js", new HashMap()));
         }
         return headElements;
     }

Modified: click/trunk/click/examples/webapp/WEB-INF/menu.xml
URL: http://svn.apache.org/viewvc/click/trunk/click/examples/webapp/WEB-INF/menu.xml?rev=962809&r1=962808&r2=962809&view=diff
==============================================================================
--- click/trunk/click/examples/webapp/WEB-INF/menu.xml (original)
+++ click/trunk/click/examples/webapp/WEB-INF/menu.xml Sat Jul 10 11:10:08 2010
@@ -147,7 +147,8 @@
     <menu separator="true"/>
     <menu label="Table AJAX Demo" path="ajax/table/table-ajax-demo.htm"/>
     <menu separator="true"/>
-    <menu label="Form AJAX Demo" path="ajax/form/form-ajax-demo.htm"/>
+    <menu label="Simple Form AJAX Demo" path="ajax/form/simple-form-ajax.htm"/>
+    <menu label="Advanced Form AJAX Demo" path="ajax/form/advanced-form-ajax.htm"/>
     <menu separator="true"/>
     <menu label="AJAX Accordion" path="ajax/accordion/ajax-accordion.htm"/>
     <menu label="AJAX Auto Complete Field" path="ajax/auto-complete.htm"/>

Added: click/trunk/click/examples/webapp/ajax/form/advanced-form-ajax.htm
URL: http://svn.apache.org/viewvc/click/trunk/click/examples/webapp/ajax/form/advanced-form-ajax.htm?rev=962809&view=auto
==============================================================================
--- click/trunk/click/examples/webapp/ajax/form/advanced-form-ajax.htm (added)
+++ click/trunk/click/examples/webapp/ajax/form/advanced-form-ajax.htm Sat Jul 10 11:10:08
2010
@@ -0,0 +1,5 @@
+$form
+
+<div id="feedback">
+
+</div>

Added: click/trunk/click/examples/webapp/ajax/form/advanced-form-ajax.js
URL: http://svn.apache.org/viewvc/click/trunk/click/examples/webapp/ajax/form/advanced-form-ajax.js?rev=962809&view=auto
==============================================================================
--- click/trunk/click/examples/webapp/ajax/form/advanced-form-ajax.js (added)
+++ click/trunk/click/examples/webapp/ajax/form/advanced-form-ajax.js Sat Jul 10 11:10:08
2010
@@ -0,0 +1,81 @@
+// #*
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+// *#
+
+// This demo uses jQuery but also contains a DateField which depends on Prototype.
+// Below we use jQuery.noConflict() in order for jQuery and Prototype to work together:
+// http://docs.jquery.com/Using_jQuery_with_Other_Libraries
+jQuery.noConflict();
+
+// Generally it is not recommended to use two JavaScript libraries together. Instead
+// it is highly recommended to use the third-party Click Calendar instead of DateField
+// when using jQuery or another JS library besides Prototype. See http://code.google.com/p/click-calendar/
+
+// Register a function that is invoked as soon as the DOM is loaded
+jQuery(document).ready(function() {
+
+    // Register a 'click' handler on the submit button
+    jQuery("#form_save, #form_cancel").live('click', function(event){
+        // Prevent the default browser behavior of navigating to the link
+        event.preventDefault();
+
+        // Post form to server
+        postForm(event);
+    })
+})
+
+function postForm(event) {
+    // Retrieve the Form and submit button elements
+    var form = jQuery("#form");
+    var submit = jQuery(event.target);
+
+    // The server URL can be retrieved from the Form 'action' event
+    var url = form.attr('action');
+    var formData = form.serialize();
+    formData+='&'+form.attr('id')+'=1';
+    formData+='&'+submit.attr('name')+'='+submit.attr('value');
+
+    jQuery.post(url, formData, function(data) {
+        // Replace the entire Form with the server response
+        form.replaceWith(data);
+
+        // Replacing the Form with the Form from the Ajax response, means all
+        // event bindings are lost. For example the DateField button won't show
+        // the Calendar. Here we find the DateField setup script, and evaluate it
+        var dateSetupScript = jQuery('#form_date-js-setup').html();
+        eval(dateSetupScript);
+
+        // Provide user feedback
+        var feedbackDiv = jQuery('#feedback');
+
+        // Check for form errors
+        if(jQuery('#form-errors').length == 0) {
+            feedbackDiv.removeClass('errorMsg').addClass('infoMsg');
+
+            // Set feedback message depending on which button was clicked
+            if (submit.attr('name') == 'save') {
+                feedbackDiv.html("Form data saved");
+            } else {
+                feedbackDiv.html("Form cleared");
+            }
+        } else {
+            feedbackDiv.removeClass('infoMsg').addClass('errorMsg');
+            feedbackDiv.html("Form contains errors");
+        }
+    });
+}

Copied: click/trunk/click/examples/webapp/ajax/form/simple-form-ajax.htm (from r962419, click/trunk/click/examples/webapp/ajax/form/form-ajax-demo.htm)
URL: http://svn.apache.org/viewvc/click/trunk/click/examples/webapp/ajax/form/simple-form-ajax.htm?p2=click/trunk/click/examples/webapp/ajax/form/simple-form-ajax.htm&p1=click/trunk/click/examples/webapp/ajax/form/form-ajax-demo.htm&r1=962419&r2=962809&rev=962809&view=diff
==============================================================================
--- click/trunk/click/examples/webapp/ajax/form/form-ajax-demo.htm (original)
+++ click/trunk/click/examples/webapp/ajax/form/simple-form-ajax.htm Sat Jul 10 11:10:08 2010
@@ -1,3 +1,4 @@
-<div id="target">
 $form
+
+<div id="target">
 </div>

Copied: click/trunk/click/examples/webapp/ajax/form/simple-form-ajax.js (from r962419, click/trunk/click/examples/webapp/ajax/form/form-ajax-demo.js)
URL: http://svn.apache.org/viewvc/click/trunk/click/examples/webapp/ajax/form/simple-form-ajax.js?p2=click/trunk/click/examples/webapp/ajax/form/simple-form-ajax.js&p1=click/trunk/click/examples/webapp/ajax/form/form-ajax-demo.js&r1=962419&r2=962809&rev=962809&view=diff
==============================================================================
--- click/trunk/click/examples/webapp/ajax/form/form-ajax-demo.js (original)
+++ click/trunk/click/examples/webapp/ajax/form/simple-form-ajax.js Sat Jul 10 11:10:08 2010
@@ -17,45 +17,42 @@
 // under the License.
 // *#
 
-// This demo uses jQuery but also contains a DateField which depends on Prototype.
-// Below we use jQuery.noConflict() in order for jQuery and Prototype to work together:
-// http://docs.jquery.com/Using_jQuery_with_Other_Libraries
-jQuery.noConflict();
-
-// Generally it is not recommended to use two JavaScript libraries together. Instead
-// it is highly recommended to use the third-party Click Calendar instead of DateField
-// when using jQuery or another JS library besides Prototype. See http://code.google.com/p/click-calendar/
-
 // Register a function that is invoked as soon as the DOM is loaded
 jQuery(document).ready(function() {
 
     // Register a 'click' handler on the submit button
-    jQuery("#form_save, #form_cancel").live('click', function(event){
+    jQuery("#form_save").click(function(event){
         // Prevent the default browser behavior of navigating to the link
         event.preventDefault();
 
-        // Post form
+        // Post form to server
         postForm(event);
     })
 })
 
 function postForm(event) {
+    // Retrieve the Form and submit button elements
     var form = jQuery("#form");
     var submit = jQuery(event.target);
-    
+
+    // The server URL can be retrieved from the Form 'action' event
     var url = form.attr('action');
+
+    // Use jQuery serialize function to serialize the Form controls into key/value pairs
+    // Note: the jQuery serialize function will *not* add the button name/value
+    // that submitted the form. We will add the submit button name/value manually
     var formData = form.serialize();
+
+    // Append the form ID attribute so that Click can identify the Ajax target Control
     formData+='&'+form.attr('id')+'=1';
+
+    // Append the name/value pair of the Submit button that submitted the Form
     formData+='&'+submit.attr('name')+'='+submit.attr('value');
 
     jQuery.post(url, formData, function(data) {
-        form.replaceWith(data);
-
-        // Replacing the Form with the Form from the Ajax response, means all
-        // event bindings are lost. For example the DateField button won't show
-        // the Calendar. Here we find the DateField setup script, and evaluate it
-        // again
-        var dateSetupScript = jQuery('#form_date-js-setup').html();
-        eval(dateSetupScript);
+        // Update the target div with the server response and style the div by adding a CSS
class
+        var div = jQuery('#target');
+        div.addClass('infoMsg');
+        div.html(data);
     });
 }

Modified: click/trunk/click/examples/webapp/assets/css/style.css
URL: http://svn.apache.org/viewvc/click/trunk/click/examples/webapp/assets/css/style.css?rev=962809&r1=962808&r2=962809&view=diff
==============================================================================
--- click/trunk/click/examples/webapp/assets/css/style.css (original)
+++ click/trunk/click/examples/webapp/assets/css/style.css Sat Jul 10 11:10:08 2010
@@ -327,3 +327,11 @@ div.dialogForm {
     padding: 4px;
     margin-bottom: 20px;
 }
+
+.errorMsg {
+	border: 1px solid #BD0000;
+	background-color: #EE0000;
+	margin: 0.5em;
+	padding: 0.5em;
+  color: #FFF;
+}



Mime
View raw message