You are viewing a plain text version of this content. The canonical link for it is here.
Posted to docs@cocoon.apache.org by da...@cocoon.zones.apache.org on 2005/11/07 10:17:30 UTC

[DAISY] Updated: Ajax

A document has been updated:

http://cocoon.zones.apache.org/daisy/documentation/750.html

Document ID: 750
Branch: main
Language: default
Name: Ajax (unchanged)
Document Type: Cocoon Document (unchanged)
Updated on: 11/7/05 9:17:20 AM
Updated by: Sylvain Wallez

A new version has been created, state: publish

Parts
=====
Content
-------
This part has been updated.
Mime type: text/xml (unchanged)
File name:  (unchanged)
Size: 11916 bytes (previous version: 8090 bytes)
Content diff:
(38 equal lines skipped)
    <h2>Use the Template Generator</h2>
    
    <p>As of version 2.1.8, Ajax support is implemented only in the JXTemplate
--- version of the Forms Template language.</p>
+++ version of the Forms Template language. This means that the form display
+++ pipeline must ust the JXTemplate generator and use jx-macros.xml:</p>
    
+++ <pre>&lt;html xmlns:ft="http://apache.org/cocoon/forms/1.0#template"
+++       xmlns:jx="http://apache.org/cocoon/templates/jx/1.0"&gt;
+++ 
+++   &lt;!-- Import the macros that define CForms template elements --&gt;
+++   &lt;jx:import uri="resource://org/apache/cocoon/forms/generation/jx-macros.xml"/&gt;
+++   &lt;body&gt;
+++     &lt;ft:form-template action="continue" method="POST" ajax="true"&gt;
+++     ...
+++ </pre>
+++ 
    <h2>Container widgets must enclose a container element</h2>
    
    <p>The Ajax support of Cocoon Forms works by sending partial page updates to the
(117 equal lines skipped)
    alternating colors of rows, as even rows will have <tt>class="row-0"</tt> and
    odd rows will have <tt>class="row-1"</tt>.</p>
    
--- <h2>Using Ajax in portals and aggregations</h2>
+++ <h2>Using Ajax in portals and aggregations: the "ajax-action" attribute</h2>
    
    <p>Portals do a lot of URL rewriting to ensure that only aggregated portal pages
    are displayed, even if individual portlets use their own URLs without caring
(7 equal lines skipped)
    the value of <tt>action</tt>.</p>
    
    <pre>&lt;ft:form-template action="aggregation" ajax-action="continue-form"&gt;
---   .../...
+++   .../...
    &lt;/ft:form-template&gt;</pre>
    
    <p>Note that because of the portal's URL rewriting, the two attributes will
    often have the same values in the template.</p>
    
+++ <p>The <tt>ajax-action</tt> attribute must also be used when the form page is
+++ produced by an aggregation (e.g. with <tt>&lt;map:aggregate&gt;</tt>): the
+++ form's <tt>action</tt> attribute will point to the full aggregation, which is
+++ not suitable to produce page update fragments. The <tt>ajax-action</tt>
+++ attribute must then point to the URL that handles for form and not to the full
+++ aggregation.</p>
+++ 
    <h1>The form display pipeline for Ajax</h1>
    
--- <p>TBC</p>
+++ <p>Using Ajax in your forms requires a special pipeline: along with the regular
+++ form display pipeline, we need additional components that will filter the form
+++ when an Ajax request is processed, so that only partial page update instructions
+++ are sent to the browser, and not the full HTML page.</p>
    
+++ <p>Here's a typical Ajax form display pipeline:</p>
+++ 
+++ <pre>&lt;map:match pattern="viewform-*"&gt;
+++   &lt;map:generate type="jx" src="pages/{1}.xml"/&gt;
+++ <strong>  &lt;map:transform type="browser-update"/&gt;
+++ </strong>  &lt;map:transform type="i18n"/&gt;
+++   &lt;map:transform src="resources/forms-styling.xsl"/&gt;
+++   &lt;map:transform type="i18n"&gt;
+++ <strong>  &lt;map:select type="ajax-request"&gt;
+++     &lt;map:when test="true"&gt;
+++       &lt;map:serialize type="xml"/&gt;
+++     &lt;/map:when&gt;
+++     &lt;map:otherwise&gt;
+++       &lt;map:serialize type="html"/&gt;
+++     &lt;/map:otherwise&gt;
+++   &lt;/map:select&gt;
+++ </strong>&lt;/map:match&gt;</pre>
+++ 
+++ <p>Things to notice in this pipeline:</p>
+++ 
+++ <ul>
+++ <li>the JXTemplage generator is used. Ajax is not yet implemented in the
+++ FormsTransformer</li>
+++ <li>the "browser-update" transformer filters the result of the template, so that
+++ only updated widgets are sent back to the browser</li>
+++ <li>the serializer depends on the request type: an Ajax requests <em>must</em>
+++ return XML, whereas non-Ajax requests can return HTML.</li>
+++ </ul>
+++ 
+++ <p>The additional components are declared as follows in the sitemap:</p>
+++ 
+++ <pre>&lt;map:components&gt;
+++   &lt;map:transformers default="xslt"&gt;    
+++     &lt;map:transformer name="browser-update" src="org.apache.cocoon.ajax.BrowserUpdateTransformer"/&gt;
+++   &lt;/map:transformers&gt;
+++   &lt;map:selectors&gt;
+++     &lt;map:selector name="ajax-request" src="org.apache.cocoon.ajax.AjaxRequestSelector"/&gt;
+++   &lt;/map:selectors&gt;
+++ &lt;/map:components&gt;
+++ </pre>
+++ 
+++ <h1>Debugging Ajax forms</h1>
+++ 
+++ <p>Debugging Ajax forms is less easy than regular forms with full page reloads,
+++ as some processing occurs in the background. When an error occurs in a
+++ background resquest, the client-side JavaScript library prompts the user to
+++ display the server response in a separate window. Popup windows must be allowed
+++ for the target server for this to function properly.</p>
+++ 
+++ <p>Another invaluable tool is the little-know
+++ <a href="http://ws.apache.org/axis/java/user-guide.html#AppendixUsingTheAxisTCPMonitorTcpmon">TCP
+++ monitor</a> utility hidden inside Axis. This is a small Java application that
+++ acts as a HTTP tunnel or a proxy that sits inbetween the browser and the server,
+++ and records all requests and responses, which can then be examined.</p>
+++ 
+++ <p>Other useful tools are the classical TCP sniffers such as the Unix
+++ <a href="http://www.tcpdump.org/tcpdump_man.html">tcpdump</a> command or the
+++ <a href="http://www.ethereal.com/">Ethereal</a> tool. They are not easy to setup
+++ and master, though.</p>
+++ 
+++ <h1>Additional information</h1>
+++ 
    <p>You can also find additional information in the
    <a href="http://www.cocoongt.org/Slides-and-recordings.html">Ajax presentation
    from the Cocoon GetTogether 2005</a>.</p>
(3 equal lines skipped)


Fields
======
no changes

Links
=====
no changes

Custom Fields
=============
no changes

Collections
===========
no changes