JQuery like animation

[Guy Nirpaz]

Hey,

Any idea how to get functionality similar to JQuery:

$("p.neat").addClass("ohmy").show("slow");

I'm referring to the { .show("slow") } part.

I'm looking to find an extensive set of animation capabilities which can be used with GWT (not ext-GWT or other non native GWT libraries)

Any tips will help

Guy

[Christian Goudreau]

Have you ever heard of Gwt-Query ? :D

http://code.google.com/p/gwtquery/

Cheers,

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/miIqFHgBEjMJ.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Christian Goudreau

www.arcbees.com

[Uemit]

If you don't care much about old browsers you can also use CSS3 transitions/animations for simple stuff. 

I used it in a GWT project (i.e. ProgressBar) and it works really well. 

i.e.: http://aatiis.me/demos/pure-css-progress-bar

[Guy Nirpaz]

Thanks Christian,

I am well familiar with GWT-Query, however, I feel it doesn't match well GWT (MVP) programming model and design.

Guy

[Christian Goudreau]

Well it does. But you have to trigger the animation from the presenter. The actual animation that take care of the GQuery stuff can be in the view or in another class. If the animation in the view isn't triggered from the view itself, but from the presenter, it matches the MVP pattern.

"Pattern are half-baked, meaning that you always have to finish them off in the oven of your own project"

Cheers,

Guy

--

You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/yNJ60daUk_sJ.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Christian Goudreau

www.arcbees.com

[dindeman]

Yes this progress bar looks really neat indeed, nice.

What about gwt-fx ? I have used it in the past and found it pretty good then.
I remember that I had to switch to it (coming from using GQuery) because I needed a way to intercept the process of a fading effect in the middle and reverse it. And, at the time, that wasn't possible with GQuery.

[Manuel Carrasco Moñino]

It is not true, gquery can be used in different contexts and does not
break the MVP pattern if you do not want. It is a helper library not a
programming pattern.
In a MVP app you can use it in different ways:
1. you can put any animation, decoration or enhancement in your view
so as the presenter does not matter since you implement correctly the
view interface. For instance you can have a view with just only
text-boxes, then you could enhance those components with the
gquery-enhance plugin changing boxes by slider, color pickers etc, or
you could add gquery animations overriding onAttach, etc.
2. Gquery also helps in a MVP context since you can use it to decouple
parts, and get widget instances anywhere
MyWidget w = $(".gwt-mywidget_class").widget();

- Manolo

>
> Guy
>
> --
> You received this message because you are subscribed to the Google Groups
> "Google Web Toolkit" group.
> To view this discussion on the web visit

> https://groups.google.com/d/msg/google-web-toolkit/-/yNJ60daUk_sJ.

[Tomasz Gawel]

1. But Animation class in gwt seems to be quite handy. All you need is
bunch of custom interpolation functions. But these are easy to be
taken from MooTools (i did take se below :)) - (easing functions in
jquery behave slightly different so simple rewriting it in java drops
off).

2. Manuel - great respect for GWT-Query - actually the biggest thing i
find missing in gwt is support for "dom-programming" and lack of built-
in selector engine. But I agree with Guy that jquery-like syntax is
not necessarily an advantage :)

/** from mootools **/
public static interface Interpolation {

public static class Power implements Interpolation {
protected double power;
public Power(double power){
this.power = power;
}
@Override public double interpolate(double progress) {
return Math.pow(progress, power);
}
}

public static class Back implements Interpolation {
protected double mute = 1.618;
public Back(double mute){
this.mute = mute;
}
@Override public double interpolate(double progress) {
return Math.pow(progress, 2) * ((mute + 1) * progress
- mute);
}
}

public static class Elastic implements Interpolation {
protected double mute = 1;
public Elastic(double mute) {
this.mute = mute;
}
@Override public double interpolate(double progress) {
return Math.pow(2, 10 * --progress) * Math.cos(20 *
progress * Math.PI * mute / 3);
}
}

public static final Interpolation ELASTIC = new Elastic(1);

public static final Interpolation BACK = new Back(1.618);

public static final Interpolation QUAD = new Power(2);

public static final Interpolation CUBIC = new Power(3);

public static final Interpolation QUART = new Power(4);

public static final Interpolation QUINT = new Power(5);

public static final Interpolation LINEAR = new Interpolation()
{
@Override public double interpolate(double progress) {
return progress;
}
};

public static final Interpolation EXPO = new Interpolation() {
@Override public double interpolate(double progress) {
return Math.pow(2, 8 * (progress - 1));
}
};

public static final Interpolation CIRC = new Interpolation() {
@Override public double interpolate(double progress) {
return 1 - Math.sin(Math.acos(progress));
}
};

public static final Interpolation SINE = new Interpolation() {
@Override public double interpolate(double progress) {
return 1 - Math.cos(progress * Math.PI / 2);
}
};

public static final Interpolation BOUNCE = new Interpolation()
{
@Override public double interpolate(double progress) {
double value;
for (double a = 0, b = 1; true; a += b, b /= 2){
if (progress >= (7 - 4 * a) / 11){
value = b * b - Math.pow((11 - 6 * a - 11 *
progress) / 4, 2);
break;
}
}
return value;
}
};


double interpolate(double progress);
}

[Manuel Carrasco Moñino]

