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 2010/07/10 13:10:08 UTC
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/
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;
+}