rich: problema con l'uso degli effetti

Question

Vorrei usare un rich:effect con un elemento JSF nella mia app, ma ho qualche problema con il lato AJAX delle cose.

Come di seguito, ho un elemento h:outputText che ha un valore di riferimento JSF (#{MyBacking.sysMsg}) che cambia durante l'esperienza utente con l'app. Poiché l'elemento rich:effect utilizza eventi javascript, la specifica del codice riportato di seguito non funziona.

Ho provato a usare a4j: supporto per ajaxify l'elemento h:outputText ma questo è apparentemente ignorato anche. L'utente non fa clic sui pulsanti: la variabile sysMsg viene aggiornata altrove e voglio evidenziare una modifica al pubblico.

Il codice è il seguente:

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

Penso che ci sia destinata a essere una risposta semplice per questo, ma io non riesco a trovare la risposta nella mia testa o sulla rete. Qualcuno può aiutarmi?

Answer 1

Per aggiornare il testo in base alle modifiche del server, è necessario utilizzare <a4j:poll> o <a4j:push>.

Es .:

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

Questo, naturalmente, metterà in evidenza ogni secondo e non solo quando il valore è cambiato. Per evidenziare solo sulle modifiche, è preferibile utilizzare una funzione javascript/jquery personalizzata, ricordare il valore e richiamare l'evidenziazione quando è stata modificata.

Ecco una possibile soluzione:

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

Qui ci sono campioni: Exadel Demo e la documentazione: rich:effecta4j:poll