HP टचपैड के लिए स्मार्टफ़ोन एप्लिकेशन को अपनाना

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

यह लेख आपको अपने नए एचपी टैबलेट के लिए मोजो एसडीके विकास के माहौल में बनाए गए फोन एप्लिकेशन को जल्दी से अनुकूलित करने में मदद करेगा।


यदि, अपने आवेदन को बनाते समय, डेवलपर ने अंतर्दृष्टि दिखाई और स्केलेबिलिटी की संभावना का एहसास किया, तो विकास पर्यावरण का उपयोग करके टैबलेट को मोजो आवेदन के थकाऊ पोर्टिंग के बजाय
Enyo SDK , इसे पूर्ण-स्क्रीन और उपयोगकर्ता के अनुकूल टचपैड बनाने के लिए आप अपने आवेदन में कुछ मिनट ले सकते हैं।

तो, चलिए शुरू करते हैं ...

इससे पहले कि आप कुछ भी करें, एक योजना पर विचार करें। एप्लिकेशन के सभी दृश्यों के माध्यम से जाएं और उन दृश्यों को लिखें जिन्हें आप केवल स्मार्टफोन के इशारों के क्षेत्र में "बैक" इशारे की मदद से बाहर निकल सकते हैं। टचपैड एक जेस्चर क्षेत्र से रहित होने के कारण, भविष्य में इस सूची को एक अलग रिटर्न बटन को लागू करने की आवश्यकता होगी।

अगला कदम appinfo.json फ़ाइल में परिवर्तन करना है ताकि टचपैड हमारे आवेदन के चारों ओर के फ्रेम को हटा दे और पूर्ण-स्क्रीन मोड पर स्विच कर दे। Appinfo.json फ़ाइल में लाइन जोड़ें:

uiRevision: 2

अब एमुलेटर या टैबलेट पर एप्लिकेशन डाउनलोड करें और सुनिश्चित करें कि सब कुछ उम्मीद के मुताबिक काम करता है।

छवि में वृद्धि हुई है, लेकिन बटन भी आकार में बदल गए हैं (320 के बजाय 1024 पिक्सेल की स्क्रीन चौड़ाई के अनुरूप करने के लिए), जो बहुत ही सौंदर्यवादी रूप से प्रसन्न नहीं दिखता है। एक ही समस्या पाठ फ़ील्ड और आइटम समूहों के साथ हो सकती है। हम इन कमियों के सुधार पर थोड़ी देर बाद लौटेंगे।

टचपैड परिभाषा;

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

आपके एप्लिकेशन की फ़ाइल संरचना के आधार पर, आपने एक वैश्विक जावास्क्रिप्ट फ़ाइल बनाई हो सकती है जिसमें मूल फ़ंक्शन होंगे। इस मामले में, हम उसके साथ काम करेंगे। अन्यथा, यदि आपका एप्लिकेशन विंडो रहित है, तो हम AppAssistant.js फ़ाइलों के साथ काम करेंगे, या यदि आपका आवेदन एकल-चरण है, तो कार्य StageAssistant.js फ़ाइल के साथ जाएगा। किसी भी स्थिति में, सभी संदर्भ उस फ़ाइल के लिए होंगे जिसे आप "वैश्विक" मानते हैं।

अपनी वैश्विक फ़ाइल में, एक नया फ़ंक्शन बनाएं। एप्लिकेशन के किसी भी हिस्से से नामांकित वस्तु का सुलभ होना अच्छी बात है, और यदि आप विकास मेट्रिक्स सांख्यिकी सेवा का उपयोग करते हैं, तो आपके पास पहले से ही एक ऐसी वस्तु है। अन्यथा, इस तरह एक वस्तु बनाएँ:

var myApp = {};

सुनिश्चित करें कि यह कोड किसी भी अन्य फ़ंक्शन के बाहर है और एक अलग लाइन पर रखा गया है ताकि इसकी पहुंच वैश्विक हो। अब हम अपने टचपैड टैबलेट डिटेक्शन फ़ीचर को बनाने के लिए आगे बढ़ते हैं।

myApp.isTouchPad = function(){

};

सबसे पहले, हमें एक कोड डालने की आवश्यकता है जो हमारे फ़ंक्शन को काम करेगा। हम मोजो ढांचे से DeviceInfo ऑब्जेक्ट के साथ बातचीत करेंगे। यहां कुछ भी जटिल नहीं है, सब कुछ बहुत सरल और सीधा है। हम सभी चरणों से गुजरेंगे और कदम से कदम हम सभी आवश्यक कार्यों पर विचार करेंगे।

if(Mojo.Environment.DeviceInfo.modelNameAscii.indexOf("ouch")>-1) {

return true;

}

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

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

if(Mojo.Environment.DeviceInfo.screenWidth==1024){ return true; }

