Содержание


Конфигурация и пакетирование виджетов W3C

Узнайте больше о предварительной спецификации виджетов W3C

Comments

Обзор W3C-виджетов

Документ W3C «Widget Packaging and Configuration» является развивающейся спецификацией, описывающей рекомендуемые правила конфигурации, пакетирования и загрузки виджетов. Виджеты W3C – это программные компоненты, включающие в себя файлы HTML, CSS и JavaScript, а также другие необходимые ресурсы (например, графические изображения). Виджеты могут использоваться на различных устройствах для реализации простых приложений, таких как календарь, прогноз погоды, чат, и т.д.

Преимущество виджетов по сравнению с обычными Web-приложениями состоит в том, что виджеты достаточно установить один раз, а затем они могут использоваться многократно, также как стандартные программы, установленные на том или ином устройстве (в отличие от Web-приложений, которые каждый раз загружаются заново). Такой подход позволяет снизить объем передаваемых данных, так как для выполнения уже установленного виджета скачиваются только те данные, которые виджет использует в своей работе, но не файлы самого виджета.

Виджеты, как правило, используются для расширения возможностей пользовательского интерфейса, например, для добавления интерактивных календарей или даже игр. Виджеты могут использоваться и на мобильных устройствах, где снижение потока загружаемых данных за счет многократного применения уже установленных виджетов позволяет сократить расходы на мобильный Интернет.

В январе 2010 года спецификация W3C «Widget Packaging and Configuration» (ссылку на полный текст спецификации вы найдете в разделе Ресурсы) получила статус предварительной рекомендации (candidate recommendation). Это означает, что консорциум W3C не предполагает никаких значительных изменений текста спецификации и рекомендует разработчикам при создании виджетов следовать положениям этого документа.

Цель спецификации W3C – внедрить стандартные методы построения и пакетирования виджетов. В настоящее время существует огромное количество поставщиков, разрабатывающих и выпускающих виджеты (см. раздел Ресурсы), и практически каждый из них использует свой собственный закрытый API и свой формат пакетирования.

Данная статья призвана познакомить вас со спецификацией W3C по пакетированию и конфигурации виджетов, продемонстрировав на конкретных примерах, как собрать файлы HTML, CSS и JavaScript в готовый виджет, который затем может быть установлен на устройство, поддерживающие спецификацию W3C для виджетов. Поскольку спецификация по виджетам появилась сравнительно недавно и продолжает развиваться, выбор программ и устройств, поддерживающих эту спецификацию, пока ограничен. Для того чтобы просмотреть созданный вами виджет, вам потребуется загрузить дополнительные приложения (в случае, если эти приложения еще не установлены).

Для того чтобы загрузить и просмотреть W3C-виджет, вам потребуется:

  • ПО, поддерживающее спецификацию W3C для виджетов. Для создания примеров, рассматриваемых в данной статье, использовался пакет Apache Wookie, входящий в проект Apache Incubator и разработанный для установки и поддержки W3C-виджетов;
  • утилита для создания архивов с файлами виджетов;
  • клиент Subversion (SVN), если вы хотите загрузить и установить Apache Wookie.

Технологические аналоги: другие виджеты и серверы

В настоящее время на рынке представлено огромное количество различных версий виджетов и гаджетов, так что зачастую бывает трудно определить, чем те или иные технологии отличаются друг от друга. Постоянное дробление и появление новых технологий виджетов затрудняет задачу создания пользовательских Web-компонентов с возможностью многоразового использования.

Помимо гаджетов Microsoft® Windows® Vista и виджетов Apple®, в качестве примеров поддержки виджет-технологий можно назвать гаджеты Google Wave, OpenSocial и OpenAjax. Эти технологии обладают собственными API и соответствующими спецификациями (см. раздел Ресурсы).

Гаджеты Google Wave

Концепция гаджетов Google Wave аналогична виджетам W3C с той лишь разницей, что первые рассчитаны исключительно на работу с Web-платформой Google Wave. В свою очередь, виджеты W3C публикуются в соответствии со спецификацией W3C как открытые компоненты и могут использоваться различными производителями.

Google Wave – это Web-сервис, который предлагается разработчикам и первым энтузиастам пока только для предварительного ознакомления с новой технологией. Google Wave – это, прежде всего, инструмент коммуникаций, предоставляющий своим пользователям дополнительные возможности в виде гаджетов Google Wave. Разработчики могут создавать свои гаджеты, которые пользователи смогут включить в свою «волну» для расширения и дополнения функциональности Google Wave.

OpenSocial

