How to Use ICEfaces Effects

ICEfaces effects provide a mechanism for dynamically generating effects on designated components. A few of the effects available:

• Highlight - provides a highlight over the desired item
• Move - moves the item to the desired co-ordinates
• Pulsate - causes the item to fade in and out
• Grow - enlarges the item
• Shrink - shrinks the item
• Scale - re-sizes the item to a specific size
• Puff - enlarges the item and fades out
• BlindDown - expands the item from the top down

Effects can be used in a variety of ways. The majority of the time effects are used to add additional aesthetic appeal such as expanding a panel when a button is clicked, or having a panel fade out after some information has been submitted. Sometimes, however, they are used to emphasize important data.

Creating a Highlight based on updates

The simplest example of Effects is to have a Highlight fire up once some information has been changed or submitted. In this example we will highlight the backing bean value for some input text. The text submitted via the inputText component will appear in a panel, and will be highlighted.

On the component we want to highlight, we will bind the effect attribute to the backing bean:

<ice:outputText value="#{basicEffects.text}" effect="#{basicEffects.effectOutputText}"/>

In the backing bean you need to set up an Effect parameter and set the effect to fire when the text is retrieved.

public class BasicEffects{

    private Highlight effectOutputText = new Highlight("#ffcc99");
    private String text;

    /** Returns the text effect
      * @return Effect EffectOutputText
      */
    public Effect getEffectOutputText() {

        return effectOutputText;
    }

    /**
      * Sets the output text effect
      * @param Effect effectOutputText
      */
    public void setEffectOutputText(Effect effectOutputText) {
        this.effectOutputText = (Highlight) effectOutputText;
    }

    public String getText() {
        effectOutputText = new Highlight("#FFCC99");
        effectOutputText.setFired(false);

        return text;
    }
    ...
    }

The following screenshot shows what the page looks like when the effect is fired.

Using an Effect with a panelGroup

In this advanced example, we will show how to use an Effect component with a panelGroup. Here we will be adding a blindDown effect to a panel in order to reveal it.

First, set up your panelGroup, then set the effect attribute of the panelGroup to the backingBean value, and set visible to false.

<ice:panelGroup styleClass="blindDownPanel" effect="#{customEffects.panelEffect}" visible="false">

Set the action attribute of your commandButton to the backing bean value.

<ice:panelGrid columns="2">
    <ice:panelGroup>
        <ice:outputText value="Click to reveal ICEfaces info" />
        <ice:commandButton value="Reveal" action="#{customEffects.fireEffect}"/>
    </ice:panelGroup>
    <ice:panelGroup styleClass="blindDownPanel" effect="#{customEffects.panelEffect}" visible="false">
        <ice:outputText value="ICEfaces"/><br/><br/>
        <ice:outputText value="ICEfaces is more than a rich component library..."/>
    </ice:panelGroup>
</ice:panelGrid>

Then set up your backing bean as follows.

public class CustomEffects {

    private Effect panelEffect;

    /** Creates a new instance of CustomEffects */
    public CustomEffects() {
    }

    public Effect getPanelEffect() {
        return panelEffect;
    }

    public void setPanelEffect(Effect panelEffect) {
        this.panelEffect = panelEffect;
    }

    public String fireEffect(){
        panelEffect = new BlindDown();
        return null;
    }
}

The following screenshots show what the page looks like before clicking reveal and after.

Tutorial Source Code Downloads