rich:effect使用问题

Question

我想在我的应用程序中使用带有JSF元素的rich:effect，但在AJAX方面遇到了一些麻烦。

如下所示，我有一个h:outputText元素，它有一个JSF引用的值(#{MyBacking.sysMsg})，在应用程序的用户体验过程中会发生变化。由于rich:effect元素使用javascript事件，因此指定下面的代码不起作用。

我尝试过使用a4j:support来对h:outputText元素进行ajax化，但似乎也忽略了这一点。用户不会单击任何按钮- sysMsg变量在其他地方更新，我想向观众突出显示一个更改。

代码如下：

<h:outputText value="#{MyBacking.sysMsg}" id="sysMsg" style="#{MyBacking.colour}" />
<rich:effect event="onchange" type="Highlight" params="duration:0.8" />
<rich:effect event="onchange" for="sysMsg" type="Appear" params="delay:3.0,duration:0.5" />

我认为这个问题肯定会有一个简单的答案，但我似乎在我的头脑中或在网上找不到答案。有谁可以帮我？

Answer 1

要根据服务器端的更改更新文本，您必须使用<a4j:poll>或<a4j:push>。

例如：

<rich:effect name="highlight" for="sysMsg" type="Highlight" params="duration:0.8" />

<h:form>
<a4j:poll id="poll" interval="1000" reRender="sysMsg" oncomplete="highlight();"/>
</h:form>

当然，这将每时每刻都突出显示，而不仅仅是当值发生变化时。要仅在更改时突出显示，最好使用自定义的javascript/jquery函数，记住值和调用更改时的突出显示。

以下是一种可能的解决方案：

<h:form id="form">
<a4j:region renderRegionOnly="true">
    <h:outputText value="#{MyBacking.sysMsg}" id="sysMsg" style="#{MyBacking.colour}" />
    <a4j:poll id="poll" interval="1000" reRender="sysMsg" oncomplete="checkChange();" limitToList="true"/>
</a4j:region>

<rich:effect name="highlight" for="sysMsg" type="Highlight" params="duration:0.8" />

</h:form>

<script>
var value = $('form:sysMsg').textContent ;
function checkChange(){
    if($('form:sysMsg').textContent  != value){
        highlight();
    }
}
</script>

以下是示例：Exadel Demo和文档：rich:effect a4j:poll