👩🏿‍🤝‍👨🏾 💆🏻 🕋 हमने विंडोज 8 पर सिल्वरलाइट के साथ एक एप्लिकेशन को कैसे पोर्ट किया 🐦 🗃️ 🤶🏾

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

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

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

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

इस लेख में, हम कुछ डिज़ाइन निर्णयों को स्पष्ट करने का प्रयास करेंगे जो हमने अपने आवेदन उदाहरण का उपयोग करके एक नए प्लेटफ़ॉर्म पर जाते समय किए थे।

क्रोम से पहले सामग्री

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

देखें कि दस्तावेज़ के साथ काम करने के लिए सीधे उपयोगकर्ता को आवंटित की गई जगह कैसे बढ़ी है। यह एक टैबलेट पर काम करते समय विशेष रूप से मूल्यवान है जहां भौतिक स्क्रीन आकार काफी छोटा है।

ग्राफिक आदिमता का संपादन

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

माउस की तुलना में स्पर्श इंटरफ़ेस की कम सटीकता की भरपाई के लिए इंटरएक्टिव तत्व आकार में बड़े होते हैं।
बैकलाइट मोड नहीं है। यदि शास्त्रीय इंटरफ़ेस में किसी ऑब्जेक्ट पर होवर करते समय नियंत्रण दिखाना संभव था, तो टच इंटरफ़ेस में आपको ऑब्जेक्ट पर क्लिक करने की आवश्यकता होती है। इसके अलावा, आप उपयोगकर्ता के इंटरैक्शन के प्रकार को बताने के लिए कर्सर आकार में परिवर्तन का उपयोग नहीं कर सकते, क्योंकि स्पर्श इंटरफ़ेस में कोई कर्सर नहीं है।
माउस क्रियाओं की कार्यक्षमता को Ctrl / Shift / Alt कुंजियों के संयोजन में माउस का उपयोग करके काफी विस्तारित किया जा सकता है। नए प्रतिमान में, प्रत्येक क्रिया के लिए एक अलग नियंत्रण तत्व का उपयोग करना आवश्यक है।
उंगलियों पर न केवल एक पहिया है, बल्कि एक सही बटन भी है। लेकिन आप एक साथ कई उंगलियों से स्क्रीन को छू सकते हैं।

यहां बताया गया है कि नए संस्करण पर स्विच करते समय चयनित ऑब्जेक्ट के लिए नियंत्रणों का सेट कैसे बदल गया:

आइटम नंबर	मुझे क्यों चाहिए?	डेस्कटॉप	विंडोज 8
1	आकार को नियंत्रित करता है	छोटा था	बड़ा बन गया
2	रोटेशन के कोण को नियंत्रित करता है	छोटा था	बड़ा बन गया
3	विभिन्न ज्यामितीय गुणों को नियंत्रित करता है।	छोटा था	बड़ा बन गया
4	तत्वों को जोड़ने के लिए उपयोग किया जाता है	कर्सर के नीचे किसी वस्तु के संदर्भ में दिखाई दिया	केवल चयनित आइटम पर लागू होता है।
5	चयनित आइटम निकालता है।	आप डेल कुंजी दबा सकते हैं	एक नया आइटम सामने आया है।
6	एक प्रति बनाता है और स्थानांतरित करता है।	आप केवल Ctrl दबाए रखते हुए आइटम को खींच सकते हैं	एक नया आइटम सामने आया है।
7	संदर्भ मेनू को कॉल करता है	आप राइट क्लिक कर सकते हैं	एक नया आइटम सामने आया है।

नेविगेशन और दस्तावेजों के साथ काम करते हैं

विंडोज 8 में, समान तत्वों के बीच नेविगेशन, जो निस्संदेह संपादन के लिए खुले दस्तावेज हैं, को शीर्ष AppBar पर रखा जाना चाहिए। AppBars क्षैतिज नियंत्रण हैं जो स्क्रीन पर तब दिखाई देते हैं जब आप टचस्क्रीन पर स्क्रीन के ऊपर या नीचे से अपनी उंगली स्लाइड करते हैं, या जब आप राइट-क्लिक करते हैं।

