使用ASP.NET Atlas编写显示真实进度的ProgressBar(进度条)控件

 英文版见:http://dflying.dflying.net/1/archive/100_building_a_real_time_progressbar_using_aspnet_atlas.html

当后台在进行某些长时间的操作时,如果能在页面上提供一个显示真实进度的进度条,而不是让用户不知情的等待或是从前的那些简单的估计,将是一个非常难得的出彩之处。现在使用ASP.NET Atlas完全有可能做到这些。这篇文章将讨论如何完成这一功能并介绍一些有关Atlas客户端控件开发的基本概念。您同时可以在这里下载示例程序以及源文件

实现网页上的进度条想法其实很简单:编写一个客户端的Atlas控件,每隔一段时间请求一次服务器,并使用返回的当前进度数据更新进度条的显示。在这个示例中,将有四个部分的代码组成:

  1. 一个需要较长时间才能完成的Web Service
  2. 一个用来查询上述Web Service进度的Web Service
  3. 客户端Atlas进度条(ProgressBar)控件,负责维护客户端逻辑并输出可视化UI。这也是本示例中最重要的一个组件,在将来可被重用于其他页面或程序的开发
  4. 包含上述Web Service以及控件的ASP.NET测试页面

下面我们一步一步地来实现以上四个步骤:

 需要较长时间完成的Web Service

在实际的程序中,一个需要较长时间完成的Web Service可能有如下声明:

1[WebMethod]
2public void TimeConsumingTask()
3{
4    ConnectToDataBase();
5    GetSomeValueFromDataBase();
6    CopySomeFilesFromDisk();
7    GetARemoteFile();
8}

这样我们就可以插入一些辅助方法来确定当前进度完成情况,setProgress(int)用来设定当前的进度完成百分比:

 1[WebMethod]
 2public void TimeConsumingTask()
 3{
 4    setProgress(0);
 5    ConnectToDataBase();
 6    setProgress(10);
 7    GetSomeValueFromDataBase();
 8    setProgress(40);
 9    CopySomeFilesFromDisk();
10    setProgress(50);
11    GetARemoteFile();
12    setProgress(100);
13}

在本示例中,我们仅仅使用Cache来储存进度完成信息并利用Thread.Sleep()方法模拟操作的延迟:

 1[WebMethod]
 2public int StartTimeConsumingTask()
 3{
 4    string processKey = this.Context.Request.UserHostAddress;
 5    string threadLockKey = "thread" + this.Context.Request.UserHostAddress;
 6    object threadLock = this.Context.Cache[threadLockKey];
 7    if (threadLock == null)
 8    {
 9        threadLock = new object();
10        this.Context.Cache[threadLockKey] = threadLock;
11    }

12
13    // Only allow 1 running task per user.
14    if (!Monitor.TryEnter(threadLock, 0))
15        return -1;
16
17    DateTime startTime = DateTime.Now;
18
19    // Simulate a time-consuming task.
20    for (int i = 1; i <= 100; i++)
21    {
22        // Update the progress for this task.
23        this.Context.Cache[processKey] = i;
24        Thread.Sleep(70);
25    }

26
27    Monitor.Exit(threadLock);
28
29    return (DateTime.Now - startTime).Seconds;
30}

31

 

查询进度的Web Service

很容易实现,只需从Cache中取得进度信息:

 1[WebMethod]
 2public int GetProgress()
 3{
 4    string processKey = this.Context.Request.UserHostAddress;
 5    object progress = this.Context.Cache[processKey];
 6    if (progress != null)
 7    {
 8        return (int)progress;
 9    }

10
11    return 0;
12}

 

客户端进度条(ProgressBar)控件

第一步:从Sys.UI.Control继承

ProgressBar控件应该继承自Atlas的控件基类Sys.UI.Control,并且声明为密封类(sealed class,不能再被继承)。Sys.UI.Control基类包含了一些所有的控件共有的操作与方法。比如,将自己与某个HTML元素关联起来(也就是所谓的binding)等。同时也要注册以让Atlas了解这个新的类型以便今后的声明及使用,例如,让Atlas可以取得这个类型的描述等。

1Sys.UI.ProgressBar = function(associatedElement) {
2    Sys.UI.ProgressBar.initializeBase(this, [associatedElement]);
3
4}

5Type.registerSealedClass('Sys.UI.ProgressBar', Sys.UI.Control);
6Sys.TypeDescriptor.addType('script','progressBar', Sys.UI.ProgressBar);
7

 

第二步:添加私有成员并书写相应的Setter/Getter

下面需要添加一些属性用来设定我们的控件。在这个例子中,我们需要三个属性:

  1. Interval. 每次重新查询进度并更新进度条的间隔时间。单位:毫秒
  2. Service Url. Web Service文件的路径。
  3. Service Method. 取得进度信息的方法名。

