Adding and Customizing Effects

This tutorial demonstrates how to add and customize effects in ICEfaces applications. Use the effects1 project located in your ICEfaces tutorial directory.

For more information about building and deploying your project, refer to the tutorials in Chapter 4 of the ICEfaces Getting Started Guide.

Creating a Simple Effect

1. Open the effects1/web/effect.jsp and add the following code:

<ice:form>
 
  <ice:commandButton value="Invoke" action="#{effectBean.invokeEffect}"/>
 
  <ice:outputText value="Effect Test" effect="#{effectBean.textEffect}"/>
 
</ice:form>
 

2. In the EffectBean, add the following code:

private Effect textEffect;
 
        
 
    public Effect getTextEffect(){
 
        return textEffect;
 
    }
 
    
 
    public void setTextEffect(Effect effect){
 
        textEffect = effect;
 
    }
 
    
 
    public String invokeEffect(){
 
        textEffect = new Highlight();
 
        return null;
 
    }
 

3. Build and deploy the application. Open your browser to:

http://localhost:8080/effects1
 

4. Click the command button.

The Output Text will be highlighted in yellow and then return to its original color.

Modifying the Effect

The following effects can be used in your ICEfaces application:

Effect	Description
scaleContent	Scale content.
puff	Grow and fade an element.
blindup	Remove an element by rolling it up.
blinddown	Show an element by rolling it down.
switchoff	Flash and then fold the element, removing it from the display.
dropout	Move the element down and fade, removing it from the display.
shake	Shake an element from left to right.
slidedown	Slide an element down from the top.
slideup	Slide an element up to the top, removing it from the display.
squish	Squish an element off the display.
grow	Grow an element from hidden to its normal size.
shrink	Shrink an element off the display.
fold	Fold an element into smaller pieces, until it is removed from the display.
appear	Fade in an element from hidden to visible
fade	Fade out an element from visible to hidden
highlight	Highlight an element in a specified color, then fade to the background color
pulsate	Flash an element
move	Move an element to a new location

The following steps demonstrate how you can modify several different effects.

1. In the EffectBean, add a Boolean flag, and then toggle the color from yellow to red on each click of the command button.

private boolean flag;
 
   public String invokeEffect(){
 
        if(flag){
 
            textEffect = new Highlight("#FF0000");
 
        }else{
 
            textEffect = new Highlight("#FFFF00");
 
        }
 
        flag = !flag;
 
        return null;
 
    }   
 

2. Build and deploy the application. Open your browser to:

http://localhost:8080/effects1
 

Now each time the effect is clicked, the highlight color switches between yellow and red.

Note: Each effect is fired once per instance. Each time you want to fire an effect, it must be with a new effect instance object or you can set the fired flag to false.
For example, Effect.setFired(false);

3. To change the action handler to switch from pulsate to highlight.

public String invokeEffect(){
 
        if(flag){
 
            textEffect = new Highlight();
 
        }else{
 
            textEffect = new Pulsate();
 
        }
 
        flag = !flag;
 
        return null;
 
    }
 

4. Build and deploy the application. Open your browser to:

http://localhost:8080/effects1
 

5. Effects can also be invoked locally. Change the effect attribute from effect to onmouseovereffect.

<ice:outputText value="Effect Test" 
onmouseovereffect="#{effectBean.textEffect}"/>
 

6. Build and deploy the application. Open your browser to:

http://localhost:8080/effects1
 

7. Click the invoke button and then move the mouse over the text. The text will highlight immediately.

8. Click the invoke button again to change the local effect. Now when the mouse moves over the text, it will pulsate.

Copyright 2005-2009. ICEsoft Technologies, Inc.