First of all, i would like to offer my sincere congratulations to the makers of this fantastic library!
Then i would like to share a small piece of code that i made related to PanelMenu. It 'a very simple thing but it can be useful to someone.
At now, the PanelMenu does not have the tiered option to behave like the accordion pane (if i open a pane, the others are hidden).
To simulate just do like this:
Code: Select all
<ui:define name="menu">
<p:panelMenu id="hbMenu" model="#{menu.model}" widgetVar="hbPanelMenu" />
<h:outputScript>
hbPanelMenu.headers.click(function(e) {
var currHeader = $(this);
hbPanelMenu.headers.each(function() {
var header = $(this);
if(header.text() != currHeader.text()) {
hbPanelMenu.collapseRootSubmenu(header);
header.removeClass('ui-state-hover');
}
});
});
</h:outputScript>
</ui:define>
To solve this problem you can do this:
Code: Select all
// XHMTL PART
<h:form id="hbMenuForm">
<p:panelMenu model="#{menuPanel.model}" widgetVar="hbPanelMenu" />
<p:inputText binding="#{lookup.components.hbActiveTab}" id="hbActiveTab" value="#{menuPanel.activeTab}" style="display:none;"/>
<h:outputScript>
var elId = document.getElementById('#{lookup.clientIds.hbActiveTab}').value;
if(elId) {
hbPanelMenu.headers.each(function() {
var header = $(this);
if(header.text() == elId) {
hbPanelMenu.expandRootSubmenu(header, false);
}
});
}
hbPanelMenu.headers.click(function(e) {
var currHeader = $(this);
hbPanelMenu.headers.each(function() {
var header = $(this);
if(header.text() != currHeader.text()) {
hbPanelMenu.collapseRootSubmenu(header);
header.removeClass('ui-state-hover');
}
});
document.getElementById('#{lookup.clientIds.hbActiveTab}').value = currHeader.text();
});
</h:outputScript>
</h:form>
</ui:define>
Code: Select all
import java.util.AbstractMap;
import java.util.HashMap;
import java.util.Map;
import java.util.Set;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.component.UIComponent;
import javax.faces.component.UIViewRoot;
import javax.faces.context.FacesContext;
@ManagedBean(name="lookup")
@RequestScoped
public class ComponentLookup {
private Map<String, Map<String, UIComponent>> componentMap;
private Map<String, Map<String, UIComponent>> getPageMaps() {
if (componentMap == null) {
componentMap = new HashMap<String, Map<String, UIComponent>>();
}
return componentMap;
}
private Map<String, UIComponent> getViewMap(String viewId) {
Map<String, Map<String, UIComponent>> pageMaps = getPageMaps();
Map<String, UIComponent> viewMap = pageMaps.get(viewId);
if (viewMap == null) {
viewMap = new HashMap<String, UIComponent>();
pageMaps.put(viewId, viewMap);
}
return viewMap;
}
/** Returns map for components */
public Map<String, UIComponent> getComponents() {
FacesContext context = FacesContext.getCurrentInstance();
UIViewRoot view = context.getViewRoot();
String viewId = view.getViewId();
return getViewMap(viewId);
}
private Map<String, String> clientIdMap;
/** Returns map for getting clientIds */
public Map<String, String> getClientIds() {
if (clientIdMap == null) {
clientIdMap = new AbstractMap<String, String>() {
@Override
public String get(Object key) {
return getClientId(key.toString());
}
@Override
public Set<java.util.Map.Entry<String, String>> entrySet() {
throw new UnsupportedOperationException();
}
};
}
return clientIdMap;
}
private String getClientId(String id) {
FacesContext context = FacesContext.getCurrentInstance();
Map<String, UIComponent> components = getComponents();
UIComponent component = components.get(id);
return component.getClientId(context);
}
}
I hope this code can help someone!
Happy coding!
