You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@click.apache.org by me...@apache.org on 2011/06/21 16:40:27 UTC
svn commit: r1138024 - in /click/trunk/click/examples:
src/org/apache/click/examples/page/ajax/table/SearchTableAjaxPage.java
webapp/WEB-INF/menu.xml webapp/ajax/table/search-table-ajax.htm
webapp/ajax/table/search-table-ajax.js
Author: medgar
Date: Tue Jun 21 14:40:27 2011
New Revision: 1138024
URL: http://svn.apache.org/viewvc?rev=1138024&view=rev
Log:
added Ajax search table example
Added:
click/trunk/click/examples/src/org/apache/click/examples/page/ajax/table/SearchTableAjaxPage.java
click/trunk/click/examples/webapp/ajax/table/search-table-ajax.htm
click/trunk/click/examples/webapp/ajax/table/search-table-ajax.js
Modified:
click/trunk/click/examples/webapp/WEB-INF/menu.xml
Added: click/trunk/click/examples/src/org/apache/click/examples/page/ajax/table/SearchTableAjaxPage.java
URL: http://svn.apache.org/viewvc/click/trunk/click/examples/src/org/apache/click/examples/page/ajax/table/SearchTableAjaxPage.java?rev=1138024&view=auto
==============================================================================
--- click/trunk/click/examples/src/org/apache/click/examples/page/ajax/table/SearchTableAjaxPage.java (added)
+++ click/trunk/click/examples/src/org/apache/click/examples/page/ajax/table/SearchTableAjaxPage.java Tue Jun 21 14:40:27 2011
@@ -0,0 +1,124 @@
+package org.apache.click.examples.page.ajax.table;
+
+import java.util.HashMap;
+import java.util.List;
+
+import javax.annotation.Resource;
+
+import org.apache.click.ActionListener;
+import org.apache.click.ActionResult;
+import org.apache.click.Control;
+import org.apache.click.ControlRegistry;
+import org.apache.click.ajax.DefaultAjaxBehavior;
+import org.apache.click.control.Column;
+import org.apache.click.control.Form;
+import org.apache.click.control.Submit;
+import org.apache.click.control.Table;
+import org.apache.click.control.TextField;
+import org.apache.click.dataprovider.DataProvider;
+import org.apache.click.element.Element;
+import org.apache.click.element.JsImport;
+import org.apache.click.element.JsScript;
+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.extras.control.TableInlinePaginator;
+import org.springframework.stereotype.Component;
+
+/**
+ * Demonstrates a AJAX search form updating an table using jQuery.
+ */
+@Component
+public class SearchTableAjaxPage extends BorderPage {
+
+ private static final long serialVersionUID = 1L;
+
+ private Form form = new Form("form");
+ private TextField nameField = new TextField(Customer.NAME_PROPERTY);
+ private Table table = new Table("table");
+
+ @Resource(name="customerService")
+ private CustomerService customerService;
+
+ public SearchTableAjaxPage() {
+ // Setup search form
+ addFormFields(form);
+
+ addControl(form);
+
+ ControlRegistry.registerAjaxTarget(form);
+
+ // Setup results table
+ addTableColumns(table);
+
+ table.setClass(Table.CLASS_ITS);
+ table.setPageSize(15);
+ table.setShowBanner(true);
+ table.setPaginator(new TableInlinePaginator(table));
+ table.setPaginatorAttachment(Table.PAGINATOR_INLINE);
+
+ table.setDataProvider(new DataProvider<Customer>() {
+ public List<Customer> getData() {
+ return customerService.getCustomersForName(nameField.getValue());
+ }
+ });
+
+ addControl(table);
+ }
+
+ // Public Methods --------------------------------------------------------
+
+ @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/table/search-table-ajax.js", new HashMap()));
+ }
+ return headElements;
+ }
+
+ // Private Methods --------------------------------------------------------
+
+ private void addFormFields(final Form form) {
+ form.add(nameField);
+
+ Submit searchButton = new Submit("search");
+ form.add(searchButton);
+
+ Submit clearButton = new Submit("clear");
+ form.add(clearButton);
+
+ form.addBehavior(new DefaultAjaxBehavior() {
+ @Override
+ public ActionResult onAction(Control source) {
+ // Return a success response
+ // Form data can be saved here
+ return new ActionResult(table.toString(), ActionResult.HTML);
+ }
+ });
+ }
+
+ private void addTableColumns(Table table) {
+ Column column = new Column(Customer.NAME_PROPERTY);
+ column.setWidth("140px;");
+ table.addColumn(column);
+
+ column = new Column(Customer.EMAIL_PROPERTY);
+ column.setAutolink(true);
+ column.setWidth("230px;");
+ table.addColumn(column);
+
+ column = new Column(Customer.AGE_PROPERTY);
+ column.setTextAlign("center");
+ column.setWidth("40px;");
+ table.addColumn(column);
+
+ column = new Column(Customer.HOLDINGS_PROPERTY);
+ column.setFormat("${0,number,#,##0.00}");
+ column.setTextAlign("right");
+ column.setWidth("100px;");
+ table.addColumn(column);
+ }
+
+}
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=1138024&r1=1138023&r2=1138024&view=diff
==============================================================================
--- click/trunk/click/examples/webapp/WEB-INF/menu.xml (original)
+++ click/trunk/click/examples/webapp/WEB-INF/menu.xml Tue Jun 21 14:40:27 2011
@@ -90,7 +90,7 @@
<menu separator="true"/>
<menu label="Disabled behavior" path="control/disabled-demo.htm"/>
</menu>
-
+
<menu label=" Forms" path="#" imageSrc="/assets/images/form.png">
<menu label="Standard Form Controls" path="form/standard-controls-form.htm"/>
<menu label="Extra Form Controls" path="form/extra-controls-form.htm"/>
@@ -152,6 +152,7 @@
<menu label="Prototype Ajax Demo" path="ajax/compare/prototype-ajax-demo.htm"/>
<menu separator="true"/>
<menu label="Table Ajax Demo" path="ajax/table/table-ajax.htm"/>
+ <menu label="Search Table Ajax Demo" path="ajax/table/search-table-ajax.htm"/>
<menu separator="true"/>
<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"/>
Added: click/trunk/click/examples/webapp/ajax/table/search-table-ajax.htm
URL: http://svn.apache.org/viewvc/click/trunk/click/examples/webapp/ajax/table/search-table-ajax.htm?rev=1138024&view=auto
==============================================================================
--- click/trunk/click/examples/webapp/ajax/table/search-table-ajax.htm (added)
+++ click/trunk/click/examples/webapp/ajax/table/search-table-ajax.htm Tue Jun 21 14:40:27 2011
@@ -0,0 +1,27 @@
+<!--
+#* 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.*#
+-->
+
+<div style="margin-bottom:1em;">
+$form
+</div>
+
+
+<div id="tableContainer">
+$table
+</div>
Added: click/trunk/click/examples/webapp/ajax/table/search-table-ajax.js
URL: http://svn.apache.org/viewvc/click/trunk/click/examples/webapp/ajax/table/search-table-ajax.js?rev=1138024&view=auto
==============================================================================
--- click/trunk/click/examples/webapp/ajax/table/search-table-ajax.js (added)
+++ click/trunk/click/examples/webapp/ajax/table/search-table-ajax.js Tue Jun 21 14:40:27 2011
@@ -0,0 +1,78 @@
+// #*
+// 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.
+// *#
+
+// 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_search").click(function(event){
+ // Post form to server
+ postForm(event);
+
+ // Prevent the default browser behavior of navigating to the link
+ return false;
+ });
+
+ // Register a 'click' handler on the clear button
+ jQuery("#form_clear").click(function(event){
+
+ jQuery("#form_name").value = '';
+
+ // Post form to server
+ postForm(event);
+
+ // Prevent the default browser behavior of navigating to the link
+ return false;
+ });
+
+ // Register a 'click' handler on the form
+ jQuery("#form").submit(function(event){
+ // Post form to server
+ postForm(event);
+
+ // Prevent the default browser behavior of navigating to the link
+ return false;
+ });
+})
+
+function postForm(event) {
+ // Retrieve the Form and submit button elements
+ var form = jQuery("#form");
+ var submit = jQuery(event.currentTarget);
+
+ // 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) {
+ // Update the target div with the server response and style the div by adding a CSS class
+ var div = jQuery('#tableContainer');
+ div.html(data);
+ });
+}