Fun with icefaces effects

This tutorial will walk you though some of the fun things you can do with effects.
You will need an App server, Ant and Icefaces-bin-1.5.1 for this tutorial.

1. Make a copy of the icefaces\samples\tutorial\effects1 folder and rename it funwitheffects (Keep it in the icefaces\samples\tutorial folder).

2. Open up the build.xml file. Change


<project name="effects1" default="build.war">

To

<project name="funwitheffects" default="build.war">

3. Open web/effect.jsp delete everything in the body tags.Creating a sliding div
4. Add the following code to the body.

<ice:form>
<ice:commandbutton value="#{effectBean.buttonValue}" actionlistener="#{effectBean.buttonPressed}"></ice:commandbutton>
<ice:panelgroup style="border: 1px solid black; width: 200px; height: 200px" visible="#{effectBean.visible}" effect="#{effectBean.effect}">
<ice:outputtext value="Hello"></ice:outputtext>
</ice:panelgroup>
</ice:form>

5. open com.icesoft.tutorial.EffectBean


import com.icesoft.faces.context.effects.*;

import javax.faces.event.ActionEvent;

public class EffectBean {

private Effect effect = null;
private boolean visible = false;
private String[] buttonValues = new String[]{
“Slide Down”,
“Slide Up”
};
private String buttonValue = buttonValues[0];

public Effect getEffect() {
return effect;
}

public void setEffect(Effect effect) {
this.effect = effect;
}

public boolean isVisible() {
return visible;
}

public void setVisible(boolean visible) {
this.visible = visible;
}

public String getButtonValue() {
return this.buttonValue;
}

public void setButtonValue(String buttonValue) {
this.buttonValue = buttonValue;
}

public void buttonPressed(ActionEvent e){
if(visible){
effect = new SlideUp();
buttonValue = buttonValues[0];
}else{
effect = new SlideDown();
buttonValue = buttonValues[1];
}
effect.setTransitory(false);
effect.setSubmit(true);
}
}
6. Run ant and copy the funwitheffects.war to your app server

7. open http://localhost:8080/funwitheffects For tomcat

Clicking on the button will slide the panel down and change the text of the button. Clicking again will slide the panel back up.

The code

effect.setTransitory(false);
effect.setSubmit(true);

Sets the effect to inform the server when the effect is complete, and changes the visible value. You can also slide down the panel and then click refresh, and the panel will still be in the visible state.

(Check out my custom JSF components. Compatible with ICEFaces. http://snappy.sensemaker.net

This entry was posted in Icefaces. Bookmark the permalink.

2 Responses to Fun with icefaces effects

  1. Rob says:

    Testing comment

  2. Tshadi says:

    Hi Rob,

    thanks for the great example, really helped me out. I have been struggling to start the form with the panel hidden then slide it out by pressing the button.

    please help me.

Leave a Reply

Your email address will not be published. Required fields are marked *