Разработка для Pokki: Hello World

Не так давно была запущена в бета-режиме платформа Pokki, позволяющая разрабатывать десктопные приложения с помощью HTML5 и JavaScript (обзор здесь). На данный момент она доступна только пользователям Windows 7, в ближайшем будущем — пользователям Vista и XP, также в планах Mac OS. В этой статье мы будем разрабатывать свое первое приложение. Если у вас нет Pokki, то установить его можно здесь, выбрав любое приложение из списка «Featured Pokkies» (например, Gmail или Tweeki).

Структура приложения

Структура приложения схожа со структурой расширений для Google Chrome, поэтому тем, кто уже сталкивался с их разработкой, будет легко начать. Любое приложение должно состоять из:

• Файла manifest.json, в котором хранится информация о приложении (название, описание, иконка и т.п.)
• Файла popup.html, задающего представление (собственно, его содержимое вы и увидите при открытии приложения)
• Иконки (должна быть представлена в трех размерах – 42х42, 29x29 и 19x19 пикселей, статичная).

Первые шаги

Чтобы начать разработку, нужно скачать и установить PokkiSDK.
В обучающих целях разработчики предоставили для свободного скачивания каркас приложения – Pokki Atom, скачать его можно здесь, он нам понадобится. Распакуйте архив в любую директорию.
Открыв manifest.json, мы увидим следующее:

{
   "name": "Pokki Atom",
   "version": "1.0",
   "icon-19x19": "img/icon-19x19.png",
   "icon-29x29": "img/icon-29x29.png",
   "icon-42x42": "img/icon-42x42.png",
   "description": "A basic foundation for which to build a Pokki.",
   "popup": "popup.html",
   "background_page": "background.html"
}

Свойства name и description задают имя и описание нашего приложения, icon-19x19/29x29/42x42 – иконки соответствующих размеров,
popup – имя файла-содержимого всплывающего окна, background_page – имя файла фоновой страницы, о которой будет сказано позднее. Изменим содержимое следующим образом:

{
  "name": "Hello Pokki!",
  "description": "A simple Hello World! style Pokki.",
  "icon-19x19": "img/icon-19x19.png",
  "icon-29x29": "img/icon-29x29.png",
  "icon-42x42": "img/icon-42x42.png",
  "popup": "popup.html",
  "background_page": "background.html"
}

и сохраним изменения.

Тестовый запуск

Первым делом запустим встроенную в Pokki среду для разработчиков, отыскав в Пуске ярлык:



После запуска среды будет показано уведомление:



Щелкнув правой кнопкой на иконке ореха в панели задач, добавим свое новоиспеченное приложение, указав путь к директории:



После добавления приложения его иконка появится на панели Pokki:



Откроем приложение, щелкнув по иконке на панели:

Стилизация всплывающего окна

Поскольку всплывающее окно фактически представляет собой HTML-страницу, то стилизуется она с помощью CSS (CSS3 также поддерживается). Pokki основана на Chromium, поэтому можно использовать webkit-свойства. Установим в качестве фона всплывающего окна градиент. Для этого откроем файл стилей css/default.css и модифицируем body следующим образом:

body {
  width: 200px;
  height: 200px;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#2c2c2c),
    to(#444444)
  );
}

Чтобы изменения вступили в силу, нужно перезапустить наше приложение. Сделать это можно правым кликом на иконке и выбором пункта «Relaunch»:



Теперь наше приложение выглядит так:

Добавление содержимого

Попробуем добавить содержимое во всплывающее окно. Откроем файл js/popup.js. В нем находятся обработчики событий:

• popup_unload – выгрузка приложения. Срабатывает при удалении приложения или завершения работы ОС.
• load – загрузка приложения. Срабатывает при первом открытии всплывающего окна.
• popup_shown – открытие всплывающего окна. Срабатывает при открытии всплывающего окна. (ваш К.О.)
• popup_hidden – закрытие всплывающего окна. Также не требует объяснений.

Сейчас нам нужно событие загрузки приложения. Добавим в функцию onLoad() следующий код, добавляющий строку «Hello, Pokki!» во всплывающее окно:

function onLoad() {
  console.log('Pop-up page is loaded.');
    
  // Perform pop-up page initiation and configuration
    
  // Create a string "Hello Pokki!"
  var textNode = document.createTextNode("Hello Pokki!");
    
  // Create a DIV for the string, and add it
  var div = document.createElement("div");
  div.setAttribute("id", "hello");
  div.appendChild(textNode);
    
  // Add the new div to the DOM
  document.body.appendChild(div);
 
  // Time to restore any state
}

Затем добавим стили для этой надписи (в уже упомянутый выше default.css):

#hello {
  padding-top: 20px;
  text-align: center;
  color: #222;
  text-shadow: 0px 2px 3px #555;
  font: 24px Tahoma, Helvetica, Arial, Sans-Serif;
}

Сохранив изменения и перезагрузив приложение, мы увидим следующее:

Работа в фоне

В файле manifest.json помимо всплывающего окна мы указали также фоновую страницу. Она предназначена для фонового обновления данных, загружается непосредственно после загрузки приложения и не видна пользователю на протяжении работы. Нам она, в частности, понадобится для управления счетчиком обновлений (Pokki badge). Он предназначен для уведомления пользователя о том, что информация в приложении обновилась. Счетчик может принимать значения от 1 до 999. Откроем файл js/background.js и добавим туда следующий код:

var endBadge = false;
 
pokki.addEventListener('popup_shown', function() {
 // Show the badge!
 updateBadge();
});
 
pokki.addEventListener('popup_hidden', function() {
 // Clear the badge
 endBadge = true;
});
 
var num = 1;
var numMin = 1;
var numMax = 999;
    
function updateBadge() {
  // Stop showing the badge?
  if (endBadge) {
    pokki.removeIconBadge();
    endBadge = false;
    num = numMin;
  } else {
    // Reset back to min if the number is too large
    if (num > numMax) {
      num = numMin;
    }
          
    // Set the badge
    pokki.setIconBadge(num);
    num++;
          
    // Loop
    setTimeout(updateBadge, 100);
  }
}

Сохранив изменения и перезагрузив приложение, мы увидим, что при открытии всплывающего окна на иконке приложения появился значок уведомлений:



Вот, собственно, и все, вы постигли азы разработки под Pokki!
Готовое приложение можно скачать здесь.

Ссылки:

• Pokki
• Документация