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 id="panel2" header="Panel Two" rendered="#{!someBean.someCondition}">
                                                    <!-- Panel Content Skip -->
                   <p:commandButton id="toggleButton" value="Click me.." actionListener="#{someBean.togglePanel}" update="parentPanel"/>

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: 6144
In my app, I use PrimeFaces Extensions Spotlight(click URL and look at the source code that is provided on that showcase page).

PrimeFaces 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

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

Return to General