创建 RichFaces 弹出面板作为 Facelets 子视图/组合不可隐藏答案

【问题标题】：Creating a RichFaces popup panel as a Facelets subview/composition not hidable创建 RichFaces 弹出面板作为 Facelets 子视图/组合不可隐藏
【发布时间】：2012-05-06 16:18:15
【问题描述】：

说实话，RichFaces 中的弹出面板很难用。涉及到对一些 JavaScript 的多次调用，这使得派生一般工作的东西并不容易。无论如何，我正在尝试以下方法：

<?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>

这会显示一个图像按钮，该按钮会弹出一个简单的输入对话框，假定可以通过单击弹出窗口外部 (onmaskclick="...") 来隐藏该对话框，方法是对弹出窗口进行 X'ing在右上角（<f:facet> 和 onclick="..."），或按取消 <h:commandButton onclick="...">。在 OK 上，AJAX 表单应该被提交，并且弹出窗口也被隐藏。但是什么也没发生（无法关闭）：

EL 表达式#{componentCallToId}.hide(); return false; 是上面的“问题孩子”。它不是那样工作的。

在其原始的、非 Facelets 变体 (http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=popup&sample=modalPopup&skin=classic) 中，控制组件的调用如下所示：

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

我将以下参数传递给<ui:include>：

<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>

注意长条目（其余的似乎都在工作 - 甚至是 bean + 方法 + arg 的奇怪语法，但这不是这里的重点）。

问：

为什么<ui:param name="componentControlCallToId" value="rich:component('add-root-chapter-popup')" /> 不工作？目前，在弹出窗口之外单击、X'ing 或按 OK 或 Cancel（弹出窗口停留）时没有任何反应。

Firebug 只显示：

syntax error
.hide(); return false;

看起来表达式被评估为空/空字符串。

怎么了？可以修复吗？我的替代方案是什么？

PS：请注意，我之前曾尝试在 Facelets 表达式中使用“popupId”，例如

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

但结果相同。

【问题讨论】：

标签： jsf popup richfaces facelets el

【解决方案1】：

省略单引号可以解决问题：

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

我以为他们是JS的一部分，但他们似乎是EL。

【讨论】：

【解决方案2】：

你也可以试试这个：- onmaskclick="#{rich:component('cc.attrs.popupId')}.hide()" 如果引号给您带来任何问题，请使用 &quot;而不是他们。

我相信您在这里尝试通过自定义组件公开的变量将 id 动态解析到弹出面板。您可能在哪里将 id 的值解析为

popupId="xyz" 如果是这种情况，上述解决方案就可以了。

【讨论】：