How to toggle two p:panels with effects

Components, Ajax Framework, Utilities and More.
Post Reply
Posts: 11
Joined: 24 Aug 2010, 04:53

03 Sep 2010, 03:56

Hi all

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

Code: Select all

 <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
Joined: 18 Nov 2013, 06:28

03 Apr 2014, 04:40

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
Joined: 10 Sep 2011, 21:10

03 Apr 2014, 06:28

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

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 16 guests