rich: problem z używaniem efektu

Question

Chciałbym użyć elementu rich:effect z elementem JSF w mojej aplikacji, ale mam niewielki problem ze stroną AJAX.

Jak poniżej, mam element h:outputText, który ma wartość odniesienia JSF (#{MyBacking.sysMsg}), która zmienia się podczas doświadczenia użytkownika z aplikacją. Ponieważ element rich:effect wykorzystuje zdarzenia javascript, określenie kodu poniżej nie działa.

Próbowałem używać a4j: support, aby zinterpretować element h:outputText, ale jest to z pozoru ignorowane. Żaden z przycisków nie zostanie kliknięty przez użytkownika - zmienna sysMsg jest aktualizowana w innym miejscu i chcę podświetlić zmianę wśród odbiorców.

Kod jest w następujący sposób:

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

myślę, że nie ma obowiązek być prosta odpowiedź na to, ale nie wydaje się znaleźć odpowiedź w głowie lub w sieci. Czy ktoś może mi pomóc?

Answer 1

Aby zaktualizować tekst na podstawie zmian w serwerach, należy użyć <a4j:poll> lub <a4j:push>.

Np .:

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

To oczywiście będzie uwydatniał co drugi, a nie tylko wtedy, gdy wartość uległa zmianie. Aby podświetlić tylko w przypadku zmiany, prawdopodobnie lepiej jest użyć niestandardowej funkcji javascript/jquery, pamiętaj, że wartość i wywołanie podświetlisz po zmianie.

Oto możliwe rozwiązanie:

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

Oto próbki: Exadel Demo i dokumentacja: rich:effecta4j:poll