OpenSocial – API, позволяющий создавать гаджеты, способные работать с Web-приложениями социальных сетей. Спецификация OpenSocial 1.0 сейчас находится в стадии разработки, но версии 0.9 и 0.8 использовались в контейнерах (Web-приложениях, поддерживающих гаджеты) iGoogle, MySpace, Yahoo и LinkedIn.

Гаджеты OpenSocial базируются на структуре гаджетов Google. Структура OpenSocial включает набор готовых JavaScript API, обеспечивающих доступ к трем основным функциональным областям: people, activities и persistence.

Ратификация стандарта OpenSocial, безусловно, сделает эту технологию одним из главных конкурентов спецификации виджетов W3C.

MySpace, Yahoo, and LinkedIn.

OpenAjax

Альянс OpenAjax - это содружество ведущих компаний-производителей ПО для разработчиков, нескольких крупных проектов с открытым кодом и компаний, использующих Ajax- технологии при разработке собственных решений. Цель альянса - развитие технологии Ajax и расширения сферы применения приложений, созданных с её использованием (см. раздел Ресурсы).

Проект OpenAjax Hub определяет технологии публикации и подписки (pub/sub), используемые в гаджетах OpenSocial.

Поскольку спецификация пакетирования и конфигурации виджетов W3C разрешает использование Ajax, использование технологии OpenAjax позволит разработчикам создавать виджеты с улучшенной совместимостью, которые, тем не менее, будут соответствовать спецификации W3C.

Apache Wookie

Пакет Apache Wookie является частью проекта Apache Software Foundation Incubator, который обеспечивает поддержку гаджетов Google Wave и виджетов W3C. Apache Wookie – это серверное приложение, которое вы можете загрузить и установить в качестве Web-приложения или автономного сервера.

Исходный код Apache Wookie содержит примеры кода виджетов W3C.

Поскольку официальный сайт Apache Wookie (см. раздел Ресурсы) не содержит предварительно построенных исполняемых файлов Apache Wookie, то для загрузки и запуска Apache Wookie вам потребуется установить SVN. Для загрузки исходного кода Apache Wookie выполните команды, приведенные в листинге 1.

Листинг 1. Загрузка исходного кода Apache Wookie
$ svn co http://svn.apache.org/repos/asf/incubator/wookie/trunk

После того, как Apache Wookie загружен, вы можете запустить его в качестве автономного сервера, выполнив команду, приведенную в листинге 2.

Листинг 2. Запуск Apache Wookie в режиме автономного сервера
$ ant run

Утилита ant запустит сервер Apache Wookie в автономном режиме. После запуска сервера откройте в браузере страницу http://localhost:8080/wookie и вы увидите основное меню Apache Wookie.

Конфигурация виджета

Для начала создайте новую директорию с именем виджета, например, myWidget (если ваша операционная система разрешает использовать точку в имени файла, назовите директорию myWidget.wgt). В этой директории будут храниться файлы вашего нового виджета. Если вы хотите написать и протестировать новые файлы HTML, CSS и JavaScript для виджета, создайте вашу директорию в корневом каталоге документов Web-сервера. В этом случае вы сможете проверить, как выглядят HTML-файлы в браузере, прежде чем включить их в пакет виджета.

Каждый пакет виджета должен включать в себя конфигурационный файл config.xml (при указании имени файла соблюдайте регистр), который должен находиться непосредственно в той директории, которую вы только что создали – это базовая директория пакета. Конфигурационный файл содержит жизненно важную информацию о виджете: имя виджета, имя автора виджета, описание виджета, его лицензия, и т.д.

Пример конфигурационного файла виджета приведен в листинге 3.

Листинг 3. Пример файла config.xml
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
id="http://www.example.com/widgets/HelloWidget"
version="0.1" width="300" height="200">
  <name>HelloWidget</name>
  <description>A very basic widget that says, "Hello"</description>
  <content src="index.html" />
  <icon src="images/icon.png" />
  <access network="false" />
  <author>Nathan A. Good</author>
  <license>This is my license</license>
</widget>

XML-файл должен использовать кодировку UTF-8, как показано в примере.

Родительский элемент виджета задает атрибуты, определяющие основную информацию о виджете (см. таблицу 1).

Таблица 1. Атрибуты родительского элемента виджета
ИмяОписание
idУникальный URI-идентификатор виджета
versionВерсия виджета
width, heightШирина и высота виджета соответственно (в пикселях)
viewmodesРежим просмотра виджета (см. Ресурсы)

Описание XML-элементов, используемых в конфигурационном файле, приведено в таблице 2.

Таблица 2. Элементы конфигурации виджета
ИмяОписание
nameКороткое имя виджета хранится в атрибуте short, а полное задается в тексте соответствующего XML-элемента
descriptionОписание виджета
authorДанные об авторе виджета
licenseЛицензия виджета
iconОтносительный путь к файлу пиктограммы

