В данном примере рассматривается процесс создания виджета, который динамически обрабатывает информацию при помощи JavaScript. Будут рассмотрены два подхода к размещению тела виджета.
Подготовка тела виджета
Описываемый конвертор величин измерения расстояния должен переводить друг в друга следующие величины:
миллиметры;
сантиметры;
метры;
дюймы;
футы.
Создайте HTML-файл, реализующий интерфейс будущего виджета:
Данный код создает два раскрывающихся списка, которые содержат величины измерения расстояния, поле ввода конвертируемого значения и область для отображения результата. Добавлены простейшие таблицы стилей.
Для перевода данных из одной единицы измерения в другую примем миллиметр за единицу, а все остальные величины выразим через него. Получится следующее соотношение:
Единица измерения
Соответствие в миллиметрах
миллиметр
1
сантиметр
10
метр
1000
дюйм
25,4
фут
304,8
Выразим эти соотношения с помощью объекта JavaScript:
var metrics = {
"mm" : 1,
"cm" : 10,
"m" : 1000,
"inch" : 25.4,
"foot" : 304.8
};
Тогда можно написать следующую функцию конвертирования:
function convert(){
var val = document.getElementById("fromVal").value;
<!-- проверка правильности введенного значения -->
if(isNaN(val)){
return;
}
<!-- если проверка прошла успешна, выполняем преобразование -->
document.getElementById("toVal").value = val * metrics[document.getElementById("fromSystem").value] /
metrics[document.getElementById("toSystem").value];
}
Теперь сделаем так, чтобы написанная функция запускалась каждый раз при изменении значения в поле ввода, а также при выборе новых единиц измерения. Для этого нужно добавить следующие обработчики событий:
К полю ввода fromVal добавлены события onfocus и onblur, которые вызывают функцию watchChanges. Данная функция запускает таймер, который следит за изменениями в поле ввода. Таким образом будут обработаны любые изменения, включая вставку значения из контекстного меню. Код функции следующий:
var interval = null;
function watchChanges(){
interval == null ? setInterval("convert()", 500) : clearInterval(interval);
}
Итак, страница, производящая необходимые преобразования, готова. Ее полный код следующий:
Файл с описанием виджета должен содержать валидный XHTML. Поэтому описание виджета нужно создавать в файле вида:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:widget="http://wdgt.yandex.ru/ns/">
...
</html>
Нужно обязательно указать кодировку UTF-8.
Чем подробнее заполнена секция свойств, тем легче будет найти виджет в общем каталоге. Добавьте в блок <head> документа следующий фрагмент:
<meta name="title" content="Конвертор величин измерения расстояний" />
<meta name="description"
content="Конвертор величин измерения расстояний позволяет переводить различные меры длины друг в друга."/>
Здесь передается информация о названии и описание функциональности виджета.
Пользовательские настройки можно сравнить с переменными, в которых можно сохранять информацию и использовать ее, например, для формирования внешнего вида виджета.
Например, можно добавить настройку, которая позволит работать только с необходимыми единицами измерения.
Для использования настроек должно быть объявлено пространство имен xmlns:widget="http://wdgt.yandex.ru/ns/".
Каждая настройка задается в собственном теге <preference>; настройки помещаются в тег-контейнер <widget:preferences>.
Общий размер настроек не должен превышать 1Kb. Это связано с тем, что настройки передаются в адресной строке (GET).
На основе приведенного выше кода будет сгенерирована следующая форма настроек:
Пользователи смогут вызвать данную форму, нажав на знак шестеренки в правом верхнем углу виджета в режиме настроек главной страницы.
Добавьте в тело виджета следующую логику обработки этих настроек:
<script type="text/javascript"
src="http://img.yandex.net/webwidgets/1/WidgetApi.js"></script>
widget.onload = function(){
widget.adjustIFrameHeight();
var metricNames = ["m", "cm", "mm", "foot", "inch"];
var metrics = "";
for(var i = 0; i < metricNames.length; ++i){
if(widget.getValue(metricNames[i]) == "true"){
metrics += ("," + metricNames[i] + ",");
}
}
}
function delOtherValuesFromList(list, values){
for(var i = 0; i < list.options.length;){
values.indexOf("," + list.options[i].value + ",") == -1 ? list.remove(i) : ++i;
}
}
В данном примере используется виджетное JS API. Для его использования нужно подключить файл WidgetApi.js. Подробнее про API см. в справочнике по JS API.
Событие виджета onload, выполняющееся при загрузке виджета, получает при помощи метода JS API getValue значения настройек, которые были ранее добавлены в теге <widget:preferences>.
Далее для обоих выпадающих списков вызывается функция delOtherValuesFromList, которая удаляет из списков значения, не отмеченные пользователем на форме настроек. Добавление запятых в начале и конце значений обеспечивает их уникальность при работе функции indexOf (иначе индекс для метров "m" в строке с настройками, где есть миллиметры "mm" был бы положительный).
В onload также вызывается метод JS APIadjustIFrameHeight, который устанавливает высоту элемента <iframe> так, чтобы он вместил все содержимое виджета без вертикальной полосы прокрутки.
Способы хранения виджетов
Виджеты разделяются на автономные и серверные. Тело автономных виджетов хранится в том же файле, что и описание. Тело серверных виджетов хранится на отдельном сервере (по выбору автора виджета), а в файл с описанием добавляется свойство src, указывающее, где искать тело.
"Конвертор величин" как автономный виджет
Чтобы получить автономный виджет "Конвертор величин измерения расстояния", нужно поместить тело виджета в файл с описанием:
При серверной реализации тело виджета нужно разместить на каком-либо хостинге (в данном примере тело виджета размещается по адресу http://example.com/widgets/converter.html) как обычную интернет-страницу.
Ru