Напишите свои собственные гаджеты

  1. Основные шаги
  2. Анатомия Гаджета
  3. Определение контента
  4. Указание DOCTYPE
  5. Определение пользовательских настроек
  6. Переменные замены предпочтений пользователя
  7. Определение настроек гаджета
  8. Куда пойти отсюда

Начиная знакомит вас с гаджетами. Следующий шаг - создание собственных гаджетов. Этот документ рассказывает вам, как.

Основные шаги

Вот основные шаги, которые вы выполняете для создания и развертывания гаджета:

  1. Используйте любой текстовый редактор, чтобы написать свою спецификацию гаджета, и разместите ее на общедоступном веб-сервере.
  2. Добавьте свой гаджет на сайт, на котором можно запускать гаджеты.

Анатомия Гаджета

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

  • Раздел контента. <Содержание> раздел, где происходит настоящая работа вашего гаджета. Здесь вы указываете тип гаджета, логику программирования и часто элементы HTML, которые определяют внешний вид вашего гаджета.
  • Пользовательские настройки. <UserPrefs> В разделе определяются элементы управления, которые позволяют пользователям указывать настройки для гаджета. Например, персонализированный гаджет приветствия может предоставить пользователям текстовое поле для указания их имен.
  • Настройки гаджета. <ModulePrefs> В разделе XML-файла указываются такие характеристики гаджета, как заголовок, автор, предпочтительный размер и т. д.

Примечание. Внутри атрибутов XML в спецификации гаджета необходимо «экранировать» (то есть правильно кодировать) определенные символы, чтобы они правильно интерпретировались. Для получения дополнительной информации см. Экранирование специальных персонажей ,

При написании гаджета вы должны начать с раздела <Content>.

Определение контента

Раздел <Content> представляет «мозги» гаджета. Раздел <Content> определяет тип контента и либо содержит сам контент, либо имеет ссылку на внешний контент. В разделе <Content> атрибуты гаджета и пользовательские настройки объединяются с логикой программирования и информацией о форматировании, чтобы стать работающим гаджетом.

Самый простой способ создать гаджет - просто поместить HTML (и, необязательно, JavaScript или Flash) в раздел <Content>. Опытные веб-разработчики могут читать Выбор типа контента другие параметры, относящиеся к управлению доступом, удаленному хостингу, использованию альтернативных языков сценариев и другим темам. Вот простой пример гаджета. Этот гаджет отображает активную фотографию, которая открывает фотоальбом на новой HTML-странице:

<? xml version = "1.0&quot; encoding = "UTF-8"?> <Module> <ModulePrefs title = "Перейти в фотоальбом" height = "250" scaling = "false" /> <Content type = "html"> <! [CDATA [<div style = "text-align: center"> <a id = "Riggs" title = "Мой фотоальбом" target = "_ blank" href = "http://picasaweb.google.com/doc .examples / ShelfBoy ">
<img border = "0" alt = "Фотография" src = "http://doc.examples.googlepages.com/Riggsie-OP.jpg"
title = "Нажмите здесь."> </a>
</ div>]]> </ Content> </ Module>

Указание DOCTYPE

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

Определение пользовательских настроек

Некоторые гаджеты должны предоставлять пользователям способ предоставления пользовательской информации. Например, игровой гаджет может позволить пользователям ввести предпочтительный уровень сложности. В разделе пользовательских настроек (<UserPref>) в файле XML описаны поля ввода пользователя, которые при запуске гаджета превращаются в элементы управления пользовательского интерфейса. Пользовательские настройки хранятся постоянно.

Примечание: Для более общего механизма сохранения, который не привязан к userprefs, см. OpenSocial php?title=The_Persistence_API> постоянство API ,

Например, этот гаджет отображает личное приветствие в зависимости от времени суток. Это позволяет пользователям указывать следующее:

  • Имя для использования в приветствии. Имя также отображается в строке заголовка.
  • Цвет фона.
  • Независимо от того, чтобы отобразить фотографию.

Вот как гаджет выглядит, когда пользователь нажимает кнопку " Изменить", чтобы изменить его настройки:

Пользовательские настройки, которые превращаются в элементы управления пользовательского интерфейса в работающем гаджете, определены в спецификации XML следующим образом:

<? xml version = "1.0&quot; encoding = "UTF-8"?> <Module> <ModulePrefs title = "Предпочтения для __UP_myname__" height = "250" />
<UserPref name = "myname" display_name = "Name" обязательно = "true" />
<UserPref name = "myphoto" display_name = "Photo" default_value = "http://doc.examples.googlepages.com/rowan-headshot.jpg" />
<UserPref name = "mychoice" display_name = "Показать фотографию?" datatype = "bool" default_value = "true" />
<UserPref name = "mycolor" display_name = "Color" default_value = "Yellow" datatype = "enum"> <EnumValue value = "Red" /> <EnumValue value = "Aqua" /> <EnumValue value = "Lime" /> <EnumValue value = "Yellow" /> <EnumValue value = "Pink" /> <EnumValue value = "Orange" /> <EnumValue value = "White" /> </ UserPref>

Обратите внимание на следующее:

  • Строка 3 файла содержит текст title = "Настройки для __UP_myname__". Когда вы запускаете гаджет, значение, указанное для предпочтения пользователя myname, равно динамически замещенный для __UP_myname__.
  • Предпочтения пользователя myname помечены как «обязательные». Если пользователь пытается запустить гаджет без указания значения для этого поля, окно редактирования пользовательских настроек остается открытым до тех пор, пока не будет предоставлено значение.
  • Пользовательские настройки mychoice имеют тип данных bool. Это отображается в пользовательском интерфейсе как флажок.
  • Пользовательские настройки mycolor имеют тип данных enum. Список EnumValues ​​определяет варианты, которые появляются в раскрывающемся меню в окне редактирования пользовательских настроек.

