add dynamically tab to rich:tabPanel

Question

i' m developing my first jsf2 richfaces application , and now i am faced with the following problem :

i have the following menù

<rich:panelMenu >
            <rich:panelMenuGroup >
                 <rich:panelMenuItem label="Users" name="Users " />
                 <rich:panelMenuItem label="Orders" name="Orders"  />
            </rich:panelMenuGroup>

</rich:panelMenu>

I want that when click on the panelMenuItem is created a new tab and within of this new tab must insert a table that contains all users of the my application

i saw a few example of this type

 <rich:tabPanel switchType="client" id="tabPanel">
    <c:forEach items="#{handlerTab.tabsName}" var="tabName">
        <rich:tab name = ... >

    </rich:tab>
</c:foreach>

but don't know as insert a table in my new tab

how can i do?

tanks for your reply, but i don't want declare all tabs in the view , i want add and remove tab dynamically , now i have managed to do this

 <rich:panelMenu >
 <rich:panelMenuGroup >
     <rich:panelMenuItem label="Users" name="Users"  action="#{tabsBean.createTabs()}" render="tabs" />
     <rich:panelMenuItem label="Orders" name="Orders"  action="#{tabsBean.createTabs()}" render="tabs" />
 </rich:panelMenuGroup>

<h:panelGrid id="tabs" binding="#{tabsBean.panelGrid}"/>

then i have a bean that manage the tabs

@ManagedBean
@SessionScoped
public class TabsBean {

   private HtmlPanelGrid panelGrid;
   private Integer numOfTabs;

   @PostConstruct
   public void init(){numOfTabs=1;}


   public Integer getNumOfTabs() {
    return numOfTabs;
   }

   public void setNumOfTabs(Integer numOfTabs) {
    this.numOfTabs = numOfTabs;
   }

   public TabsBean() {
   }

   public HtmlPanelGrid getPanelGrid() {
    return panelGrid;
   }

   public void setPanelGrid(HtmlPanelGrid panelGrid) {
    this.panelGrid = panelGrid;
   }

   public void createTabs (){       


    FacesContext context = FacesContext.getCurrentInstance();
    Application application = context.getApplication();
    UITabPanel tabPanel = (UITabPanel)application.createComponent(UITabPanel.COMPONENT_TYPE);
    tabPanel.setSwitchType(SwitchType.ajax);

    for (int i=0; i<numOfTabs; i++){
        UITab tab = new UITab();
        tab = (UITab)application.createComponent(UITab.COMPONENT_TYPE);
        tab.setName("User Count "+i);
        tabPanel.getChildren().add(tab);

    }
    numOfTabs++;
    panelGrid.getChildren().clear();
    panelGrid.getChildren().add(tabPanel);
   }


}

now my problem is that i must add of components a this tabs (datatable that contains all user , form for insert a user and other)

how can i do?

Could you post your implementation of the `HandlerTab` class? — kauedg, Jan 24 '13 at 11:06

score 3 · Answer 1 · edited May 23 '17 at 12:08

If you want the menu to open tabs with specific content it's better if you pre-create the tab and hide it, showing it (rendering) on request. To create the Users do the following:

Create a User class (if you don't have one)

public class User {     

    private String name;
    private String country;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getCountry() {
        return country;
    }

    public void setCountry(String country) {
        this.country = country;
    }
}

Create a UserTab managed bean

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean
@ViewScoped
public class UserTab implements Serializable {

    private List<User> users;
    private boolean rendered;

    public UserTab() {
        //Initialize list
        users = new ArrayList();

        //Initialize rendered attribute
        rendered = false;

        //Replace this for your User data retrieving method
        createDummyUsers();
    }

    private void createDummyUsers() {
        User user = new User();

        user.setName("John Doe");
        user.setCountry("USA");
        users.add(user);

        user = new User();
        user.setName("Bill Doe");
        user.setCountry("Canada");
        users.add(user);

        user = new User();
        user.setName("Winston Doe");
        user.setCountry("England");
        users.add(user);
    }

    public void showTab() {
        rendered = true;
    }

    public void hideTab() {
        rendered = false;
    }

    public List<User> getUsers() {
        return users;
    }

    public void setUsers(List<User> users) {
        this.users = users;
    }

    public boolean isRendered() {
        return rendered;
    }

    public void setRendered(boolean rendered) {
        this.rendered = rendered;
    }
}

Create a tab handler:

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean
@ViewScoped
public class TabHandler implements Serializable {

    private String activeTab;

    public TabHandler() {
        activeTab = "none";
    }

    public String getActiveTab() {
        return activeTab;
    }

    public void setActiveTab(String activeTab) {
        this.activeTab = activeTab;
    }
}

Create the view

<h:body>
        <h:form>
            <rich:panelMenu >
                <rich:panelMenuGroup >
                    <rich:panelMenuItem label="Users" name="Users" 
                                        actionListener="#{userTab.showTab()}">
                        <f:ajax event="select"
                                execute="@this"
                                render="tabPanel"
                                listener="#{tabHandler.setActiveTab('usersTab')}"/>
                    </rich:panelMenuItem>
                    <rich:panelMenuItem label="Orders" name="Orders"  />
                </rich:panelMenuGroup>
            </rich:panelMenu>


            <rich:tabPanel id="tabPanel"
                           switchType="client"
                           activeItem="#{tabHandler.activeTab}">

                <rich:tab id="mainTab">


                </rich:tab>

                <rich:tab id="usersTab"
                          rendered="#{userTab.rendered}">
                    <f:facet name="header">
                        <h:outputLabel value="Users"/>
                        <h:commandLink value="  X" actionListener="#{userTab.hideTab()}"/>
                    </f:facet>
                    <rich:dataTable value="#{userTab.users}"
                                    var="user">

                        <rich:column>
                            #{user.name}
                        </rich:column>

                        <rich:column>
                            #{user.country}
                        </rich:column>
                    </rich:dataTable>

                </rich:tab>

            </rich:tabPanel>
        </h:form>
    </h:body>

Do the same steps and add the required tags for the Order class.

See: RichFaces dynamic TabPanel

score 2 · Answer 2 · edited May 23 '17 at 11:51

2

c:forEach is not an option if you want to add the tabs by click. What you want is to add components dynamically:

edited May 23 '17 at 11:51

Community

1
1

answered Jan 24 '13 at 09:19

Christophe Roussy

16,299
4
85
85

add dynamically tab to rich:tabPanel

2 Answers2