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: 16
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: 5701
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 4.0.x, Extensions 1.2.1, Push (Atmosphere 2.1.3)
TomEE 1.6.1 (Tomcat 7.0.53), MyFaces Core 2.2.2
JUEL 2.2.6 | OmniFaces | EclipseLink-JPA/Derby | Chrome

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


Return to General