Solved

How to toggle two p:panels

Posted on 2014-04-01
3
234 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 35

Accepted Solution

by:
mccarl earned 300 total points
ID: 39970961
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
ID: 39982903
Thanks. It works.
0
 
LVL 35

Expert Comment

by:mccarl
ID: 39987641
Glad that it solves your issue! :)
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
What is JNDI datasource in spring 1 92
Java asynchronous logging 4 73
ejb on wildfly 5 61
jboss 7.1 start up error 1 83
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 …
Introduction This article is the last of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article covers our test design approach and then goes through a simple test case example, how …
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.

737 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