Вот полный гаджет, включая JavaScript, который отображает приветствие для гаджета:

<? xml version = "1.0&quot; encoding = "UTF-8"?> <Module> <ModulePrefs title = "Предпочтения для __UP_myname__" height = "400" /> <UserPref name = "myname" display_name = "Name" default_value = "Rowan" /> <UserPref name = "myphoto" display_name = "Photo" default_value = "http://doc.examples.googlepages.com/rowan-headshot.jpg" /> <UserPref name = "mychoice" display_name = " Показать фото? datatype = "bool" default_value = "true" /> <UserPref name = "mycolor" display_name = "Color" default_value = "Yellow" datatype = "enum"> <EnumValue value = "Red" /> <EnumValue value = "Aqua "/> <EnumValue value =" Lime "/> <EnumValue value =" Yellow "/> <EnumValue value =" Pink "/> <EnumValue value =" Orange "/> <EnumValue value =" White "/> </ UserPref> <Content type = "html"> <! [CDATA [<div id = "content_div"> </ div> <script type = "text / javascript"> // Получить userprefs var prefs = new gadgets.Prefs () ; function displayGreeting () {// Получить текущее время var today = new Date (); var time = today.getTime (); var html = ""; // На основе времени суток отображаем соответствующее приветствие var hour = today.getHours (); var salutation = "День"; if (час <12) {salutation = "Утро"; } else if (час> 17) {salutation = "Вечер"; } // Установить цвет фона в соответствии с mycolor userpref var element = document.getElementById ('content_div'); element.style.height = 250; // Установить цвет фона в соответствии с mycolor userpref element.style.backgroundColor = prefs.getString ("mycolor"); // Отображение приветствия на основе myname userpref html + = "<br> <FONT SIZE = 6> Good" + salutation + "," + prefs.getString ("myname") + "!!! &lt;br> <br > </ FONT> "; // Если "Показать фото?" флажок установлен, показывать фото. if (prefs.getBool ("mychoice") == true) {html + = '<img src = "' + prefs.getString (" myphoto ") + '">'; } element.innerHTML = html; } // Передаем userprefs для этого экземпляра модуля в функцию // (позволяет пользователям включать несколько экземпляров модуля на свою страницу) gadgets.util.registerOnLoadHandler (displayGreeting); </ script>]]> </ Content> </ Module>

Список всех атрибутов <UserPref> см. В Ссылка ,

Пользовательские настройки доступны из вашего гаджета с помощью пользовательского интерфейса JavaScript API, например:

<script type = "text / javascript"> var prefs = new gadgets.Prefs (); var someStringPref = prefs.getString ("StringPrefName"); var someIntPref = prefs.getInt ("IntPrefName"); var someBoolPref = prefs.getBool ("BoolPrefName"); </ Скрипт>

Список всех функций JavaScript см. В Справочник по JavaScript ,

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

Переменные замены предпочтений пользователя

Вы можете использовать переменную подстановки в формате __UP_ userpref __ в разделах <ModulePrefs> или <UserPref>, где userpref соответствует атрибуту имени пользовательской настройки. Когда гаджет запускается, строковое значение соответствующего пользовательского предпочтения подставляется вместо переменной unescaped. Например, в этом отрывке значение, предоставляемое пользователем во время выполнения для пользовательских настроек проектов , заменяется на __UP_projects__ в строке title_url :

<Module> <ModulePrefs title = "Монитор сборки" title_url = "http://www.example.com/build/status.php?__UP_projects__" /> <UserPref name = "projects" display_name = "project (s)" / > <Content ... /> </ Module>

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

Вот общие рекомендации по использованию пользовательских переменных подстановки:

  • Для атрибута заголовка <ModulePrefs> используйте __UP_ name __. Это HTML маскирование ,
  • Для атрибута <ModulePrefs> title_url используйте __UP_ name __. Это URL маскирование ,
  • В HTML в разделе <Content> используйте __UP_ name __. Это HTML-экранирование.
  • В коде JavaScript в разделе <Content> используйте функцию gadgets.Prefs ().

Определение настроек гаджета

В разделе <ModulePrefs> в файле XML указываются такие характеристики гаджета, как заголовок, автор, предпочтительный размер и т. Д. Например:

<Модуль>
<ModulePrefs title = "Сегодняшний сетевой трафик" title_url = "http: // www / ~ rowan / gadgets / stats /"
height = "200" author = "Джейн Смит" author_email = "[email protected]" />
<Содержание ...>
... содержание ...
</ Content>
</ Module>

Пользователи вашего гаджета не могут изменять эти атрибуты.

Полный список атрибутов <ModulePrefs> см. В Ссылка ,

Куда пойти отсюда

Когда вы будете готовы писать более сложные гаджеты, перейдите на Основы развития или вернуться к домашняя страница документации для обзора разделов и тем.

Вернуться к началу

Quot; encoding = "UTF-8"?
Quot; encoding = "UTF-8"?
Quot; encoding = "UTF-8"?
Jpg" /> <UserPref name = "mychoice" display_name = " Показать фото?
Lt;br> <br > </ FONT> "; // Если "Показать фото?
Php?