Jsf RichFaces动态选项卡面板

如何实现简单的添加/删除动态

---

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

该实现有3个自定义类：

内容：包含要在选项卡中显示的值

ItemTab：包含UITab对象和内容对象

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

import java.io.Serializable；
导入java.util.ArrayList；
导入java.util.List；
导入javax.annotation.PostConstruct；
导入javax.enterprise.context.SessionScoped；
导入javax.inject.Named；
@命名
@会议范围
公共类MyTabs实现了可序列化{
私有列表选项卡；
公共MyTabs（）{
tabs=newarraylist（）；
}
@施工后
私有void init（）{
createTab（）；
createTab（）；
createTab（）；
}
public void createTab（）{
TabItem tab=新TabItem（）；
tab.getComponent（）.setId（“tab”+（tabs.size（）+1））；
tab.getComponent（）.setHeader（“tab”+（tabs.size（）+1））；
tab.getContent（）.setName（“johndoe”+（tabs.size（）+1））；
tab.getContent（）.setJob（“saller”+（tabs.size（）+1））；
tab.getContent（）.setDept（“销售”+（tabs.size（）+1））；
选项卡。添加（选项卡）；
}
公共无效删除选项卡（选项卡项选项卡）{
选项卡。移除（选项卡）；
}
公共列表getTabs（）{
返回标签；
}
公共无效设置选项卡（列表选项卡）{
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>