Add/Remove tab dynamically on TabView ?

[Mohamed.A]

Dear all,

Could you tell me if we can implement a tabview with dynamic tabs ?
I.e. the user pass a list of Tab to the TabView, and the tabs are added dynamically on the tabview?

Also, a button like on firefox to close a tab should be very useful.

Thank you for your help.

[cagatay.civici]

Hi Mohamed,

You can try c:forEach or component binding to implement dynamic tabs I guess.

c:forEach could do it, if not let us know.

We'll consider the firefox like tab closing for a future release, thanks for the feedback. There's a client side api to hide a tab so it could be easy to come up with a UI to trigger it.

[Mohamed.A]

Thank you Cagatay for your answer.

I think I will use the "forEach" solution because I have <ui:include> on each tab.
Each tab should include a jspx page.
My problem is that I have two types of tab: "closable tab" and "no closable tab".
I need to have a tabchangelistener to know if the selected tab is a closable tab or not.
but I don't know how to implement the listener.

Do you have any idea?

Another feedback: I think it would be really useful to have for each ui primefaces component an attribut "styleClass". With that, we can modify easily the look and feel of our web app.

[cagatay.civici]

Maybe creating tabs with conditional rendered attribute could help like <p:tab rendered="#{a.b}" />. So when you update the whole tabview with ajax visible tabs would be different however I think there'll be a noticable ui lag in this case.

Another way is writing some javascript, as I've mentioned there's client side api to add and remove tabs which we haven't utilizied yet. See:

http://developer.yahoo.com/yui/docs/YAH ... bView.html

http://developer.yahoo.com/yui/docs/YAH ... t.Tab.html

There're useful client side apis like removeTab, addTab, contentVisible that you can use.

Hope this helps;

We aim to make implementing this easier in a future release soon.

[winstona]

Do we have tab close funtion in primefaces v2.2?

[aliirawan]

I have this solution

Code: Select all

public class CreatePOController extends BaseController {
	
	
	TabView tabView;
	
	public CreatePOController(){
		
		
	}
	
	@PostConstruct
	private void init(){
		
		tabView = new TabView();
		tabView.setId(getViewPrefix()+"_tabView");
		tabView.setDynamic(true);
		
		
		Tab tab1 = new Tab();
		tab1.setId(getViewPrefix()+"_tab1");
		tab1.setTitle("by Min.Stock");
		tab1.setRendered(true);

		Tab tab2 = new Tab();
		tab2.setId(getViewPrefix()+"_tab2");
		tab2.setTitle("by SO");
		tab2.setRendered(true);

		tabView.getChildren().add(tab1);
		tabView.getChildren().add(tab2);
		
		tabView.setActiveIndex(0);
		
	}

	/**
	 * @return the tabView
	 */
	public TabView getTabView() {
		return tabView;
	}

	/**
	 * @param tabView the tabView to set
	 */
	public void setTabView(TabView tabView) {
		this.tabView = tabView;
	}
}

the tabView is binded to backing bean as well. make sure every ID is unique (because in tree component generation will check for uniqueness)

Code: Select all

<p:tabView id="task_tab" binding="#{createPOController.tabView}"
				dynamic="true">
			</p:tabView>

Well i get the result, so I can add any tabs using code dynamically.
but the problem is there is one line missing

Code: Select all

		<script type="text/javascript"
			src="/andromeda/javax.faces.resource/tabview/tabview.js.jsf?ln=primefaces&v=3.0.M1"></script>

In the generate html, in the head section i find no kind of this script. So now I must add by myself.
Anyone can better solution for this? I suppose the script should auto added. But how to implement it.

Thanks

Primefaces version: 3.0.M1
Mojarra 2.0.4