-
1. Re: Using effects for simpleTogglePanel collapse and expand
futlib Nov 28, 2008 4:13 AM (in response to futlib)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
futlib Nov 28, 2008 4:19 AM (in response to futlib)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 Nov 28, 2008 5:43 AM (in response to futlib)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.gonzalez Nov 16, 2011 5:28 AM (in response to ilya_shaikovsky)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>