salesforce 零基础学习（二十七）VF页面等待（loading）效果制作

进行查询的情况下，显示友好的等待效果可以让用户更好的了解目前的状态以及减少用户消极的等待，例如下图所示。



VF提供了<apex:actionStatus>标签，,此标签用于显示一个AJAX请求更新的状态。一个AJAX请求状态可以显示为进展或完成。

实现上述效果的主要步骤如下：

1.创建一个Component：StatusSpinner.component

其中需要在salesforce中上传一个静态资源，显示loading的gif图片，有需要的可以进行下载：http://files.cnblogs.com/files/zero-zyq/loading.gif

<apex:component >

<apex:attribute name="Message"
type="String"
description="Messaging show in loading status spinner"
default="Loading..."/>

<apex:actionStatus id="LoadingStatusSpinner">
<apex:facet name="start">
<div id="loadingDiv" class="loadingDiv" >
<span id="loadingHolder" class="loadingHolder">
<img class="loadingImage" title="Loading..." alt="Loading..." src="/img/loading.gif"/>
<span class="loadingDescription">{!message}</span>
</span>
</div>
</apex:facet>
</apex:actionStatus>

<style>
.loadingImage { vertical-align:bottom; }.loadingDescription { padding:0 1.5em 0 0.5em; }
.loadingHolder {
background-color: #FFFFCC;
border: 1px solid #333333;
font-size: 1.2em;
font-weight: bold;
padding: 0.5em;
position: relative;
top: 45%;
white-space: nowrap;
}
.loadingDiv {
background-color: lightgrey;
opacity: .75;
filter: alpha(opacity=75); /* IE's opacity*/
text-align: center;
width: 100%;
height: 100%;
position: fixed;
z-index: 300;
top: 0;
left: 0;
}

</style>

</apex:component>

2.创建GoodsController

public with sharing class GoodsController {

public List<GOODS__c> goodsList{get;set;}

//public GOODS__c goods{get;set;}

public String goodsName{get;set;}
public Decimal goodsPriceStart{get;set;}
public Decimal goodsPriceEnd{get;set;}

public String goodsDescribe{get;set;}
public GoodsController() {
goodsList = new List<GOODS__c>();
refreshData();
}
//刷新数据作用
public void refreshData() {
Boolean isStatus = true;
String goodsQueryString = 'SELECT   GoodsBrand__c,'+
'GoodsDescribe__c,GoodsName__c, GoodsPrice__c,'+
'  Id FROM Goods__c where IsDeleted = false limit 100';
goodsList = Database.query(goodsQueryString);
}

public void query() {
String goodsSql = 'SELECT GoodsBrand__c,'+
'GoodsDescribe__c,GoodsName__c ,  GoodsPrice__c,'+
' Id FROM GOODS__c where IsDeleted = false ';
if(goodsName.length() >0) {
goodsName = '%' + goodsName + '%';
goodsSql += ' and GoodsName__c like :goodsName ';
}
if(goodsDescribe.length() > 0) {
goodsDescribe = '%' + goodsDescribe + '%';
goodsSql += ' and GoodsDescribe__c like :goodsDescribe';
}

if(String.valueOf(goodsPriceStart).length()>0) {
goodsSql += ' and GoodsPrice__c >= :goodsPriceStart';
}
if(String.valueOf(goodsPriceEnd).length()>0) {
goodsSql += ' and GoodsPrice__c <= :goodsPriceEnd';
}
goodsSql += ' limit 100';
goodsList = Database.query(goodsSql);
goodsName = goodsName.remove('%');
goodsDescribe = goodsDescribe.remove('%');
}
}

3.创建GoodsListPage:页面中将Component引入进来，然后在apex:commandButton标签上绑定action，设置status值，status值为apex:actionStatus的Id,设置reRender为table的Id，以便查询后重新渲染table列表。

<apex:page controller="GoodsController" showHeader="false">

<c:StatusSpinner />
<apex:messages />
<apex:form >
<apex:pageBlock title="GOODS" id="page">
<apex:pageBlockSection title="query goods">
<apex:inputText value="{!goodsName}" label="goodsName"
id="goodsName" />
<apex:inputText value="{!goodsPriceStart}"
label="goodsPriceStart" />
<apex:inputText value="{!goodsPriceEnd}"
label="goodsPriceEnd" />
<apex:inputText value="{!goodsDescribe}"
label="goodsDescribe" />
<apex:commandButton value="query" action="{!query}" status="LoadingStatusSpinner" reRender="resultGoods"/>
</apex:pageBlockSection>

<apex:pageBlockTable value="{!goodsList}" var="goods" id="resultGoods">
<apex:column headervalue="goodsName">
<apex:outputField value="{!goods.GoodsName__c}"/>
</apex:column>
<apex:column headervalue="goodsPrice">
<apex:outputField value="{!goods.GoodsPrice__c}" />
</apex:column>
<apex:column headervalue="goodsDescribe">
<apex:outputField value="{!goods.GoodsDescribe__c}" />
</apex:column>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:form>
</apex:page>

通过以上三个步骤，便可以实现查询显示等待效果。

总结：apex:actionStatus可以相对较好的显示等待（loading）效果，不过相关限制较多，需要相关commandButton等标签提供reRender属性。比如不能在inputFile中使用此标签因为inputFile的页面不能reRender，如果类似上面demo中简单的查询或者ajax请求进行查询可以使用此种方式，如果存在inputFile的页面，慎用。