8 _tickHandler = Function.createDelegate(this, this._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, null, null, _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控件开始工作：
截图和下载
现在所有的事情都搞定了，可以运行了！
页面初始化：
运行中：
运行完成：
示例程序以及源文件可以在这里下载。
文章整理：西部数码--专业提供域名注册、虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!
