Solved

How to toggle two p:panels

Posted on 2014-04-01
3
229 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
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
powerN  challenge 3 62
json format text only 4 82
base64 decode encode 12 133
login jsp example 24 46
Introduction This article is the first of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article explains our test automation goals. Then rationale is given for the tools we use to a…
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.

813 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

14 Experts available now in Live!

Get 1:1 Help Now