मैक ओएस एक्स डैशबोर्ड के लिए सबसे सरल विजेट बनाएं

नमस्कार, हभ्रवचने-मकोवडी!

आज हम मैक ओएस एक्स में डैशबोर्ड के लिए एक विजेट बनाने की मूल बातें समझने की कोशिश करेंगे। हमें इसके लिए डिज़ाइन किए गए डैशकोड कार्यक्रम की आवश्यकता होगी।

पहला, थोड़ा सिद्धांत। डैशबोर्ड में एक विजेट एक विशेष रूप से गठित वेब पेज है जो सभी संसाधनों के साथ एक बंडल में पैक किया गया है। खैर, और उपांग में एक छोटी सी आधिकारिक जानकारी। तदनुसार, उपयोग की जाने वाली प्रोग्रामिंग भाषा जावास्क्रिप्ट है। यदि आप पहले से ही परिचित हैं, साथ ही साथ HTML / CSS (हालांकि इसकी आवश्यकता नहीं है), तो आप पहले से ही एक सरल विजेट लिखने में सक्षम हैं। यदि नहीं, तो आपको परेशान नहीं होना चाहिए, यह भाषा बहुत सरल और सहज है, आप इससे जल्दी से निपट सकते हैं। आगे मैं इस बात पर विचार करूंगा कि पाठक कमोबेश जेएस से परिचित हों। लेख स्वयं शुरुआती लोगों के लिए बनाया गया है, इसलिए कृपया "बहुत सरल प्रस्तुति और प्राथमिक चीजों की विस्तृत चबाने" के लिए डांट न करें। इसके अलावा, मैं आपसे पूछता हूं कि डिज़ाइन के लिए या तो किक न करें - ठीक है, मैं डिजाइनर नहीं हूं, डिजाइनर नहीं हूं! अगर कोई इस मामले में मदद करना चाहता है - स्वागत है =)

सुविधा के लिए, सभी स्रोतों (साथ ही एक तैयार-से-उपयोग विजेट) को जीथब पर अपलोड किया जाता है, लेख के अंत में लिंक। लेकिन उन्हें डाउनलोड करने के लिए जल्दी मत करो! यह थोड़ा समय बिताने और यह पता लगाने के लिए बेहतर है कि यह सब खुद कैसे बनाया जाए।

तो चलिए शुरू करते हैं। प्रयोगों के लिए एक लक्ष्य के रूप में, मैंने, निश्चित रूप से, हमारे पसंदीदा हैबर को चुना। हम कदम से कदम एक विजेट बनाते हैं जो कर्म, रेटिंग और स्थिति को चुने हुए हब्रुएज़र के हा-लोगों की रेटिंग में प्रदर्शित करता है।

इस तरह के एक विजेट (अच्छी तरह से, बहुत समान) पहले से ही 2007 में पहले से ही न्यूरोमैटिक हैबरडैशर द्वारा बनाया गया था, लेकिन डाउनलोड लिंक काम नहीं कर रहे हैं, और इसके अलावा, उस लेख में ऐसे विजेट बनाने के लिए व्यावहारिक दिशानिर्देश नहीं थे।

सही पुनर्स्थापित करें इन कमियों को बदलें।

एक खाली प्रोजेक्ट बनाएं। ऐसा करने के लिए, डैशकोड चलाएं और इच्छित स्थानों पर क्लिक करें। प्रक्रिया तुच्छ है।

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

अब, हमारे विजेट के सामने की ओर (कोड की एक भी पंक्ति के बिना!) हम आवश्यक घटकों को फेंक देते हैं: कुछ लेबल। ऐसा करने के लिए, घटकों की लाइब्रेरी खोलें - बटन ऊपरी दाईं ओर लाइब्रेरी - विजेट पर "टेक्स्ट" प्रकार के घटकों को खींचें। अब खोलो इंस्पेक्टर (शीर्ष दाईं ओर बटन भी) और इसकी सहायता से हम अपने विजेट के लिए आकार, रंग और इसी तरह समायोजित करते हैं। इसकी मदद से, हम अपने शिलालेखों को सार्थक नाम निर्धारित करेंगे - कोड से अधिक सुविधाजनक पहुंच के लिए।

पीछे की तरफ हम एक शिलालेख और एक इनपुट फ़ील्ड फेंकेंगे। खैर, और एक और तस्वीर - सुंदरता के लिए। और अंत में हमें निम्नलिखित जैसा कुछ मिलता है:



खैर, बुरा नहीं, हमारा GUI तैयार है! हम काट सकते हैं Cmd+R और बटन पर प्रहार (i) और किया, विजेट flipping के प्रभाव को देखते हुए।

