ajax and cocoon - the apache software...

www.anyware-tech.com

AJAX and Cocoon

Sylvain Wallez

Anyware Technologies, Apache Software Foundationhttp://people.apache.org/~sylvain

2www.anyware-tech.com

Overview

! What is Ajax?

! Ajax and Cocoon Forms

! How to use it

! How it works

! Ajax goodies


"What is Ajax?


! How to use it

! How it works

! Ajax goodies


What is Ajax?

Amsterdam's Football Club!


What is Ajax?

A cleaning products brand!


What is Ajax?

Fire extinguishers!


Who is Ajax?

A Greek Hero!


What is Ajax?

A technique to build smartweb applications!


What is Ajax?

Asynchronous JavaScript And XML

! A catchy name for some not-so-new technologies

! Coined by Jesse James Garret from AdaptivePath

! JavaScript

! has been there since 1995

! Asynchronous requests to the server

! XMLHttpRequest since IE 4 and Mozilla 1.0

! Use of hidden frames before

! XML data in responses

! Use DHTML to update the page


What is Ajax?

Classical model: synchronous interaction

(from www.adaptivepath.com)


What is Ajax?

Ajax model: asynchronous interaction

(from www.adaptivepath.com)


! What is Ajax?

"Ajax and Cocoon Forms

! How to use it

! How it works

! Ajax goodies


Ajax and Cocoon Forms

A must-have feature!

! Cocoon Forms has interactive features

