4 Replies Latest reply on Nov 16, 2011 5:28 AM by Fernando González

    Using effects for simpleTogglePanel collapse and expand

    Fuerikusu Daruke Newbie

      Hi,

      I'm trying to enhance the rich:simpleTogglePanel with some effects. What I want is the panel body (not the header) to blind down when expanded and to blind up when collapsed.

      This was my first try, and I think it aids understanding what I trying to achive:

      <rich:simpleTogglePanel switchType="client" label="Toggle Panel with effects">
       <rich:effect event="onexpand" type="BlindDown"/>
       <rich:effect event="oncollapse" type="BlindUp"/>
       If this text is shown with a nice blind down effect, it works.
      </rich:simpleTogglePanel>
      


      This does, sadly, not work - no effect at all. I have been fooling around with similar attempts for some days, including:
      <rich:simpleTogglePanel switchType="client" label="Toggle Panel with effects" onexpand="doExpand();">
      ...
      <rich:effect name="doExpand" for="myPanel" type="BlindDown"/>
      


      Does anybody know how I can do this? It doesn't have to be an elegant solution, I'm happy as long as I get the visuals right with this one. Any help is appreciated!

        • 1. Re: Using effects for simpleTogglePanel collapse and expand
          Fuerikusu Daruke Newbie

          I found a way, however, it's quite disturbing.

          This is how the above example would look my way:

          <a4j:outputPanel layout="block" styleClass="customTogglePanel">
           <h:panelGroup layout="block" id="pHeader" styleClass="customTogglePanelHeader">
           Toggle Panel with effects
           </h:panelGroup>
           <div id="pBody" class="customTogglePanelBody">
           If this text is shown with a nice blind down effect, it works.
           </div>
           <rich:jQuery selector="#pHeader" query="click(function(){jQuery('#pBody').slideToggle('slow')})"/>
          </a4j:outputPanel>
          


          For this to work, you need to load the following xcss file:
          <?xml version="1.0" encoding="UTF-8"?>
          <f:template xmlns:f="http://jsf.exadel.com/template"
           xmlns:u="http://jsf.exadel.com/template/util"
           xmlns="http://www.w3.org/1999/xhtml">
          
           <f:verbatim>
           <![CDATA[
           .customTogglePanel{
           border-width : 1px;
           border-style: solid;
           padding : 1px;
           background-position : top right;
           background-repeat : no-repeat;
           }
          
           .customTogglePanelHeader{
           border-width: 1px;
           border-style: solid;
           cursor: pointer;
           padding : 2px;
           background-position : top left;
           background-repeat : repeat-x;
           }
          
           .customTogglePanelBody{
           padding : 10px;
           text-align : left;
           vertical-align : top;
           overflow: auto;
           }
           ]]>
           </f:verbatim>
          
           <u:selector name=".customTogglePanel">
           <u:style name="background-color" skin="generalBackgroundColor" />
           <u:style name="border-color" skin="panelBorderColor" />
           </u:selector>
           <u:selector name=".customTogglePanelHeader">
           <u:style name="background-color" skin="headerBackgroundColor" />
           <u:style name="border-color" skin="headerBackgroundColor" />
           <u:style name="font-size" skin="headerSizeFont" />
           <u:style name="color" skin="headerTextColor" />
           <u:style name="font-weight" skin="headerWeightFont" />
           <u:style name="font-family" skin="headerFamilyFont" />
           <u:style name="background-image" >
           <f:resource f:key="org.richfaces.renderkit.html.GradientA"/>
           </u:style>
           </u:selector>
           <u:selector name=".customTogglePanelBody">
           <u:style name="background-color" skin="generalBackgroundColor" />
           <u:style name="font-size" skin="generalSizeFont" />
           <u:style name="color" skin="panelTextColor" />
           <u:style name="font-family" skin="generalFamilyFont" />
           </u:selector>
          </f:template>
          

          These are merely copied from the simpleTogglePanels CSS style classes, namely: dr-stglpnl, dr-stglpnl-h and dr-stglpnl-b from simpleTogglePanel.xcss. Using these classes directly did not work, so I had to copy them.

          If you would like to save the opened state or have the panel closed initially, use the following version:
          <a4j:outputPanel layout="block" styleClass="customTogglePanel">
           <h:panelGroup layout="block" id="pHeader" styleClass="customTogglePanelHeader">
           Toggle Panel with effects
           <a4j:support event="onclick" limitToList="true" action="#{someBean.toggleShown}"/>
           </h:panelGroup>
           <div id="pBody" class="customTogglePanelBody">
           If this text is shown with a nice blind down effect, it works.
           </div>
           <rich:jQuery selector="#pBody" query="hide()" rendered="#{!someBean.shown}"/>
           <rich:jQuery selector="#pHeader" query="click(function(){jQuery('#pBody').slideToggle('slow')})"/>
          </a4j:outputPanel>
          


          And create a bean like this:
          public class SomeBean {
          
           private boolean shown;
           public SomeBean() { this.shown = true; }
           public boolean isShown() { return this.shown; }
           public void toggleShown() { this.shown = !this.shown }
          
          }
          



          It's basically a huge hack to have something similar to a simpleTogglePanel. The marker on the right hand side is not shown, and I don't know how to show it. But in case someone wants to do what I did, this may help.

          Any better solution is of course appreciated :)

          • 2. Re: Using effects for simpleTogglePanel collapse and expand
            Fuerikusu Daruke Newbie

            One further note:
            If the effect is choppy for very small panels (like the one in my example), reduce the padding of .customTogglePanelBody.
            For some reason, the padding is not blinded down with effect, it just appears and then the rest of the box blinds down. It looks fine for bigger panels.
            Another problem is the fading time, I've set it all to the same speed (slow), that means: the bigger the panel, the faster the effect. For small panels, you might want to use "fast" instead.

            • 3. Re: Using effects for simpleTogglePanel collapse and expand
              Ilya Shaikovsky Master

              About our toggle component - no, it is not possible to use just rich:effect together with the simpletogglepanel. Because it already has toggle client side logic and opens/closes the panel immidiatelly.

              b.t.w you could vote for predefined events feature here

              http://www.jboss.org/community/docs/DOC-11862

              • 4. Re: Using effects for simpleTogglePanel collapse and expand
                Fernando González Newbie

                This seems to work.

                 

                <rich:togglePanel id="additionalInfo" switchType="ajax" stateOrder="closed,opened">
                
                    <f:facet name="closed">
                        <rich:toggleControl value="Open" switchToState="opened" />
                    </f:facet>
                
                    <f:facet name="opened">
                        <f:subview>
                            <rich:panel id="togglePanelContent" style="display:none">
                                <rich:effect name="showDiv" targetId="togglePanelContent" type="BlindDown" params="duration:0.8"/>
                                <script>
                                showDiv();
                                </script>
                                <h:outputText value="AAAAAAAAAAAAAAAAAAA" />
                            </rich:panel>
                            <rich:toggleControl requestDelay="1000">
                                <h:outputText id="toggleClose" value="Close">
                                    <rich:effect event="onclick" for="toggleClose" targetId="togglePanelContent" type="Fold" params="duration:0.8"/>
                                </h:outputText>
                            </rich:toggleControl>
                        </f:subview>
                    </f:facet>
                </rich:togglePanel>