Re: [Blog] How to replace component with animation

2013-02-22 Thread Martin Grigorov
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

2013-02-22 Thread Sebastien
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

2013-02-21 Thread Andrea Del Bene
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

2013-02-21 Thread Francois Meillet
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

2013-02-21 Thread Martin Grigorov
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

2013-02-21 Thread Martin Grigorov
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/