JSF：新しいレコードをテーブルに挿入するときにアニメーション効果を作成する方法はありますか？

Question

私はこの質問をたくさんグーグルで調べてきましたが、解決策を見つけていないようです。これを達成できる開発者はいないのだろうか？ richfaces、primefaces、IcefacesなどのJSFのカップルAjaxフレームワークがあることを知っています...私は彼らのショーケースを見て、私が探しているものを見つけることができなかったようです。

Answer 1

これが機能する方法です h:dataTable 常にテーブルに追加されると仮定してください。

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

そして豆：

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

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

テーブル内の選択した位置に挿入する場合は、使用する方が良いです rich:extendedDataTable そして、このようなものをセレクターとして使用します。

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

Answer 2

richfaces ネイティブサポートがあります jquery 使用 rich:jQuery 成分。あらゆる効果を使用できます jquery サポート。例えば：

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

また

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

ここでより多くの例を見つけることができます： http://docs.jboss.org/richfaces/latest_3_3_x/en/devguide/html/rich_jquery.html