! Validation (don't leave the form until finished)

! Event handlers (interaction between widgets)

! Repeaters (add/delete/move rows)

! Full page reloads works but…

! Slow user experience

! Useless load on the server



How to use Ajax in your forms?

! That's all there is to do! Well, mostly.

<html xmlns:ft="http://apache.org/cocoon/forms/1.0#template">

<head>

<title>Registration form</title>

</head>

<body>

<h1>Registration</h1>

<ft:form-template action="continue.html" method="POST" ajax="true" > <ft:widget-label id="name"/>

<ft:widget id="name"/>

.../...

<ft:widget id="ok"/>

<ft:continuation-id/>

</ft:form-template>

</body>

</html>



ajax="true". Mostly?

! Container widgets must enclose a container element

! The widget's id will be added to the element

"Needed to identify and update the area displaying the

container

<ft:tree id="tree2">

<div>

Tree sample:

<ft:tree-nodes>

<div style="margin-left: 15px"><toggle-icon/>${treeNode.node.data}

<ft:tree-children/>

</div>

</ft:tree-nodes>

</div>

</ft:tree>




! Use the new <ft:repeater> instruction

"Because <ft:repeater-widget> iterates on rows and

thus doesn't distinguish the repeater from its rows

<ft:repeater id="contacts">

<table>

<tr>

<th><ft:repeater-widget-label widget-id="firstname"/></th>

<th><ft:repeater-widget-label widget-id="lastname"/></th>

<th><ft:repeater-widget-label widget-id="ID"/></th>

<th><ft:repeater-widget-label widget-id="select"/></th>

</tr>

<ft:repeater-rows>

<tr class="forms-row-${repeaterLoop.index % 2}">

<td><ft:widget id="firstname"/></td>

<td><ft:widget id="lastname"/></td>

<td><ft:widget id="ID"/></td>

<td><ft:widget id="select"/></td>

</tr>

<ft:repeater-rows>

</table>

</ft:repeater>

Repeatercontainer

Rowscontainer

JXTemplateiterator




! You must use the JXTemplateGenerator macros

"Ajax not yet supported by the FormsTransformer

! In aggregations (portal), use "ajax-action"

"Posts to the actual pipeline, not the portal

<html xmlns:ft="http://apache.org/cocoon/forms/1.0#template"

xmlns:jx="http://apache.org/cocoon/templates/jx/1.0">

<jx:import uri="resource://org/apache/cocoon/forms/generation/jx-macros.xml"/>

.../...

</html>

<ft:form-template action="/portal" ajax-action="/coplets/app/continue"

method="POST" ajax="true">

.../...

</ft:form-template>




! And that's all.

! Really.

! So where is the magic?


How it works

Basic idea: partial updates

! The form is posted using an Ajax request

"Reaction to "submit-on-change" field or action widget

! Several areas may have to be updated, but we don't

know which ones

"Depends on server-side validations and listeners

! So we need the server to send back browser update

instructions


How it works

The browser-update namespace

! A list of updated sections, with their id

! Client-side JavaScript replaces existing sections with

their freshly produced replacement.

<bu:document

xmlns:bu="http://apache.org/cocoon/browser-update/1.0">

<bu:replace id="email">

<input name="email" id="email" value="[email protected]"/>

</bu:replace>

<bu:replace id="message">

<span id="message">Mail sent</span>

</bu:replace>

</bu:document>


How it works

Ajax roundtrip

! Form is posted asynchronously (Ajax request)

""?cocoon-ajax=true" indicates Ajax mode

! During request processing, updated widgets are

collected

! Form template is executed in "Ajax mode"

"Non-updated widgets are ignored (speed-up)

"Updated widgets are enclosed in <bu:replace>

! Instanciated template is filtered to keep only

updated sections

"The BrowserUpdateTransformer

! Updated sections are styled and sent to the browser


How it works

Widget updates

! Changed widgets notify their changes to the Form

"The form holds a list of updated widgets

! What does "change" mean?

! Any widget: state, validation error

! Field: value, selection-list

! Repeater: add/delete/move row

! Union: case value

! Etc…

"Depends on the actual widget implementation


How it works

Pipeline overview

JXT

generatorxslt

Ajax

request?

Browser

updatei18n

xml

html

Full template

Full template

(no modifications)

Styled page

Page structure and

updated widgets in<bu:replace>

Updated widgets in

<bu:replace>

elements Styled updates in

<bu:replace> elements

Regular

request

Ajax

request

N

Y


How it works

The BrowserUpdateTransformer

! Flatten <bu:replace>, add IDs, remove everything else

<bu:document xmlns:bu="http://apache.

org/cocoon/browser-update/1.0">

<bu:replace id="contacts">

<div id="contacts">

.../...

</div>

</bu:replace>

<bu:replace id="add">

<fi:action id="add>

<fi:label>

Add a contact

</fi:label>

</fi:action>

</bu:replace>

</bu:document>

<html xmlns:bu="http://apache.org/

cocoon/browser-update/1.0">

<body>

Contacts

<bu:replace id="contacts">

<div>

.../...

</div>

</bu:replace>

<br/>

<bu:replace id="add">

<fi:action id="add>

<fi:label>

Add a contact

</fi:label>

</fi:action>

</bu:replace>

</body>

</html>


How it works

Cross browser issues

! Uses a very small JS library

! Reduces portability problems

! Degrades nicely on non Ajax-capable browsers

! Goes back to "old-fashioned" full page reload


! What is Ajax?


! How to use it

! How it works

"Ajax goodies


Ajax goodies

The script.aculo.us library

! A great JavaScript library to build Ajax applications

! Originally written for Ruby on Rails

! Uses the same partial page update approach

! A lot of cool features

! Visual effects

! Autocomplete

! Drag'n drop

! Etc…

! MIT-style licence!


Ajax goodies

Cocoon suggests

! Reuses the selection-list framework

"Adds additional filtering capabilities

<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>


Ajax goodies

Ongoing work

! Extended the "target" attribute to intra-document

updates

! No more limited to frames or windows

<td width="30%">

<a href="linked-updater-content-1"

bu:target="replace::changeme">Do a replace</a><br/>


bu:target="replace::changeme">Do a different replace</a><br/>


bu:target="insert-before::changeme">Insert before</a><br/>


bu:target="insert-top::changeme">Insert at the top</a><br/>


bu:target="insert-bottom::changeme">Insert at the bottom</a><br/>


bu:target="insert-after::changeme">Insert after</a><br/>

</td>


Ajax goodies

Ongoing work

! Upload progress bar

! Multipart request parser stores progress information in

the session

! Ajax request gets it and updates the progress bar


Conclusion

! This is so cool! How can I get this stuff?

"Get it from SVN, this will be in Cocoon 2.1.8!

Questions?

ajax and cocoon - the apache software...

Documents