Well done, Ernesto!
On Thu, Feb 21, 2013 at 9:13 PM, Ernesto Reinaldo Barreiro < [email protected]> 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 AjaxLink<Void>("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> > <title>Test</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="link">Repaint via AJAX</a> > </p> > </body> > </html> > > Cheers, > > Ernesto > > On Thu, Feb 21, 2013 at 4:04 PM, Martin Grigorov <[email protected] > >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/>
