org.wicketstuff.jwicket.ui.effect

Class AbstractJqueryUiEffect

java.lang.Object

org.apache.wicket.behavior.Behavior

org.wicketstuff.jwicket.JQueryHeaderContributor

org.wicketstuff.jwicket.ui.effect.AbstractJqueryUiEffect

All Implemented Interfaces:

Serializable, org.apache.wicket.IComponentAwareEventSink, org.apache.wicket.markup.html.IComponentAwareHeaderContributor, org.apache.wicket.util.io.IClusterable

Direct Known Subclasses:

Blind, Bounce, Clip, Drop, Explode, Fold, Highlight, Puff, Pulsate, Scale, Shake, Slide, Transfer

public abstract class AbstractJqueryUiEffect
extends JQueryHeaderContributor

This is the base class for all jQuery UI effects. The general usage is

 Panel myPanel = new Panel("myPanel");
 EffectExplode explode = new EffectExplode(); // create effect
 explode.setSpeed(1000); // set options
 explode.setPieces(3);
 add(explode); // add effect to page just for header contribution
 explode.fire(target, myPanel); // execute effect on component
 

It is not possible to fire multiple effects just by calling fire multiple times like this:

 Panel myPanel = new Panel("myPanel");
 EffectExplode explode = new EffectExplode(); // create effect
 explode.setSpeed(1000); // set options
 explode.setPieces(3);
 add(explode); // add effect to page just for header contribution
 explode.fire(target, myPanel); // execute effect on component

 EffectBlind blind = new EffectBlind(); // create next effect
 add(blind); // add effect to page just for header contribution
 blind.fire(target, myPanel); // execute next effect on comonent
 

This will lead to surprising results because jQuery does not wait for completion of the explode effect before starting the blind effect. Instead you must build a chain of post effects for a main effect like this:

 Panel myPanel = new Panel("myPanel");
 EffectExplode explode = new EffectExplode(); // create effect
 explode.setSpeed(1000); // set options
 explode.setPieces(3);
 add(explode); // add effect to page just for header contribution

 List postEffects = new ArrayList();

 EffectBlind blind = new EffectBlind(); // create first post effect
 add(blind); // add effect to page just for header contribution
 postEffects.add(blind); // add effect to chain of post effects

 EffectBounce bounce = new EffectBounce(); // create next post effect
 add(bounce); // add effect to page just for header contribution
 postEffects.add(bounce); // add effect to chain of post effects

 explode.fire(target, postEffects, myPanel); // execute main effect and post effects on component 
 

It is important to add the effects during Page/Panel creation to ensure that the needed js libraries are added to header.

Correct:

final EffectBlind blind = new EffectBlind(); // create first post effect
add(blind); // add effect to page just for header contribution
add(new AjaxLink("id") {
       @Override
       public void onClick(AjaxRequestTarget target) {
          blind.fire(target, component); // fire effect
       }
    }
);

Wrong:

add(new AjaxLink("id") {
       @Override
       public void onClick(AjaxRequestTarget target) {
          final EffectBlind blind = new EffectBlind(); // create first post effect
          add(blind); // add effect to page just for header contribution
          blind.fire(target, component); // fire effect
       }
    }
);

See Also:

Serialized Form

Field Summary

Fields

Modifier and Type	Field and Description
protected String	effectClass
protected String	fadeInAfter
static JQueryResourceReference	jQueryUiEffectsCoreJs
protected boolean	restoreStyleAfterEffect
protected String	speed

Fields inherited from class org.wicketstuff.jwicket.JQueryHeaderContributor

jQueryCoreJs

Constructor Summary

Constructors

Constructor and Description
AbstractJqueryUiEffect(JQueryResourceReference... requiredLibraries)

Method Summary

Methods

Modifier and Type	Method and Description
void	fire(org.apache.wicket.ajax.AjaxRequestTarget target, AbstractJqueryUiEffect postEffect, org.apache.wicket.Component... components) Let's go! Execute the effect for a bunch of components and after the effect was completed execute another effect for all components
void	fire(org.apache.wicket.ajax.AjaxRequestTarget target, org.apache.wicket.Component... components) Let's go! Execute the effect for a bunch of components
void	fire(org.apache.wicket.ajax.AjaxRequestTarget target, List<AbstractJqueryUiEffect> postEffects, org.apache.wicket.Component... components) Let's go! Execute the effect for a bunch of components and after the effect was completed execute some other effects for all components
String	getEffectClass()
void	setEffectClass(String value) jQuery applies a specific CSS class during effect processing; e.g.
AbstractJqueryUiEffect	setFadeInAfter(int speed) After the execution of an effect, the affected element sometimes is no more visible.
AbstractJqueryUiEffect	setFadeInAfter(JQuerySpeed speed)
AbstractJqueryUiEffect	setRestoreStyleAfterEffect(boolean value) Some effects leave the effected component in a mixed up styling.
AbstractJqueryUiEffect	setSpeed(int ms) The effect speed may also be specified in milliseconds
AbstractJqueryUiEffect	setSpeed(JQuerySpeed value) A common parameter for all effects is the speed.

