Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

java - How to add button for adding new tabs near last tab?

Does anybody know how to add a button for adding new tabs that is positioned near the last created tab? If it is not clear what I am about, just look at tabs in your browser and the button to add new tab;-) that's exactly what I want to manage.

I'm using MyFaces+PrimeFaces.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You can use <p:tabView> to show a dynamic tabset based on some collection of beans. You can present the "Add" tab as the last tab of the tabset. You can if necessary even style it differently. You can use <p:ajax event="tabChange"> to hook a tab change listener wherein you can check if the "Add" tab has been opened and then add the new tab.

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>

with

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

}

The Tab class is in this example just a plain javabean with properties title and content. The oncomplete in <p:ajax> is necessary because the tab content would otherwise disappear after adding the new tab (which look much like a PF bug, after all; I was using 3.3 by the way).


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...