How to create chrome like tabs with primefaces - jsf

Question

There are buttons like chrome-firefox bookmarks(say "google","facebook","twitter"). What I want to do is when user clicks a button, its related tab will open. For example if user clicks google button, google tab will rendered.
I have created some tabs and binded these tab's "rendered" property. But the problem is when i close the tab, I couldn't change variable which binded to the tab's "rendered" property. For example when I open and close google tab and then click to openFacebookTab button, Google tab is also rendered with Facebook tab because renderGoogleTab still holds true.
Must I create tabs and tabview programmatically or is there an easy solution?
My view;
<p:commandButton value="openGoogleTab" actionListener="#{myController.openGoogle()}"/>
<p:commandButton value="openFacebookTab" actionListener="#{myController.openFacebook()}"/>
<p:tab id="googleId" closable="true" title="Google" rendered="#{myController.renderGoogleTab}"/>
<p:tab id="facebookId" closable="true" title="Facebook" rendered="#{myController.renderFacebookTab}"/>
My controller;
#Controller("myController")
#Scope("view")
public class MyController{
//some variables
openGoogle(){
renderGoogleTab = true;
}
openFacebook(){
renderFacebookTab = true;
}
//getter and setters
}

Answer 1

Try to modify your code as follow,
openGoogle(){
renderGoogleTab = true;
renderFacebookTab = false;
}
openFacebook(){
renderFacebookTab = true;
renderGoogleTab = false;
}

Answer 2

Not the best method probably, but one workaround is to place the tabs in two separate tabView components (as I understand you need to be able to open two tabs simultanously) and then add a tab close listener like in the showcase. Then in the listener set the corresponding render*Tab properties to false.
So the jspx would be somewhat like this:
<p:tabView>
<p:ajax event="tabClose" listener="#{myController.onGoogleClose}"/>
<p:tab id="googleId" closable="true" title="Google" rendered="#{myController.renderGoogleTab}"/>
</p:tabView>
<p:tabView>
<p:ajax event="tabClose" listener="#{myController.onFacebookClose}"/>
<p:tab id="facebookId" closable="true" title="Facebook" rendered="#{myController.renderFacebookTab}"/>
</p:tabView>
Another approach would be to add a client side listener which invokes a server side method when the user clicks the close button.