2 Replies Latest reply on May 7, 2012 10:16 PM by Karsten Wutzke

    Popup panel as a Facelets subview/composition not hidable

    Karsten Wutzke Expert

      Popup panels in RichFaces are a little ugly to work with to be honest. There are several calls to some JavaScripts involved which makes it not easy to derive something that works in as a sub template. Anyway, I was trying the following:

      {code:xml}<?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">

      <ui:composition xmlns="http://www.w3.org/1999/xhtml"

                      xmlns:f="http://java.sun.com/jsf/core"           

                      xmlns:h="http://java.sun.com/jsf/html"

                      xmlns:ui="http://java.sun.com/jsf/facelets"

                      xmlns:a4j="http://richfaces.org/a4j"

                      xmlns:rich="http://richfaces.org/rich">

       

        <h:commandLink>

          <h:graphicImage library="images/icons" name="#{buttonImageFileName}"  />

          <rich:tooltip value="#{buttonTooltipText}" direction="bottomRight" />

          <rich:componentControl target="#{popupId}" operation="show" />

        </h:commandLink>

        <rich:popupPanel modal="true"

                         height="#{popupHeight}"

                         resizeable="#{popupResizable}"

                         onmaskclick="#{componentCallToId}.hide(); return false;"

                         id="#{popupId}">

          <f:facet name="header">

            <h:outputText value="#{popupHeaderText}" />

          </f:facet>

          <f:facet name="controls">

            <h:outputLink value="#" onclick="#{componentCallToId}.hide(); return false;">

              <h:outputText value="X" />

            </h:outputLink>

          </f:facet>

          <p>#{popupSubject}</p>

          <p>

            <h:inputText value="#{inputTextBean[inputTextProperty]}" styleClass="full-width" id="#{inputTextId}" />

          </p>

          <h:panelGrid columns="2" style="margin: 0 auto;">

            <h:commandButton value="OK"

                             action="#{acceptButtonBean[acceptButtonMethod](acceptButtonMethodArg)}"

                             onclick="#{componentCallToId}.hide(); return true;">

              <a4j:ajax execute="@this #{inputTextId}" render="@form" />

            </h:commandButton>

            <h:commandButton value="Cancel" onclick="#{componentCallToId}.hide(); return false;" immediate="true" />

          </h:panelGrid>

        </rich:popupPanel>

       

      </ui:composition>{code}

      This displays an image button which pops up a simple input dialog, which is supposed to be hidden by clicking outside the popup (onmaskclick="..."), by X'ing the popup in the top right corner (<f:facet> with onclick="..."), or by pressing the Cancel <h:commandButton onclick="...">. On OK the AJAX form is supposed to be submitted and the popup is hidden, too. But nothing happens (can't close):

       

      rf4-popup.png

       

      The EL expression #{componentCallToId}.hide(); return false; is the "problem child" in the above. It is not working that way.

       

      In its original, non-Facelets variant here (http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=popup&sample=modalPopup&skin=classic) the call to control the component looks like this:

      {code:xml}<h:commandButton value="Cancel" onclick="#{rich:component('add-root-chapter-popup')}.hide(); return false;" immediate="true" />{code}

      I pass the following parameters to <ui:include>:

      {code}<ui:include src="/subviews/add-node-clink-input-popup.xhtml">

        <ui:param name="buttonImageFileName" value="add.png" />

        ...

        <ui:param name="popupId" value="add-root-chapter-popup" />

        <ui:param name="componentControlCallToId" value="rich:component('add-root-chapter-popup')" />

        ...

      </ui:include>{code}

      Notice the long entry (the rest seems to be working - even the strange syntax for the bean + method + arg, but this is not the focus here).

       

      QUESTION:

       

      Why isn't <ui:param name="componentControlCallToId" value="rich:component('add-root-chapter-popup')" /> working? Currently nothing happens when clicking outside the popup, X'ing, or pressing OK or Cancel (popup staying).

       

      Firebug only shows:

      {code}syntax error

      .hide(); return false;{code}

      Looks like the expression is evaluated to null/empty string.

       

      What's wrong? Can it be fixed? What are my alternatives?

       

      Karsten

       

      PS: Note, that I've previously tried to use the "popupId" in the Facelets expression like

      {code}<h:commandButton value="Cancel" onclick="#{rich:component('popupId')}.hide(); return false;" immediate="true" />{code}

      but this has the same result.

        • 1. Re: Popup panel as a Facelets subview/composition not hidable
          Paul Dijou Newbie

          Hi there,

           

          I will begin with the end. The code :

           

          <h:commandButton value="Cancel" onclick="#{rich:component('popupId')}.hide(); return false;" immediate="true" />

           

          isn't working because you're trying to hide the popup panel with the id "popupId" (as a String), but your popup panel id is "add-root-chapter-popup" since it's use "popupId" (as a variable). Just removing the single quotes around "popupId" should solve the problem :

           

          <h:commandButton value="Cancel" onclick="#{rich:component(popupId)}.hide(); return false;" immediate="true" />
          

           

           

          If it works, I would stay with that. About ui:param, there is two thinks : first, if you write :

           

          <ui:param name="componentControlCallToId" value="rich:component('add-root-chapter-popup')" />
          

           

          You only pass a String "rich:component('add-root-chapter-popup')" in your param. So calling "#{componentCallToId}.hide();" can't work since your trying to call a Javascript method on a plain String. So a first try would be :

           

          <ui:param name="componentControlCallToId" value="#{rich:component('add-root-chapter-popup')}" />
          

           

          In order to eval the "rich:component" method and put the result in your param. But even so, I'm not sure it would works since I don't know if ui:param will support having a Javascript object as value. That why I would only use one param :

           

          <ui:param name="popupId" value="add-root-chapter-popup" />
          

           

          And then call "#{rich:component(popupId)}.hide();" on your page.

           

          Finally, you need to wrap the content of your popup panel in a form if you want to submit the data.

           

          Regards,

          • 2. Re: Popup panel as a Facelets subview/composition not hidable
            Karsten Wutzke Expert

            {code:xml}<h:commandButton value="Cancel" onclick="#{rich:component(popupId)}.hide(); return false;" immediate="true" />{code}

            did the trick, much easier than expected.

             

            Thanks a lot