JSF: Existe-t-il un moyen de créer un effet d'animation lors de l'insertion d'un nouvel enregistrement dans une table?

Question

J'ai été googling cette question beaucoup et je ne semble pas trouver une solution. Je me demande si un développeur là-bas capable de réaliser cela? Je sais qu'il y a quelques ajax framework pour JSF comme Richfaces, les primitifs, les icefaces ... J'ai regardé leur showcase, et je n'arrivais pas à trouver ce que je cherchais.

Answer 1

Voilà comment cela fonctionnerait pour h:dataTable en supposant que nous ajoutons toujours à la table:

<h:form> 
<h:panelGroup id="animatedTableGroup"> 
    <h:dataTable id="animatedTable" value="#{myBean.rows}" var="row"> 
    <h:column> 
    <h:outputText value="#{row}"/> 
    </h:column> 
    </h:dataTable> 
    <rich:jQuery timing="onload" 
     selector="#animatedTable tr:last" query="fadeOut('slow')"/> 
    <rich:jQuery timing="onload" 
     selector="#animatedTable tr:last" query="fadeIn('slow')"/> 
</h:panelGroup> 

<a4j:commandButton value="Add row" 
     action="#{myBean.addRow}" reRender="animatedTableGroup"/> 
</h:form> 

et le haricot:

public void addRow() { 
    rows.add(new Date().toString()); 
} 

public List<String> getRows() { 
    return rows; 
} 

Si vous souhaitez insérer dans la position sélectionnée dans la table, il est préférable d'utiliser rich:extendedDataTable et utiliser quelque chose comme ceci comme sélecteur:

<rich:jQuery timing="onload" 
     selector="#animatedTable tr.rich-sdt-row-selected" query="..."/> 

Answer 2

RichFaces a un support natif pour jQuery utilisant rich:jQuery composant. Vous pouvez utiliser les effets pris en charge par jQuery. Par exemple:

<h:commandButton id="submitButton" value="Submit" 
    action="#{myBean.myAction}" style="display: none;"/> 
<rich:jQuery selector="#submitButton" 
    query="fadeIn('slow')" timing="onload"> 

ou

<h:commandButton id="submitButton" value="Submit" 
    action="#{myBean.myAction}" 
    onmouseover="jQuery(this).fadeOut('slow');" 
    onmouseout="jQuery(this).fadeIn('slow')"/> 

Vous pouvez trouver d'autres exemples ici: http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/rich_jQuery.html