如何在最后一个标签附近添加添加新标签的按钮?

时间:2012-08-14 22:22:32

标签: java jsf jsf-2 primefaces

是否有人知道如何添加按钮以添加位于最后创建的标签附近的新标签?如果我不清楚我的情况,只需查看浏览器中的标签和添加新标签的按钮;-)这正是我想要管理的内容。

我正在使用MyFaces + PrimeFaces。

1 个答案:

答案 0 :(得分:6)

您可以使用<p:tabView>根据某些bean集合显示动态标签集。您可以将“添加”选项卡显示为选项卡集的最后一个选项卡。如有必要,您甚至可以采用不同的方式。您可以使用<p:ajax event="tabChange">挂钩标签更改侦听器,您可以在其中检查是否已打开“添加”标签,然后添加新标签。

E.g。

<h:form id="form">
    <p:tabView id="tabs" value="#{bean.tabs}" var="tab" widgetVar="w_tabs">
        <p:ajax event="tabChange" listener="#{bean.changeTab}" oncomplete="if (args.newTabIndex) w_tabs.select(args.newTabIndex)" />
        <p:tab title="#{tab.title}">
            <p>#{tab.content}</p>
        </p:tab>
    </p:tabView>
</h:form>

@ManagedBean
@ViewScoped
public class Bean implements Serializable {

    private List<Tab> tabs;

    @PostConstruct
    public void init() {
        // Just a stub. Do your thing to populate tabs.
        // Make sure that the last tab is the "Add" tab.
        tabs = new ArrayList<Tab>();
        tabs.add(new Tab("tab1", "content1"));
        tabs.add(new Tab("tab2", "content2"));
        tabs.add(new Tab("Add...", null));
    }

    public void changeTab(TabChangeEvent event) {
        int currentTabIndex = ((TabView) event.getComponent()).getActiveIndex();
        int lastTabIndex = tabs.size() - 1; // The "Add" tab.

        if (currentTabIndex == lastTabIndex) {
            tabs.add(lastTabIndex, new Tab("tab" + tabs.size(), "content" + tabs.size())); // Just a stub. Do your thing to add a new tab.
            RequestContext requestContext = RequestContext.getCurrentInstance();
            requestContext.update("form:tabs"); // Update the p:tabView to show new tab.
            requestContext.addCallbackParam("newTabIndex", lastTabIndex); // Triggers the oncomplete.
        }
    }

    public List<Tab> getTabs() {
        return tabs;
    }

}

此示例中的Tab类只是一个包含属性titlecontent的普通javabean。 oncomplete中的<p:ajax>是必要的,因为标签内容在添加新标签后会消失(毕竟它看起来很像PF错误;顺便说一下我使用的是3.3)。