Methods inherited from class org.wicketstuff.jwicket.JQueryHeaderContributor

addJavascriptReference, addUserProvidedResourceReferences, getUserProvidedResourceReferences, renderHead

Methods inherited from class org.apache.wicket.behavior.Behavior

afterRender, beforeRender, bind, canCallListenerInterface, detach, getStatelessHint, isEnabled, isTemporary, onComponentTag, onConfigure, onEvent, onException, onRemove, unbind

Methods inherited from class java.lang.Object

clone, equals, finalize, getClass, hashCode, notify, notifyAll, toString, wait, wait, wait

Field Detail

jQueryUiEffectsCoreJs

public static final JQueryResourceReference jQueryUiEffectsCoreJs

restoreStyleAfterEffect

protected boolean restoreStyleAfterEffect

speed

protected String speed

effectClass

protected String effectClass

fadeInAfter

protected String fadeInAfter

Constructor Detail

AbstractJqueryUiEffect

public AbstractJqueryUiEffect(JQueryResourceReference... requiredLibraries)

Method Detail

setRestoreStyleAfterEffect

public AbstractJqueryUiEffect setRestoreStyleAfterEffect(boolean value)

Some effects leave the effected component in a mixed up styling. To avoid this, the current style of the component is preserved and restored after the effect was shown. By default the preservation is active. Call this method with false as parameter value to turn it off.

Parameters:

value - switch the preservation on or off.

Returns:

This effect

setSpeed

public AbstractJqueryUiEffect setSpeed(JQuerySpeed value)

A common parameter for all effects is the speed. You may control the speed in predefined JQuerySpeed steps with this method

Parameters:

value - the desired speed or null to reset the speed to the default value.

setSpeed

public AbstractJqueryUiEffect setSpeed(int ms)

The effect speed may also be specified in milliseconds

Parameters:

the - speed in milliseconds or a value <= 0 to reset the speed to the default value.

setEffectClass

public void setEffectClass(String value)

jQuery applies a specific CSS class during effect processing; e.g. "ui-effects-explode" for Explode. This is done by surrounding the original component by a <div> tag. The component keeps it's CSS class. This method defines a CSS class that replaces the compontnt's CSS class during effect. The surrounding <div> tag and it's effect specific class is not touched by this setting. It applies only to the component.

Parameters:

value - the CSS class or null to reset to the default CSS class.

getEffectClass

public String getEffectClass()

setFadeInAfter

public AbstractJqueryUiEffect setFadeInAfter(int speed)

After the execution of an effect, the affected element sometimes is no more visible. This may be in result of the effect mode (e.g. EffectMode.HIDE or the effect itself {@link Explode) ore some other circumstances. By setting the fade in property, the original element is faded in after the effect.

Parameters:

value - the speed for the fadeIn action.

setFadeInAfter

public AbstractJqueryUiEffect setFadeInAfter(JQuerySpeed speed)

fire

public void fire(org.apache.wicket.ajax.AjaxRequestTarget target,
        org.apache.wicket.Component... components)

Let's go! Execute the effect for a bunch of components

Parameters:

target -

components - fire the effect on this component

fire

public void fire(org.apache.wicket.ajax.AjaxRequestTarget target,
        AbstractJqueryUiEffect postEffect,
        org.apache.wicket.Component... components)

Let's go! Execute the effect for a bunch of components and after the effect was completed execute another effect for all components

Parameters:

target -

postEffect - this effect is executed after completion of this effect

components - fire the effect on this component

fire

public void fire(org.apache.wicket.ajax.AjaxRequestTarget target,
        List<AbstractJqueryUiEffect> postEffects,
        org.apache.wicket.Component... components)

Let's go! Execute the effect for a bunch of components and after the effect was completed execute some other effects for all components

Parameters:

target -

postEffects - these effects are executed after completion of this effect

components - fire the effect on this component