Скачать виджет simple_clock.ru.wgt (5 Кб)|
Nickolay.info. Тексты. Делаем виджет для Оперы 9 или 10 |
Виджеты (иногда видгеты, англ. widgets) позиционируются разработчиками 9-й версии браузера Opera как "одно из самых заметных и интересных нововведений". На самом деле это просто упакованные в архив ZIP мини-программки на HTML+CSS+JavaScript, сделать которые может каждый. Удобство виджета состоит в том, что он, при запущенной "Опере", может исполняться не только поверх остальных окон, но и непосредственно на Рабочем Столе (правая кнопка на любом запущенном виджете).
Давайте пошагово сделаем несложный виджет. На его основе Вы легко сможете склепать и собственные творения. Собственно говоря, сайт widgets.opera.com предлагает мастер для добавления собственных виджетов, но мы, как обычно, стандартных путей не ищем.
Сначала создадим папку с названием simple_clock.ru (наш виджет будет представлять собой простые идущие часы) и в ней - файл с именем config.xml и следующим содержимым:
<?xml version="1.0" encoding="utf-8"?>
<widget network="public">
<widgetname>simple_clock.ru</widgetname>
<description>Simple clock with russian interface</description>
<id>
<host>my.opera.com</host>
<name>simple_clock.ru</name>
<revised>2009_09</revised>
</id>
<icon>./img/widget.ico</icon>
<width>101</width>
<height>39</height>
<author>
<name>PerS</name>
<link>http://nickolay.info</link>
<organization>PerS</organization>
</author>
</widget>
Как видите, мы переписали имя виджета в поля widgetname и name XML-файла. Ширина и высота окна виджета заданы свойствами width и height.
Основой виджета будет служить обычный HTML-файл с именем index.html. В него потребуется включить, как минимум, стилевое описание виджета, JavaScript-код для обеспечения его функциональности и HTML-код, который расставит элементы HTML внутри окна. Разработанный стиль включает в себя всего 6 классов:
<style>
body{
display: block;
background: transparent url(img/back.png) 0px 0px no-repeat;
font-family: sans-serif;
opacity: 0.8;
}
.dateid{
font-family: sans-serif;
font-size: 9px;
color: #CCCCFF;
background: #333333;
vertical-align: middle;
}
.timeid{
font-family: sans-serif;
font-size: 9px;
color: #CCCCFF;
background: #333333;
vertical-align: middle;
}
.closeButton {
position: absolute;
top: 2px;
left: 85px;
width: 15px;
height: 15px;
background: transparent url(img/close.png) no-repeat;
list-style-type: none;
z-index: 3;
}
.button:hover {
background-position: 0 50%;
}
.button:active {
background-position: 0 100%;
}
</style>
В классе body мы определили основной шрифт и прозрачность, а также фоновый рисунок окна виджета (соответственно, создадим внутри папки simple_clock.ru папку img и поместим туда рисунок back.png размером 101x39 пикселов, созданный в PhotoShop).
Классы dateid и timeid задают шрифт и цвета для вывода полей текущих даты и времени, класс closeButton описывает позицию, фоновый рисунок и размеры кнопки закрытия окна виджета, а дополнительные определения button:hover и button:active позволяют задать изменение цвета кнопки при наведении на неё курсора мыши и нажатии. Это достигается простым смещением вниз позиции рисунка кнопки (см. свойство background-position в стиле). Соответственно, при размере кнопки 15x15 пикселов нужно нарисовать 3 расположенных друг под другом изображения кнопки, что даст картинку размером 15x45. Эта картинка, как легко увидеть из стиля, сохранена под именем close.png в той же папке img.
Теперь у нас есть стиль, напишем функции JavaScript, обеспечивающие корректную работу часов.
<script>
function myclock() {
mydate = new Date();
hours = mydate.getHours();
minutes = mydate.getMinutes();
seconds = mydate.getSeconds();
if ((hours==0) && (minutes==0) && (seconds<2)) addDate();
mytime = (hours<10 ? "0" : "")+hours + ":" +
(minutes<10 ? "0" : "")+minutes + "." +
(seconds<10 ? "0" : "")+seconds;
document.all.timeid.innerText=mytime;
window.setTimeout("myclock();",1000);
}
function addDate() {
var dayNames = new Array("Вс","Пн","Вт","Ср","Чт","Пт","Сб");
monthNames = new Array("янв","фев","мар","апр","май","июн","июл","авг","сен","окт","ноя","дек");
myDate = new Date();
var year = myDate.getFullYear();
d = (dayNames[myDate.getDay()] + ", " + myDate.getDate() +" "+ monthNames[myDate.getMonth()] +", "+year);
document.all.dateid.innerText=d;
}
</script>
Здесь файл показан в кодировке Windows, на самом деле нужно сохранить его в Юникоде (UTF-8), раз мы указали это в конфигурации виджета. Да и вообще, корректно будет работать во всех версиях "Оперы" только с Юникодом.
Функция myclock() получает и форматирует системное время, не забывая о том, что при работе часов возможен переход через сутки, а функция addDate() получает и форматирует текущую дату. Для обеспечения обновления показаний часов каждую секунду, myclock() вызывает себя стандартным методом window.setTimeout.
Осталось подготовить элементы HTML, которые будут всё это отображать. В тело документа-виджета index.html поместим следующий код:
<div class="body" style="position:absolute; top:0px; left:0px; width:100px; height:32px; visibility:visible;"> <ul> <li class="closeButton button" onclick="window.close()"></li> </ul> </div> <div> <div class="dateid" id="dateid" valign="middle" align="center" style="position:absolute; top:2px; left:2px; width:82px; height:16px;"></div> <div class="timeid" id="timeid" valign="middle" align="center" style="position:absolute; top:20px; left:2px; width:82px; height:16px;"></div> </div>
Разумеется, это не единственно возможное решение. Главное, чтобы атрибуты class элементов соответствовали названиям применяемых стилей, а поля для вывода даты и времени, которые будут обновляться через JavaScript, имели те же атрибуты id, что указаны в коде функций myclock и addDate. Эти же функции стоит вызвать и при загрузке виджета:
<body onload="myclock(); addDate();">
Теперь запакуем содержимое папки simple_clock.ru в ZIP-архив таким образом, чтобы в корне архива лежала именно эта папка, а уже внутри неё - файлы config.xml, index.html и вложенная папка img с рисунками. Кстати, для полноты картины можно сделать к виджету и иконку в формате ICO 24 бита размером 32x32 бита. Ничего, кроме PhotoShop для этого не понадобится, подробности в этой заметке. При установленном WinRAR или другом подобном архиваторе нужный нам архив легче всего сделать, щёлкнув на папке правой кнопкой мыши и выбрав из меню команду "Добавить к архиву..." - проверьте только, чтоб формат архива был именно ZIP. Потом в любом файловом менеджере меняем тип файла .zip на .wgt, выполняем этот файл двойным щелчком. При установленной "Опере" 9 или 10 она запустится и запустит виджет. Проверено в версиях 9.64 и 10.0, всё работает.
Виджеты в "Опере" 9-10 лежат по адресу
C:\Documents and Settings\[ВАШ_ПРОФИЛЬ]\Application Data\Opera\Opera\profile\widgets\
Папка Application Data - скрытая, так что смотреть этот путь нужно при включенном показе скрытых папок (в Windows XP - Мой Компьютер, Сервис, Свойства папки, вкладка Вид, папка Файлы и папки, папка Скрытые файлы и папки, выбрать "Показывать...") или в файл-менеджере, который их показывает по умолчанию (Far Manager).
В "Опере" 11 виджеты стали располагаться в
C:\Documents and Settings\11111\Local Settings\Application Data\
- причём, каждый в своей папке. Также теперь какие-то проблемы с иконками виджетов - не всё показывается.
Скачать виджет simple_clock.ru.wgt (5 Кб)
По той же несложной схеме - сделав config.xml и запаковав папку скрипта WinZip'ом со сменой расширения .zip на .wgt, можно получить виджет практически из любого JavaScripta. Правда, быстродействие "оперной" JavaScript-машины оставляет желать лучшего и более-менее сложные скрипты будут подтормаживать. Тем не менее, на изготовление виждет-версии моей популярной игры Lines (новое окно) у меня ушло минуты 2.
 гостевая; E-mail
|