Дата публикации: 20.04.2021

Пишем свой Yahoo widget

8bd108ae

нет, вы не подумайте ничего такого, я не сторонник никаких особенных технологи просто захотелось узнать как нарисовать Hello world в Yahoo widget. Вообще странно ведь мы пока не знаем ни что такое yahoo widget, ни где его можно применить ни на чем он пишется и вообще смысл этого всего, а почему не Google API ? и т.п.

Добро пожаловать в мир Yahoo. Виджеты виджеты Виджеты пишутся на JavaScript + XML, и их можно закинуть в Yahoo widget gallery. Мы с вами посмотрим как можно написать несколько простых виджетов на JavaScript используя специальный API. А затем увидим как можно все это залить и запустить.

Перво-напрво валим на http://widgets.yahoo.com/download/ для профилактики. В чем писать ? Ну писать в простом редакторе можно. В чем картинки рисовать ? Ну в чем в чем... в GIMP теперь уж, раз у вас денег нет, а есть дак покупайте Photoshop, нас интересует PNG формат, остальные просто сосут.Так же прокатят pAintShopPro и Painter, а то и FireWorks

Понядобится документация, ее брать тут:  http://widgets.yahoo.com/workshop/ Так же нам понадобиться один хитрый виджет-конвертор:  http://widgets.yahoo.com/gallery/view.php?widget=40093 Вам лучше бы его сразу синсталлировать (около 15 мег придется слить, страшно ?) Скачав и уставновив ситуация проясняется немного и вы видите панельку(узел) на рабочем столе с виджетами.

Кажись все.

Дальше нам надо знать что распакованные виджеты (.widget расширения) - можно вытащить путем конверчинья виджетом, в пужную папку или ZIP архив. Че там за файлики внутри ? .kon - это главный файл .js - тут понятно какие-то JavaScript Это читать не нужно: .info.plist - это фигня для MacOS (медленно забываем) .scpt - тоже самое.. только если это есть то виджет только для MacOS

Остальное - это картинки звучки и т.п.

Ну что, теперь вы уже думаете, нафига мне это все ? Сидел бы на GWT да в носу ковырял, или написал бы на Delphi да и забыл как страшный сон.. Нет же полез в YUI, YUI ведь это буржунет. А нет, Yahoo - сила сильная, Русские видно осилили только jQuery, потому что он 15 килобайт, помните про Емелю на печи ? Ну хорэ, давайте все же глянем что дальше,  если сильно впрячься сейчас потом может получится опупительная вещь.

Достали редактор кода ? Word - сосет, я же давно сказал вроде. Откройте-ка в редакторе Yahoo! Weather.widget/Contents/The Weather.kon (где его найти ?.. поищите тут: c:\Documents and Settings\ajaxed.ru - Вася\Мои документы\My Widgets\ ) Гляньте-ко! Да там HTML!!!, точнее XML. Картинки, картинки - фреймов хренова туча, кто в танке - идем учить XML.

Видимо придется все руками писать ? <?xml version="1.0" encoding="UTF-8"?> - таак, это надо, не вздумайте писать в дрдугих кодировках, получите по шее от Yahoo. Дальше в официальной документации интересно написано, цитата: Дальше идет много тэгов. Главный тэг - widget, так:

<widget version="1.6.7" minimumVersion="1.7">       </widget>

Дальше внутри идет куча разных тэгов, полный справочник можно найти в Yahoo! Widget Engine Reference Manual, ну коротко расмсотрим парочку: <widget>: Главный тэг, как уже сказал <debug>: включает выключает окно отладчика <version>: Определяет версию виджета <minimumVersion>: Минимальная версия для запуска <window>: Определяет размеры окна виджета, все что не влезло - режется <name>: Имя окна для JavaScript <title>: Отображаемое имя <height>: высота. <width>: ширина в пикелях <visible>: ну и так ясно

Есть тэг <image> с кучей атрибутов..<text><textarea>.. <action trigger="(Событие)"> Позволяет определить событие. <about-box> - типа о программе

и много много других тэгов.

Ко всему можно обращаться из JavaScript, вот примера кусок: sun.opacity = 145; main_window.visible = true; main_window.shadow = 0; myText.data = "Hello, World!"; weatherinfo.tooltip = "ajaxed.ru"; colorChangedText.color = "#6C189C";

Теперь поясним что мы тут сделали: Изменили прозрачность до 145(на 57%) Главное окно сделали видимым Убрали тень окна объекту myText присвоили текст "Hello, World!" Изменили подсказку "weatherinfo" на "ajaxed.ru" Ну и поменяли цвет указанного объекта на другой

