प्रतिक्रियाशील कैनवास ऐप्स बनाना

प्रतिक्रियाशीलता किसी अनुप्रयोग की अलग-अलग स्क्रीन आकारों और संरचना गुणकों के लिए संरेखित होने तथा स्क्रीन के उपलब्ध स्थान का समझदारी से उपयोग करने को संदर्भित करता है, जो प्रत्येक डिवाइस में बढ़िया UI और UX, संरचना गुणक, और स्क्रीन आकार प्रदान करती है.

प्रतिक्रियाशीलता अनुप्रयोग के विभिन्न तत्वों को यह निर्दिष्ट करने की अनुमति देती है कि वे किस प्रकार:

• स्क्रीन आकार परिवर्तनों के साथ फैलाव करें या आकार बदलें.

• स्क्रीन आकार परिवर्तनों के साथ स्थितियों को बनाये रखें या परिवर्तित करें.

आपको प्रतिक्रियाशील अनुप्रयोगों का निर्माण क्यों करना चाहिए

अन्तिम छोर के उपयोगकर्ता आपके अनुप्रयोग को विभिन्न डिवाइसों, जैसे कि फ़ोन, टैबलेट, लैपटॉप और बड़े मॉनिटर वाले डेस्कटॉप, विभिन्न स्क्रीन आकारों और विविध पिक्सेलों की संख्या के साथ एक्सेस कर सकते हैं.

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

प्रतिक्रियाशीलता सिद्धांतों के साथ अनुप्रयोग को डिज़ाइन करना

इससे पहले कि आप अपने अनुप्रयोग के लिए UI डिज़ाइन करना आरंभ करें, आपको निम्नलिखित पहलुओं पर विचार करने की आवश्यकता होती है:

• आप किस प्रकार के संरचना गुणकों या डिवाइसों का समर्थन करना चाहते हैं.

• अनुप्रयोग को प्रत्येक प्रपत्र फ़ैक्टर पर कैसा दिखना चाहिए?

• अनुप्रयोग के किन तत्वों को फैलाव की या आकार परिवर्तित करने की आवश्यकता होती है?

• क्या तत्व कुछ प्रपत्र फ़ैक्टर पर छिपे हुए हैं?

• क्या अनुप्रयोग कुछ प्रपत्र फ़ैक्टर में भिन्न व्यवहार करता है?

इन सभी आवश्यकताओं के पूरा हो जाने के बाद, आपको यह सोचना आरंभ करना चाहिए कि Power Apps में उपलब्ध प्रतिक्रियाशील टूल्स के साथ एक ही अनुप्रयोग में ये अलग-अलग UI लेआउट कैसे बनाये जा सकते हैं.

प्रतिक्रियाशील लेआउट का उपयोग आरंभ करने से पहले, आपको निम्नलिखित कार्य करने होंगे:

1. Power Apps पर जाएँ.

2. उस अनुप्रयोग को खोलें जहां आप प्रतिक्रियाशील लेआउट का उपयोग करना चाहते हैं.

3. स्केल टू फिट , लॉक आस्पेक्ट रेशियो और लॉक ओरिएंटेशन को अक्षम करने के लिए सेटिंग्स > डिस्प्ले में जाएं और लागू करें चुनें.

   

उत्तरदायी लेआउट

एक नयी स्क्रीन जोड़कर और लेआउट टैब से उपयुक्त विकल्प का चयन करके नीचे दिये गए प्रतिक्रियाशील लेआउट बनाये जा सकते हैं:

नोट

अनुप्रयोग संरूपों के लिए नये प्रतिक्रियाशील लेआउट उपलब्ध हैं लेकिन नये स्क्रीन टेम्पलेट केवल टैबलेट संरूप के लिए ही उपलब्ध हैं.

स्प्लिट-स्क्रीन

स्प्लिट-स्क्रीन लेआउट में दो खण्ड होते हैं, और डेस्कटॉप पर प्रत्येक लेआउट स्क्रीन की 50% चौड़ाई घेरता है. मोबाइल डिवाइसों पर, खण्डों को एक-दूसरे के नीचे रखा जाता है, जो संपूर्ण स्क्रीन की चौड़ाई घेरते हैं.

साइडबार

साइडबार लेआउट में बाईं ओर एक निश्चित चौड़ाई वाला साइडबार होता है. मुख्य बॉडी में एक निश्चित ऊंचाई का हेडर होता है, और मुख्य खण्ड स्क्रीन की शेष चौड़ाई को घेरता है. डिफ़ॉल्ट रूप से, मोबाइल पर टेम्पलेट का समान व्यवहार होता है, तथापि मोबाइल अनुभव के लिए वांछित UI पैटर्न के आधार पर कुछ अनुकूलनों की संस्तुति की जाती है.

कंटेनर के साथ कार्य करना

