You are viewing a plain text version of this content. The canonical link for it is here.
Posted to cvs@cocoon.apache.org by sy...@apache.org on 2006/03/12 19:27:45 UTC
svn commit: r385334 - in
/cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples:
./ flow/ forms/
Author: sylvain
Date: Sun Mar 12 10:27:44 2006
New Revision: 385334
URL: http://svn.apache.org/viewcvs?rev=385334&view=rev
Log:
New Ajax stuff with Dojo
Added:
cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/dynamicrepeater_dojo_template.xml (with props)
Modified:
cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/flow/forms_flow_example.js
cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/ajax_suggest_form.xml
cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/ajax_suggest_template.xml
cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/datasource_chooser_template.xml
cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/dynamicrepeater.xml
cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/dynamicrepeater_template.xml
cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/sitemap.xmap
cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/welcome.xml
Modified: cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/flow/forms_flow_example.js
URL: http://svn.apache.org/viewcvs/cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/flow/forms_flow_example.js?rev=385334&r1=385333&r2=385334&view=diff
==============================================================================
--- cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/flow/forms_flow_example.js (original)
+++ cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/flow/forms_flow_example.js Sun Mar 12 10:27:44 2006
@@ -108,6 +108,22 @@
);
}
+function do_dojoRepeater() {
+ var form = new Form("forms/dynamicrepeater.xml");
+ form.setAttribute("counter", new java.lang.Integer(0));
+ form.getChild("addcontact").performAction(); // to increment the counter
+ form.showForm("dynamicrepeater_dojo-display-pipeline.jx");
+
+ var doc = Packages.javax.xml.parsers.DocumentBuilderFactory.newInstance().newDocumentBuilder().newDocument();
+ doc.appendChild(doc.createElement("contacts"));
+ form.createBinding("forms/dynamicrepeater_binding.xml");
+
+ form.save(doc);
+ cocoon.sendPage("xmlresult-display-pipeline.jx",
+ {title: "Contact list", document: doc}
+ );
+}
+
function do_datasourceChooser() {
var form = new Form("forms/datasource_chooser.xml");
form.showForm("datasource_chooser-display-pipeline.jx");
@@ -174,6 +190,12 @@
function do_suggest() {
var form = new Form("forms/ajax_suggest_form.xml");
+ var path = form.getChild("path");
+
form.showForm("ajax_suggest-display-pipeline.jx");
+ cocoon.sendPage("textresult-display-pipeline.jx",
+ {title: "Suggest results", text: "path value = " + path.value +
+ "\npath suggested label = " +
+ (path.suggested ? path.suggestionLabel : "(none)") });
}
Modified: cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/ajax_suggest_form.xml
URL: http://svn.apache.org/viewcvs/cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/ajax_suggest_form.xml?rev=385334&r1=385333&r2=385334&view=diff
==============================================================================
--- cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/ajax_suggest_form.xml (original)
+++ cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/ajax_suggest_form.xml Sun Mar 12 10:27:44 2006
@@ -20,16 +20,51 @@
xmlns:i18n="http://apache.org/cocoon/i18n/2.1">
<fd:widgets>
+ <!-- a field with a suggestion-list that explores the Cocoon samples -->
<fd:field id="path">
- <fd:datatype base="string"/>
- <fd:suggestion-list>
- <fd:item value="aaa"/>
- <fd:item value="abb"/>
- <fd:item value="abc"/>
- <fd:item value="acc">
- <fd:label>The last one</fd:label>
- </fd:item>
- </fd:suggestion-list>
- </fd:field>
+ <fd:datatype base="string"/>
+ <fd:suggestion-list type="javascript">
+ <![CDATA[
+ function addSuggestion(src) {
+ suggestions.push({
+ value: filename + src.name,
+ label: filename + src.name +
+ (src.isCollection() ? "/" : " (" + src.contentLength + " bytes)")
+ });
+ }
+
+ var resolver = cocoon.getComponent(org.apache.excalibur.source.SourceResolver.ROLE);
+ var filename = filter;
+ var src = resolver.resolveURI("context://samples/" + filename);
+ var suggestions = [];
+ if (src.exists() && src.isCollection()) {
+ // A directory: list its children
+ if (filename.lastIndexOf('/') != filename.length - 1) filename += "/";
+ suggestions.push({value: filename});
+ var children = src.children;
+ for (var i = 0; i < children.size(); i++) {
+ addSuggestion(children.get(i));
+ }
+ } else {
+ // Get the parent directory and list its children whose name start with the given filter
+ var parent = src.parent;
+ if (filename.indexOf('/') != -1) {
+ filename = filename.substring(0, filename.lastIndexOf('/') + 1);
+ } else {
+ filename = "";
+ }
+ var children = parent.children;
+ for (var i = 0; i < children.size(); i++) {
+ var child = children.get(i);
+ if (child.name.startsWith(src.name)) {
+ addSuggestion(child);
+ }
+ }
+ }
+ return suggestions;
+ ]]>
+ </fd:suggestion-list>
+ </fd:field>
+ <fd:submit id="ok"><fd:label>OK</fd:label></fd:submit>
</fd:widgets>
</fd:form>
Modified: cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/ajax_suggest_template.xml
URL: http://svn.apache.org/viewcvs/cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/ajax_suggest_template.xml?rev=385334&r1=385333&r2=385334&view=diff
==============================================================================
--- cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/ajax_suggest_template.xml (original)
+++ cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/ajax_suggest_template.xml Sun Mar 12 10:27:44 2006
@@ -17,39 +17,34 @@
<page xmlns:ft="http://apache.org/cocoon/forms/1.0#template" xmlns:fi="http://apache.org/cocoon/forms/1.0#instance" xmlns:jx="http://apache.org/cocoon/templates/jx/1.0">
<!-- Import the macros that define CForms template elements -->
<jx:import uri="resource://org/apache/cocoon/forms/generation/jx-macros.xml"/>
- <script type="text/javascript" src="resources/ajax/js/cocoon-ajax.js"/>
- <style type="text/css">
- div.auto_complete {
- background-color:white;
- border:1px solid #888;
- margin:0px;
- padding:0px;
- }
- div.auto_complete ul {
- list-style-type: none;
- margin:0px;
- padding:0px;
- }
- div.auto_complete li.selected { background-color: #ffb; }
- </style>
+ <fi:init>
+ <script type="text/javascript">
+ // Uncomment this to see Dojo debug
+ // var djConfig = { isDebug: true };
+ </script>
+ </fi:init>
<h4 class="samplesGroup">AJAX sample</h4>
<title>Cocoon suggests</title>
<content>
- <para><em>Work in progress!</em> This simple example illustrates the <fd:suggestion-list> feature.
+ <para>This simple example illustrates the <fd:suggestion-list> feature, that allows
+ to provide suggestions on the fly to the user.
</para>
-
-
+
<ft:form-template action="continue" method="POST" ajax="true">
<ft:continuation-id/>
- Type the letter 'a' in the field below<br/>
- <ft:widget id="path"/>
- <div id="autocomplete" class="auto_complete"/>
- <script type="text/javascript">
- new Ajax.Autocompleter("path-input", "autocomplete", "system_forms_suggest_path",
- { parameters: "continuation-id=${cocoon.continuation.id}" });
- </script>
+ Choose a file in Cocoon's samples. The suggestion-list is written in JavaScript
+ (server side) and scans the samples directory with the input given.
+ <br/>
+ <ft:widget id="path" type="suggest"/>
+ <small>To view suggestions, you can either start typing, hit the down arrow on your keyboard
+ or click on the down arrow icon. To choose a suggestion, select it with the mouse, or
+ use the up/down arrow and press space. Hitting escape hides the suggestion list.</small>
+ <br/>
+ <br/>
+ <ft:widget id="ok"/>
</ft:form-template>
+
<p>
<a href="./">Back to Forms samples</a>
</p>
Modified: cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/datasource_chooser_template.xml
URL: http://svn.apache.org/viewcvs/cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/datasource_chooser_template.xml?rev=385334&r1=385333&r2=385334&view=diff
==============================================================================
--- cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/datasource_chooser_template.xml (original)
+++ cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/datasource_chooser_template.xml Sun Mar 12 10:27:44 2006
@@ -23,7 +23,7 @@
<h4 class="samplesGroup">Union widget sample (with AJAX)</h4>
<title>Datasource chooser</title>
<script type="text/javascript">
- cocoon.ajax.BrowserUpdater.highlight = cocoon.ajax.Fader.fade;
+ //cocoon.ajax.BrowserUpdater.highlight = cocoon.ajax.Fader.fade;
</script>
<content>
<ft:form-template action="#{$cocoon/continuation/id}.continue" method="POST" ajax="true">
Modified: cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/dynamicrepeater.xml
URL: http://svn.apache.org/viewcvs/cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/dynamicrepeater.xml?rev=385334&r1=385333&r2=385334&view=diff
==============================================================================
--- cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/dynamicrepeater.xml (original)
+++ cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/dynamicrepeater.xml Sun Mar 12 10:27:44 2006
@@ -36,11 +36,13 @@
<fd:field id="firstname">
<fd:label>Firstname</fd:label>
+ <fd:hint>First name</fd:hint>
<fd:datatype base="string"/>
</fd:field>
<fd:field id="lastname">
<fd:label>Lastname</fd:label>
+ <fd:hint>Last name</fd:hint>
<fd:datatype base="string"/>
</fd:field>
Added: cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/dynamicrepeater_dojo_template.xml
URL: http://svn.apache.org/viewcvs/cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/dynamicrepeater_dojo_template.xml?rev=385334&view=auto
==============================================================================
--- cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/dynamicrepeater_dojo_template.xml (added)
+++ cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/dynamicrepeater_dojo_template.xml Sun Mar 12 10:27:44 2006
@@ -0,0 +1,103 @@
+<?xml version="1.0"?>
+<!--
+ Copyright 1999-2004 The Apache Software Foundation
+
+ Licensed 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 file is similar to form1_template_action.xml. They differ in group layout,
+ form's action attribute (to use continuations) and, this one is a dynamic form
+ template that changes the 'contacts' repeater layout depending on its size -->
+<page xmlns:ft="http://apache.org/cocoon/forms/1.0#template"
+ xmlns:fi="http://apache.org/cocoon/forms/1.0#instance"
+ xmlns:jx="http://apache.org/cocoon/templates/jx/1.0">
+
+ <!-- Import the macros that define CForms template elements -->
+ <jx:import uri="resource://org/apache/cocoon/forms/generation/jx-macros.xml"/>
+ <fi:init>
+ <script type="text/javascript">
+ // Uncomment this to see Dojo debug
+ // var djConfig = { isDebug: true };
+
+ </script>
+ </fi:init>
+ <h4 class="samplesGroup">Repeater widget with advanced interaction</h4>
+ <title>Repeater widget with advanced interaction</title>
+ <style type="text/css">
+ .forms-row td {
+ padding: 5px;
+ }
+
+ /* Ensure the inline edit is visible on selected rows */
+ .forms-row-selected .editableRegion {
+ color: black;
+ }
+ </style>
+
+ <content>
+ <ft:form-template action="#{$cocoon/continuation/id}.continue" method="POST" ajax="true">
+
+ <p>This example expands on the <a href="do-dynaRepeater.flow">dynamic repeater sample</a> and uses
+ <a href="http://dojotoolkit.org">Dojo</a> to provide additional interaction features.
+ After adding rows in the repeater below you will be able to:</p>
+ <ul>
+ <li>reorder rows using drag-and-drop,</li>
+ <li>select and deselect rows by clicking anywhere rather than in a checkbox,</li>
+ <li>use in-place editing (an input appears when you click on the text).</li>
+ </ul>
+ <ft:repeater id="contacts">
+ <div dojoType="CFormsRepeater" orderable="true" select="select">
+ <jx:choose>
+ <jx:when test="${repeater.getSize() == 0}">
+ <p><strong><em>There are no contacts to display</em></strong></p>
+ </jx:when>
+ <jx:otherwise>
+
+ <table border="1">
+ <tr>
+ <th width="300"><ft:repeater-widget-label widget-id="firstname"/></th>
+ <th width="300"><ft:repeater-widget-label widget-id="lastname"/></th>
+ <th><ft:repeater-widget-label widget-id="ID"/></th>
+ </tr>
+ <tbody>
+ <!-- The contents of the repeater-widget element is a template that will
+ be applied to each row in the repeater. -->
+ <ft:repeater-rows>
+ <tr class="forms-row">
+ <td><ft:widget id="firstname" fi:type="inplace" fi:submit-on-change="true"/></td>
+ <td><ft:widget id="lastname" fi:type="inplace"/>
+ </td>
+ <td><ft:widget id="ID"/>
+ <ft:widget id="select">
+ <fi:styling style="display: none"/>
+ </ft:widget>
+ </td>
+ </tr>
+ </ft:repeater-rows>
+ </tbody>
+ </table>
+ </jx:otherwise>
+ </jx:choose>
+ <p>
+ <ft:widget id="../addcontact"/>
+ <jx:if test="${widget.getSize() > 0}">
+ <ft:widget id="../removecontacts"/>
+ </jx:if>
+ </p>
+ </div>
+ </ft:repeater>
+ <ft:widget id="ok"/><br/>
+ <a href="./do-dojoRepeater.flow">Restart this sample</a> - <a href="./">Back to samples</a>
+
+ </ft:form-template>
+ </content>
+</page>
Propchange: cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/dynamicrepeater_dojo_template.xml
------------------------------------------------------------------------------
svn:eol-style = native
Propchange: cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/dynamicrepeater_dojo_template.xml
------------------------------------------------------------------------------
svn:keywords = Id
Modified: cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/dynamicrepeater_template.xml
URL: http://svn.apache.org/viewcvs/cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/dynamicrepeater_template.xml?rev=385334&r1=385333&r2=385334&view=diff
==============================================================================
--- cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/dynamicrepeater_template.xml (original)
+++ cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/forms/dynamicrepeater_template.xml Sun Mar 12 10:27:44 2006
@@ -53,8 +53,10 @@
<li>when there are no contacts, only the "Add contact" button is displayed and the table isn't shown,</li>
<li>when there are some contacts, the "move up" and "move down" buttons are not shown on the first and last lines, respectively.</li>
</ul>
+ <p>This sample has a <a href="do-dojoRepeater.flow">variation using Dojo</a> that allows drag-and-drop reordering
+ of rows and clicking anywhere in a row to select it.</p>
<ft:repeater id="contacts">
- <div dojoType="CFormsRepeater" orderable="true">
+ <div>
<jx:choose>
<jx:when test="${repeater.getSize() == 0}">
<p><strong><em>There are no contacts to display</em></strong></p>
Modified: cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/sitemap.xmap
URL: http://svn.apache.org/viewcvs/cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/sitemap.xmap?rev=385334&r1=385333&r2=385334&view=diff
==============================================================================
--- cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/sitemap.xmap (original)
+++ cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/sitemap.xmap Sun Mar 12 10:27:44 2006
@@ -189,13 +189,11 @@
<!--
| Show a suggestion list
-->
- <map:match pattern="system_forms_suggest_*">
- <map:generate type="suggestion-list">
- <map:parameter name="widget-id" value="{1}"/>
- </map:generate>
+ <map:match pattern="_cocoon/forms/suggest">
+ <map:generate type="suggestion-list"/>
<map:transform type="i18n"/>
- <map:transform src="suggest-list.xsl"/>
- <map:serialize type="xml"/>
+ <map:transform src="resource://org/apache/cocoon/forms/resources/selection-list2json.xsl"/>
+ <map:serialize type="text"/>
</map:match>
<!--
| Show a form, using the forms transformer
Modified: cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/welcome.xml
URL: http://svn.apache.org/viewcvs/cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/welcome.xml?rev=385334&r1=385333&r2=385334&view=diff
==============================================================================
--- cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/welcome.xml (original)
+++ cocoon/trunk/cocoon-forms/cocoon-forms-sample/src/main/resources/samples/welcome.xml Sun Mar 12 10:27:44 2006
@@ -127,11 +127,18 @@
</sample>
</group>
- <!--group name="Advanced Ajax samples (work in progress)">
+ <group name="Advanced Ajax samples using Dojo widgets">
+ <sample name="Drag and drop reordering, in-place editing" href="do-dojoRepeater.flow">
+ (Ajax) The dynamic repeater sample revisited, featuring drag and drop reordering of rows,
+ selecting rows by clicking anywhere in the row, and in-place editing of values.
+ </sample>
<sample name="Cocoon suggests" href="do-suggest.flow">
- (Ajax) Very simple demo of the <suggestion-list> feature.
+ (Ajax) Very simple demo of the <fd:suggestion-list> feature.
+ </sample>
+ <sample name="Other Ajax samples" href="../ajax/">
+ (Ajax) Don't forget to look at the samples in the Ajax block!
</sample>
- </group-->
+ </group>
<group name="Dynamic repeater template and event handling">
<sample name="Dynamic repeater template" href="dreamteam">