Делаем свой первый виджет для opera. / Хабр

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

Что нужно, чтобы начать:

Базовое понимание веб-технологий.
Текстовый редактор.
Архиватор, который может создавать зип архивы.
Место, где можно разместить виджет.
Браузер 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. Все файлы, используемые вашим виджетом, должны храниться внутри этого архива.

Распространение вашего виджета

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

В этой статье мы рассмотрели создание простейшего виджета. И убедились в том, что это совсем не сложно. А также создали наш первый виджет.
П.С. Я немного сократил оригинал, а то слишком много воды переводить.

Делаем свой первый виджет для opera.

Публикации

Ближайшие события