Question

我希望能够使用JSF / Seam / RichFaces进行Ajax调用，并使用相关的h：messages组件进行页面更新。这没有问题。我能够执行适当的reRender。但是，我也希望能够利用丰富的效果来使它更漂亮。理想情况下，我希望能够让消息淡入，然后在用户点击它们时消失。但是，到目前为止，我一直无法做到这一点。

有没有人有这样的情况？知道JSF / Seam比我好一点的人有什么好建议吗？提前谢谢！

Answer 1

我这样做虽然我不打扰rich:effect。

我使用jQuery。这是个人偏好，但我发现它比使用rich：effect（基于Scriptaculous）更容易和更直接。值得快速查看jQuery Effects documentation。

一个例子：

将jquery添加到您的页面（附带richfaces）：

<a:loadScript src="resource://jquery.js"/>

为方便起见，将jQuery分配给$ j（将其添加到您的javascript）：

$j = jQuery.noConflict();

消息Div：

<a:outputPanel id="messagetextPanel" ajaxRendered="true" layout="block" style="z-index:100; display:none;">
    <s:div styleClass="messagetext" rendered="#{not empty facesContext.maximumSeverity}">
        <h:messages infoClass="infomessage" errorClass="errormessage" warnClass="warningmessage" layout="list" />
        <s:div styleClass="messageClose">
            <a onclick="hideMessages();">#{messages['messages.close']}</a>
        </s:div>
    </s:div>
</a:outputPanel>

隐藏一些javascript并显示div：

function hideMessages() {
  $j("div#messagetextPanel").fadeOut("slow");
}
function showMessages() {
  $j("div#messagetextPanel").fadeIn("fast");
}

现在你只需要弄清楚在完成一个电话时调用showMessages（）的最佳方法（例如在a4j:commandButton上使用oncomplete等）。

我个人更喜欢不对div的显示产生影响，这样我就可以使用ajaxRendered来处理所有事情了。您可以通过将第一行替换为：

来完成此操作

<a:outputPanel id="messagetextPanel" ajaxRendered="true" layout="block" style="z-index:100; display: #{empty facesContext.maximumSeverity ? 'none' : 'block'};">

这样，我的按钮/链接/支持上不需要任何代码，当我的后端代码决定创建一个代码时，FacesMessages将始终显示。

Answer 2

感谢你的建议，达摩。我尝试了它，它没有问题。另外，我能够使用rich：effect来解决它。这就是我想出的：

            <a:outputPanel id="message-panel"
            onclick="hideMessages({delay:0.5,duration:0.9});">
                <h:messages id="messages" globalOnly="true" styleClass="message"
                    errorClass="errormsg" infoClass="infomsg" warnClass="warnmsg"
                    rendered="#{showGlobalMessages != 'false'}" />
            </a:outputPanel>
                <rich:effect name="hideMessages" for="message-panel" type="Fade" />

...

            <h:form>
                <a:commandLink action="#{myAction.runTest()}" value="Run Test"
                    reRender="message-panel" />
            </h:form>

一旦我这样做，一切都按预期工作。

FacesMessages和丰富：效果如何？

2 个答案:

一个例子：