Pokki Development: Hello World
Not so long ago, the Pokki platform was launched in beta mode, which allows developing desktop applications using HTML5 and JavaScript (a 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 list of “Featured Pokkies” (for example, Gmail or Tweeki).
The structure of the application is similar to the structure of extensions for Google Chrome, so those who have already faced with their development, it will be easy to start. Any application should consist of:
To start development, you need to download and install PokkiSDK.
For educational purposes, the developers have provided for free download the skeleton of the application - Pokki Atom, you can download it here , we will need it. Unpack the archive in any directory.
Having opened manifest.json , we will see the following:
The name and description properties specify the name and description of our application, icon-19x19 / 29x29 / 42x42 - icons of corresponding sizes,
popup is the name of the popup content file; background_page is the name of the background page file, which will be discussed later. Change the content as follows:
')
and save the changes.
First of all, we’ll launch Pokki’s built-in development environment for developers by finding a shortcut in Start:
After starting the environment, a notification will be displayed:
By right clicking on the walnut icon in the taskbar, we will add our newly created application, indicating the path to the directory:
After adding an application, its icon will appear in the Pokki panel:
Open the application by clicking on the icon on the panel:
Since the popup window is actually an HTML page, it is styled with CSS (CSS3 is also supported). Pokki is based on Chromium, so you can use webkit-properties. Set the gradient as the background of the pop-up window. To do this, open the styles file css / default.css and modify body as follows:
For the changes to take effect, you need to restart our application. This can be done by right-clicking on the icon and selecting the “Relaunch” item:
Now our application looks like this:
Let's try to add content to the popup. Open the js / popup.js file. It contains event handlers:
Now we need an application load event. Add the following code to the onLoad () function, which adds the string “Hello, Pokki!” To the pop-up window:
Then we add styles for this caption (to default.css already mentioned above):
After saving the changes and restarting the application, we will see the following:
In the file manifest.json, in addition to the pop-up window, we also indicated a background page. It is intended for background data update, is loaded immediately after downloading the application and is not visible to the user during the work. We need it, in particular, to manage the update counter (Pokki badge). It is designed 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 there:
After saving the changes and restarting the application, we will see that when the pop-up window opens, the notification icon appears on the application icon:
That's all, you have comprehended the basics of developing under Pokki!
The finished application can be downloaded here .
References:
Application structure
The structure of the application is similar to the structure of extensions for Google Chrome, so those who have already faced with their development, it will be easy to start. Any application should consist of:
- File manifest.json, which stores information about the application (name, description, icon, etc.)
- The popup.html file that defines the view (in fact, you will see its contents when you open the application)
- Icons (should be presented in three sizes - 42x42, 29x29 and 19x19 pixels, static).
The first steps
To start development, you need to download and install PokkiSDK.
For educational purposes, the developers have provided for free download the skeleton of the application - Pokki Atom, you can download it here , we will need it. Unpack the archive in any directory.
Having opened 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 specify the name and description of our application, icon-19x19 / 29x29 / 42x42 - icons of corresponding sizes,
popup is the name of the popup content file; background_page is the name of the background page file, which will be discussed later. Change the content 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 launch Pokki’s built-in development environment for developers by finding a shortcut in Start:
After starting the environment, a notification will be displayed:
By right clicking on the walnut icon in the taskbar, we will add our newly created application, indicating the path to the directory:
After adding an application, its icon will appear in the Pokki panel:
Open the application by clicking on the icon on the panel:
Styling the popup window
Since the popup window is actually an HTML page, it is styled with CSS (CSS3 is also supported). Pokki is based on Chromium, so you can use webkit-properties. Set the gradient as the background of the pop-up window. To do this, open the styles file css / default.css and modify 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. This can be done by right-clicking on the icon and selecting the “Relaunch” item:
Now our application looks like this:
Add content
Let's try to add content to the popup. Open the js / popup.js file. It contains event handlers:
- popup_unload - unload the application. It works when the application is uninstalled or the OS shuts down.
- load - load the application. It works when the pop-up window is first opened.
- popup_shown - opens a popup window. It works when opening a popup window. (your KO)
- popup_hidden - close the popup window. Also does not require an explanation.
Now we need an application load event. Add the following code to the onLoad () function, which adds the string “Hello, Pokki!” To the pop-up 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 we add styles for this caption (to 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:
Work in the background
In the file manifest.json, in addition to the pop-up window, we also indicated a background page. It is intended for background data update, is loaded immediately after downloading the application and is not visible to the user during the work. We need it, in particular, to manage the update counter (Pokki badge). It is designed 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 there:
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 opens, the notification icon appears on the application icon:
That's all, you have comprehended the basics of developing under Pokki!
The finished application can be downloaded here .
References:
Source: https://habr.com/ru/post/127073/
All Articles