The ICEfaces Tutorial
Table of Contents


Lesson: Using the Effects component

How to Use the ICEfaces Effects Component

The Effects component provides a mechanism for dynamically generating required effects to certain components depending on how the user wants the content to appear. The Effects component has many effects associated with it. Some of which include:

The Effects component can be used in a variety of ways. The majority of the time effects are used to add additional asthetic 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.

The rest of this tutorial will discuss the following topics:

Creating a Highlight based on updates

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

First you need to set up your jsp page. For this example we used just a few simple input and output text components. You also need to make sure that partialSubmit is set to true on the form component.

	<ice:form partialSubmit="true">

Next you need to set the effect attribute to the backing bean on the text you want to highlight.

 <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.

Highlight Example

See the demo:

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, setup 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.

Blind Down Before
Blind Down After

See the demo:

Examples Using Panel Series

Example Source Notes
Component Showcase Available in release bundles Effects example
effects-basic effects-basic source code Simple example of how to setup effects component and backing bean.
effects-custom effects-custom source code Demonstration of how effects component can be used with panels.

The ICEfaces Tutorial
Table of Contents

Copyright 2006 ICEsoft Technologies Inc. All rights reserved.