7 Replies Latest reply on Feb 4, 2010 1:15 AM by Tim Evers

    rich:effect on events

    Harshal Nagpure Newbie

      Hi All,

         i am new to the richfaces technology and got stuck up in some situation. In our project there are several panels distributed on the single page. On the input selected in one panel, the appearance of other panels are dependent. Like for ex. if i am selecting the radio button labeled "Private" in first panel, i must show other panel below that with required inputs. if selecting other radio button, then the relevant panels should appear.

       

           I tried with the <rich:effect> tag, but it worked for me on the the specific event of that panel (which i need to show/hide). But the show/hide is depend on the even fired from outside. I tried with the javascrip part mentioned in live demo of richfaces. but that also works with single panels and not for the multiple ones.

       

           My requirement is, i can fire any event to backing bean and from there i must be able to control the effects and show/hide of multiple panels on the page.

       

      Would it be possible for us to do with the help of RichFaces?

       

      Thanks in advance. Waiting for you comments and replies.

        • 1. Re: rich:effect on events
          Ilya Shaikovsky Master
          sorry. posted to wrong thread. will update with the right answer
          • 2. Re: rich:effect on events
            Harshal Nagpure Newbie

            Hi Ilya,

               thanks for your comments. But do you got anything for update. Is there any way we could do that?

             

            I tried invoking the effects on different buttons, but when i want to invoke them based on the <selectOneRadio> input then how could i do that?

             

            Thanks in advance.

            • 3. Re: rich:effect on events
              Tim Evers Master

              Well, there is a very simple way to do this really.

               

              In your backing bean have a boolean variable that controls the visibility of each panel.

               

              Then when a raidio button is selected use an event handler or do an ajax post or whatever method you choose to send post to the server. In the method that you invoke check the value of the radio button and then set the appropriate boolean values to true.

               

              So then all you need is for your panels to have their rendered attribute set to their corresponding boolean variable in your backing bean.

               

              Something like this.. NOTE THIS IS NOT TESTED. This is just the general idea.

               

              xhtml file

              <h:selectOneRadio value="#{BackingBean.radioValue}">
                   <a4j:support
                        action="#{BackingBean.updatePanelVisibility}"
                        event="onclick"
                        rerender="mainPanel (whatever your top level component is that has all these panels in it)"
                        ajaxSingle="true" I think you can use this but maybe not :S />
                   <f:selectItem
                        id="a"
                        itemLabel="A"
                        itemValue="A" />
              </h:selectOneRadio>
              <h:panelGrid
                   id="APanel"
                   rendered="#{BackingBean.panelAVisible}">
              
                   <h:inputText id="aInput" value="..." />
              
              </h:panelGrid>
              
              

               

              java file

              private Boolean panelAVisible = Boolean.False;
              private String radioValue = null;
              
              public Boolean getPanalAVisible() {
                   return this.panelAVisible;
              }
              
              public void setPanelAVisible(boolean visible) {
                   this.panelAVisibile = visible;
              }
              
              public String getRadioValue() {
                   return this.radioValue;
              }
              
              public void setRadioValue(String value) {
                   this.radioValue = value;
              }
              
              public void updatePanelVisibility() {
                   //Set all panels to visible = false here
                   if (null != radioValue) {
                        if (radioValue.equals("A")) {
                             panelAVisible = true;
                        }
                   }
              }

               

               

              Anyways, something like that

               

              There is probably a client side way of doing this as well but I haven't done that. But take a look at the "<rich:componentControl>" tag.

              • 4. Re: rich:effect on events
                Harshal Nagpure Newbie

                Hi Tim

                   Thanks a lot for your answer, and the solution you provided works perfectly fine. Infact this is what i did as a work around.

                I said workaround becaues, that is a hide and show of panel, but i want to make the hiding and showing with some effects provided by RichFaces,

                Like BlindUp, BlindDown, Highlight etc.

                 

                Would it be possible for us, to give that effect from backing bean? i know HtmlEffect class will be used for that, but i didnt yet get the actual use of this class. Your help is really appreciated.

                 

                Anyways, really very thanks for your reply and comments.

                 

                Thanks

                 

                Harshal

                • 5. Re: rich:effect on events
                  Tim Evers Master

                  OK, I'm looking at a possible solution for you so that you can use the rich:effect to hide/show your panels but, before I go ahead and post the code (well, as best as I can off the top of my head ) I just want to get an idea of how many panels we are talking about here.

                   

                  My initial solution doesn't 'scale' very well but would be fine for 3-5 panels max.

                  So... how scalable does this have to be?

                  • 6. Re: rich:effect on events
                    Harshal Nagpure Newbie

                    Hi Tim,

                         Thats really a good question, you can consider max 2 or 3 panels for giving effect on a single event.

                    But i do still think that (may be stupid ), if we are able to manage a effect on a single panel then we can do the same of N number of panels, so the count should not matter.

                     

                        Please let me know if you have any further question. And thanks for your quick responses.

                     

                    Best Regards !!

                    Harshal

                    • 7. Re: rich:effect on events
                      Tim Evers Master

                      Alrighty, here's my attempt at what you want to do.

                       

                      This is a simple test page that has 3 radio buttons and 3 panels. The panels are hidden or shown based on the radio button selection using the rich:effect tag. All of this happens on the client side. There are no round trips to the server.

                       

                      IMPORTANT TO NOTE:

                      1. For some reason I can't get the panels to hide on the initial page load at the moment. I may or may not have time to figure this out, but take a look and see if you can get that working. Shouldn't be too hard. (OK, I fixed this.... helps if you move that bit of javascript to the bottom of the page... gee what a silly mistake!)

                       

                      2. There is a tight coupeling between the itemValue attribute of each of the radio selectItems and their corresponding panel.

                       

                      I hope this helps

                       

                      <?xml version="1.0" encoding="UTF-8"?>
                      <ui:composition
                          xmlns="http://www.w3.org/1999/xhtml"
                          xmlns:s="http://jboss.com/products/seam/taglib"
                          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:rich="http://richfaces.org/rich"
                          xmlns:a4j="https://ajax4jsf.dev.java.net/ajax">
                          
                          <h:form id="testForm">
                              <script>
                                  function showHidePanels() {
                                      //Find the value of the selected radio button (item1, item2, ... etc)
                                      var selection = jQuery("input[name$='radioSelection'][checked='true']").attr("value");
                      
                                      //Work out the id of the panel that should be opened.
                                      var openPanelId = selection + "SpecialPanelGrid";
                                      var openPanelClientId = null;
                                      if (null != openPanelId) {
                                           openPanelClientId = jQuery("table[id$='"+openPanelId+"']").attr("id");
                                      }
                      
                                      //Hide all the other panels
                                      jQuery("table[id$='SpecialPanelGrid']")
                                              .each(
                                                      function() {
                                                          var currentPanelId = jQuery(this).attr("id");
                                                          if (currentPanelId != openPanelClientId) {
                                                              hidePanel({targetId:currentPanelId});
                                                          }
                                                      });
                      
                                      //Open the right panel
                                      if (null != openPanelClientId) {
                                          showPanel({targetId:openPanelClientId});
                                      }                                
                                  }
                              </script>
                              <h:panelGrid
                                  id="radioPanel" 
                                  columns="1"
                                  onclick="showHidePanels();">
                                  <h:selectOneRadio
                                      id="radioSelection" 
                                      value="">
                                      <f:selectItem 
                                          id="item1"
                                          itemValue="item1"
                                          itemLabel="Item 1"/>
                                      <f:selectItem 
                                          id="item2"
                                          itemValue="item2"
                                          itemLabel="Item 2"/>
                                      <f:selectItem 
                                          id="item3"
                                          itemValue="item3"
                                          itemLabel="Item 3"/>
                                  </h:selectOneRadio>
                              </h:panelGrid>
                      
                              <h:panelGrid 
                                  id="item1SpecialPanelGrid" 
                                  columns="1"
                                  style="border:thin;">
                                  <h:outputText value="Panel Grid 1"/>
                              </h:panelGrid>
                              <h:panelGrid 
                                  id="item2SpecialPanelGrid" 
                                  columns="1"
                                  style="border:thin;">
                                  <h:outputText value="Panel Grid 2"/>
                              </h:panelGrid>
                              <h:panelGrid 
                                  id="item3SpecialPanelGrid" 
                                  columns="1"
                                  style="border:thin;">
                                  <h:outputText value="Panel Grid 3"/>
                              </h:panelGrid>
                              <rich:effect name="hidePanel" for="item1SpecialPanelGrid" type="Fade"/>
                              <rich:effect name="showPanel" for="item1SpecialPanelGrid" type="Appear"/>
                      
                              <script>
                                  showHidePanels();
                              </script>
                              
                          </h:form>
                          
                      </ui:composition>
                      

                       

                       

                      Maybe someone can tell my why the panels aren't hidden on page load (Actually, just pretend I never asked this )

                       

                      Cheers,

                      Tim