Теперь, когда наш конфигурационный файл готов, мы можем приступить к созданию стартового файла.

Стартовый файл

Помимо файла конфигурации config.xml для создания пакета виджета в соответствии со спецификацией W3C, нам достаточно добавить всего лишь один стартовый файл. Если стартовый файл не указан, по умолчанию используется файл с именем index и стандартным расширением .html, .htm или .xhtml. Различные типы виджетов могут использовать и другие расширения, но в этой статье мы ограничимся рассмотрением стандартного HTML-примера.

Пример стартового файла приведен в листинге 4.

Листинг 4. Пример стартового файла
<!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">
<head>
  <meta http-equiv="pragma" content="no-cache" />
  <meta http-equiv="Content-Type" content=
  "text/html; charset=us-ascii" />
  <title>HelloWorld</title>
  <link rel="stylesheet" href="style/common.css" type="text/css" />
</head>
<body>
<h1>Hello World...</h1>
</body>
</html>

HTML-файл, приведенный в листинге 4, мало чем отличается от стандартного правильно сформированного HTML-файла, который может быть открыт браузером. Именно эта особенность значительно облегчает разработку виджетов – вы можете создавать их как обычные HTML-страницы. Наш HTML-файл предназначен для запуска виджета.

Поскольку виджеты – это обычный HTML-код, который выполняется браузером, они могут включать в себя файлы JavaScript. Именно использование функций JavaScript обеспечивает широкие возможности и гибкую функциональность виджетов. Например, для динамического представления данных пользователям с помощью виджета, вы можете использовать Ajax (дополнительную информацию о технологии Ajax вы можете найти в разделе Ресурсы).

Файлы JavaScript, используемые в стартовом HTML-файле виджета, должны быть включены в пакетный архив этого виджета.

HTML-файл нашего виджета использует CSS для определения стилей. Аналогично файлам JavaScript, файлы CSS тоже должны быть включены в архив виджета.

Спецификация W3C включает рекомендации по локализации виджетов (l10n). Поддержка локальных настроек должна быть выделена в отдельный каталог. В основной директории виджета создайте директорию с именем locales. В директории locales вы можете создать отдельные папки с именами, соответствующими локалям (например, en, fr, de), и включить в них ресурсы, поддерживающие соответствующие локальные установки.

Пакетирование виджета

Виджеты пакетируются в виде стандартных архивов с расширением .wgt. Архив, являющийся пакетом поставки виджета, создается с помощью метода DEFLATE. Он должен включать в себя конфигурационный файл, стартовый файл и все ресурсы виджета (файлы JavaScript, CSS, графические изображения).

Чтобы создать пакет виджета, воспользуйтесь утилитой архивации zip, вызываемой из командной строки, как показано в листинге 5.

Листинг 5. Создание архива с файлами виджета
$ cd myWidget
$ zip myWidget.wgt *

Вместо вызова команды zip вы можете воспользоваться графическим интерфейсом архиватора, чтобы собрать .zip-архив виджета. После этого измените расширение архивного файла с .zip на .wgt.

Для удобства работы с пакетом можно разложить файлы виджета по директориям. Например, на рисунке 1 представлена структура основной директории виджета, в которой все файлы виджета сгруппированы в соответствующих папках (images, style и scripts) в зависимости от их роли.

Рисунок 1. Структура пакета W3C виджета
Рисунок 1. Структура пакета W3C виджета
Рисунок 1. Структура пакета W3C виджета

При указании ресурсов в стартовом файле используйте относительные пути, как если бы это были стандартные файлы, загружаемые Web-сервером. Например, используйте путь style/common.css для указания на файл common.css, хранящийся в директории style, несмотря на то, что и файл, и директория на самом деле содержатся в пакетном архиве виджета.

В целях безопасности вы можете включить в пакет виджета цифровую подпись. Подробную информации о добавлении электронно-цифровой подписи в пакет виджета по спецификации W3C вы можете найти в разделе Ресурсы.

Загрузка виджета

