Hi All,
I'll post this in the google groups linked to the tapestry5-jquery project as
well.
To repeat what I have done:
1) Create a package under pages called test.
2) Create class JQuery.java with this in it.
package org.example.jquerytest.pages.test;
import org.apache.tapestry5.annotations.Import;
@Import(stylesheet="context:layout/mouseover.css",library={"context:js/mouseover.js"})
@ImportJQueryUI("jquery.ui.mouse")
public class JQuery {
}
3. Create src/main/webapp/layout/mouseover.css with this in it.
div.out { width:40%; height:120px; margin:0 15px;
background-color:#D6EDFC; float:left; }
div.in { width:60%; height:60%;
background-color:#FFCC00; margin:10px auto; }
p { line-height:1em; margin:0; padding:0; }
4. Create src/main/webapp/js/mouseover.js with this in it.
var i = 0;
$("div.overout").mouseover(function() {
i += 1;
$(this).find("span").text( "mouse over x " + i );
}).mouseout(function(){
$(this).find("span").text("mouse out ");
});
var n = 0;
$("div.enterleave").mouseenter(function() {
n += 1;
$(this).find("span").text( "mouse enter x " + n );
}).mouseleave(function() {
$(this).find("span").text("mouse leave");
});
5. Create the template for the pages/test/JQuery.java file calling it
pages/test/JQuery.tml
<html t:type="layout" title="Contact org.example"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd";
xmlns:p="tapestry:parameter">
<p>JQuery Testing</p>
<div class="out overout">
<span>move your mouse</span>
<div class="in">
</div>
</div>
<div class="out enterleave">
<span>move your mouse</span>
<div class="in">
</div>
</div>
</html>
The css and js files are included in the html source and i can view them, so
they are there and jquery.ui.mouse.min.js is also included and viewable.
MouseOver function as per the jquery example http://api.jquery.com/mouseover/
does not work though.
Any ideas?
Cheers
Chris
