Goal:
We have a requirement to have an expand/collapse button/s to expand or collapse all SubMenus - This seems to work UNLESS one of the state are different.
E.g:
Menu states: true(expanded), true(expanded), true(expanded), true(expanded) will change to false(collapsed), false(collapsed), false(collapsed), false(collapsed) and vice versa with our current code.
HOWEVER -> true(expanded), false(collapsed), true(expanded), true(expanded) will NOT change to false(collapsed), false(collapsed), false(collapsed), false(collapsed) and vice versa with our current code.
Problem:
I have an issue where is seems almost as if the view(xhtml) page does not update the JSF backing bean
Code:
xhtml:
<?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>Website</title>
</h:head>
<h:body>
<p:growl id="messages"/>
<p:layout id="fullpagelayout" fullPage="true" >
<p:layoutUnit id="layoutNorth" position="north" resizable="true" size="120" style="min-height: 120px; height: 120px;" >
<ui:include id="northHeader" src="header.xhtml" />
</p:layoutUnit>
<p:layoutUnit id="layoutWest" position="west" collapsible="true" resizable="true" style="min-width: 150px;">
<h:form id="menuForm">
<p:commandButton id="expandBtn" value="Expand" action="#{mainMenuBean.changeMenuState(true)}" async="true" update="menuForm:mainMenu" styleClass="expandCollapseBtn" style="margin-bottom: 2px;" />
<p:commandButton id="collapseBtn" value="Collapse" action="#{mainMenuBean.changeMenuState(false)}" async="true" update="menuForm:mainMenu" styleClass="expandCollapseBtn" style="margin-bottom: 2px;" />
<p:panelMenu id="mainMenu" model="#{mainMenuBean.model}" />
</h:form>
</p:layoutUnit>
<p:layoutUnit id="layoutCenter" position="center" style="padding: 5px; margin: 5px;" >
<ui:include id="centerPanel" src="centerPanel.xhtml" />
</p:layoutUnit>
<p:layoutUnit id="layoutSouth" position="south" resizable="true" closable="true" size="30" >
<ui:include id="southPanel" src="status.xhtml" />
</p:layoutUnit>
</p:layout>
</h:body>
</html>
Backing bean:
package /*PACKAGE*/
/*imports*/
@ManagedBean
@SessionScoped
public class MainMenuBean implements Serializable {
private MenuModel model;
private MenuStateController stateController;
private String updateParam;
public MainMenuBean() {
initBeans();
}
private void initBeans() {
buildMainMenu();
}
public MenuModel getModel() {
return model;
}
public void setModel(MenuModel model) {
this.model = model;
}
public void buildMainMenu() {
model = new DefaultMenuModel();
stateController = new MenuStateController();
updateParam = ":panelContents";
// File Submenu and menu Items
DefaultSubMenu fileSubMenu = new DefaultSubMenu("File");
addMenuItem(fileSubMenu, "Logout", "logoutPage", "ui-icon-home",
"/login/login.xhtml?faces-redirect=true", false, false, updateParam, stateController);
model.addElement(fileSubMenu);
// Tools Submenu and menu Items
DefaultSubMenu toolsSubMenu = new DefaultSubMenu("Tools");
addMenuItem(toolsSubMenu, "Tool Page", "toolPage", "ui-icon-wrench",
"#{menuStateController.setPage('/content/tool.xhtml')}", true, true, updateParam, stateController);
model.addElement(toolsSubMenu);
// Search Submenu and menu Items
DefaultSubMenu searchSubMenu = new DefaultSubMenu("Search");
addMenuItem(searchSubMenu, "Search", "searchPage", "ui-icon-search",
"#{menuStateController.setPage('/content/search.xhtml')}", true, true, updateParam, stateController);
model.addElement(searchSubMenu);
// Help Submenu and menu Items
DefaultSubMenu helpSubMenu = new DefaultSubMenu("Help");
addMenuItem(helpSubMenu, "About", "aboutPage", "ui-icon-help",
"#{menuStateController.setPage('/content/about.xhtml')}", true, true, updateParam, stateController);
model.addElement(helpSubMenu);
}
private void addMenuItem(DefaultSubMenu subMenu, String menuItemName, String id, String icon,
String commandName, boolean isAjax, boolean isAsync, String Update, MenuStateController stateController) {
NEWMenuItem item = new NEWMenuItem(menuItemName, id, stateController);
item.setId(id);
item.setIcon(icon);
item.setCommand(commandName);
item.setAjax(isAjax);
item.setAsync(isAsync);
item.setUpdate(Update);
subMenu.addElement(item);
}
public void changeMenuState(boolean expanded) {
for (MenuElement menuElement : model.getElements()) {
if(menuElement.getClass() == DefaultSubMenu.class){
if(menuElement instanceof DefaultSubMenu){
DefaultSubMenu subMenu = (DefaultSubMenu) menuElement;
if(!subMenu.isExpanded() == expanded){
subMenu.setExpanded(expanded);
}
}
}
}
}
}
So essentially I would like the "expand" or "collapse" buttons to expand or collapse all sub menus regardless of whether all or some are already expanded or collapsed.
Hope this makes sense!