Development for Pokki: Hello World

Not so long ago, the Pokki platform was launched in beta mode, allowing you to develop desktop applications using HTML5 and JavaScript (review here ). At the moment it is available only to users of Windows 7, in the near future - to users of Vista and XP, also in the plans of Mac OS. In this article we will develop our first application. If you do not have Pokki, then you can install it here by selecting any application from the Featured Pokkies list (for example, Gmail or Tweeki).

Application structure


The structure of the application is similar to the structure of extensions for Google Chrome, so those who have already experienced their development will find it easy to get started. Any application should consist of:
  • The manifest.json file, which stores information about the application (name, description, icon, etc.)
  • The popup.html file that defines the view (in fact, you’ll see its contents when you open the application)
  • Icons (should be presented in three sizes - 42x42, 29x29 and 19x19 pixels, static).

First steps


To start development, you need to download and install PokkiSDK.
For educational purposes, the developers provided for free download the framework of the application - Pokki Atom, you can download it here , we will need it. Unzip the archive to any directory.
Opening manifest.json , we will see the following:

{
   "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"
}

The name and description properties set the name and description of our application, icon-19x19 / 29x29 / 42x42 - icons of the corresponding sizes,
popup - the name of the content file of the pop-up window, background_page - the name of the background page file, which will be discussed later. Change the contents as follows:

{
  "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"
}

and save the changes.

Test run


First of all, we’ll start the Pokki built-in environment for developers by looking for a shortcut in

image

Start : After starting the environment, a notification will be displayed:

image

By right-clicking on the walnut icon in the taskbar, we will add our newly made application, specifying the path to the directory:

image

After adding the application, its icon will appear on the panel Pokki:

image

Open the application by clicking on the icon in the panel:

image

Styling Popup


Since the popup is actually an HTML page, it is styled using CSS (CSS3 is also supported). Pokki is based on Chromium, so you can use webkit properties. Set the gradient of the popup window. To do this, open the css / default.css styles file and modify the body as follows:

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

For the changes to take effect, you need to restart our application. You can do this by right-clicking on the icon and selecting the “Relaunch” item:

image

Now our application looks like this:

image

Adding Content


Let's try to add content to the popup. Open the js / popup.js file. It contains event handlers:
  • popup_unload - unloading the application. It works when the application is uninstalled or the OS shuts down.
  • load - load the application. Fires when the popup is first opened.
  • popup_shown - open a popup window. Fires when a popup window opens. (your K.O.)
  • popup_hidden - closes the popup window. Also requires no explanation.

Now we need an application download event. Add the following code to the onLoad () function, adding the line “Hello, Pokki!” in popup window:

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
}

Then add styles for this label (to the default.css already mentioned above):

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

After saving the changes and restarting the application, we will see the following:

image

Work in the background


In the manifest.json file, in addition to the popup, we also specified a background page. It is intended for background data updates, it is loaded immediately after the application is downloaded and is not visible to the user during the work. We will need it, in particular, to manage the update counter (Pokki badge). It is intended to notify the user that the information in the application has been updated. The counter can take values ​​from 1 to 999. Open the js / background.js file and add the following code:

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);
  }
}

After saving the changes and restarting the application, we will see that when the pop-up window is opened, the notification icon appeared on the application icon:

image

That's all, you’ve got the basics of development under Pokki!
The finished application can be downloaded here .

References:

Also popular now: