richface中a4j:from和ajax Button及H:button的使用

先写总结：

  

     有局部刷新的需求的页面或panel，都选择用<a4j:from >,和<a4j button>或link； 需要提交整个form表单的button选在<H:button>

   注意：如果<a4j:form > 包含其他的Ajax命令部件，不应该使用<a4j:form ajaxsubmit =“true”>。同时，由于安全原因，上传下载表单元素不能被转换为可ajaxable。

官方介绍：

  a4j:form  与  h:form 功能基本类似，除了下面两个功能：

• 与 a4j:htmlCommandLink 一起使用，解决了当不    re-rendering  整个 form 时，h:commandLink  组件不能被 re-rendered
• 当ajaxSubmit = true时， 可以将所有non-ajax组件（包含第三方组件）转化成 ajax组件

h:commandLink的renderer 生成Javascript code在click提交时。然而，如果h:commandLink 在a4j form的外面,列如，你想渲染这个h:commandLink

下面是有问题的示例代码，请用   a4j:form 来替代h:form，用a4j:htmlCommandLink 来替代 h:commandLink      

  ....
  <-- This code does not work correctly after the link is re-rendered -->
  <h:form>
        ....
        <a4j:commandButton value="Update Non-Ajax Link" reRender="<span style="color:#ff0000;">panel</span>" />
        ....<!--用上面的a4j：button来reRender下面的panel，是不对的-->
        <h:panelGrid id="panel">
            ....
            <h:commandLink value="Non-Ajax Submit" action="foo" >
                ...
            </h:commandLink>  
            ....
        </h:panelGrid>
        ....
  </h:form>

当ajaxSubmit="true" 时，该form里的所有标准的action组件都具有的ajax性质。这种方法是一种类似于Ajaxanywhere框架使用。如果一个form在Ajax模式下工作，标准的Ajax属性如 reRender，requestdelay EventQueue的，可以使用。下面的示例显示部分和完全刷新页面之间的差异。

在这两种情况下，常规H：命令按钮是用于表单提交。  

第一个图：ajaxSubmit="true",，只刷新Name；第二个图：non-ajax,会刷新整个页面。

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
            
    <style type="text/css">
        .dr-pnl-b {
            padding: 25px;
        }
    </style>
            
    <h:panelGrid columns="2">
        <rich:panel><!--第一个panel-->
            <f:facet name="header">
                <h:outputText value="Form with ajaxSubmit equals true"/>
            </f:facet>
            
            <a4j:form ajaxSubmit="true" reRender="name">
                <h:panelGrid>
                    <h:commandButton value="Set Local Name to John (Ajax)" action="#{userBean.nameItJohn}" />
                    <h:outputText id="name" value="Name:#{userBean.name}" />
                </h:panelGrid>
            </a4j:form>
        </rich:panel>
        <!--第二个panel-->
        <rich:panel>
            <f:facet name="header">
                <h:outputText value="Form with ajaxSubmit equals false"/>
            </f:facet>
            
            <a4j:form>
                <h:panelGrid>
                    <h:commandButton value="Set Both Name to Mark (non-Ajax)" action="#{userBean.nameItMark}" />
                    <h:outputText id="name" value="Name:#{userBean.name}" />
                </h:panelGrid>
            </a4j:form>
            
        </rich:panel>
    
    </h:panelGrid>
</ui:composition>