On Fri, Aug 19, 2011 at 12:42 PM, Tomasz Gawel <tomas...@op.pl> wrote:
> 1. But Animation class in gwt seems to be quite handy. All you need is
> bunch of custom interpolation functions. But these are easy to be
> taken from MooTools (i did take se below :)) - (easing functions in
> jquery behave slightly different so simple rewriting it in java drops
> off).

Gwtquery (GQuery) is NOT JQuery nor needs to import it to work, they
only share the API (syntax and name of methods), so GQuery has been
entirely rewritten taking advance of GWT and reusing as much stuff as
possible from gwt.
So animate() in GQuery has nothing in common with animate in jquery()
(except the name and parameters), the implementation based in the gwt
class Animate, and Easing function has only one method interpolate()
which is used directly by Animation. Take a look to the Easing
interface in gquery which is exactly the same that your Interpolation
interface, in fact we could incorporate these bunch of interpolations
to the project if you authorise it.
http://code.google.com/p/gwtquery/source/browse/trunk/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/PropertiesAnimation.java#37

>
> 2. Manuel - great respect for GWT-Query - actually the biggest thing i
> find missing in gwt is support for "dom-programming" and lack of built-
> in selector engine. But I agree with Guy that jquery-like syntax is
> not necessarily an advantage :)

gwtquery is a gwt library, it basically introduces many nice things to
the gwt world: css selectors, a lot of useful methods for dom
manipulation, animations, light collections, etc, and the jquery
popular syntax (method chaining).
So if you only need GQuery selectors, you can use them without forcing
your programmers to use jquery syntax, nor any reference to the GQuery
class.
Element context = anyWidget.getElement();
SelectorEngine sel = new SelectorEngine();
NodeList<Element> nodes = sel.select(".mycontainer .gwt-label", context);
The same if you wanted to use Selectors optimized at compile time, etc.

Summarizing take from gquery just what you need, and do not feel
forced to use jquery-like syntax nor any programming pattern. Like
with any other library, the gwt compiler will do its work not
including in your javascript anything you do not use.

> --
> You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

[Nicolas Antoniazzi]

We use gwt-fx in our project. It is only focused on FX and it does it well.

http://code.google.com/p/gwt-fx/

2011/8/21 Manuel Carrasco Moñino <man...@apache.org>

[Dimitrijević Ivan]

You can include jQuery fraework in your application and use JSNI to invoke jQuery's animation function.

public class Animation {

public static int SPEED_SLOW = 1300;

public static int SPEED_NORMAL = 800;

public static int SPEED_FAST = 400;

public static native void doFadeInAnimation(Element e, int speed)/*-{

   $wnd.jQuery(e).fadeIn(speed);

}-*/;

}

In order to animate some GWT UI element you should write:

Animation.doFadeInAnimation(yourGWTUIElement.getElement(), Animation.SPEED_SLOW);

[Christian Goudreau]

I remember seeing a race between Gwt-Query and jQuery with animations where Gwt-Query run that race, does anyone has de link to that video somewhere?

2011/8/22 Dimitrijević Ivan <dim...@gmail.com>

--

You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/JZojg4ekSM4J.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Christian Goudreau

www.arcbees.com

[Manuel Carrasco Moñino]

Here:
http://gwtquery.googlecode.com/svn/trunk/demos/gwtquery.samples.GwtQueryBench/GwtQueryBench.html?ask=false

[Manuel Carrasco Moñino]

With gquery the syntax is the same, except that you get advance of the
gwt compiler including in your final js just the stuff you need, you
do not need to import any external library like jquery.js, and you do
not have to write any jsni method.

- Your example passing a gwt UI component
import static com.google.gwt.query.client.GQuery.$;
$(yourGWTUIElement).fadeIn(1300);

- More examples using selectors and type-safe constants
$(".gwt-label").fadeIn(Speed.SLOW);
$(".gwt-label").css("vertical-align", "middle").delay(1000).fadeIn(Speed.FAST);
$(".gwt-button").css(CSS.VERTICAL_ALIGN.with(VerticalAlign.MIDDLE));

Enjoy gquery :-)
- Manolo

2011/8/22 Dimitrijević Ivan <dim...@gmail.com>:

[VisualFox]

Almost shameless promotion - disclaimer I am the author of both
visualfox-fx and visualfox-fx-gwtquery

Gwtquery will works well. But if you are looking for just an animation
library you may want to check:

a) visualfox-fx which is an animation and effect library using both
css3 animation type and javascript. Actually the library can run in an
hybrid mode.
http://code.google.com/p/visualfox-fx/

b) visualfox-fx-gwtquery which is a plugin for gwtquery using
visualfox-fx. This plugin have some limitation as you can only apply
the animation effect to the first element and not to the whole
collection returned by gwtquery.
http://code.google.com/p/visualfox-fx-gwtquery/

I am currently working on improving the documentation but things can
be a little bumpy, Don't hesitate to contact me if you have any
problem

On Jul 3, 5:58 pm, Guy Nirpaz <g...@totango.com> wrote:
> Hey,
>
> Any idea how to get functionality similar to JQuery:

> $("p.neat").addClass("ohmy").*show("slow");*
> *
> *
> *
> *

> I'm referring to the { .show("slow") } part.
>
> I'm looking to find an extensive set of animation capabilities which can be
> used with GWT (not ext-GWT or other non native GWT libraries)
>
> Any tips will help
> Guy
>

> *
> *

[Christian Goudreau]

would be cool if the bench on Gwt-Query demos would use the latest jQuery and other library :D

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Christian Goudreau

www.arcbees.com