1 Reply Latest reply on Dec 18, 2008 5:26 AM by ilya_shaikovsky

    Help regarding rich:effect

    topwhiz

      Hello Everyone,

      I am a newbie to RichFaces.
      I have small problem hope some one can help me out with this.

      What I am trying to do is to display one of the 2 available rich:panels.

      Please find my code below:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
      <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:a4j="http://richfaces.org/a4j"
       xmlns:rich="http://richfaces.org/rich">
      
       <head>
       <style>
       .box{ width:300px; height: 100px;}
       </style>
       </head>
       <body>
       <f:view>
       <h:form>
       <h:outputLink value="#" id="link1">
       Link1
       <rich:effect event="onclick" type="BlindUp" targetId="foldbox2"/>
       <rich:effect event="onclick" type="Appear" targetId="foldbox1"/>
       </h:outputLink>
       <br />
       <h:outputLink value="#" id="link2" >
       Link2
       <rich:effect event="onclick" type="BlindUp" targetId="foldbox1"/>
       <rich:effect event="onclick" type="Appear" targetId="foldbox2"/>
       </h:outputLink>
       </h:form>
      
       <rich:panel id="foldbox1" styleClass="box" style="display:none">
       <f:facet name="header">Fold Effect1</f:facet>
       Panel 1
       </rich:panel>
      
       <rich:panel id="foldbox2" styleClass="box" style="display:none">
       <f:facet name="header">Fold Effect2</f:facet>
       Panel 2
       </rich:panel>
       </f:view>
      </body>
      </html>
      


      What I intended in doing using above code is to display one of the 2 panels.

      When Link1 is clicked it should show only the Panel 1 and similarly when Link2 is clicked only the Panel 2 must be displayed.

      But when i run the code it shows Panel 1 when Link1 is clicked, but when Link2 is clicked Panel 1 stays there and Panel 2 is displayed.

      Please help me in this regard.

      I am using JSF 1.2, Facelets 1.1.11 and RichFaces 3.2.2 GA

      Thank you all in advance

      TopWhiz

        • 1. Re: Help regarding rich:effect
          ilya_shaikovsky

           

           <h:form>
           <h:outputLink value="#" id="link1">
           Link1
           <rich:effect for="link1" event="onclick" type="Fade" targetId="foldbox2"/>
           <rich:effect for="link1" event="onclick" type="Appear" targetId="foldbox1"/>
           </h:outputLink>
           <br />
           <h:outputLink value="#" id="link2" >
           Link2
           <rich:effect for="link2" event="onclick" type="Fade" targetId="foldbox1"/>
           <rich:effect for="link2" event="onclick" type="Appear" targetId="foldbox2"/>
           </h:outputLink>
           </h:form>
          
           <rich:panel id="foldbox1" styleClass="box" style="display:none">
           <f:facet name="header">Fold Effect1</f:facet>
           Panel 1
           </rich:panel>
          
           <rich:panel id="foldbox2" styleClass="box" style="display:none">
           <f:facet name="header">Fold Effect2</f:facet>
           Panel 2
           </rich:panel>
          


          works for me. You have to specify for attribute if using more than one effect for the component. Also play with params(e.g. duration, delay) in order to show the panel only after the first one gets hidden