JSF: Hide h:panelGroup when clicking outside of it

Question

I am learning JSF 2 at the moment. One of the first things I want to realize is the following scenario:

I have a commandLink on my page. When this link is clicked, an h:panelGroup-Tag is rendered (depending on the boolean attribute in the corresponding ManagedBean - which is false by default). I want that panelGroup to not be rendered when the link which "opened" the panelGroup is clicked again (that already works) but I want the panelGroup also not to be rendered when the user clicks outside of that panelGroup (that doesn't work).

The ManagedBean looks like:

@ManagedBean
@SessionScoped
public class LocaleBean {

@PostConstruct
public void init(){
    locale = new Locale("de_DE");
    showLanguageDiv = false;
}

private boolean showLanguageDiv;

public boolean getShowLanguageDiv() {
    return showLanguageDiv;
}

public void setShowLanguageDiv(final boolean showLanguageDiv) {
    this.showLanguageDiv = showLanguageDiv;
}

public void switchShowDivStatus(ActionEvent e) {
    showLanguageDiv = !showLanguageDiv;
}

The facelet looks like:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core">
<h:form>
    <div>
        <h:commandLink style="float: right;padding: 2px" actionListener="#{localeBean.switchShowDivStatus}" value="#{msg.language}" >
        </h:commandLink>
    </div>
    <h:panelGroup rendered="#{localeBean.showLanguageDiv}" style="clear:both;float:right;border:2px;border-style: solid" >
        <p><h:commandButton .... /></p>
        <p><h:commandButton .... /></p>
        <p><h:commandButton .... /></p>
    </h:panelGroup>
</h:form>
</ui:composition>

I already tried to add an hidden link which was clicked via javascript (when the user clicked anywhere in the body), which set the boolean attribute of the ManagedBean to false so that the panelGroup was not rendered. That worked partially because the panelGroup wasn't shown anymore. But on the other hand a click on the link to show the panelGroup had no effect anymore after doing that.

This is how it looked:

<h:body onclick="document.getElementById('invisibleform:invisiblelink').click()">
    .
    .
    .
    <h:form id="invisibleform">
        <h:commandLink id="invisiblelink" actionListener="#{localeBean.switchShowDivStatus}"></h:commandLink>
    </h:form>
</h:body>

So how can I resolve this issue? Is there a best practice of doing things like that? Was the hidden link the right approach? From what I've read so far it seems like this is something which should be done on client side via javascript. But all solutions I found were based on normal html-pages (non-JSF) and I can't image how this should be done when using JSF.

Thanks for any advice.

fischermatte fischermatte · Accepted Answer · 2013-08-20T20:39:59

Are you able to use Primefaces along JSF? There is a Component <p:overlayPanel> See here for the showcase. Maybe that works for you...

JSF: Hide h:panelGroup when clicking outside of it

1 Answers