I am trying to implement major browser tab behaviour using tabView component - to have closable tabs and one, the last, not closable, but capable to create a new tab. Here is my idea:
JSF page:
Code: Select all
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>TabViewTest</title>
</h:head>
<h:body>
<h:form>
<p:tabView var="tabItem" value="#{tab.tabItemList}" widgetVar="tabView" onTabChange="checkIfNewTabIsRequired(index == tabView.getLength() - 1)">
<p:ajax event="tabClose" listener="#{tab.onTabClose(event)}"/>
<p:tab title="#{tabItem}" closable="#{tabItem == '+' ? false : tab.closable}">
#{tabItem}
</p:tab>
</p:tabView>
</h:form>
<script>
/* <![CDATA[ */
function checkIfNewTabIsRequired(isNewTabRequired) {
if (isNewTabRequired) {
alert(isNewTabRequired);
// addTab somehow
}
}
/* ]]> */
</script>
</h:body>
</html>Code: Select all
@SessionScoped
@ManagedBean(name = "tab")
public class TabBean {
private Boolean closable = true;
private Integer tabCount = 1;
private ArrayList<String> tabItemList = new ArrayList<String>();
public TabBean() {
tabItemList.add("1");
tabItemList.add("2");
tabItemList.add("3");
tabItemList.add("+");
updateVariables();
}
private void updateVariables() {
tabCount = tabItemList.size();
closable = tabCount > 2;
}
public void onTabClose(TabCloseEvent event) {
// getCurentIndex somehow
//tabItemList.remove(index);
updateVariables();
}
public void addTab() {
String title = Integer.toString(tabItemList.size());
tabItemList.add(tabItemList.size() - 1, title);
updateVariables();
}
public Boolean getClosable() {
return closable;
}
public void setClosable(Boolean closable) {
this.closable = closable;
}
public Integer getTabCount() {
return tabCount;
}
public void setTabCount(Integer tabCount) {
this.tabCount = tabCount;
}
public ArrayList<String> getTabItemList() {
return tabItemList;
}
public void setTabItemList(ArrayList<String> tabItemList) {
this.tabItemList = tabItemList;
}
}
1) close tab listener is never called.
2) I have no idea how to call addTab method of backing bean from javascript code
3) when tab before + is closed, + tab is selected (what would create a new tab)
Has anybody implemented something like this?
Regards,
Jan
