Board index JavaServer Faces General How to toggle two p:panels with effects

How to toggle two p:panels with effects

Components, Ajax Framework, Utilities and More.


Posts: 11
Hi all

Assuming I have the following two Panels under a Parent Panels, as show in code below

 <p:panel id="parentPanel" header="Parent Parent">
                   <p:panel id="panel1" header="Panel One" rendered="#{someBean.someCondition}">
                                                    <!-- Panel Content Skip -->
                   </p:panel>
                    <p:panel id="panel2" header="Panel Two" rendered="#{!someBean.someCondition}">
                                                    <!-- Panel Content Skip -->
                   </p:panel>
                   <p:commandButton id="toggleButton" value="Click me.." actionListener="#{someBean.togglePanel}" update="parentPanel"/>
</p:panel>         


The toggleButton will toggle someBean.someCondition (ie from true to false, or from false to true), the code above work fine, however I wonder what is the best way to add some effects when toggle happen, for example panel 1 will explode, and panel two will drop in..

Any suggestion?

Thanks in Advance


Posts: 21
I am recently also doing some studies on a UI toggle button and UI panel control. This question bring me back to Prime, an innovative ask and I am also eager to get the exact answers.


Posts: 5935
In my app, I use PrimeFaces Extensions Spotlight(click URL and look at the source code that is provided on that showcase page).
Howard

PrimeFaces 5.1, Extensions 2.1.0, Push (Atmosphere 2.2.3)
TomEE+ 1.7.1 (Tomcat 7.0.55), MyFaces Core 2.2.5, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache


Return to General