Пишем свой Yahoo widget
нет, вы не подумайте ничего такого, я не сторонник никаких особенных технологи просто захотелось узнать как нарисовать 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/ и сабмитьте.