लेकिन हमारे लिए एक जीयूआई पर्याप्त नहीं है, तो आइए तर्क पर चलते हैं। ऐसा करने के लिए, ऊपर बाईं ओर दिए गए बटन पर क्लिक करें ड्रॉप-डाउन सूची में स्रोत कोड देखें और चुनें। और हम पहले से ही हमारे स्वचालित रूप से उत्पन्न जावास्क्रिप्ट कोड देख सकते हैं। और हम साहसपूर्वक उस पर शासन करना शुरू करते हैं!

सबसे पहले, आइए हमारे विजेट के "आर्किटेक्चर" पर फैसला करें। हम हबीर एपीआई के माध्यम से उपयोगकर्ता के बारे में जानकारी का अनुरोध करने के लिए टाइमर का उपयोग करेंगे , उन्हें पार्स करेंगे और विजेट के सामने की तरफ कर्म और रेटिंग प्रदर्शित करेंगे। ऐसा करने के लिए, मुख्य .js फ़ाइल की शुरुआत में वैश्विक वैरिएबल updateTimer घोषणा करें, updateTimer startTimer startTimer(msec) और stopTimer() , जो इस टाइमर के साथ काम करेगा। हम updateStats() फ़ंक्शन भी बनाते हैं, जिसे टाइमर द्वारा बुलाया जाएगा।

 function startTimer(msec) { updateTimer = setTimeout("updateStats()", msec); } function stopTimer() { clearTimeout(updateTimer); } function updateStats() { alert("It works!"); startTimer(updateInterval); } 

show() फ़ंक्शन में, विजेट प्रदर्शित होने पर टाइमर शुरू startTimer(5000) कॉल startTimer(5000) , और hide() फ़ंक्शन में क्रमशः, stopTimer() संसाधनों को बचाने के लिए जब विजेट नहीं दिखाया गया है (डैशबोर्ड सक्रिय नहीं है)। अब हम अपने विजेट को लॉन्च कर सकते हैं और कंसोल में देख सकते हैं (Cmd + Alt + 1) "यह काम करता है!" हर 5 सेकंड में।

लेकिन हम इस तरह के बकवास में कोई दिलचस्पी नहीं रखते हैं, हम कर्म और रेटिंग को टाइमर पर खींचना चाहते हैं! इसलिए updateStatus() फ़ंक्शन में, एक अलर्ट के बजाय, हम execStatsRequest() फ़ंक्शन को कॉल करेंगे (हैबर एपीआई एक मिनट में एक बार से अधिक उपयोगकर्ता डेटा खींचने के खिलाफ सलाह देता है, इसलिए उसी समय हम अंतराल बढ़ाएंगे)।

अब यह habrahab API के HTTP अनुरोधों पर निर्भर है। हम नए फ़ंक्शंस बनाते हैं - एक्ज़िस्टेन्सट्रेसेस्ट () और प्रोसेसस्टैट्स रेज़िस्टेस्ट (), जो चलाने और अनुरोधों को पूरा करने के लिए काम करेगा। यहाँ है कि वे मेरे साथ कैसे दिखते हैं:

 function execStatsRequest() { if (userName().length > 0) { var Url = "http://habrahabr.ru/api/profile/" + userName() + "/"; alert("User: " + userName() + "\nURL: " + Url); xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = processStatsRequest; xmlHttp.overrideMimeType('text/xml'); xmlHttp.open("GET", Url, true); xmlHttp.send(); } else { resetStats(); } } function processStatsRequest() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { alert("xml is " + xmlHttp.responseXML); if (xmlHttp.responseXML == null) { resetStats(); } else { alert(xmlHttp.responseText); var error = xmlHttp.responseXML.getElementsByTagName("error")[0]; if (error != null) { alert("Some error occured!"); resetStats(); setLogin("<" + userName() + " not found>"); return; } var login = xmlHttp.responseXML.getElementsByTagName("login")[0].firstChild.nodeValue; var karma = xmlHttp.responseXML.getElementsByTagName("karma")[0].firstChild.nodeValue; var rating = xmlHttp.responseXML.getElementsByTagName("rating")[0].firstChild.nodeValue; var position = xmlHttp.responseXML.getElementsByTagName("ratingPosition")[0].firstChild.nodeValue; setLogin(login); setKarma(karma); setRating(rating); setPosition(position); } } } 

