contrib: script.aculo.us Effects
sluramod
html:
<head>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
...
</head>
java:
Effects.Effect("Puff", uiObj);
or
Effects.Parallel(new Effects.Effect[] {
Effects.Effect("Pulsate", uiObj, "{ sync:true, duration: 3.0 }"),
Effects.Effect("SlideDown", uiObj, "{ sync:true, duration: 3.0 }")
}, "{duration: 3.0}").addEffectListener(
new Effects.EffectListenerAdapter() {
public void onAfterFinish(Effect sender) {
Window.alert("done");
}
});
source code:
package com.sluramod.client;
import java.util.Iterator;
import java.util.Vector;
import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.UIObject;
public class Effects {
public interface EffectListener {
void onBeforeUpdate(Effect sender);
void onAfterUpdate(Effect sender);
void onAfterFinish(Effect sender);
}
public static class EffectListenerAdapter implements EffectListener {
public void onBeforeUpdate(Effect sender) {
}
public void onAfterUpdate(Effect sender) {
}
public void onAfterFinish(Effect sender) {
}
}
public static class EffectListenerCollection extends Vector {
public void fireBeforeUpdate(Effect sender) {
for (Iterator it = iterator(); it.hasNext();) {
EffectListener listener = (EffectListener) it.next();
listener.onBeforeUpdate(sender);
}
}
public void fireAfterUpdate(Effect sender) {
for (Iterator it = iterator(); it.hasNext();) {
EffectListener listener = (EffectListener) it.next();
listener.onAfterUpdate(sender);
}
}
public void fireAfterFinish(Effect sender) {
for (Iterator it = iterator(); it.hasNext();) {
EffectListener listener = (EffectListener) it.next();
listener.onAfterFinish(sender);
}
}
}
public static class Effect {
private JavaScriptObject delegate;
private EffectListenerCollection effectListeners;
private Effect(JavaScriptObject delegate) {
this.delegate = delegate;
setupCallbacks(this);
}
public Effect addEffectListener(EffectListener listener) {
if (effectListeners == null)
effectListeners = new EffectListenerCollection();
effectListeners.add(listener);
return this;
}
public Effect removeEffectListener(EffectListener listener) {
if (effectListeners != null)
effectListeners.remove(listener);
return this;
}
protected void beforeUpdate() {
if (effectListeners != null) {
effectListeners.fireBeforeUpdate(this);
}
}
protected void afterUpdate() {
if (effectListeners != null) {
effectListeners.fireAfterUpdate(this);
}
}
protected void afterFinish() {
if (effectListeners != null) {
effectListeners.fireAfterFinish(this);
}
}
private native void setupCallbacks(Effect obj) /*-{
var val = this.@com.sluramod.client.Effects$Effect::delegate;
val.options = $wnd.Object.extend({
beforeUpdate: function(effect) {
obj.@com.sluramod.client.Effects$Effect::beforeUpdate()();
},
afterUpdate: function(effect) {
obj.@com.sluramod.client.Effects$Effect::afterUpdate()();
},
afterFinish: function(effect) {
obj.@com.sluramod.client.Effects$Effect::afterFinish()();
}
}, val.options);
}-*/;
public native void go() /*-{
var val = this.@com.sluramod.client.Effects$Effect::delegate;
if (!val.options || !val.options.sync) {
return;
}
$wnd.Effect.Queues.get(typeof val.options.queue == 'string' ?
'global' : val.options.queue.scope).add(val);
}-*/;
}
private static class JSArray {
public JavaScriptObject[] objs;
public JSArray(int size) {
objs = new JavaScriptObject[size];
}
public JavaScriptObject get(int index) {
return objs[index];
}
public void set(int index, JavaScriptObject obj) {
objs[index] = obj;
}
public int size() {
return objs.length;
}
public native JavaScriptObject toObj() /*-{
var size = this.@com.sluramod.client.Effects$JSArray::size()();
var arr=new $wnd.Array(size);
var i=0;
for (; i < size; i++) {
arr[i] = this.@com.sluramod.client.Effects$JSArray::get(I)(i);
}
return $wnd.Array.from(arr);
}-*/;
}
private static native JavaScriptObject evaluate(String jsonString)
/*-{
return eval('(' + jsonString + ')');
}-*/;
private static native JavaScriptObject effect(String name, Element
elem,
JavaScriptObject options) /*-{
return new $wnd.Effect[name](elem, options);
}-*/;
private static native JavaScriptObject parallelEffect(JavaScriptObject
effects,
JavaScriptObject options) /*-{
return new $wnd.Effect.Parallel(effects, options);
}-*/;
public static Effect Parallel(Effect[] effects, String options) {
if (effects == null) {
return null;
}
JSArray objs = new JSArray(effects.length);
for (int i = 0; i < effects.length; i++) {
objs.set(i, effects[i].delegate);
}
return new Effect(parallelEffect(objs.toObj(), evaluate(options)));
}
public static Effect Effect(String name, UIObject uiObj) {
return Effect(name, uiObj, "{}");
}
public static Effect Effect(String name, UIObject uiObj, String
options) {
return new Effect(effect(name, uiObj.getElement(),
evaluate(options)));
}
}
Be careful if you change package name.
Note: Please do not redistribute or alter the script without my
permissions (You can change only package name). You can contact me at
alexei dot sokolov at gmail dot com.
Alex
sluramod
replace "t . . . @" with "this . @" (don't forget . (dot) before @) and
"o . . . @" with "obj @"
Alex
gwt.com...@gmail.com
rb
Where do I put the js files in an eclipse project?
I'm getting "resouse not found: prototype.js"
sluramod
your html, then you need to create "js" package under "public" package
and place prototype.js there.
Alex
rb
I get the following error on startup:
[ERROR]
C:\projects\gwt-windows-1.0.20\samples\CPTest2\src\com\cp\client\Effects.java(97,
70): missing ; before statement
com.google.gwt.dev.js.JsParserException: missing ; before statement
I cut and pasted from your website and just changed the package.
Any suggestions?
Thanks
Also, I had to change:
<script src="js/prototype.js" type="text/javascript" />
<script src="js/scriptaculous.js" type="text/javascript" />
To:
Alexei Sokolov
Alex
rb
com.gwt.components.client
[ERROR]
C:\projects\gwt-windows-1.0.20\samples\CPTest3\src\com\gwt\components\client\Effects.java(97,
70): missing ; before statement
com.google.gwt.dev.js.JsParserException: missing ; before statement
I'm using the source from your website and version 1.6.1 of
script.aculo.us.
Do you have a zipped up Eclipse project that we could download from
your site?
Thanks
sluramod
obj <dot> @com.gwt.components.client.Effects$Effect::beforeUpdate()();
i.e. there should be a dot ('.') after obj. I will fix it on the site.
Alex
rb
You might want to update the site and show:
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
with the ending script tags.
Thanks!
aos
Thanks for the code that integrates script.aculo.us library with GWT.
Using it as an example I checked up Rico and Moo.fx effect libraries.
They also easily can be used with GWT and work fine.
Cheers,
Alex
PS:Those how need my code to integrate those libraries into GWT, please
drop me a line.