RichFaces dynamic TabPanel

Question

如何实现一个简单的动态添加/删除<rich:tabPanel> ?

(我看到有人问这个问题，所以我想发布一个简单实现的问题)

Answer 1

实现有3个自定义类:

1. 内容:包含要在选项卡中显示的值;
2. ItemTab:包含一个utab对象和一个Content对象;
3. MyTabs: EJB管理的bean，提供对选项卡的访问和添加/删除方法。

代码是:

内容:

public class Content {
    String name;
    String job;
    String dept;
    public Content() {
        name = "John Doe";
        job = "None";
        dept = "None";
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getJob() {
        return job;
    }
    public void setJob(String job) {
        this.job = job;
    }
    public String getDept() {
        return dept;
    }
    public void setDept(String dept) {
        this.dept = dept;
    }
}

TabItem:

public class TabItem {
    UITab component;
    Content content;
    public TabItem() {
        component = new UITab();
        content = new Content();
    }
    public UITab getComponent() {
        return component;
    }
    public void setComponent(UITab tab) {
        this.component = tab;
    }
    public Content getContent() {
        return content;
    }
    public void setContent(Content content) {
        this.content = content;
    }
}

MyTabs:

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.enterprise.context.SessionScoped;
import javax.inject.Named;
@Named
@SessionScoped
public class MyTabs implements Serializable {
    private List<TabItem> tabs;
    public MyTabs() {
        tabs = new ArrayList<TabItem>();
    }
    @PostConstruct
    private void init() {
        createTab();
        createTab();
        createTab();
    }
    public void createTab() {
        TabItem tab = new TabItem();
        tab.getComponent().setId("Tab" + (tabs.size()+1));
        tab.getComponent().setHeader("Tab " + (tabs.size()+1));
        tab.getContent().setName("John Doe " + (tabs.size()+1));
        tab.getContent().setJob("Salesman " + (tabs.size()+1));
        tab.getContent().setDept("Sales " + (tabs.size()+1));
        tabs.add(tab);
    }
    public void removeTab(TabItem tab) {
        tabs.remove(tab);
    }
    public List<TabItem> getTabs() {
        return tabs;
    }
    public void setTabs(List<TabItem> tabs) {
        this.tabs = tabs;
    }
}

tabview.xhtml:

<h:commandLink value="Add Tab" 
                   actionListener="#{myTabs.createTab()}"/>
<rich:tabPanel switchType="client">
    <c:forEach items="#{myTabs.tabs}" var="tab">
        <rich:tab value="#{tab.component}">
            <f:facet name="header">
                <h:outputLabel value="#{tab.component.header}"/>
                <h:commandLink value="  X" actionListener="#{myTabs.removeTab(tab)}"/>
            </f:facet>
            <h:panelGrid columns="2">
                <h:outputLabel value="Name: "/>
                <h:outputLabel value="#{tab.content.name}"/>
                <h:outputLabel value="Dept: "/>
                <h:outputLabel value="#{tab.content.dept}"/>
                <h:outputLabel value="Job: "/>
                <h:outputLabel value="#{tab.content.job}"/>
            </h:panelGrid>
        </rich:tab>
    </c:forEach>            
</rich:tabPanel>