Для загрузки вашего виджета вы можете воспользоваться средствами администрирования Apache Wookie. Для этого запустите Wookie, выполнив команду ant run, и откройте страничку Apache Wookie в вашем браузере (по умолчанию адрес страницы http://localhost:8080/wookie). Щелкните на ссылке Administrative menu (см. рисунок 2).

Рисунок 2. Ссылка Administration menu в основном меню Wookie
Рисунок 2. Ссылка Administration menu в основном меню Wookie
Рисунок 2. Ссылка Administration menu в основном меню Wookie

Для того чтобы открыть меню администрирования, необходимо ввести логин и пароль. Если при установке Apache Wookie вы не меняли настройки по умолчанию, в качестве логина и пароля введите java.

Для того, чтобы добавить новый виджет, щелкните на ссылке Add new widget (см. рисунок 3.

Рисунок 3. Добавление нового виджета
Рисунок 3. Добавление нового виджета
Рисунок 3. Добавление нового виджета

Щелкните на кнопке Choose File, выберите архив с вашим виджетом и нажмите Publish(см. рисунок 4).

Рисунок 4. Выбор архива с файлами виджета
Рисунок 4. Выбор архива с файлами виджета
Рисунок 4. Выбор архива с файлами виджета

Apache Wookie приступит к обработке и загрузке указанного архива. После того как процесс загрузки закончен, новый виджет появится в списке доступных виджетов и в галерее виджетов.

Вы можете загрузить виджет, не прибегая к использованию меню администрирования. Для этого просто скопируйте пакет виджета в директорию загрузки виджетов, которая определяется в файле build.properties в качестве значения параметра widget.deploy.dir.

Спецификация W3C по загрузке и конфигурации виджетов включает в себя рекомендации по обработке архивов с файлами виджетов. Когда программа отображения виджета (например, браузер) загружает пакет виджета, она трактует его в качестве потенциального виджета. Затем браузер проверяет целостность пакета и убеждается, что виджет корректно сконфигурирован и собран. Если файлы виджета удовлетворяют стандарту спецификации, то пакет виджета считается корректным.

Просмотр виджета

Сервер виджетов Apache Wookie позволяет просматривать виджеты в любом браузере, так что вам не придется искать браузер, поддерживающий спецификацию W3C (аналогично реализации виджетов в браузере Opera). В идеале, все браузеры будут поддерживать спецификацию виджетов W3C, так что пользователи смогут загрузить виджет один раз и использовать его многократно. Для того чтобы просмотреть ваш виджет, запустите Apache Wookie и откройте в браузере основное меню Wookie. Щелкните на пункте View Widget Gallery, и вы увидите свой виджет в галерее виджетов (см. рисунок 5).

Рисунок 5. Галерея виджетов
Рисунок 5. Галерея виджетов
Рисунок 5. Галерея виджетов

Для того, чтобы посмотреть, как работает ваш виджет, щелкните на ссылке Demo.

Кроме того, вы можете создать тестовый файл, который содержит элемент iframe с вашим виджетом. Для создания такого файла вы можете воспользоваться HTML-кодом, приведенным в листинге 6.

Листинг 6. Простой HTML-файл для запуска виджета
<html>
<head><title>Widget sample</title>
<body>
<iframe src=
"http://localhost:8080/wookie/wservices/wookie.apache.org/widgets/butterfly/index.html
?idkey=sM4aI8pnUUNI2Kfz15aK2h6vIek.eq.&amp;proxy=http://localhost:8080/wookie/proxy
&amp;st=wookie%3AwEQZrCsxTF502%2B6JeeEFlkq1KPgqXKQTllufS6Toez81qb40hPouhYV3apG4on23uVB
kQ5xlLjOXvIKulGqKBZvnKv2pgfEMg7OVzJpdDQt66MfODW6BBJry33ybOyMSc2hKonu7Sp1n1SY6FOFUuRx8VAjED
TuJip8BQ9i6ZXRH9193FT%2F7Ijjz0o1vdR91ofzcFA%3D%3D" width="500" height="400">
</body>
</html>

В результате выполнения этого файла, вы увидите свой виджет на Web-странице. В качестве URL-адреса здесь используется адрес загрузки виджета, полученный в результате выполнения команды Instantiate a widget основного меню Wookie.

Вы можете просмотреть примеры виджетов из комплекта поставки Apache Wookie, которые включают в себя графические изображения и сложные файлы JavaScript и CSS. В загруженном исходном коде Apache Wookie примеры виджетов хранятся в директории widgets.

Заключение

Развивающаяся спецификация конфигурации и пакетирования виджетов W3C «Widget Packaging and Configuration» определяет правила, которые позволяют разрабатывать программные модули (виджеты), обеспечивающие гибкий многофункциональный пользовательский интерфейс без увеличения Интернет-трафика.

Спецификация виджетов W3C основана на использовании открытых стандартов, таких как HTML, CSS, JavaScript и архивация файлов. Поскольку спецификация пока еще находится в стадии разработки, в настоящее время существует не так много программ, реализующих спецификацию виджетов W3C, тем не менее, именно спецификация W3C позволит установить общий стандарт разработки и загрузки виджетов.


Ресурсы для скачивания


Похожие темы


Комментарии

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии или подписаться на них.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=SOA и web-сервисы, Web-архитектура, Open source
ArticleID=551610
ArticleTitle=Конфигурация и пакетирование виджетов W3C
publish-date=10182010