कन्टेनर सभी प्रतिक्रियाशील डिज़ाइन के ब्लॉक होते हैं. एक कन्टेनर एक ऑटो-लेआउट कन्टेनर वर्टिकल या हॉरिज़ोन्टल दिशा में, या एक निश्चित-लेआउट का कन्टेनर हो सकता है, जो भविष्य में अवरोधों को समर्थित करेगा.

कन्टेनर्स के साथ आपके अनुप्रयोग का UI बनाने के लिए नीचे कुछ सुझाव दिये गए हैं:

• हमेशा UI तत्व बनाएँ जो एक कंटेनर के अंदर UI टेबल बनाते हैं.

• यह निर्दिष्ट करने के लिए कि कन्टेनर अलग-अलग स्क्रीन आकारों पर किस स्थिति में हो या आकार परिवर्तित करे, कन्टेनर में इसके स्वयं के प्रतिक्रियाशील गुणधर्मों और सेटिंग्स को अनुमत करें.

• आपको यह परिवर्तित करने की अनुमति देता है कि प्रतिक्रियाशीलता के संबंध में इसके चाइल्ड कम्पोनेन्ट्स को किस प्रकार रखा जाता है.

एक कन्टेनर के लिए दो लेआउट मोड में से एक चुनें: मैन्युअल लेआउट या ऑटो-लेआउट (क्षैतिज या अनुलंब)

स्वचालित-लेआउट कंटेनर

चाइल्ड कम्पोनेन्ट्स को स्वचालित रूप से ले आउट करने के लिए दो नियंत्रणों, अनुलंब कन्टेनर और क्षैतिज कन्टेनर का उपयोग किया जा सकता है. इन कन्टेनर्स द्वारा चाइल्ड कम्पोनेन्ट्स की स्थिति निर्धारित की जाती है ताकि आपको कन्टेनर के अंदर किसी कम्पोनेन्ट के लिए X, Y सेट न करना पड़े. साथ ही, यह सेटिंग्स के आधार पर अपने चाइल्ड कम्पोनेन्ट्स को उपलब्ध स्थान वितरित कर सकता है, साथ ही चाइल्ड कम्पोनेन्ट्स के वर्टिकल और हॉरिज़ोन्टल अलाइनमेन्ट, दोनों को निर्धारित करता है.

ऑटो-लेआउट कन्टेनर्स का उपयोग कब करें

आप निम्नलिखित परिदृश्यों में ऑटो-लेआउट कन्टेनर्स का उपयोग कर सकते हैं:

• UI को स्क्रीन आकार या प्रपत्र फ़ैक्टर परिवर्तनों के लिए प्रतिक्रियाशील होना चाहिए.
• एक से अधिक चाइल्ड कम्पोनेन्ट्स होते हैं जिन्हें स्क्रीन आकार या प्रपत्र फ़ैक्टर परिवर्तनों के आधार पर आकार बदलने या आस-पास स्थान परिवर्तित करने की आवश्यकता होती है.
• जब आपको चीज़ों का अनुलंब या लंबवत रूप से (उनके आकार की परवाह किए बिना) ढेर लगाने की आवश्यकता होती है.
• जब आपको स्क्रीन पर चीज़ो के बीच समान जगह बनाने आवश्यकता होती है.

ऑटो-लेआउट कन्टेनर के लिए उदाहरण

प्रतिक्रियाशील स्क्रीन निर्मित करने के लिए:

1. टैबलेट लेआउट के साथ एक रिक्त कैनवास ऐप बनाएं.

2. सेटिंग > डिस्प्ले चुनें और स्केल को फ़िट करने के लिए, लॉक आस्पेक्ट रेश्यो, और लॉक ओरिएंटेशन को अक्षम करें और लागू करें चुनें.

3. अब लेआउट टैब के अन्तर्गत, बाएं साइडबार में इन्सर्ट करें फलकों से, क्षैतिज कन्टेनर चुनें.

   

4. सबसे ऊपर के कन्टेनर को इन गुणधर्मों के साथ पूरे स्थान को घेरने के आकार का होना चाहिए. इसका आकार परिवर्तित करने पर इसका आकार स्क्रीन के समान ही होगा.

   1. X = 0
   2. Y= 0
   3. चौड़ाई = Parent.Width
   4. ऊँचाई = पैरेंट. ऊंचाई

5. अब, डालें फलक से दो लंबवत कन्टेनर्स को आड़े कन्टेनर में जोड़ें.

   

6. कन्टेनर्स बनाने के लिए, खड़े स्थान को पूरा भरें, कन्टेनर1 चुनें और Align (vertical) गुणधर्म को Stretch पर सेट करें.

   

