Solved

How to toggle two p:panels

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
eclipse shortcuts 9 66
arguments to jar 5 39
throw exception 21 66
Select statement in @Query (JPA Repository) - SpringMVC 2 34
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…
Introduction This article is the second of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article covers the basic installation and configuration of the test automation tools used by…
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.

685 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