jsf - RichFaces 动态 TabPanel

Question

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

（我见过有人问这个问题，所以我想发布一个简单实现的问答）

Answer 1

该实现有 3 个自定义类：

1. 内容：包含要在选项卡中显示的值；
2. ItemTab：包含一个UITab对象和一个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;
    }
}

选项卡项：

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;
    }
}

我的标签：

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>