salesforce 零基礎學習（二十七）VF頁面等待（loading）效果製做

進行查詢的狀況下，顯示友好的等待效果能夠讓用戶更好的瞭解目前的狀態以及減小用戶消極的等待，例以下圖所示。

VF提供了<apex:actionStatus>標籤，,此標籤用於顯示一個AJAX請求更新的狀態。一個AJAX請求狀態能夠顯示爲進展或完成。

實現上述效果的主要步驟以下：

1.建立一個Component：StatusSpinner.component

其中須要在salesforce中上傳一個靜態資源，顯示loading的gif圖片，有須要的能夠進行下載：http://files.cnblogs.com/files/zero-zyq/loading.gif

 1 <apex:component >
 2 
 3 <apex:attribute name="Message"
 4     type="String"
 5     description="Messaging show in loading status spinner"
 6     default="Loading..."/>
 7 
 8 <apex:actionStatus id="LoadingStatusSpinner">
 9      <apex:facet name="start">
10           <div id="loadingDiv" class="loadingDiv" >
11                <span id="loadingHolder" class="loadingHolder">
12                     <img class="loadingImage" title="Loading..." alt="Loading..." src="/img/loading.gif"/>
13                     <span class="loadingDescription">{!message}</span>
14                </span>
15           </div>
16      </apex:facet>
17 </apex:actionStatus>
18 
19 <style>
20 .loadingImage { vertical-align:bottom; }.loadingDescription { padding:0 1.5em 0 0.5em; }
21 .loadingHolder {
22      background-color: #FFFFCC;
23      border: 1px solid #333333;
24      font-size: 1.2em;
25      font-weight: bold;
26      padding: 0.5em;
27      position: relative;
28      top: 45%;
29      white-space: nowrap;
30 }
31 .loadingDiv {
32      background-color: lightgrey;
33      opacity: .75;
34      filter: alpha(opacity=75); /* IE's opacity*/
35      text-align: center;
36      width: 100%;
37      height: 100%;
38      position: fixed;
39      z-index: 300;
40      top: 0;
41      left: 0;
42 }    
43 
44 </style>
45 
46 </apex:component>

2.建立GoodsController

 1 public with sharing class GoodsController {
 2        
 3        public List<GOODS__c> goodsList{get;set;}
 4        
 5        //public GOODS__c goods{get;set;}
 6        
 7        public String goodsName{get;set;}
 8        public Decimal goodsPriceStart{get;set;}
 9        public Decimal goodsPriceEnd{get;set;}
10     
11        public String goodsDescribe{get;set;}  
12        public GoodsController() {
13            goodsList = new List<GOODS__c>();
14            refreshData();
15        }
16        //刷新數據做用
17        public void refreshData() {
18            Boolean isStatus = true;
19            String goodsQueryString = 'SELECT   GoodsBrand__c,'+
20                                       'GoodsDescribe__c,GoodsName__c, GoodsPrice__c,'+
21                                        '  Id FROM Goods__c where IsDeleted = false limit 100';
22            goodsList = Database.query(goodsQueryString);
23        }
24        
25        public void query() {
26            String goodsSql = 'SELECT GoodsBrand__c,'+
27                               'GoodsDescribe__c,GoodsName__c ,  GoodsPrice__c,'+
28                                ' Id FROM GOODS__c where IsDeleted = false ';
29            if(goodsName.length() >0) {
30                goodsName = '%' + goodsName + '%';
31                goodsSql += ' and GoodsName__c like :goodsName ';
32            }
33            if(goodsDescribe.length() > 0) {
34                goodsDescribe = '%' + goodsDescribe + '%';
35                goodsSql += ' and GoodsDescribe__c like :goodsDescribe';
36            }
37            
38            if(String.valueOf(goodsPriceStart).length()>0) {
39                goodsSql += ' and GoodsPrice__c >= :goodsPriceStart';
40            }
41            if(String.valueOf(goodsPriceEnd).length()>0) {
42                goodsSql += ' and GoodsPrice__c <= :goodsPriceEnd';
43            }
44            goodsSql += ' limit 100';
45            goodsList = Database.query(goodsSql);
46            goodsName = goodsName.remove('%');
47            goodsDescribe = goodsDescribe.remove('%');
48        }
49 }

3.建立GoodsListPage:頁面中將Component引入進來，而後在apex:commandButton標籤上綁定action，設置status值，status值爲apex:actionStatus的Id,設置reRender爲table的Id，以便查詢後從新渲染table列表。

 1 <apex:page controller="GoodsController" showHeader="false">
 2     
 3     <c:StatusSpinner />
 4     <apex:messages />
 5     <apex:form >
 6         <apex:pageBlock title="GOODS" id="page">
 7             <apex:pageBlockSection title="query goods">
 8                 <apex:inputText value="{!goodsName}" label="goodsName"
 9                     id="goodsName" />
10                 <apex:inputText value="{!goodsPriceStart}" 
11                     label="goodsPriceStart" />
12                 <apex:inputText value="{!goodsPriceEnd}"
13                     label="goodsPriceEnd" />
14                 <apex:inputText value="{!goodsDescribe}"
15                     label="goodsDescribe" />
16                 <apex:commandButton value="query" action="{!query}" status="LoadingStatusSpinner" reRender="resultGoods"/>
17             </apex:pageBlockSection>
18             
19             <apex:pageBlockTable value="{!goodsList}" var="goods" id="resultGoods">
20                 <apex:column headervalue="goodsName">
21                     <apex:outputField value="{!goods.GoodsName__c}"/>
22                 </apex:column>
23                 <apex:column headervalue="goodsPrice">
24                     <apex:outputField value="{!goods.GoodsPrice__c}" />
25                 </apex:column>
26                 <apex:column headervalue="goodsDescribe">
27                     <apex:outputField value="{!goods.GoodsDescribe__c}" />
28                 </apex:column>
29             </apex:pageBlockTable>
30         </apex:pageBlock>
31     </apex:form>
32 </apex:page>

經過以上三個步驟，即可以實現查詢顯示等待效果。

總結：apex:actionStatus能夠相對較好的顯示等待（loading）效果，不過相關限制較多，須要相關commandButton等標籤提供reRender屬性。好比不能在inputFile中使用此標籤由於inputFile的頁面不能reRender，若是相似上面demo中簡單的查詢或者ajax請求進行查詢能夠使用此種方式，若是存在inputFile的頁面，慎用。