UPD я так подумал и решил что держать пример работающим не имеет никакого мыслся так как Google Geers приказал долго жить, а переписывать на другую технологию не имеет смысла, так как это был бы уже совсем другой пост.
В одной из прошлых статей я рассказывал как совместить Modal Dialog и Progress Bar, теперь пришло время рассказать как это можно использовать. Есть такая штука как Google Gears это интернет акселератор предназначенный по большому счету для продуктов самого Google, таких как почта, календарь, ридер и т.д. Но Google предоставляет возможность устанавливать акселератор и на сторонние сайты, чем я сейчас и займусь. Самым простым видом акселерации является загрузка в кеш статических файлов, то есть картинок, скриптов и css стилей, хотя теоретически можно загружать и все остальное включая html самой страницы. Я покажу как сделать анимацию загрузки файлов в хранилище Google Gears.
Итак начну с начала, мне понадобиться скрипт который инициализирует Google Gears, он написан самим Google и является единственным официальным способом запустить Google Gears, и jQuery UI для создания модального диалога из прошлой статьи. Скрипт создаёт фабрику объектов с которой я буду работать дальше, хотя там и так подробно описано в комментариях. Дальше логика такая — нужно создать новый «склад» и передать все отобранные для кеширования файлы, обновляя после каждого файла ползунок загрузки. Поехали:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>GoogleGears local store setup</title>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="ui/ui.core.js" type="text/javascript"></script>
<script src="ui/ui.resizable.js" type="text/javascript"></script>
<script src="ui/ui.draggable.js" type="text/javascript"></script>
<script src="ui/ui.dialog.js" type="text/javascript"></script>
<script src="ui/ui.progressbar.js" type="text/javascript"></script>
<script src="http://code.google.com/intl/ru/apis/gears/gears_init.js" type="text/javascript"></script>
<link href="themes/smoothness/ui.core.css" type="text/css" rel="stylesheet" />
<link href="themes/smoothness/ui.theme.css" type="text/css" rel="stylesheet" />
<link href="themes/smoothness/ui.resizable.css" type="text/css" rel="stylesheet" />
<link href="themes/smoothness/ui.dialog.css" type="text/css" rel="stylesheet" />
<link href="themes/smoothness/ui.progressbar.css" type="text/css" rel="stylesheet" />
<style>
.ui-progressbar-indicator{
line-height:40px;
position:absolute;
text-indent:-20px;
left:50%;
}
</style>
<script type="text/javascript">
if(!window.console)
console = {info:function(){}};
jQuery().ready(function($){
// определяю все с чем буду работать
var
localServer, // сервер
localStore, // хранилище
counter = 0, // итератор файлов
percent = 0, // текущий процент
store = "myStore", // имя хранилища
filesToCapture = [ ], // список файлов
// диалог
dialog = $("<div/>")
// с параметрами но на этот раз без кнопки
.dialog({modal:true,title:"Заголовок",overlay:{backgroundColor:'#000',opacity: 0.5}})
// и без крестика
.parent().find(".ui-dialog-titlebar-close").hide().end().end(),
// с цифровым индикатором
indicator = $("<div/>").addClass("ui-progressbar-indicator").text("0")
.appendTo(dialog),
// и ползунком
progressbar = $("<div/>")
// обновляю значение индикатора
.progressbar({value:0,change:function(event,ui){indicator.text(percent+"%")}})
.appendTo(dialog);
try {
// пробую создать локальный сервер
localServer = google.gears.factory.create('beta.localserver');
window.console.info('Ready!');
// в нем локальное хранилище
localServer.createStore(store);
window.console.info('Created the store');
} catch (e) {
// при неудаче - выходим
window.console.info(e.message);
return;
}
// открываем хранилище
localStore = localServer.openStore(store);
// передаем в него список файлов
localStore.capture(filesToCapture, function (url, success, captureId) {
counter++;
// считаем текущий процент
percent = Math.round(counter/filesToCapture.length*100);
// обновляем ползунок
progressbar.progressbar("value",percent)
// если все файлы закешированы чистим ненужное
if (counter == filesToCapture.length) {
progressbar.progressbar("destroy");
dialog.dialog("destroy");
indicator.remove();
}
// на всякий случай пишу все в лог
window.console.info(url + ' captured ' + (success ? 'succeeded' : 'failed'));
});
});
</script>
</head>
<body>
</body>
</html>
Примера к сожалению не будет потому что даже если у когото из вас и установлен Google Gears, то у меня нечего особо кешировать, можете посмотреть как выглядит анимация в статье Modal Dialog и Progress Bar
Конечно же интереснее было бы использовать ManagedResourceStore с манифестом, это дает возможность иметь сразу например несколько цветовых схем сайта, но тогда бы не получилось анимировать процесс загрузки.
