Re: [Blog] How to replace component with animation
Ernesto, Sebastien, Isn't that a good addition to WIquery/Wicket-JQuery-UI libraries ? JQuery UI provides many more effects. On Fri, Feb 22, 2013 at 1:18 PM, Ernesto Reinaldo Barreiro reier...@gmail.com wrote: Martin, I have made this code publicly available (with some minor improvements at like make effects pluggable) here https://github.com/reiern70/antilia-bits/blob/master/wicket-replace-with-effect/src/main/java/com/antilia/replacewitheffect/ReplaceWithEffectBehavior.java an example of how to use it can be found at https://github.com/reiern70/antilia-bits/blob/master/wicket-replace-with-effect/src/test/java/com/antilia/replacewitheffect/HomePage.java Cheers. Ernesto On Thu, Feb 21, 2013 at 8:31 PM, Martin Grigorov mgrigo...@apache.org wrote: Well done, Ernesto! On Thu, Feb 21, 2013 at 9:13 PM, Ernesto Reinaldo Barreiro reier...@gmail.com wrote: Martin, Thanks for sharing! Inspired by your article I came up with following behavior that will: 1-Make component appear when appear when page is loaded. 2-Have the same effect you describe on your Blog for AJAX request, import org.apache.wicket.Component; import org.apache.wicket.ajax.AjaxRequestTarget; import org.apache.wicket.behavior.Behavior; import org.apache.wicket.markup.ComponentTag; import org.apache.wicket.markup.head.IHeaderResponse; import org.apache.wicket.markup.head.OnDomReadyHeaderItem; /** * @author Ernesto Reinaldo Barreiro (reiern70) * */ public class ReplaceWithEffectBehavior extends Behavior { private static final long serialVersionUID = 1L; /** * Constructor. */ public ReplaceWithEffectBehavior() { } @Override public void bind(Component component) { component.setOutputMarkupId(true); } @Override public void onComponentTag(Component component, ComponentTag tag) { String style = tag.getAttribute(style); if(style == null || style.indexOf(display: none;) 0) { tag.append(style, display: none;, ;); } } @Override public void renderHead(Component component, IHeaderResponse response) { AjaxRequestTarget target = component.getRequestCycle().find(AjaxRequestTarget.class); if(target != null) { target.prependJavaScript(notify|if(jQuery('# + component.getMarkupId() + ').length != 0){jQuery('# + component.getMarkupId() + ').slideUp(1000, notify);}); target.appendJavaScript(jQuery('#+component.getMarkupId()+').slideDown(1000);); } else { response.render(OnDomReadyHeaderItem.forScript(jQuery('#+component.getMarkupId()+').slideDown(1000);)); } } } How to use it. public class TestSlideDown extends WebPage { private static final long serialVersionUID = 1L; private WebMarkupContainer slideDown; /** * */ public TestSlideDown() { add(slideDown = new WebMarkupContainer(slideDown)); slideDown.add(new ReplaceWithEffectBehavior()); add(new AjaxLinkVoid(link) { /** * */ private static final long serialVersionUID = 1L; @Override public void onClick(AjaxRequestTarget target) { target.add(slideDown); } }); } } and !DOCTYPE html html xmlns:wicket=http://wicket.apache.org; head titleTest/title style type=text/css .Test { width: 200px; background: red; border: 1px solid black; } /style /head body div wicket:id=slideDown class=Test Test /div p a wicket:id=linkRepaint via AJAX/a /p /body /html Cheers, Ernesto On Thu, Feb 21, 2013 at 4:04 PM, Martin Grigorov mgrigo...@apache.org wrote: Hi, While fixing WICKET-5039 I've created an application that demonstrates how to replace a component with animation effect and blogged about it at http://wicketinaction.com/2013/02/replace-components-with-animation/ I hope you find it useful! -- Martin Grigorov jWeekend Training, Consulting, Development http://jWeekend.com http://jweekend.com/ -- Martin Grigorov jWeekend Training, Consulting, Development http://jWeekend.com http://jweekend.com/ -- Regards - Ernesto Reinaldo Barreiro Antilia Soft http://antiliasoft.com/ http://antiliasoft.com/antilia -- Martin Grigorov jWeekend Training, Consulting, Development http://jWeekend.com http://jweekend.com/
Re: [Blog] How to replace component with animation
Hi Martin, hi Ernesto, Yes, definitely... I never tried (and even thought about) this but I guess this is an important feature to have! Thank you very much, Ernesto! I look at the code in detail asap :) Best regards, Sebastien. On Fri, Feb 22, 2013 at 1:05 PM, Ernesto Reinaldo Barreiro reier...@gmail.com wrote: @Martin, Yes, maybe you are right... but as it does not require any wiquery-specific code I've thought releasing it independently might be the best. Probably the best thing to do is include it on wicket-stuff so that it gets released frequently. Mind that effects are interfaces so users could plug in their own extensions (i.e. jquery UI based effects, or their own extensions of basic effects). @Sebastien I would not mind if you decide to include this as part of Wicket-JQuery-UI. On Fri, Feb 22, 2013 at 12:53 PM, Martin Grigorov mgrigo...@apache.org wrote: Ernesto, Sebastien, Isn't that a good addition to WIquery/Wicket-JQuery-UI libraries ? JQuery UI provides many more effects. On Fri, Feb 22, 2013 at 1:18 PM, Ernesto Reinaldo Barreiro reier...@gmail.com wrote: Martin, I have made this code publicly available (with some minor improvements at like make effects pluggable) here https://github.com/reiern70/antilia-bits/blob/master/wicket-replace-with-effect/src/main/java/com/antilia/replacewitheffect/ReplaceWithEffectBehavior.java an example of how to use it can be found at https://github.com/reiern70/antilia-bits/blob/master/wicket-replace-with-effect/src/test/java/com/antilia/replacewitheffect/HomePage.java Cheers. Ernesto On Thu, Feb 21, 2013 at 8:31 PM, Martin Grigorov mgrigo...@apache.org wrote: Well done, Ernesto! On Thu, Feb 21, 2013 at 9:13 PM, Ernesto Reinaldo Barreiro reier...@gmail.com wrote: Martin, Thanks for sharing! Inspired by your article I came up with following behavior that will: 1-Make component appear when appear when page is loaded. 2-Have the same effect you describe on your Blog for AJAX request, import org.apache.wicket.Component; import org.apache.wicket.ajax.AjaxRequestTarget; import org.apache.wicket.behavior.Behavior; import org.apache.wicket.markup.ComponentTag; import org.apache.wicket.markup.head.IHeaderResponse; import org.apache.wicket.markup.head.OnDomReadyHeaderItem; /** * @author Ernesto Reinaldo Barreiro (reiern70) * */ public class ReplaceWithEffectBehavior extends Behavior { private static final long serialVersionUID = 1L; /** * Constructor. */ public ReplaceWithEffectBehavior() { } @Override public void bind(Component component) { component.setOutputMarkupId(true); } @Override public void onComponentTag(Component component, ComponentTag tag) { String style = tag.getAttribute(style); if(style == null || style.indexOf(display: none;) 0) { tag.append(style, display: none;, ;); } } @Override public void renderHead(Component component, IHeaderResponse response) { AjaxRequestTarget target = component.getRequestCycle().find(AjaxRequestTarget.class); if(target != null) { target.prependJavaScript(notify|if(jQuery('# + component.getMarkupId() + ').length != 0){jQuery('# + component.getMarkupId() + ').slideUp(1000, notify);}); target.appendJavaScript(jQuery('#+component.getMarkupId()+').slideDown(1000);); } else { response.render(OnDomReadyHeaderItem.forScript(jQuery('#+component.getMarkupId()+').slideDown(1000);)); } } } How to use it. public class TestSlideDown extends WebPage { private static final long serialVersionUID = 1L; private WebMarkupContainer slideDown; /** * */ public TestSlideDown() { add(slideDown = new WebMarkupContainer(slideDown)); slideDown.add(new ReplaceWithEffectBehavior()); add(new AjaxLinkVoid(link) { /** * */ private static final long serialVersionUID = 1L; @Override public void onClick(AjaxRequestTarget target) { target.add(slideDown); } }); } } and !DOCTYPE html html xmlns:wicket=http://wicket.apache.org; head titleTest/title style type=text/css .Test { width: 200px; background: red; border: 1px solid black; } /style /head body div wicket:id=slideDown class=Test Test /div p a wicket:id=linkRepaint via AJAX/a /p /body /html Cheers, Ernesto On Thu, Feb 21, 2013 at 4:04 PM, Martin Grigorov mgrigo...@apache.org wrote: Hi, While fixing WICKET-5039 I've
Re: [Blog] How to replace component with animation
Just for curiosity, have you considered also to do this using global AJAX listeners (using handlers for '/dom/node/removing' and '/dom/node/adding')? Hi, While fixing WICKET-5039 I've created an application that demonstrates how to replace a component with animation effect and blogged about it at http://wicketinaction.com/2013/02/replace-components-with-animation/ I hope you find it useful! - To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org For additional commands, e-mail: users-h...@wicket.apache.org
Re: [Blog] How to replace component with animation
Thanks Martin, I like it and I'm gonna use it ! François Meillet Formation Wicket - Développement Wicket Le 21 févr. 2013 à 18:50, Andrea Del Bene an.delb...@gmail.com a écrit : Just for curiosity, have you considered also to do this using global AJAX listeners (using handlers for '/dom/node/removing' and '/dom/node/adding')? Hi, While fixing WICKET-5039 I've created an application that demonstrates how to replace a component with animation effect and blogged about it at http://wicketinaction.com/2013/02/replace-components-with-animation/ I hope you find it useful! - To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org For additional commands, e-mail: users-h...@wicket.apache.org
Re: [Blog] How to replace component with animation
Hi Andrea, On Thu, Feb 21, 2013 at 7:50 PM, Andrea Del Bene an.delb...@gmail.comwrote: Just for curiosity, have you considered also to do this using global AJAX listeners (using handlers for '/dom/node/removing' and '/dom/node/adding')? It wont work with the global events. As I describe in the article the animation is executed in steps with setTimeout/requestAnimationFrame. This will release the current thread (in Java terms) and the component will be replaced before the animation is finished. Hi, While fixing WICKET-5039 I've created an application that demonstrates how to replace a component with animation effect and blogged about it at http://wicketinaction.com/**2013/02/replace-components-**with-animation/http://wicketinaction.com/2013/02/replace-components-with-animation/ I hope you find it useful! --**--**- To unsubscribe, e-mail: users-unsubscribe@wicket.**apache.orgusers-unsubscr...@wicket.apache.org For additional commands, e-mail: users-h...@wicket.apache.org -- Martin Grigorov jWeekend Training, Consulting, Development http://jWeekend.com http://jweekend.com/
Re: [Blog] How to replace component with animation
Well done, Ernesto! On Thu, Feb 21, 2013 at 9:13 PM, Ernesto Reinaldo Barreiro reier...@gmail.com wrote: Martin, Thanks for sharing! Inspired by your article I came up with following behavior that will: 1-Make component appear when appear when page is loaded. 2-Have the same effect you describe on your Blog for AJAX request, import org.apache.wicket.Component; import org.apache.wicket.ajax.AjaxRequestTarget; import org.apache.wicket.behavior.Behavior; import org.apache.wicket.markup.ComponentTag; import org.apache.wicket.markup.head.IHeaderResponse; import org.apache.wicket.markup.head.OnDomReadyHeaderItem; /** * @author Ernesto Reinaldo Barreiro (reiern70) * */ public class ReplaceWithEffectBehavior extends Behavior { private static final long serialVersionUID = 1L; /** * Constructor. */ public ReplaceWithEffectBehavior() { } @Override public void bind(Component component) { component.setOutputMarkupId(true); } @Override public void onComponentTag(Component component, ComponentTag tag) { String style = tag.getAttribute(style); if(style == null || style.indexOf(display: none;) 0) { tag.append(style, display: none;, ;); } } @Override public void renderHead(Component component, IHeaderResponse response) { AjaxRequestTarget target = component.getRequestCycle().find(AjaxRequestTarget.class); if(target != null) { target.prependJavaScript(notify|if(jQuery('# + component.getMarkupId() + ').length != 0){jQuery('# + component.getMarkupId() + ').slideUp(1000, notify);}); target.appendJavaScript(jQuery('#+component.getMarkupId()+').slideDown(1000);); } else { response.render(OnDomReadyHeaderItem.forScript(jQuery('#+component.getMarkupId()+').slideDown(1000);)); } } } How to use it. public class TestSlideDown extends WebPage { private static final long serialVersionUID = 1L; private WebMarkupContainer slideDown; /** * */ public TestSlideDown() { add(slideDown = new WebMarkupContainer(slideDown)); slideDown.add(new ReplaceWithEffectBehavior()); add(new AjaxLinkVoid(link) { /** * */ private static final long serialVersionUID = 1L; @Override public void onClick(AjaxRequestTarget target) { target.add(slideDown); } }); } } and !DOCTYPE html html xmlns:wicket=http://wicket.apache.org; head titleTest/title style type=text/css .Test { width: 200px; background: red; border: 1px solid black; } /style /head body div wicket:id=slideDown class=Test Test /div p a wicket:id=linkRepaint via AJAX/a /p /body /html Cheers, Ernesto On Thu, Feb 21, 2013 at 4:04 PM, Martin Grigorov mgrigo...@apache.org wrote: Hi, While fixing WICKET-5039 I've created an application that demonstrates how to replace a component with animation effect and blogged about it at http://wicketinaction.com/2013/02/replace-components-with-animation/ I hope you find it useful! -- Martin Grigorov jWeekend Training, Consulting, Development http://jWeekend.com http://jweekend.com/ -- Martin Grigorov jWeekend Training, Consulting, Development http://jWeekend.com http://jweekend.com/