Hi!
I took some dojo code, from their tests (hope nobody will be upset .... ) ,
and i made a tapestry component out of it.
Is an animation and the good part is that is working.
Well the component is of no real use.. just a sample of how it can be done.
But i'm not sure that this is the way it should be done.
I tried to attach the library in the first place but the message got
bounced.
So i pasted the files here.
If anybody has few minutes to try it and give any feedback would be great !!
if not , maybe it helps somebody else..... who's looking for the same thing.
It was no more than copy/paste from dojo tests to tapestry.
To use it all you have to do is put this in the html file <span
jwcid="@Animation2" />
And you also have to take two more files from dojo svn : html.style.js and
html.display.js
The result is that you'll see some animations....
I can give more directions if needed.
By the way , i 've used the sample tests/animation/test_animation.html
found in dojo svn !
Thanks!
Alex
Animation.html
------------------------------
<style type="text/css">
#Mover {
position : absolute;
background : #ccc;
left : 200px;
top : 200px;
}
#Repeat1 {
position : absolute;
background : red;
top : 100px;
left : 100px;
}
#circ {
position : absolute;
width : 4px;
height : 4px;
line-height : 1px;
overflow : hidden;
margin : -2px 0 0 -2px;
background : #333;
-moz-border-radius : 4px;
}
</style>
<p>This demo kinda sucks, but you can see what goes on.</p>
<a href="javascript:q.playPause()">Play/Pause</a> (sequence)
|
<a href="javascript:a.gotoPercent(35, true)">Goto 35% and play</a>
(move animation)
<div id="Mover">I'm a mover</div>
<div id="Repeat1" onclick="r.play()">I repeat a few times!</div>
<br />
<div id="circ"></div>
<a href="javascript:c.playPause()">Play/Pause</a> (circle, repeats
forever)
Animation.jwc
------------------------------
<?xml version="1.0"?>
<!DOCTYPE component-specification PUBLIC
"-//Apache Software Foundation//Tapestry Specification 4.0//EN"
"http://tapestry.apache.org/dtd/Tapestry_4_0.dtd";>
<component-specification class="animation.Animation">
<inject property="script" type="script" object="Animation.script"/>
</component-specification>
Animation.script
--------------------------------
<?xml version="1.0"?>
<!DOCTYPE script PUBLIC
"-//Apache Software Foundation//Tapestry Script Specification 3.0//EN"
"http://jakarta.apache.org/tapestry/dtd/Script_3_0.dtd";>
<script>
<body>
<unique>
dojo.require("dojo.animation.*");
dojo.require("dojo.html.display");
dojo.require("dojo.event.*");
</unique>
var Line = dojo.math.curves.Line;
var Circle = dojo.math.curves.Circle;
var Anim = dojo.animation.Animation;
</body>
<initialization>
<![CDATA[
function init(){
var line = new Line([200,200], [400, 20]);
a = new Anim(line, 1000, 0);
var mover = document.getElementById("Mover");
a.handler = function(e) {
switch(e.type) {
case "play":
dojo.html.setOpacity(mover, 1);
break;
case "animate":
mover.style.left = e.x + "px";
mover.style.top = e.y + "px";
break;
case "end":
break;
}
}
b = new Anim(new Line([1],[0]), 500, 0);
b.onAnimate = function(e) {
if(e.x){
dojo.html.setOpacity(mover, e.x);
}
}
q = new dojo.animation.AnimationSequence();
q.add(a, b);
r = new Anim(new dojo.math.curves.Bezier([[100,100],
[80,80], [200,200], [400,30], [100,100]]), 2000, 0, 3);
r.onAnimate = function(e) {
with(document.getElementById("Repeat1").style) {
left = e.x + "px";
top = e.y + "px";
}
}
// repeats forever (4th arg of -1)
c = new dojo.animation.Animation(new Circle([500,120], 40),
1000, 0, -1);
dojo.event.connect(c, "onAnimate", function(e) {
with(document.getElementById("circ").style) {
left = e.x + "px";
top = e.y + "px";
}
});
c.play(true);
}
dojo.addOnLoad(init);
]]>
</initialization>
</script>
Animation.java
---------------------------------
package animation;
import java.util.HashMap;
import java.util.Map;
import org.apache.tapestry.BaseComponent;
import org.apache.tapestry.IMarkupWriter;
import org.apache.tapestry.IRequestCycle;
import org.apache.tapestry.IScript;
import org.apache.tapestry.PageRenderSupport;
import org.apache.tapestry.TapestryUtils;
import org.apache.tapestry.event.PageBeginRenderListener;
import org.apache.tapestry.event.PageEndRenderListener;
import org.apache.tapestry.event.PageEvent;
public abstract class Animation extends BaseComponent{
protected void renderComponent(IMarkupWriter writer ,IRequestCycle cycle
) {
super.renderComponent(writer, cycle);
IScript sc = getScript();
PageRenderSupport prs = TapestryUtils.getPageRenderSupport(cycle,
this);
Map parms = new HashMap();
sc.execute(this ,cycle, prs, parms);
}
public abstract IScript getScript();
}