Как видите все просто. Кроме обычных атрибутов есть разные системные переменные, которые можно использовать: image.opacity = system.cpu.idle * 2.55 - Прозрачность картинки зависит от загруженности процессора system.mute = true;

Ну все.. давайте наконец напишем Hello World, а то время уходит.

Создаем файл My First Widget.kon Пихаем туда:

<?xml version="1.0" encoding="UTF-8"?> <widget>  <debug>on</debug>      <window>          <name>main_window</name>          <title>My First Widget</title>          <height>30</height>          <width>300</width>          <visible>true</visible>              <text>                  <name>myText</name>                  <color>#FF0000</color>                  <size>18</size>                  <alignment>left</alignment>                  <vOffset>25</vOffset>                  <hOffset>2</hOffset>              </text>          </window>      <timer>          <name>timer</name>          <interval>1</interval>          <ticking>true</ticking>          <onTimerFired>          var cpuLoad = system.cpu.activity;          myText.data = cpuLoad + "% CPU load";          myText.opacity = cpuLoad * 2.55;          </onTimerFired>      </timer> </widget>

Чего делает этот виджет ? Кстати после сохранения, можно сразу запустить kon файл. Yahoo предупредит вас, что возможно вас повредят 8)). Программка покажет загрузку процессора, чем активнее он используется, тем НЕПРОЗРАЧНЕЕ циферки.

А теперь создадим DBGridEH с древовидной структурой... Шутка.

Ну что тут в программе непонятного ? Период видно где менять ?, Надпись поменяйте.. все работает как часы.

Попробуйте вставить таке условие:

if ( cpuLoad > 80 )     {myText.data = "ТЫ РАБОТАЕШЬ ОЧЕНЬ ТЯЖЕЛО";     } else    {myText.data = "ТЫ РАБОТАЕШЬ ТИХО КАК ЯПОНСКИЙ КОНДИЦИОНЕР";     }

Исходник прмет такой вид:

<?xml version="1.0" encoding="UTF-8"?> <widget>  <debug>on</debug>  <window>  <name>main_window</name>  <title>My First Widget</title>  <height>30</height>  <width>300</width>  <visible>true</visible>  <text>  <name>myText</name>  <color>#FF0000</color>  <size>18</size>  <alignment>left</alignment>  <vOffset>25</vOffset>  <hOffset>2</hOffset>  </text>  </window>  <timer>  <name>timer</name>  <interval>1</interval>  <ticking>true</ticking>  <onTimerFired>  <!]>  </onTimerFired>  </timer> </widget>

Как видно мы соблюдаем все правила XML и можем пользоваться CDATA, чтобы избежать пересечений тэгов и ошибок парсинга.

Кроме стандартных JavaScript функций в YUI Widget есть куча собственных функций, ну вот простой пример, вставьте в свой код такой код:

alert( "Your house is on fire.", "Call 911", "That's nice" ); print( unescape( "This%20is%20some%20web%2Dready%20text%21" ) ); beep(); var textToSpeak = "Your computer is talking to you. What say you?"; speak( textToSpeak ); closeWidget();

Классно да ? Русского нет, как прикрутить - пока не ясно, но интересно. Что ? Вы не поняли куда это вставить ? Ок вот примерно такой код втавьте в widget тэг и все:

<?xml version="1.0" encoding="UTF-8"?> <widget>  <action trigger="onLoad">  function yoop()  { alert( "Your house is on fire.", "Call 911", "That's nice" ); print( unescape( "This%20is%20some%20web%2Dready%20text%21" ) ); beep(); var textToSpeak = "Your computer is talking to you. What say you?"; speak( textToSpeak ); closeWidget();  }  yoop();  </action> </widget>

Ну и наконец.. коздали мы этот виджет, точнее .kon файл, осталось что ? Сделать из него .widget, который будет содержать все файлы (хотя в нашем случае только один, но все же вдруг будет несколько) Для этого папку с .kon файлом перетащим в виджет-конвертор, он создаст рядом виджет, вот и все.

Ну и финишная прямая: Отчасти мы делали может это и для себя, но отчасти-то может быть мы хотели показать это другим! Поделиться так сказать. Тогда нам нужно попасть в Yahoo! Widget Gallery, а чтобы попасть в Yahoo! Widget Gallery надо соблюсти несколько правил:

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

Если вы правильный человечег и все сделали правильно, то заходите на http://widgets.yahoo.com/gallery/  и сабмитьте.