FacesMessages和豐富：效果如何？

Question

我希望能夠使用JSF / Seam / RichFaces進行Ajax調用，並使用相關的h：messages組件進行頁面更新。 這沒有問題。 我能夠執行適當的reRender。 但是，我也希望能夠利用豐富的效果來使它更漂亮。 理想情況下，我希望能夠讓消息淡入，然后在用戶點擊它們時消失。 但是，到目前為止，我一直無法做到這一點。

有沒有人得到這樣的場景？ 知道JSF / Seam比我好一點的人有什么好建議嗎？ 提前致謝！

Answer 1

我這樣做雖然我不打擾rich:effect 。

我使用jQuery。 這是個人偏好，但我發現它比使用rich：effect（基於Scriptaculous）更容易和更直接。 值得快速瀏覽一下jQuery Effects文檔 。

一個例子：

將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 a4j:commandButton等）。

就個人而言，我更喜歡不對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>

一旦我這樣做，一切都按預期工作。