How to use the Spry framework for Ajax in Plone

Purpose

Explain the purpose of your how-to here. Why does someone want to read it?

Introduction

The Spry Framework for Ajax is a project from Adobe Labs whose lead slogan is Ajax for everyone. It is "designed to take the complexity out of Ajax and allow designers to easily create Web 2.0 pages". Although it is not dependent on any particular tool Dreamweaver CS3 has features that ease the development of Spry pages and given the popularity of Dreamweaver I imagine this integration will spur its uptake. It is something that the web manager at our organisation had put the effort in to learn and was using in static html sites he was building. This howto explains how I made the Spry Framework available to Plone so he could continue making use of the tools he was familiar with. I point out now that I have not had a chance to look into KSS, Plone's Ajax Framework in any detail so was unable to really push the use of this over Spry.

Prerequisities

The Spry Ajax Framework http://labs.adobe.com/technologies/spry/

Step by step

1. Copy stephen's SpryAssets folder to
/opt/Plone-3.0.2/zeocluster/Products/DotNetTheme/browser/SpryAssets

2. Add this as a resource directory in plone by adding the following to
/opt/Plone-3.0.2/zeocluster/Products/DotNetTheme/browser/configure.zcml :

<browser:resourceDirectory
name="dotnet-spryassets"
directory="SpryAssets"
layer=".interfaces.IDotNetTheme"
/>

* Found out that I should have restarted zope as a reinstall of the
product does not make zope pick it up.

3. Reinstall the DotNetTheme product using portal quickinstaller.

4. I could then add the stylesheets to the portal_css registry by adding
them to the following file :

/opt/Plone-3.0.2/zeocluster/Products/DotNetTheme/profiles/default/cssregistry.xml
I could add the stylesheets TTW using portal_css but by adding them to
the cssregistry.xml I know that these stylesheets will be enabled if I
install my DOTNetTheme product in another plone site.

<stylesheet id="++resource++dotnet-spryassets/SpryTabbedPanelsRHC.css"
title="" cacheable="True" compression="safe" cookable="True"
enabled="1" expression="" media="screen"
rel="stylesheet" rendering="import"/>

5. Reinstall the DotNetTheme, the stylesheet appeared but was shown as
being unavailable. This was fixed by restarting plone so that is what I
should have done after adding the resource directory.

6. I created a jsregistry.xml file in the ...profiles/default folder and
then added the spry javascript library used by the tabbed menus:

<javascript cacheable="True" compression="none" cookable="True"
enabled="True" expression=""
id="++resource++dotnet-spryassets/SpryTabbedPanels.js" inline="False"/>

It is possible that this library is safe to compress but I left it
uncompressed at the moment.

7. I restarted the zope instance and then reinstalled the product, I can
see in the event.log that reinstalling the product now loads javascript
into the Javascript registry:

2007-11-01T17:56:22 INFO GenericSetup.resourceregistry Javascript
registry imported.
------

If I look in portal_jss now I see the following listed as a script at
the bottom of the list:

++resource++dotnet-spryassets/SpryTabbedPanels.js

8. The last step now was to add in the call to the script to the portlet
code. I pasted the following into the text area of the portlet. I
renamed the portlet to the About tabs.

Now if I reload my front page I have the portlet working just the same
as in stephens mockup. Just need some css tweaks in the main.css to
match the colors exactly.

Further information

If there is anywhere else the reader can go for more information on this topic, include some links or pointers here.