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

PrimeFaces 5.0, Extensions 2.1.0, Push (Atmosphere 2.1.8)
TomEE 1.7.0 (Tomcat 7.0.55), MyFaces Core 2.2.4, JDK8
JUEL 2.2.6 | OmniFaces | EclipseLink-JPA/Derby | Chrome

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

Return to General