Solved

How to toggle two p:panels

Posted on 2014-04-01
3
224 Views
Last Modified: 2014-04-08
OK, In the folllowing example, at the start of the page, I want  to show the first panel (named topPanel. Then when the user clicks the link in that panel, there's a set of calculations done
and toggles the panels. So when the second rendering happens I want to show the "linkPanel" instead of the "topPanel".

<ui:composition>
 <p:panel id="topPanel"
  <table   class="table">
   <tbody>
     <tr>
      <td >
       <p:commandLink value="display Panel Data" actionListener="#{dataManater.goToDisplay()}" />
      </td>
     </tr>
   </tbody>
  </table>
 </p:panel>


 <p:panel id="linkPanel">
  <table role="region" aria-label="Key Services Portlet" class="table">
   <tbody>
     <tr>
      <td >
        <p:commandLink value="#{dataManater.aDataItem1}" update="linkPanel" actionListener="#{dataManater.goToClickedLink1()}"/>
       </td>
     </tr>
     <tr>
      <td >
        <p:commandLink value="#{dataManater.aDataItem2}" update="linkPanel" actionListener="#{dataManater.goToClickedLink2()}"/>
      </td>
     </tr>
     <tr>
      <td >
        <p:commandLink value="#{dataManater.aDataItem3}" update="linkPanel" actionListener="#{dataManater.goToClickedLink3()}"/>
       </td>
     </tr>
     <tr>
      <td >
        <p:commandLink value="more" update="linkPanel" actionListener="#{ dataManater.goToClickedMore()}"/>
      </td>
     </tr>
  </tbody>
 </table>
 </p:panel>
</ui:composition>


And here is the bean:
@ManagedBean(name="DataManager")
@SessionScoped
public class DataManager  {

      private List<String> list;
      private String aDataItem1 = "Employment Opportunity 1";
      private String aDataItem2 = "Employment Opportunity 2";
      private String aDataItem3 = "Employment Opportunity 3";
 
 
      public  DataManager()  {
             
               
      }


        public void displayPanel()
        {
      }

 
      
      public String getaDataItem1()
      {
            return aDataItem1;
      }
      
      public void setaDataItem1(String aValue)
      {
             
            aDataItem1 = aValue;
      }
      
      public String getaDataItem2()
      {
            return aDataItem2;
      }
      
      public void setaDataItem2(String aValue)
      {
             
            aDataItem2 = aValue;
      }
      
      public String getaDataItem3()
      {
            return aDataItem3;
      }
      
      public void setaDataItem3(String aValue)
      {
             
            aDataItem3 = aValue;
      }
      
      
      
      public void goToClickedLink1()
      {
            System.out.println("Clicked goToClickedLink1");
             
      }
      
      
      public void goToClickedLink2()
      {
            System.out.println("Clicked goToClickedLink2");
             
      }
      
      public void goToClickedLink3()
      {
            System.out.println("Clicked goToClickedLink3");
             
      }
      
      public void goToClickedMore()
      {
            System.out.println("Clicked goToClickedMore");
             
      }
}  


What code should I do (do not worry about calculation part) to toggle the panel to linkPanel.
0
Comment
Question by:prain
  • 2
3 Comments
 
LVL 35

Accepted Solution

by:
mccarl earned 300 total points
Comment Utility
I'm guessing one way of doing this would be to add "visible" attributes to your p:panel elements that reference boolean values in your Java bean. And then you can modify those boolean values when the actionlistener is called. Also, you would need appropriate "update" attributes on the commandLink's so that it knows which display elements may have changed.

So I guess something like this...
<ui:composition>
 <p:panel id="topPanel" visible="#{dataManater.isTopPanelVisible()}">
  <table   class="table">
   <tbody>
     <tr>
      <td >
       <p:commandLink value="display Panel Data" actionListener="#{dataManater.goToDisplay()}" update="topPanel,linkPanel" />
      </td>
     </tr>
   </tbody>
  </table>
 </p:panel> 


 <p:panel id="linkPanel" visible="#{dataManater.isLinkPanelVisible()}"> 
  <table role="region" aria-label="Key Services Portlet" class="table">
   <tbody>
     <tr>
      <td >
        <p:commandLink value="#{dataManater.aDataItem1}" update="linkPanel" actionListener="#{dataManater.goToClickedLink1()}"/>
       </td>
     </tr>
     <tr>
      <td >
        <p:commandLink value="#{dataManater.aDataItem2}" update="linkPanel" actionListener="#{dataManater.goToClickedLink2()}"/>
      </td>
     </tr>
     <tr>
      <td >
        <p:commandLink value="#{dataManater.aDataItem3}" update="linkPanel" actionListener="#{dataManater.goToClickedLink3()}"/>
       </td>
     </tr>
     <tr>
      <td >
        <p:commandLink value="more" update="linkPanel" actionListener="#{ dataManater.goToClickedMore()}"/>
      </td>
     </tr>
  </tbody>
 </table>
 </p:panel>
</ui:composition>

Open in new window

And then you Java code would be something like this...
@ManagedBean(name="DataManager")
@SessionScoped
public class DataManager  {

      private List<String> list;
      private String aDataItem1 = "Employment Opportunity 1";
      private String aDataItem2 = "Employment Opportunity 2";
      private String aDataItem3 = "Employment Opportunity 3";
 
      private boolean topPanelVisible = true;
      private boolean linkPanelVisible = false;
 
      public  DataManager()  {
             
                
      }


        public void goToDisplay()
        {
           topPanelVisible = false;
           linkPanelVisible = true;
      }

      public boolean isTopPanelVisible() {
            return topPanelVisible;
      }
      public boolean isLinkPanelVisible() {
            return linkPanelVisible;
      }
  
      
      public String getaDataItem1()
      {
            return aDataItem1;
      }
      
      public void setaDataItem1(String aValue)
      {     
            aDataItem1 = aValue;
      }
      
      public String getaDataItem2()
      {
            return aDataItem2;
      }
      
      public void setaDataItem2(String aValue)
      {     
            aDataItem2 = aValue;
      }
      
      public String getaDataItem3()
      {
            return aDataItem3;
      }
      
      public void setaDataItem3(String aValue)
      { 
            aDataItem3 = aValue;
      }
      
       
      
      public void goToClickedLink1()
      {
            System.out.println("Clicked goToClickedLink1");
      }
      
      
      public void goToClickedLink2()
      {
            System.out.println("Clicked goToClickedLink2");
      }
      
      public void goToClickedLink3()
      {
            System.out.println("Clicked goToClickedLink3");
      }
      
      public void goToClickedMore()
      {
            System.out.println("Clicked goToClickedMore");
      }
}

Open in new window

0
 

Author Closing Comment

by:prain
Comment Utility
Thanks. It works.
0
 
LVL 35

Expert Comment

by:mccarl
Comment Utility
Glad that it solves your issue! :)
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

I had a project requirement for a displaying a user workbench .This workbench would consist multiple data grids .In each grid the user will be able to see a large number of data. These data grids should allow the user to 1. Sort 2. Export the …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to implement Singleton Design Pattern in Java.
This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now