Differences between revisions 1 and 2
Revision 1 as of 2009-06-26 21:26:12
Size: 2818
Editor: PahneAndy
Comment:
Revision 2 as of 2009-09-20 23:20:55
Size: 2826
Editor: localhost
Comment: converted to 1.6 markup
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:
How to integrate [http://jquery.com/ jQuery] with Tapestry 5.[[BR]] How to integrate [[http://jquery.com/|jQuery]] with Tapestry 5.<<BR>>
Line 7: Line 7:
It is necessary to adjust the jQuery sources, because Tapestry 5 uses the Prototype Javascript library. Both javascript libraries make use of the variable {{{ $ }}} in the global javascript namespace. See the [http://docs.jquery.com/Using_jQuery_with_Other_Libraries jQuery docs] for a more detailed explanation of the problem. It is necessary to adjust the jQuery sources, because Tapestry 5 uses the Prototype Javascript library. Both javascript libraries make use of the variable {{{ $ }}} in the global javascript namespace. See the [[http://docs.jquery.com/Using_jQuery_with_Other_Libraries|jQuery docs]] for a more detailed explanation of the problem.
Line 76: Line 76:
[http://tapestry.markmail.org/message/zqvcgktzg4nxluos?q=jQuery#query:jQuery+page:1+mid:zqkeztubr7tuv7b7+state:results Thread integration jQuery components] [[http://tapestry.markmail.org/message/zqvcgktzg4nxluos?q=jQuery#query:jQuery+page:1+mid:zqkeztubr7tuv7b7+state:results|Thread integration jQuery components]]
Line 78: Line 78:
[http://tapestry.markmail.org/message/pgyn7jojrmzepjeo?q=jQuery&page=2#query:jQuery+page:2+mid:xjxead7q7xuacfs2+state:results Thread using jQuery in 5.0.18] [[http://tapestry.markmail.org/message/pgyn7jojrmzepjeo?q=jQuery&page=2#query:jQuery+page:2+mid:xjxead7q7xuacfs2+state:results|Thread using jQuery in 5.0.18]]

How to integrate jQuery with Tapestry 5.

Introduction

Unfortunatly it is not possible to use a current jQuery release out of the box with Tapestry 5. But only one small step is necessary to make them play together well.

It is necessary to adjust the jQuery sources, because Tapestry 5 uses the Prototype Javascript library. Both javascript libraries make use of the variable  $  in the global javascript namespace. See the jQuery docs for a more detailed explanation of the problem.

Adjusting jQuery

1. Download the current jQuery release. Be sure to use the minimized version for production use

2. Open the file and append   jQuery.noConflict();   on a separate line at the very end of the file

Your file should look like this:

/*
 * jQuery JavaScript Library v1.3.2
 * http://jquery.com/
 *
 * Copyright (c) 2009 John Resig
 * Dual licensed under the MIT and GPL licenses.
 * http://docs.jquery.com/License
 *
 * Date: 2009-02-19 17:34:21 -0500 (Thu, 19 Feb 2009)
 * Revision: 6246
 */
(function(){var l=this,g,y=l.jQuery,p=l.$,o=l.jQuery=l.$=function(E,F){return new .........

/*
 * Sizzle CSS Selector Engine - v0.9.3
 *  Copyright 2009, The Dojo Foundation
 *  Released under the MIT, BSD, and GPL Licenses.
 *  More information: http://sizzlejs.com/
 */
(function(){var R=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^[\]]*\]|['"]........

/*
 * Must run in noConflict mode! 
 */
jQuery.noConflict();

That's it. Now you can use this script like you use any other javascript on your Tapestry 5 pages.

Unfortunatly the  $  name is still reserved for Prototype. The jQuery documentation has more information on how to overcome this limitation.

Creating a Component Library

You may want to create a component library for your adjusted jQuery source and the most useful plugins that you'll need in your projects. If you don't know how to do that, see Tapestry5HowToCreateYourOwnComponentLibrary

We have choosen to create a library that contains jQuery core, the UI plugin and the well known form plugin. Using any of these is as simple as this:

    @IncludeJavaScriptLibrary({
            "classpath:/x/y/z/jquery/components/jquery.min.js",
            "classpath:/x/y/z/jquery/components/jQuery.forms.js",
        }
)
public class SomePageClass {

}

Thread integration jQuery components

Thread using jQuery in 5.0.18

Tapestry5HowToIntegrateJQuery (last edited 2009-09-20 23:20:55 by localhost)