Диджит ProgressBar, индикатор хода выполнения какой то операции, напоминает другие аналогичные индикаторы, которые можно встретить в приложениях, и предусматривает возможность работы в детерминированном и в недетерминированном режиме. Самое замечательное в этом диджите то, что о нем можно много не говорить. Фактически пример 15.3 прекрасно говорит сам за себя.
Пример 15.3. Типичный пример использования недетерминированного индикатора ProgressBar
<div dojoType="dijit.ProgressBar" indeterminate="true"
style="width:300px"></div>
Конечно, иногда вместо использования недетерминированного индикатора будет возникать необходимость получать данные от сервера и отображать фактический ход выполнения операции. Предположим, что у нас имеется серверная процедура, которая возвращает некоторое значение, свидетельствующее о ходе выполнения операции. Следующий фрагмент представляет собой модель такой процедуры:
import cherrypy
config = {
#передать этот статический файл...
'/foo.html' :
{
'tools.staticfile.on' : True,
'tools.staticfile.filename' : '/absolute/path/to/foo.html'
}
}
class Content:
def __init__(self):
self.progress = 0
@cherrypy.expose
def getProgress(self):
self.progress += 10
return str(self.progress)
cherrypy.quickstart(Content(), '/', config=config)
Файл foo.html, содержащий диджит ProgressBar, может выглядеть, как показано ниже:
<html>
<head>
<title>Fun with ProgressBar!</title>
<link rel="stylesheet" type="text/css"
href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css"
href="http://o.aolcdn.com/dojo/1.1/dijit/themes/tundra/tundra.css" />
<script
type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js"
djConfig="parseOnLoad:true">
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.ProgressBar");
dojo.addOnLoad(function() {
var progressInterval = setInterval(function() {
dojo.xhrGet({
url : "http://localhost:8080/getProgress",
load : function(response, ioArgs) {
console.log("load", response);
if (response <= 100) {
dijit.byId("pb").update(
{progress : response});
}
else {
clearInterval(progressInterval);
}
}
});
}, 1000);
});
</script>
</head>
(body style="padding:100px" class="tundra")
<div>Loading...</div>
<div id="pb" dojoType="dijit.ProgressBar" style="width:300px"></div>
(/body)
</html>
Функция addOnLoad в этом примере каждую секунду обращается к URL /getProgress, чтобы получить некоторое значение и с помощью функции update диджита ProgressBar использовать его для индикации хода выполнения операции. Применение функции setInterval вполне обычно при работе с ProgressBar.
Наконец напомню, что если потребуется отображать диджит ProgressBar при одновременном блокировании доступа к странице, чтобы заставить пользователя дождаться завершения операции, вы всегда можете поместить его внутрь диджита Dialog. Сделать это можно примерно так, как показано ниже:
var pb = new dijit.ProgressBar;
var d = new dijit.Dialog;
d.setContent(pb.domNode);
d.show();