यहां हम अनुरोध URL बनाते हैं, टाइप XMLHttpRequest का एक ऑब्जेक्ट बनाते हैं, और इसकी मदद से हम GET विधि का उपयोग करके अपने डेटा का अनुरोध करते हैं। क्या उल्लेखनीय है, आपको MIME टाइप "टेक्स्ट / xml" के लिए जवाब देना होगा, क्योंकि हबरा-एपी किसी कारण से "टेक्स्ट / html" के लिए वापस आ जाता है। और processStatsRequest() फ़ंक्शन में, हम XML में प्राप्त प्रतिक्रिया को पार्स करते हैं। उसी समय, हम इसे त्रुटियों के लिए जाँचते हैं - और उपयोगकर्ता को इस बारे में सूचित करते हैं।

यहां कोड से विचलित करना और विजेट को स्वयं कॉन्फ़िगर करना सार्थक है - इसे नेटवर्क के साथ काम करने की अनुमति देने के लिए। ऐसा करने के लिए, बाएं फलक में तत्वों की सूची नीचे स्क्रॉल करें और विजेट गुण आइटम देखें। यहां हम केवल "नेटवर्क एक्सेस की अनुमति दें" चेकबॉक्स पर टिक करते हैं। आप विजेट आईडी और इसके संस्करण को भी कॉन्फ़िगर कर सकते हैं। अब कोड पर वापस जाएं।

setLogin() , setKarma() और अन्य कार्य फ्रंट साइड के आवश्यक फ़ील्ड में उनके पास दिए गए स्ट्रिंग को प्रदर्शित करते हैं। वे सुविधा के लिए बनाए गए थे और एक जैसे दिखते हैं:

 function setLogin(login) { document.getElementById("userName").innerText = login; } 

resetStats() फ़ंक्शन सभी फ़ील्ड के लिए डिफ़ॉल्ट मान सेट करता है। और setUserName () और userName () फ़ंक्शन विजेट के पीछे हैब्रोसर के नाम के लिए इनपुट फ़ील्ड पर एक आवरण के रूप में कार्य करते हैं:

 function userName() { return document.getElementById("nameEdit").value; } function setUserName(name) { document.getElementById("nameEdit").value = name; } 

खैर, विजेट लगभग तैयार है। लगभग क्यों? हां, क्योंकि हमें अभी भी सेटिंग्स में दर्ज उपयोगकर्ता नाम को सहेजना होगा। ऐसा करने के लिए, हम फ़ंक्शन loadPrefs() और savePrefs() ।

 var preferenceKey = "habraUserName"; function loadPrefs() { var name = widget.preferenceForKey(widget.identifier + "-" + preferenceKey); alert(widget.identifier + "-" + preferenceKey); alert("name from preferences: " + name); if (name != null) setUserName(name); } function savePrefs() { widget.setPreferenceForKey(userName(), widget.identifier + "-" + preferenceKey); } 

क्रमशः show() और hide() फ़ंक्शन में इन फ़ंक्शन को कॉल करना उचित है। सेटिंग प्रत्येक विजेट के लिए अद्वितीय होगी, जो आपको डैशबोर्ड पर कई उपयोगकर्ताओं की जानकारी के साथ विजेट को छोड़ने की अनुमति देता है।

खैर, अब यह सुनिश्चित करने के लिए कि विजेट उपयोग के लिए तैयार है। लेकिन पूर्णता की कोई सीमा नहीं है! अब हम रूसी और अंग्रेजी संस्करणों के लिए अपने विजेट को स्थानीय कर रहे हैं। आप फ्रेंच और जापानी में स्थानीयकरण भी कर सकते हैं।

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

अब रूसी स्थानीयकरण जोड़ें। विजेट विशेषताओं में और स्थानीयकरण अनुभाग में संक्रमण के लिए, रूसी भाषा जोड़ें (बाएं सूची में)। हम इसे चुनते हैं, और अब सही सूची में हम स्थानीयकृत स्ट्रिंग दर्ज कर सकते हैं।

क्रमशः ये मान, ru.lproj/localizedStrings.js में पंजीकृत होंगे।

दरअसल, यह सब, हम अपने विजेट को लॉन्च कर सकते हैं और हमारे (या किसी और के) कर्म का आनंद ले सकते हैं! डैशबोर्ड में विजेट को स्थापित करने के लिए, बाएं पैनल में रन एंड शेयर का चयन करें और हमारी जरूरतों के आधार पर, सेव टू डिस्क या डैशबोर्ड पर जाएं का चयन करें।

यदि आप तैयार विजेट डाउनलोड करना चाहते हैं, तो आपका स्वागत है: यहाँ यह है ! डैशकोड के लिए प्रोजेक्ट का सोर्स कोड गिथब पर लिया जा सकता है।

मुझे आशा है कि किसी ने इस लेख को उपयोगी पाया और डैशबोर्ड के लिए विगेट्स की सूची अद्भुत चीजों के साथ फिर से भर दी जाएगी!