说实话,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 =“...”),通过右上角的弹出窗口(<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" />
但这具有相同的结果。