7. कॉन्टेन्ट के बीच स्क्रीन को विभाजित करने हेतु, दो चाइल्ड कन्टेनर्स पर Fill portions गुण का उपयोग करें. बायां कन्टेनर, स्क्रीन के स्थान का ¼ भाग लेगा.

   1. कंटेनर2 का चयन करें. आप देखेंगे कि Flexible width गुण चालू है. Fill portions को 1 पर सेट करें.
   2. कंटेनर3 का चयन करें. आप देखेंगे कि Flexible width गुण चालू है. Fill portions को 3 पर सेट करें.

8. कंटेनर2 का चयन करें. फ़ॉर्म्यूला बार में Fill = RGBA(56, 96, 178, 1) गुण सेट करें. Align (horizontal) को Stretch पर सेट करें.

9. मेनू बनाने के लिए कुछ बटन जोड़ें. आवश्यकतानुसार बटन का नाम बदलें.

   

10. कन्टेनर3 चुनें और एक आड़ा कन्टेनर जोड़ें और Flexible height गुण को बंद करें. Height को 100 पर सेट करें. Align (vertical) को Stretch पर सेट करें.

11. कन्टेनर4 में कुछ आइकन जोड़ें. आइकन को बदलें जिससे यह आइकन के गुण से भिन्न हो.

    

12. कन्टेनर4 चुनें. Justify (horizontal) गुण को End पर सेट करें. Align (vertical) को Center पर सेट करें. आइकन के बीच जगह बनाने के लिए Gap को 40 पर सेट करें.

13. कंटेनर3 का चयन करें. Align (horizontal) को Stretch पर सेट करें. Vertical Overflow को Scroll पर सेट करें.

14. विभिन्न लेबल, इनपुट्स, मीडिया को तब तक जोड़ें जब तक कि वे कन्टेनर से परे विस्तारित नहीं हो जाते. समकोणों का रंग बदलें जिससे यह भिन्न हों. अनदेखे कॉन्टेन्ट को एक्सेस करने के लिए आपको एक स्क्रॉल बार दिखाई देगा.

    

15. पूर्वावलोकन या F5 चुनें. यह देखने के लिए ब्राउज़र विण्डो का आकार बदलें कि आपका अनुप्रयोग विभिन्न स्क्रीन आकारों में किस प्रकार समायोजित होता है.

ज्ञात समस्याएँ

• लेआउट कन्टेनर गुणों के कुछ संयोजन असंगत होते हैं या अवांछनीय आउटपुट उत्पन्न कर सकते हैं, उदाहरण के लिए:

  • यदि कन्टेनर के Wrap गुण को सक्षम किया जाता है, तो चाइल्ड नियंत्रणों पर Align गुण सेटिंग को अनदेखा कर दिया जाता है.
  • यदि कन्टेनर का Wrap गुण अक्षम है और कन्टेनर का प्राथमिक-अक्ष अधिप्रवाह स्क्रॉल (आड़े कन्टेनर्स के लिए आड़ा अधिप्रवाह या खड़े कन्टेनर्स के लिए खड़ा अधिप्रवाह) पर सेट है, तो Justify गुण को या प्रारंभ पर या बीच में अन्तराल पर सेट करने की संस्तुति की जाती है.
  • मध्यबिन्दु या अंत विकल्प चाइल्ड नियंत्रणों को एक्सेस करने के अयोग्य तब बना सकते हैं, जब सभी नियंत्रणों को प्रदर्शित करने के लिए कन्टेनर बहुत छोटा होता है, भले ही Overflow गुण स्क्रॉल पर सेट हो.

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

• वर्तमान में लेआउट कन्टेनरों में डाटा टेबल, चार्ट, और चित्र जोड़ें नियंत्रण समर्थित नहीं हैं.

• चाइल्ड नियंत्रणों के लिए कुछ लेआउट कन्टेनर गुण छिपे हुए होते हैं. छिपे हुए गुण अभी भी फ़ॉर्म्यूला बार के माध्यम से या उन्नत पैनल से सुलभ हो सकते हैं. तथापि, इन गुणों को इन स्थानों पर सेट किए जाने पर भी अनदेखा किया जाएगा.

• जब नियंत्रणों को एक लेआउट कन्टेनर में ले जाया जाता है (उदाहरण के लिए, जब कॉपी या नियंत्रण पेस्ट करते हैं), तो उन्हें ट्री आलोकन में उनके अनुक्रम से कन्टेनर में डाला जाता है.

इसे भी देखें

प्रतिक्रियाशील लेआउट बनाएँ

नोट

क्या आप हमें अपनी दस्तावेज़ीकरण भाषा वरीयताओं के बारे में बता सकते हैं? एक छोटा सर्वेक्षण पूरा करें. (कृपया ध्यान दें कि यह सर्वेक्षण अंग्रेज़ी में है)

सर्वेक्षण में लगभग सात मिनट लगेंगे. कोई भी व्यक्तिगत डेटा एकत्र नहीं किया जाता है (गोपनीयता कथन).