В этой статье мы рассмотрим создание простого виджета для оперы.
Что нужно, чтобы начать:
Самый-самый первый виджет.
Сначала необходимо создать файл index.html. Это то, что люди будут видеть при открытии виджета.
Настройки виджета.
Далее мы посмотрим, как добавить настройки к нашему виджету. Все настройки прописываются в файле под именем config.xml и содержат информацию о постоянных свойствах виджета. Основные свойсвтва, которые должны быть описанны в этом файле:
Имя виджета.
Размеры виджета.
Информация об авторе.
Уникальный ID для виджета. ID состоит из трех частей: Имя сервера, имя виджета, и дата его последнего обновления в формате YYYY-MM (вы можете также использовать формат YYYY-MM-DD, если вы планируете обновлять виджет чаще чем раз в месяц).
Также опционально добавляется информация о том, с какими доменами работает виджет.
Создайте новый файл config.xml в той же директории, где вы создали до этого index.html. Вставьте туда этот код и сохраните.
Первый запуск вашего виджета.
Перетаскиваем config.xml в браузер, или открываем его в браузере. В результате мы получаем что-то типа вот этого:
Могу вас поздравить. Первый виджет готов.
Делаем лицо виджета.
В данной форме, фоновый цвет виджета – прозрачный, и для стилизации используется стиль по умолчанию. Не порядок. Неободимо придать нашему виджету свой собственный облик.
Перво-наперво вы должны добавить объявление стилей в свой index.html. В конце концов он должен у вас стать похожим на этот:
Теперь время создать файл css со стилями виджета. Создайте папку “style”, где вы будете хранить стили, а в ней, файл – “helloworld.css”. Скопируйте представленный код в этот файл.
Вы могли заметить, что в этом виджете мы используем несколько фоновых изображений. Мы должны добавить их в папку виджета. Изображения вы можете найти в этом zip файле, они находятся в папке images, скопируйте эту папку в корневую папку вашего виджета.
Все стили на своих местах, так что попробуйте запустить свой виджет еще раз, таким же образом, как и в прошлый раз. Он должен выглядить вот так:
Замечания о стилях виджета:
Старайтесь делать виджеты не для красоты, а для пользователей.
Добавляем интерактивность.
У вас сейчас есть полностью рабочий виджет, но он ничего не делает. Сейчас мы добавим кнопку настройки и закрытия виджета.
Снова откройте index.html и замените его содержание на:
Мы добавили:
Теперь от вас требуется обновить файл стилей и добавить яваскрипт.
Стиль кнопок закрытия и изменения состояния.
Добавьте следующий код в helloworld.css, ниже того кода, который там был до этого. Этот код управляет отображением управляющих кнопок.
Рекоммендации по использованию управляющих кнопок.
Настало время еще раз проверить работу нашего виджета. У вас должно отобразиться что-то типа этого:
Добавления обработчика к кнопкам.
Следующим шагом будет добавления функциональности кнопки смены состояния, чтобы виджет показывал его другое состояние при нажатии в зависимости от состояния кнопкиr activated. Этот обработчик содержит немного просто JavaScript кода, и все, что вам надо – это поместить код в нужное место. Посмотрите в файл с ресурсами, из которого вы скопировали картинки, и скопируйте оттуда в корневую папку виджета helloworld.js.
Содержание файла:
В этом коде мы помещаем функции виджета в его объект или область имен. Таким образом, функция не будет переопределенна, если она уже существует. Мы советуем вам использовать глобальную область видимости как можно реже. Вторая половина кода – это функция которая запускается, при запуске виджета, и устанавливает обработчики для объектов.
Еще раз запускаем виджет, и получаем результат, как на картинке:
Упаковка виджета.
Виджеты упаковываются в обычный .zip файл, расширение которого меняется на .wgt. Все файлы, используемые вашим виджетом, должны храниться внутри этого архива.
Распространение вашего виджета
Ваш виджет уже закончен. Заключительным шагом будет упаковываение виджета и представление его другим людям. Инструкции, как опубликовать свой виджет здесь.
В этой статье мы рассмотрели создание простейшего виджета. И убедились в том, что это совсем не сложно. А также создали наш первый виджет.
П.С. Я немного сократил оригинал, а то слишком много воды переводить.
Что нужно, чтобы начать:
- Базовое понимание веб-технологий.
- Текстовый редактор.
- Архиватор, который может создавать зип архивы.
- Место, где можно разместить виджет.
- Браузер Opera.
Самый-самый первый виджет.
Сначала необходимо создать файл index.html. Это то, что люди будут видеть при открытии виджета.
<!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <p>Hello World!</p> </body> </html> </code>
Настройки виджета.
Далее мы посмотрим, как добавить настройки к нашему виджету. Все настройки прописываются в файле под именем config.xml и содержат информацию о постоянных свойствах виджета. Основные свойсвтва, которые должны быть описанны в этом файле:
Имя виджета.
Размеры виджета.
Информация об авторе.
Уникальный ID для виджета. ID состоит из трех частей: Имя сервера, имя виджета, и дата его последнего обновления в формате YYYY-MM (вы можете также использовать формат YYYY-MM-DD, если вы планируете обновлять виджет чаще чем раз в месяц).
Также опционально добавляется информация о том, с какими доменами работает виджет.
Создайте новый файл config.xml в той же директории, где вы создали до этого index.html. Вставьте туда этот код и сохраните.
<?xml version='1.0' encoding='UTF-8'?> <widget> <widgetname>Hello World!</widgetname> <description>Demo widget from the Hello World tutorial.</description> <width>440</width> <height>200</height> <author> <name>John Doe</name> <email>john.doe@example.com</email> <link>http://acme-widget.example.com</link> <organization>Acme Examples, Inc.</organization> </author> <id> <host>example.com</host> <name>HelloWorld</name> <revised>2008-01</revised> </id> </widget>
Первый запуск вашего виджета.
Перетаскиваем config.xml в браузер, или открываем его в браузере. В результате мы получаем что-то типа вот этого:
Могу вас поздравить. Первый виджет готов.
Делаем лицо виджета.
В данной форме, фоновый цвет виджета – прозрачный, и для стилизации используется стиль по умолчанию. Не порядок. Неободимо придать нашему виджету свой собственный облик.
Перво-наперво вы должны добавить объявление стилей в свой index.html. В конце концов он должен у вас стать похожим на этот:
<!DOCTYPE html> <html> <head> <title>Hello World!</title> <link rel="stylesheet" type="text/css" href="style/helloworld.css"> </head> <body> <div id="container"> <div id="header"> </div> <div id="content"> <h1>Hello World!</h1> </div> <div id="footer">Powered by Opera</div> </div> </body> </html> </code>
Теперь время создать файл css со стилями виджета. Создайте папку “style”, где вы будете хранить стили, а в ней, файл – “helloworld.css”. Скопируйте представленный код в этот файл.
/** Basic styles **/ body { font-family: Verdana, Helvetica, sans-serif; font-size: 16px; } h1 { margin: 0; font-size: 1.1em; padding: 7px 0 0 10px; font-weight: normal; } h2{ font-weight: normal; font-size: 1.1em; margin: 0px; } /** Structure **/ #container { width: 429px; } #header { background-image: url(../images/back_top.png); padding: 4px 10px 0px 10px; height: 35px; } #content { background-image: url(../images/back_center.png); color: #333; } .view{ padding: 10px 10px 10px 20px; height: 60px; max-height: 60px; max-width: 393px; overflow: auto; -apple-dashboard-region:dashboardregion(control rectangle 0px 0px 0px 0px); } #footer { background-image: url(../images/back_bottom.png); height: 23px; padding: 2px 0 0 20px; font-size: 0.6em; text-decoration: underline; color: #dd2222; } </code>
Вы могли заметить, что в этом виджете мы используем несколько фоновых изображений. Мы должны добавить их в папку виджета. Изображения вы можете найти в этом zip файле, они находятся в папке images, скопируйте эту папку в корневую папку вашего виджета.
Все стили на своих местах, так что попробуйте запустить свой виджет еще раз, таким же образом, как и в прошлый раз. Он должен выглядить вот так:
Замечания о стилях виджета:
Старайтесь делать виджеты не для красоты, а для пользователей.
Добавляем интерактивность.
У вас сейчас есть полностью рабочий виджет, но он ничего не делает. Сейчас мы добавим кнопку настройки и закрытия виджета.
Снова откройте index.html и замените его содержание на:
<!DOCTYPE html> <html> <head> <title>Hello World!</title> <link rel="stylesheet" type="text/css" href="style/helloworld.css"> <script type="text/javascript" src="script/helloworld.js"></script> </head> <body> <div id="container"> <div id="header"> <div id="controlbuttons"> <button id="flipbutton" class="controlbutton" type="button"></button> <button id="closebutton" class="controlbutton" type="button"></button> </div> <h1>Hello World!</h1> </div> <div id="content"> <div id="front" class="view"> <h2 id="hellotext">Welcome to the world of Opera Widgets!</h2> </div> <div id="config" class="view"> <h2>Hello World! Configuration</h2> <p> <label for="frontlabel">Text to display</label> <input id="frontlabel" type="text" size="25"> <button id="updatebutton" type="button">Update</button> </p> </div> </div> <div id="footer">Powered by Opera</div> </div> </body> </html> </code>
Мы добавили:
- Объявление скрипта, который управляет сменой состояния виджета между настройкой и собственно работой виджета.
- Кнопку смены состояния виджета, и кнопку закрытия.
- Оформление настройки виджета.
Теперь от вас требуется обновить файл стилей и добавить яваскрипт.
Стиль кнопок закрытия и изменения состояния.
Добавьте следующий код в helloworld.css, ниже того кода, который там был до этого. Этот код управляет отображением управляющих кнопок.
/* Hide the configuration view by default */ #config { display: none; } /** Button styles **/ #controlbuttons { float: right; } .controlbutton { opacity: 0.0; overflow: hidden; height: 30px; width: 30px; background-position: left top; border: 0; } #flipbutton { background: transparent url(../images/btn_config.png) scroll no-repeat 0 0; } #closebutton { background: transparent url(../images/btn_close.png) scroll no-repeat 0 0; } /** Button effects **/ #container:hover.controlButton { opacity: 0.3; } #container .controlButton:hover{ opacity: 1.0; } #container .controlButton:active{ opacity: 1.0; background-position: left bottom; }</code>
Рекоммендации по использованию управляющих кнопок.
- Виджет всегда должен снабжаться кнопкой закрытия.
- Управляющие кнопки должны быть видны только когда мышь находится в пространстве виджета
- Они должны становится видимыми с прозрачностью 0.3, когда мышь находится в пространстве виджета
- Когда мышь находится в пространстве кнопки, значении прозрачности должно становится 1.0
- При нажатии, управляющая кнопка должна изменять вид на нажатый.
Настало время еще раз проверить работу нашего виджета. У вас должно отобразиться что-то типа этого:
Добавления обработчика к кнопкам.
Следующим шагом будет добавления функциональности кнопки смены состояния, чтобы виджет показывал его другое состояние при нажатии в зависимости от состояния кнопкиr activated. Этот обработчик содержит немного просто JavaScript кода, и все, что вам надо – это поместить код в нужное место. Посмотрите в файл с ресурсами, из которого вы скопировали картинки, и скопируйте оттуда в корневую папку виджета helloworld.js.
Содержание файла:
// создаем область имен для функций виджета, // чтобы избежать засорения глобальной области имен var helloWorld = helloWorld || {}; // функция для смены состояния виджета между настройкой и работой helloWorld.flip = function ( e ) { var display = document.getElementById('front').style.display; if ( display == 'block' || display == '' ) { document.getElementById('front').style.display = "none"; document.getElementById('config').style.display = "block"; } else { document.getElementById('config').style.display = "none"; document.getElementById('front').style.display = "block"; } } // инициализация виджета window.addEventListener( 'load' , function(ev) { // add behavior to the flip button document.getElementById('flipbutton').addEventListener('click',function(ev){ helloWorld.flip(); }, false); // обработчик кнопки закрытия document.getElementById('closebutton').addEventListener('click',function(ev){ window.close(); }, false); // этой кнопки нет, но на всякий случай оставил ее. document.getElementById('wocbutton').addEventListener('click', function(ev){ widget.openURL('http://widgets.opera.com'); }, false); // обработчик для кнопки в настройках. Изменяет текст на виджете, и // возвращает виджет в состояние работы document.getElementById('updatebutton').addEventListener('click',function(ev){ document.getElementById('hellotext').textContent = document.getElementById('frontlabel').value; helloWorld.flip(); },false); // присваивает начальное значение полю для ввода текста в настройках document.getElementById('frontlabel').setAttribute( 'value', document.getElementById('hellotext').textContent ); },false);
В этом коде мы помещаем функции виджета в его объект или область имен. Таким образом, функция не будет переопределенна, если она уже существует. Мы советуем вам использовать глобальную область видимости как можно реже. Вторая половина кода – это функция которая запускается, при запуске виджета, и устанавливает обработчики для объектов.
Еще раз запускаем виджет, и получаем результат, как на картинке:
Упаковка виджета.
Виджеты упаковываются в обычный .zip файл, расширение которого меняется на .wgt. Все файлы, используемые вашим виджетом, должны храниться внутри этого архива.
Распространение вашего виджета
Ваш виджет уже закончен. Заключительным шагом будет упаковываение виджета и представление его другим людям. Инструкции, как опубликовать свой виджет здесь.
В этой статье мы рассмотрели создание простейшего виджета. И убедились в том, что это совсем не сложно. А также создали наш первый виджет.
П.С. Я немного сократил оригинал, а то слишком много воды переводить.