JSF: Y at-il un moyen de créer un effet d'animation lors insérer un nouvel enregistrement dans la table?

Question

J'ai été googler cette question beaucoup et je ne semble trouver une solution. Je me demande si tout développeur qui il capable d'atteindre cet objectif? Je sais qu'il ya deux ajax cadre là pour JSF comme RichFaces, primefaces, ICEfaces ... je regarder à leur vitrine, et ne pouvait pas semble trouver ce que je cherche.

Answer 1

Voici comment cela fonctionnerait pour h:dataTable en supposant que nous avons toujours append à 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 la fève:

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 cela comme sélecteur:

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

Answer 2

RichFaces a un support natif pour jQuery en utilisant le composant de rich:jQuery. Vous pouvez utiliser tous les effets que jQuery supports. 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 trouverez d'autres exemples ici: http: // docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/rich_jQuery.html