这些属性应该严格遵守Atlas的命名规范:Getter应该以'get_'开头,Setter应该以'set_'开头并传入一个参数。还需要在控件的描述方法(descriptor)中添加对于这些属性的说明。有关描述方法(descriptor)将在第四步中说明。例如,针对Service Method属性,我们有如下声明:

1var _serviceMethod;
2
3this.get_serviceMethod = function() {
4    return _serviceMethod;
5}

6
7this.set_serviceMethod = function(value) {
8    _serviceMethod = value;
9}

 

第三步:使用Timer控件每隔一段时间查询一次Web Service

Sys.Timer用于每过一段时间调用一个方法(发出一个事件),我们可以定义一个委托来指向这个方法,并在并在每一个时间段内查询这个Web Service。为了避免浏览器内存泄露,在控件析构(dispose)的时候应该记得做一些必要的清理。

还有,注意当前一个请求并没有返回时,不应该发送第二个请求。

 1var _timer = new Sys.Timer();
 2var _responsePending;
 3var _tickHandler;
 4var _obj = this;
 5
 6this.initialize = function() {
 7    Sys.UI.ProgressBar.callBaseMethod(this, 'initialize');
 8    _tickHandler = Function.createDelegate(thisthis._onTimerTick);
 9    _timer.tick.add(_tickHandler);
10    this.set_progress(0);
11}

12
13this.dispose = function() {
14    if (_timer) {
15        _timer.tick.remove(_tickHandler);
16        _tickHandler = null;
17        _timer.dispose();
18    }

19    _timer = null;
20    associatedElement = null;
21    _obj = null;
22
23    Sys.UI.ProgressBar.callBaseMethod(this, 'dispose');
24}

25
26this._onTimerTick = function(sender, eventArgs) {
27    if (!_responsePending) {
28        _responsePending = true;
29        
30        // Asynchronously call the service method.
31        Sys.Net.ServiceMethod.invoke(_serviceURL, _serviceMethod, nullnull, _onMethodComplete);
32    }

33}

34
35function _onMethodComplete(result) {
36    // Update the progress bar.
37    _obj.set_progress(result);
38    _responsePending = false;
39}

 

第四步:添加控制方法

我们应该可以控制进度条的开始/停止。并且,对于一个Atlas控件,相关的描述方法(descriptor)也是必须的。Atlas会利用它来描述这个类型的信息。

 1this.getDescriptor = function() {
 2    var td = Sys.UI.ProgressBar.callBaseMethod(this, 'getDescriptor');
 3    td.addProperty('interval', Number);
 4    td.addProperty('progress', Number);
 5    td.addProperty('serviceURL', String);
 6    td.addProperty('serviceMethod', String);
 7    td.addMethod('start');
 8    td.addMethod('stop');
 9    return td;
10}

11
12this.start = function() {
13    _timer.set_enabled(true);
14}

15
16this.stop = function() {
17    _timer.set_enabled(false);
18}

 

OK,目前为止客户端的控件就完成了。我们把它存为ProgressBar.js

ASP.NET Testing Page ASP.NET测试页面

对于任何的Atlas页面,我们第一件需要做的事情就是添加一个ScriptManager服务器控件。在这个示例中我们将引用ProgressBar控件,较长时间才能完成的Web Service以及进度查询Web Service。(这两个Web Service位于同一个文件中:TaskService.asmx

1<atlas:ScriptManager ID="ScriptManager1" runat="server" >
2    <Scripts>
3        <atlas:ScriptReference Path="ScriptLibrary/ProgressBar.js" ScriptName="Custom" />
4    </Scripts>
5    <Services>
6        <atlas:ServiceReference Path="TaskService.asmx" />
7    </Services>
8</atlas:ScriptManager>

接下来是页面的布局与样式:

 1<style type="text/css">
 2{
 3    font-family: tahoma;
 4}

 5.progressBarContainer {
 6    border: 1px solid #000;
 7    width: 500px;
 8    height: 15px;
 9}

10.progressBar {
11    background-color: green;
12    height: 15px;
13    width: 0px;
14    font-weight: bold;
15}

16
</style>
17
18<div>Task Progress</div>
19<div class="progressBarContainer">
20    <div id="pb" class="progressBar"></div>
21</div>
22<input type="button" id="start" onclick="startTask();return false;" value="Start the Time Consuming Task!" />
23<div id="output" ></div>

最后是一段JavaScript启动那个较长时间才能完成的Web Service并让ProgressBar控件开始工作:


截图和下载

现在所有的事情都搞定了,可以运行了!

页面初始化:

运行中:

运行完成:

 

示例程序以及源文件可以在这里下载

posted on 2006-03-28 18:09  Dflying Chen  阅读(16701)  评论(74编辑  收藏  举报