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