FacesMessages 和rich: 效果？答案

【问题标题】：FacesMessages and rich:effect?FacesMessages 和rich: 效果？
【发布时间】：2011-02-15 04:37:31
【问题描述】：

我希望能够使用 JSF/Seam/RichFaces 进行 Ajax 调用，并使用相关的 h:messages 组件更新页面。这没有问题。我能够执行适当的重新渲染。但是，我也希望能够利用rich:effect 让它更漂亮一些。理想情况下，我希望能够让消息淡入，然后在用户单击它们时消失。但是，到目前为止，我一直无法完成这项工作。

有没有人让这样的场景工作？有没有比我更了解 JSF/Seam 的人有什么好的建议？提前致谢！

【问题讨论】：

标签： java jsf performance seam richfaces

【解决方案1】：

我就是这么做的，尽管我不关心rich:effect。

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

一个例子：

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

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

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

$j = jQuery.noConflict();

消息区：

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

一些用于隐藏和显示 div 的 javascript：

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 将始终显示。

【讨论】：

顺便说一句，没必要。通过谷歌搜索，我发现了我在想什么

【解决方案2】：

感谢您的建议，达摩。我试过了，它没有问题。此外，我能够使用丰富的：效果来解决它。这是我想出的：

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

一旦我这样做了，一切都按预期进行。

【讨论】：