घटक डिजाइन
वेब अनुप्रयोगों के लिए ग्राफिकल घटकों का डिजाइन
कैनवास के खाली स्थान पर तत्वों को सरलता से रखना संभव होगा, लेकिन बेहतर होगा कि सब कुछ तुरंत साफ-सुथरा और व्यवस्थित करने का प्रयास किया जाए। इसलिए, शुरू करने के लिए, हम कार्यक्षेत्र को डिज़ाइन करेंगे। आइए कैनवास में एक घटक ( Container ) जोड़ें जहां हम अन्य सभी तत्वों को रखेंगे। जोड़ने के बाद, आपको गियर आइकन पर क्लिक करना चाहिए और इस कंटेनर के कॉन्फ़िगरेशन के लिए आगे बढ़ना चाहिए।
कंटेनर सेटिंग्स
आइए उपलब्ध सेटिंग्स के माध्यम से चलते हैं।
- Name - वह नाम जिसके तहत हम इस कंटेनर को एप्लिकेशन की व्यावसायिक प्रक्रियाओं में संदर्भित कर सकते हैं। उदाहरण के लिए, यदि हम इस कंटेनर की कुछ सेटिंग्स को बदलने के लिए व्यावसायिक प्रक्रिया बनाना चाहते हैं।
- Direction - वह दिशा जिसमें दिए गए कंटेनर के अंदर के तत्व रखे जाएंगे। क्षैतिज रूप से, यदि आप उन्हें एक पंक्ति में व्यवस्थित करना चाहते हैं, एक के बाद एक, या इसके विपरीत, लंबवत, जब तत्व एक दूसरे के नीचे जाते हैं।
- Wrap - तत्वों का आउटपुट सेट करना। क्या उन्हें एक ही लाइन (अब्रैप) पर होना चाहिए, या उन्हें लपेटा जा सकता है (लपेटें)।
- Alignment - कंटेनर में तत्वों को कैसे संरेखित किया जाना चाहिए (क्षैतिज और लंबवत संरेखण के लिए अलग सेटिंग)।
- Size - कंटेनर का आकार। इसे उपलब्ध स्थान के प्रतिशत के रूप में सेट किया जा सकता है या पिक्सेल में कड़ाई से निश्चित आकार हो सकता है।
- Max Width - अधिकतम स्वीकार्य चौड़ाई (यदि यह कड़ाई से निर्धारित नहीं है और सामग्री के आधार पर भिन्न होती है)।
- Margin/Padding - कंटेनर बॉर्डर से इंडेंट। क्रमशः बाहरी या आंतरिक।
- Image, Gradient or Overlay (Background color) - वांछित पृष्ठभूमि सेट करने की क्षमता। आप एक विशिष्ट रंग (या ढाल के साथ विभिन्न रंगों का संयोजन) चुन सकते हैं या पृष्ठभूमि छवि का चयन कर सकते हैं।
- Border - फ्रेम का चयन और उसकी उपस्थिति (रंग, मोटाई, गोलाई त्रिज्या)।
- Visible - तत्व की दृश्यता (साथ ही सभी नेस्टेड तत्व)।
चयनित सेटिंग्स को स्क्रीनशॉट में देखा जा सकता है। बेशक, आप अपना अनूठा डिज़ाइन चुनकर प्रयोग कर सकते हैं और उन्हें बदल सकते हैं।
आइए बनाए गए कंटेनर में एक और जोड़ें। हम इसमें आवश्यक इनपुट फ़ील्ड जोड़ेंगे। इसे लंबवत, केंद्र-संरेखित, 40% चौड़ाई, और बाएं पैडिंग-बाएं (पैडिंग-बाएं 20px) पर सेट करें।
अनुप्रयोग घटक
इसके बाद, घटकों को स्वयं कंटेनर में जोड़ें। हमारी व्यावसायिक प्रक्रिया दो प्रकार के float को स्वीकार करती है। उन्हें दर्ज करने के लिए, आपको दो Input घटकों ( float ), एक बटन ( Button ) को जोड़ना होगा, जो गणना प्रक्रिया शुरू करेगा, और उनके Label पर हस्ताक्षर करने के लिए एक छोटा दृश्य समायोजन करेगा।
आइए एक और ब्लॉक जोड़ें जहां हम उस पर हस्ताक्षर करेंगे जो हम सामान्य रूप से गणना करने की योजना बना रहे हैं (योग, घटाव, आदि)। आइए चौड़ाई को 30% पर सेट करें, तत्वों को लंबवत, केंद्रित और दाएं-संरेखित ( end/center ) में व्यवस्थित करें। आइए कंटेनर में ही 5 Label घटक जोड़ें और तुरंत उनके टेक्स्ट को वांछित में बदल दें।
विज़ुअल डिज़ाइन में अंतिम चरण गणना परिणाम प्रदर्शित करने के लिए एक और कंटेनर जोड़ रहा है। हमने इसे पिछले कंटेनर के अनुरूप जोड़ा, लेकिन हमने बाईं ओर एक छोटे से पैडिंग के साथ संरेखण को दाईं ओर सेट किया। इस कंटेनर की विशेषता यह है कि यह प्रारंभ में अदृश्य होगा ( Visible स्विच बंद है)। आइए इसे उस समय चालू करें जब हमारे पास गणनाओं का परिणाम हो। आइए इसमें 5 Label घटक जोड़ें, और हमें उनके पाठ को बदलने की भी आवश्यकता नहीं है क्योंकि ब्लॉक अभी भी अदृश्य है (मुख्य बात यह है कि उनका Name सेट करना है ताकि आप व्यावसायिक प्रक्रियाओं को बनाते समय आवश्यक तत्व की पहचान कर सकें)।
यदि सब कुछ सही ढंग से किया गया था, तो हम वेब डिज़ाइनर में निम्नलिखित परिणाम देखेंगे:
और यह प्रकाशित ऐप में:
