丰富：效果使用问题

Posted 2023-02-22

【中文标题】丰富：效果使用问题

【英文标题】：rich:effect usage problem

【发布时间】：2011-06-12 11:41:32

【问题描述】：

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

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

我尝试使用 a4j:support 对 h:outputText 元素进行 ajaxify 处理，但这似乎也被忽略了。用户不会点击任何按钮 - 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" />

我认为这肯定有一个简单的答案，但我似乎无法在脑海中或在网上找到答案。谁能帮我？

【参考方案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:effecta4j:poll

【讨论】：

感谢您的帮助 - 我尝试了 ajaxed 面板和 div 均无济于事。

我更新了我的答案以满足您对服务器端值更改的需求。