RichFaces 动态 TabPanel

问题描述

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

How to implement a simple add/remove dynamic <rich:tabPanel>?

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

(I've seen people asking this around so I thought postin a Q&A of a simple implementation)

推荐答案

实现有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:

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>

这篇关于RichFaces 动态 TabPanel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！