दस्तावेज़ हेरफेर के लिए कमांड को AppBar पर और दाईं ओर रखा जाना चाहिए:

प्रसंग क्रिया

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

हमारे आवेदन में, इस तरह के समाधान का उपयोग कई वस्तुओं के चयन मोड को नियंत्रित करने के लिए किया जाता है। एप्लिकेशन के डेस्कटॉप संस्करण में, कई वस्तुओं का चयन करने के लिए, बस Shift कुंजी दबाए रखें, लेकिन टेबलेट संस्करण में भौतिक कीबोर्ड उपलब्ध नहीं हो सकता है। इसलिए, कई वस्तुओं के एक साथ चयन के लिए एक विशेष मोड प्रदान करना था। इस मोड से बाहर निकलने के लिए, प्रासंगिक AppBar का उपयोग करें:

रेडियल मेनुस

सबसे दिलचस्प नया तत्व रेडियल मेनू है। यह Microsoft OneNote द्वारा उपयोग किए जाने वाले क्लासिक संदर्भ मेनू के लिए मूल प्रतिस्थापन है। यह इस तरह दिखता है:

सामान्य आदेशों के अलावा, आप इस मेनू के सलेवेल्स पर काफी जटिल नियंत्रण रख सकते हैं, जैसे कि रंग पिकर और स्लाइन:

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

दुर्भाग्य से, यह महान नियंत्रण मानक पुस्तकालय में नहीं है। इसलिए, हमें इसे स्वयं लिखना था। हमारे कार्यक्रम में, उन्होंने क्लासिक संदर्भ मेनू को पूरी तरह से बदल दिया और उन टीमों का हिस्सा ले लिया जो रिबन पर स्थित थीं।

पॉप-अप पैनल

अन्य सभी नियंत्रण जो हम स्क्रीन के दाईं ओर स्थित पॉप-अप पैनल पर रखते हैं:

आकर्षण (आकर्षण)

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

यहाँ प्रिंट संवाद के लिए कॉल कैसा दिखता है:

DirectX

एक शक के बिना, चार्ट संपादक की अनिवार्य विशेषताओं में से एक परिणाम को किसी प्रकार के ग्राफिक प्रारूप में निर्यात करने की क्षमता होनी चाहिए। सिल्वरलाइट के तहत, यह बहुत सरलता से किया गया था - आप पूरे दृश्य पेड़ को ले जा सकते हैं और इसे एक तस्वीर में प्रस्तुत कर सकते हैं। किसी कारण से, WinRT ने ऐसी कार्यक्षमता को हटा दिया। विशेष रूप से, WriteableBitmap .Render () विधि नहीं है। एक XamlUIPresenter वर्ग है जिसके साथ आप शायद इसे किसी भी तरह से कर सकते हैं , लेकिन आप इसके लिए विंडोज स्टोर पर नहीं जा सकते ।

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

एक बात का ध्यान रखें। हालांकि SharpDx के लेखक दावा करते हैं कि उनके सभी बिल्ड सफलतापूर्वक प्रमाणित हैं, यह पूरी तरह से सच नहीं है। जब हमने पहली बार प्रमाणित करने का प्रयास किया, तो हमें इस प्रकार के संदेश मिले:

API D3DCompile in d3dcompiler_45.dll is not supported for this application type. SharpDX.D3DCompiler.dll calls this API. API D3DCompile2 in d3dcompiler_45.dll is not supported for this application type. SharpDX.D3DCompiler.dll calls this API. API D3DCompileFromFile in d3dcompiler_45.dll is not supported for this application type. SharpDX.D3DCompiler.dll calls this API. ...

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

निष्कर्ष

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

हमने विंडोज 8 पर सिल्वरलाइट के साथ एक एप्लिकेशन को कैसे पोर्ट किया