gwt using jquery effect possible?

Question

in my gwt, i have a button that fire like below to create new widget

 @UiHandler("buttonfire")
  void addNewWidget(ClickEvent event) {


     htmlPanelHolder.add(new MyCustomWidget(),"placeholder");

 }

how to use jquery so that when the MyCustomWidget() show on screen it is using jquery "fadein" effect

i already tried putting jsni to call jquery inside new MyCustomWidget() onload() but doesnt work. can guide me on this?

You can try something like this: 1)Create widget 2) Set widget's css display property to "display:none" 3) Add widget to htmlPanelHolder 4) Call JSNI method: public static native void fadeInWidget() /*-{ $("mywidget:hidden").fadeIn("slow"); }-*/; — Ilia Akhmadullin
– Ilia Akhmadullin, Commented Nov 23, 2010 at 14:52
@Xo4yHaMope . for step4, should i call fadeInWidget() in step 1 widget constructor after initwidget() ? or should i call fadeInWidget() inside onload() ? . also, $("mywidget:hidden") , is this the id=? for htmlPanelHolder ? — cometta
– cometta, Commented Nov 24, 2010 at 2:25
You should call fadeInWidget() at the very end, so calling it after initwidget() should work. And sorry there is mistake in jQuery code it should be like: $('#myDivId').fadeIn("slow"); or $('.myCssClass').fadeIn("slow"); — Ilia Akhmadullin
– Ilia Akhmadullin, Commented Nov 24, 2010 at 8:42

Chris Lercher · Accepted Answer · 2010-11-23 16:52:57Z

11

It's also possible to create a fade in effect without using jQuery. If you want to do that, just write an Animation class like this:

public class FadeInAnimation extends Animation {
    private final UIObject uiObject;

    FadeInAnimation(final UIObject uiObject) {
      this.uiObject = uiObject;
    }

    @Override
    protected void onUpdate(final double progress) {
      uiObject.getElement().getStyle().setOpacity(progress);
    }
}

Then you can use it on any widget:

new FadeInAnimation(myWidget).run(5000);

Note: The call to getStyle().setOpacity(..) even takes care of the special case IE6/7, where it sets style.filter = 'alpha(opacity=' + (value * 100) + ')';

edited Nov 23, 2010 at 16:52

answered Nov 23, 2010 at 16:39

Chris Lercher

37.9k20 gold badges103 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Don Branson Over a year ago

Thanks for the tip! Just used it in on my web site. :)

Carlos Tasada · Accepted Answer · 2010-11-23 15:40:24Z

2

You can also try with the GQuery library: http://code.google.com/p/gwtquery/

answered Nov 23, 2010 at 15:40

Carlos Tasada

4,4441 gold badge25 silver badges26 bronze badges

Comments

jdramaix · Accepted Answer · 2011-02-07 22:06:15Z

2

use the fadeIn effect of GwtQuery

answered Feb 7, 2011 at 22:06

jdramaix

1,1046 silver badges9 bronze badges

Collectives™ on Stack Overflow

gwt using jquery effect possible?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related