पोक्की के लिए विकास: हैलो वर्ल्ड

इतना समय पहले नहीं, पोल्की प्लेटफॉर्म को बीटा मोड में लॉन्च किया गया था, जो आपको एचटीएमएल 5 और जावास्क्रिप्ट ( यहां एक समीक्षा) का उपयोग करके डेस्कटॉप एप्लिकेशन विकसित करने की अनुमति देता है। फिलहाल, यह केवल निकट भविष्य में विंडोज 7 के उपयोगकर्ताओं के लिए उपलब्ध है - विस्टा और एक्सपी के उपयोगकर्ताओं के लिए, मैक ओएस की योजनाओं में भी। इस लेख में हम अपने पहले आवेदन को विकसित करेंगे। यदि आपके पास पक्की नहीं है, तो आप इसे फीचर्ड पोकीज़ सूची (उदाहरण के लिए, जीमेल या ट्वेकी) से किसी भी एप्लिकेशन का चयन करके यहां स्थापित कर सकते हैं।

अनुप्रयोग संरचना

एप्लिकेशन की संरचना Google Chrome के लिए एक्सटेंशन की संरचना के समान है, इसलिए जिन लोगों ने पहले से ही अपने विकास का अनुभव किया है, उन्हें शुरू करना आसान होगा। किसी भी आवेदन में शामिल होना चाहिए:

• मैनिफ़ेस्ट.जसन फ़ाइल, जो एप्लिकेशन (नाम, विवरण, आइकन, आदि) के बारे में जानकारी संग्रहीत करता है।
• पॉपअप.html फ़ाइल जो दृश्य को परिभाषित करती है (वास्तव में, जब आप एप्लिकेशन खोलते हैं तो आप इसकी सामग्री देखेंगे)
• प्रतीक (तीन आकारों में प्रस्तुत किए जाने चाहिए - 42x42, 29x29 और 19x19 पिक्सेल, स्थिर)।

पहला कदम

विकास शुरू करने के लिए, आपको PokkiSDK को डाउनलोड और इंस्टॉल करना होगा।
शैक्षिक उद्देश्यों के लिए, डेवलपर्स ने एप्लिकेशन फ्रेमवर्क मुफ्त डाउनलोड करने के लिए प्रदान किया - पोक्की एटम, आप इसे यहां डाउनलोड कर सकते हैं , हमें इसकी आवश्यकता होगी। किसी भी डायरेक्टरी में आर्काइव को अनज़िप करें।
खुलने का समय। जसन , हम निम्नलिखित देखेंगे:

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

नाम और विवरण गुण हमारे आवेदन का नाम और विवरण सेट करते हैं, आइकन -19x19 / 29x29 / 42x42 - संबंधित आकारों के आइकन,
पॉपअप - पॉप-अप विंडो की सामग्री फ़ाइल का नाम, बैकग्राउंड_पेज - बैकग्राउंड पेज की फ़ाइल का नाम, जिस पर बाद में चर्चा की जाएगी। सामग्री इस प्रकार बदलें:

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

और परिवर्तन सहेजें।

टेस्ट रन

सबसे पहले, हम प्रारंभ में शॉर्टकट ढूंढकर पोकी निर्मित विकास वातावरण में लॉन्च करेंगे:



पर्यावरण शुरू करने के बाद, एक अधिसूचना प्रदर्शित की जाएगी:



टास्कबार में नट आइकन पर राइट-क्लिक करके, हम अपने नए बनाए गए एप्लिकेशन को जोड़ते हैं, जो डायरेक्टरी के मार्ग को दर्शाता है:



एप्लिकेशन जोड़ने के बाद, इसका आइकन पोक्की पैनल में दिखाई देगा:



पैनल में आइकन पर क्लिक करके एप्लिकेशन खोलें:

स्टाइलिंग पॉपअप

चूंकि पॉपअप वास्तव में एक HTML पेज है, इसलिए इसे CSS (CSS3 भी समर्थित है) का उपयोग करके स्टाइल किया गया है। पोल्की क्रोमियम पर आधारित है, इसलिए आप वेबकिट गुणों का उपयोग कर सकते हैं। पॉपअप विंडो का ग्रेडिएंट सेट करें। ऐसा करने के लिए, css / default.css शैलियाँ फ़ाइल खोलें और शरीर को निम्नानुसार संशोधित करें:

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

परिवर्तनों को प्रभावी करने के लिए, आपको हमारे आवेदन को फिर से शुरू करना होगा। आप आइकन पर राइट-क्लिक करके और "Relaunch" आइटम का चयन करके ऐसा कर सकते हैं:



अब हमारा आवेदन इस तरह दिखता है:

सामग्री जोड़ना

आइए पॉपअप में सामग्री जोड़ने का प्रयास करें। Js / popup.js फ़ाइल खोलें। इसमें ईवेंट हैंडलर शामिल हैं:

• popup_unload - एप्लिकेशन को लोड करना। जब एप्लिकेशन अनइंस्टॉल हो जाता है या ओएस बंद हो जाता है तो यह काम करता है।
• लोड - आवेदन लोड। यह काम करता है जब पहली बार पॉपअप खोला जाता है।
• popup_shown - एक पॉपअप विंडो खोलें। पॉपअप विंडो खुलने पर आग। (आपका के। ओ।)
• popup_hidden - पॉपअप विंडो बंद करता है। इसके अलावा कोई स्पष्टीकरण की आवश्यकता है।

अब हमें एक एप्लिकेशन डाउनलोड इवेंट की आवश्यकता है। पॉप-अप विंडो में स्ट्रिंग "हेलो, पॉक्की!" जोड़ते हुए निम्नलिखित कोड को onLoad () फ़ंक्शन में जोड़ें।

 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 } 

फिर इस लेबल के लिए शैलियाँ जोड़ें (ऊपर पहले से बताई गई डिफ़ॉल्ट के लिए):

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

परिवर्तनों को सहेजने और एप्लिकेशन को पुनरारंभ करने के बाद, हम निम्नलिखित देखेंगे:

पृष्ठभूमि में काम करें

मैनिफ़ेस्ट . json फ़ाइल में, पॉपअप के अलावा, हमने एक पृष्ठभूमि पृष्ठ भी निर्दिष्ट किया है। यह बैकग्राउंड डेटा अपडेट करने के लिए है, यह एप्लिकेशन डाउनलोड होने के तुरंत बाद लोड हो जाता है और काम के दौरान उपयोगकर्ता को दिखाई नहीं देता है। हमें इसकी आवश्यकता है, विशेष रूप से, अपडेट काउंटर (पोक्की बैज) का प्रबंधन करने के लिए। उपयोगकर्ता को यह सूचित करने का इरादा है कि आवेदन में जानकारी अपडेट की गई है। काउंटर 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
• प्रलेखन