if(Mojo.Environment.DeviceInfo.screenHeight==1024){ return true; }

यहाँ हम डिवाइस की स्क्रीन की चौड़ाई और ऊँचाई की जाँच करते हैं, जो उसके अभिविन्यास पर निर्भर करता है।

अंत में, यदि पिछले चेक कुछ भी उपयुक्त नहीं निर्धारित करते हैं, तो डिफ़ॉल्ट रिटर्न मान को गलत पर सेट करें।

return false;

अब उपरोक्त सभी को मिलाएं:

var myApp = {};

myApp.isTouchPad = function(){

if(Mojo.Environment.DeviceInfo.modelNameAscii.indexOf("ouch")>-1) {

return true;

}

if(Mojo.Environment.DeviceInfo.screenWidth==1024){ return true; }

if(Mojo.Environment.DeviceInfo.screenHeight==1024){ return true; }

return false;

};

एक बार फिर, ऐसा करने के लिए अधिक सफल और कुशल तरीके हो सकते हैं, लेकिन यह ठीक काम करता है।

टचपैड-विशिष्ट क्षणों को संभालना

अंत में, हमारे फ़ंक्शन का उपयोग करने का एक मौका है। उन दृश्यों में जहां आप रिटर्न बटन प्रदर्शित करना चाहते हैं, यह कोड टुकड़ा डालें:

if(myApp.isTouchPad()){

var menuModel = {

visible: true,
items: [
{ icon: "back", command: "goBack"}
]
};

this.controller.setupWidget(Mojo.Menu.commandMenu,
this.attributes = {
spacerHeight: 0,
menuClass: 'no-fade'
},
menuModel
);

}

यहाँ हम CommandMenu विजेट का उपयोग करते हैं, लेकिन उसी सफलता के साथ हम ViewMenu विजेट या सामान्य क्रिया बटन, या किसी अन्य विजेट का उपयोग कर सकते हैं। यह स्निपेट बस एक छोटे तीर को पीछे तीर के साथ प्रदर्शित करता है ताकि उपयोगकर्ता पिछले दृश्य पर वापस आ सकें।

आप इसे अपने दृश्य के लिए हैंडलकमांड फंक्शन में स्विच में सम्मिलित करना चाह सकते हैं

case 'goBack':

this.controller.stageController.popScene();

break;

या पिछले दृश्य पर लौटने के लिए आपके आवेदन पर लागू कोई अन्य कोड।

आवेदन की उपस्थिति में सुधार

जैसा कि ऊपर बताया गया है, आपके बटन और इसी तरह के तत्व व्यापक रूप से उभरे हुए हैं, जो बहुत ही सौंदर्यवादी रूप से मनभावन नहीं लगते। इसे ठीक करने का एक आसान तरीका यहां दिया गया है। दृश्य के अंदर, जहां यह निर्धारित किया जाता है कि प्रोग्राम टचपैड पर चल रहा है, इस छोटे कोड को जोड़ें जो विजेट में एक विशेष शैली जोड़ता है।

this.controller.get("search-button").addClassName("touchpad");

यह कोड टचपैड क्लास को सर्च बटन विजेट में जोड़ देगा। अब आप इसे अपने CSS स्टाइलशीट के माध्यम से नियंत्रित कर सकते हैं। उदाहरण के लिए:

#search-button.touchpad {

width: 45% !important;

margin: 5px auto !important;

}

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

this.controller.get("save-button").addClassName("touchpad");

this.controller.get("cancel-button").addClassName("touchpad");

और फिर अपने सीएसएस में ऐसा करें:

#save-button.touchpad {

width: 45% !important;

margin-left: 10px !important;

float: left;

}

#cancel-button.touchpad {

width: 45% !important;

margin-right: 10px !important;

float: right;

}

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

चिंता की अन्य बातें

यदि दृश्य पृष्ठभूमि छवि का उपयोग करता है, तो पूरी स्क्रीन को भरने से पहले इसे दोहराना सुनिश्चित करें। सब कुछ सुपर-वाइड लगेगा, इसलिए टचपैड के लिए अलग-अलग छवियों का उपयोग करना बेहतर है। अपने ग्रोल्लर एप्लिकेशन को अपनाने के बाद, लेख के लेखक ने टचपैड पर इसे पूर्ण बनाने के लिए बिल्कुल सब कुछ नहीं किया। मुख्य कार्य जल्दी से एक काम कर आवेदन प्राप्त करना था। आप जब तक चाहें तब तक उपस्थिति में सुधार कर सकते हैं, लेकिन इस समय को एन्यो को पोर्ट करना बेहतर होगा।

और वह सब है! यदि आप लेख पर टिप्पणी करते हैं, तो यहां या लेखक की वेबसाइट पर टिप्पणियों का स्वागत करें।