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

  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 постоянство 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> см. В Ссылка ,

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

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

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

Похожие

Получение и управление свойствами профиля пользователя в SharePoint 2010
Я пишу пользовательскую веб-часть, которая будет выводить информацию профиля пользователя из SharePoint 2010. Мой код требует, чтобы я получил довольно много полей. Большинство из этих полей не являются «intellisensable» и не могут быть доступны напрямую без необходимости вручную вводить имя поля, как вы можете видеть из моего фрагмента кода ниже.
Обновление рынка eToro: не слишком короткое
Всем привет, Одна из замечательных вещей в биткойнах заключается в том, что, хотя сеть в основном с открытым исходным кодом, аналитика данных не всегда последовательна. Это делает некоторые интересные метрики и аномалии для криптоаналитиков, таких как я, размышляющими. Например, данные в блокчейне являются объективными и достаточно согласованными, но такие вещи, как объемы на биржах и торговые данные, вероятно, будут отличаться в зависимости от того, куда вы смотрите.
Температура обеспечивает комфорт работы
Мы хвалим вас! Большинство наших клиентов - послы образовательного портала Мы представляем результаты теста удовлетворенности, рекомендаций и рекомендаций для клиентов знаний и практики и образовательного портала, проведенного компанией «Маркетинговые отношения». Опрос SRP ©
Рассчитать энергозатраты по Г. Леманну
Мы хвалим вас! Большинство наших клиентов - послы образовательного портала Мы представляем результаты теста удовлетворенности, рекомендаций и рекомендаций для клиентов знаний и практики и образовательного портала, проведенного компанией «Маркетинговые отношения». Опрос SRP © был
Оптимизация сайта под Google
В этой статье я постараюсь познакомить вас с основной информацией об оптимизации сайтов для поиска Google. Я сосредоточусь только на этом инструменте, потому что он, безусловно, является самой популярной поисковой системой в мире и почти монополистом на польском рынке. Прочитав эту статью, вы узнаете, дорогой читатель, что такое оптимизация страницы, почему она выполняется, о чем идет речь, как она работает и почему она вообще работает. Я надеюсь, что этот текст окажется полезным и приблизит
Новая модель паспортов безопасности для химических веществ
Мы хвалим вас! Большинство наших клиентов - послы образовательного портала Мы представляем результаты теста удовлетворенности, рекомендаций и рекомендаций для клиентов знаний и практики и образовательного портала, проведенного компанией «Маркетинговые отношения».
Безопасные сердца сотрудников на мебельной фабрике FORTE
Мы хвалим вас! Большинство наших клиентов - послы образовательного портала Мы представляем результаты теста удовлетворенности, рекомендаций и рекомендаций для клиентов знаний и практики и образовательного портала, проведенного компанией «Маркетинговые отношения». Опрос
Иностранная делегация - собственные ставки единовременных выплат и пособий - Profbi
Иностранная делегация. В предыдущих версиях программы делегирование могло быть решено Курс страны определен в справочниках. Валюта этих ставок была указана в справочнике страны и должна была быть одинаковой как для лимита размещения, так и для рациона питания. Новая версия программы делегирования (2017.2.0.11) вносит изменения в эту область. В реестрах стран у вас есть возможность определить свои собственные курсы и валюты - вы можете выбрать валюту, соответствующую вашей стране, или
PIP инспекции для соблюдения запрета на воскресные торги
Мы хвалим вас! Большинство наших клиентов - послы образовательного портала Мы представляем результаты теста удовлетворенности, рекомендаций и рекомендаций для клиентов знаний и практики и образовательного портала, проведенного компанией «Маркетинговые отношения».
Об обязанности и квалификации для управления машинами и устройствами
Мы хвалим вас! Большинство наших клиентов - послы образовательного портала Мы представляем результаты теста удовлетворенности, рекомендаций и рекомендаций для клиентов знаний и практики и образовательного портала, проведенного компанией «Маркетинговые отношения».
Угловая сетка | Начало работы с ag-Grid
... определение компонента в наш шаблон. Отредактируйте app / app.component.html и удалите код скаффолда: <ag-grid-angular style = "ширина: 500 пикселей; высота: 500 пикселей;" class = "ag-theme-balham" [rowData] = "rowData" [columnDefs] = "columnDefs"> </ ag-grid-angular> Это определение компонента ag-grid с двумя привязками свойств - rowData и columnDefs. Компонент также принимает стандартный стиль и класс DOM. Мы установили класс

Комментарии

Каковы основные преимущества вики?
Каковы основные преимущества вики? А как насчет безопасности вики? Разве вики не является объектом мечты для диверсанта? Общие вопросы о MoinMoin Так как
Каковы основные преимущества торговли на фондовых индексах?
Каковы основные преимущества торговли на фондовых индексах? Ответ прост. Покупать CFD по определенному индексу гораздо проще, чем покупать или продавать акции, включенные в индекс отдельно. Если трейдер считает, что рынок будет расти в целом, он покупает CFD на индексы. Однако, если он чувствует, что рынок движется вниз, CFD будет продавать по индексам. Это простой и дешевый способ спекулировать на фондовом рынке. Узнайте, что может повлиять
Так, может быть, вы также дополните свои косметические средства?
Так, может быть, вы также дополните свои косметические средства? На MakeUp.pl вы найдете тысячи образцов для ухода за телом, волосами, ногтями и лицом, косметические аксессуары и продукты с натуральными и органическими композициями. Независимо от того, хотите ли вы попробовать новый гель для душа, или неделями охотились за нишей и труднодоступной парфюмерией, одно можно сказать наверняка - вы можете купить все свои прихоти на одной странице. Готовы к охоте? Автор: Агнешка Борынь
Куда делось меню «Пуск»?
Куда делось меню «Пуск»? Он был заменен полноэкранным начальным экраном с мозаичным интерфейсом. Это было самое радикальное изменение в истории меню «Пуск» и одно из самых радикальных за всю историю Windows. Все было подчинено полноэкранному опыту и тактильным технологиям. Этот стиль работы был даже навязан владельцам клавиатур и мышей, которые, вопреки сумасшедшему видению создателей, вообще не могли найти упрощенную среду. Если вы не запустили Windows 8 на планшете или компьютере
Вы видите, куда это идет?
Вы видите, куда это идет? Если вы загрузите изображения в KinectShare, они могут быть опубликованы на вашей странице в Facebook. Это поднимает одну заключительную мысль. Если вы когда-нибудь продадите свой Xbox, вы, вероятно, должны знать, что эти картинки могут пойти вместе с ним. Ох, радость Причина 8: Прыжки Кажется, что очень много опыта Kinect включает в себя прыжки. Я не прыгаю. Когда-либо. Если вы похожи на меня и никогда не

Quot; encoding = "UTF-8"?
Quot; encoding = "UTF-8"?
Quot; encoding = "UTF-8"?
Jpg" /> <UserPref name = "mychoice" display_name = " Показать фото?
Lt;br> <br > </ FONT> "; // Если "Показать фото?
Php?
Каковы основные преимущества вики?
А как насчет безопасности вики?
Разве вики не является объектом мечты для диверсанта?
Каковы основные преимущества торговли на фондовых индексах?