Рассмотрим особенности внутренней организации гаджета и доступные API на примерах разработок, представленных на конкурс гаджетов, организованный компаниями Google и журналом PC Magazine/RE (подробнее о конкурсе можно прочитать в блоге проекта, http://ru-googlegadget.blogspot.com/).
Самый простой способ создания гаджета — воспользоваться заранее подготовленными экранными формами, доступными с персональной страницы iGoogle. Работа с ними предельно проста: достаточно заполнить несколько полей, получить код или кликнуть по ссылке добавления гаджета на Web-страницу. В то же время такие разработки не представляют особого интереса, поскольку их функциональность довольно невелика.
Разработчику, желающему воплотить более оригинальную идею, чем трансляция RSS-потока или демонстрация фотографий из Flickr, целесообразно воспользоваться онлайновым редактором, размещенным по адресу http://code.google.com/intl/en/apis/gadgets/docs/legacy/gs.html#GGE. Эта утилита, помимо базовых функций редактирования программного текста, содержит большой набор примеров — зачастую после их изучения можно обойтись даже без чтения документации; как уже говорилось, структура API вполне стройна и очевидна.
Обратите внимание: XML-файл должен предоставляться в кодировке UTF-8. Теоретически можно указать и другие кодировки, однако в этом случае API ядра системы управления гаджетами может работать некорректно (русские буквы просто преобразуются в спецсимволы HTML). При необходимости использовать русский язык в текстах (например, в диалогах) файл следует конвертировать в UTF-8 (а лучше использовать специальные функции подсистемы «интернационализации», но их мы рассмотрим в следующих обзорах). Самый наглядный способ — просто скопировать исходный текст гаджета в окно редактора и сохранить файл (он автоматически будет размещен на сервере Google).
Чрезвычайно полезная возможность, реализованная в редакторе, — предварительный просмотр. Разработчик может оперативно оценить внешний вид своей разработки и, что важнее, ее работоспособность. Кроме того, там же можно загрузить завершенную программу в глобальный каталог гаджетов Google.
Структура XML вполне очевидна, следует только отметить, если программный код разработки размещается в ее теле (используется тег
Листинг 2. Гаджет, содержащий ссылку на программный модуль
googlepages.com/"
category="games"/>
Разработчик данного гаджета разместил исходный текст программы на собственном сайте, ссылка на который размещена в атрибуте href тега
В то же время такая техника может быть полезна, если гаджет получается очень объемным и (или) его функциональность вынесена в модули, подготовленные с помощью Flash/Flex, Silverliht и др. (хороший пример: размещение в теле гаджета видеороликов, транслируемых с помощью внешнего Flash-плеера). Тег
Листинг 3. Гаджет, извлекающий данные из RSS- или XML-потока
author_email="info@antivirus-digest.net"
author="info@antivirus-digest.net"
width="340" height="230"
description="Рейтинг антивирусов"
thumbnail="http://antivirus-digest.net/img/current_week_antivir.png"/>
function displayRSSData() {
// Адрес RSS/XML-файла для загрузки
var url = "http://antivirus-digest.net/rss.php";
//Загружаем данные, в случае ошибки сообщаем пользователю
_IG_FetchXmlContent(url, function (response) {
if (response == null || typeof(response) != "object" || response.firstChild ==
null) {
_gel("content_div").innerHTML = "Сбой при загрузке";
return;
}
// Начало формирования HTML-текста (часть неинформативных строк, связанных
// с оформлением, в листинге опущена)
var html = "";
//Разбираем полученный массив информации, извлекая ключи и их значения
var itemList = response.getElementsByTagName("item");
for (var i = 0; i < itemList.length ; i++) {
var nodeList = itemList.item(i).childNodes;
for (var j = 0; j < nodeList.length ; j++) {
var node = nodeList.item(j);
if (node.nodeName == "title") {
var name = node.firstChild.nodeValue;
}
if (node.nodeName == "description") {
if (node.firstChild.nodeName == "#cdata-section")
var data = node.firstChild.nodeValue;
}
}
// В цикле добавляем значения переменных в переменную, содержащую HTML-код
html += name;
html += "
";
html += data;
html += "
";
}
html += "
1 комментарий:
Пользовались ли вы dynamic-height совместно с «Content type="url"»? Если да, то не могли бы вы привести рабочий пример кода гаджета и html кода, который использует gadgets.window.adjustHeight();?
Отправить комментарий