contrib: script.aculo.us Effects

sluramod

unread,

May 19, 2006, 10:11:03 PM5/19/06

to Google Web Toolkit

How to use it:

html:

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

unread,

May 19, 2006, 10:16:16 PM5/19/06

to Google Web Toolkit

Sorry, but google servers modify data.

replace "t . . . @" with "this . @" (don't forget . (dot) before @) and
"o . . . @" with "obj @"

Alex

gwt.com...@gmail.com

unread,

May 22, 2006, 1:20:49 PM5/22/06

to Google Web Toolkit

Source code: http://gwt.components.googlepages.com/

rb

unread,

May 23, 2006, 9:55:09 AM5/23/06

to Google Web Toolkit

Thanks for the contribution.

Where do I put the js files in an eclipse project?

I'm getting "resouse not found: prototype.js"

sluramod

unread,

May 23, 2006, 12:41:04 PM5/23/06

to Google Web Toolkit

If you have <script src="js/prototype.js" type="text/javascript" /> in
your html, then you need to create "js" package under "public" package
and place prototype.js there.

Alex

rb

unread,

May 23, 2006, 2:27:17 PM5/23/06

to Google Web Toolkit

I'm getting closer!

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:

To:

Alexei Sokolov

unread,

May 23, 2006, 2:30:54 PM5/23/06

to Google-We...@googlegroups.com

Can you make sure that the code works as is, i.e. without changing the package name?

Alex

rb

unread,

May 23, 2006, 5:02:20 PM5/23/06

to Google Web Toolkit

I get the same error with the original package:
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

unread,

May 23, 2006, 5:32:13 PM5/23/06

to Google Web Toolkit

Sorry, my fault. Now I see the problem. The line should read:

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

unread,

May 23, 2006, 7:14:15 PM5/23/06

to Google Web Toolkit

That was it. Works great.

You might want to update the site and show:

with the ending script tags.

Thanks!

aos

unread,

Jun 5, 2006, 3:57:48 AM6/5/06

to Google Web Toolkit

Hi Alex,

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.

Reply all

Reply to author

Forward