ऐप्स बनाना
यूआई डिज़ाइनर का उपयोग करके अपने वेब ऐप पेज बनाने, अनुकूलित करने और प्रबंधित करने की प्रक्रिया में आपका पूरा मार्गदर्शन करें।
एक एप्लिकेशन बनाने के लिए, आपको लेआउट, पेज बनाना चाहिए, उन्हें सामग्री से भरना चाहिए और वेब ऐप इंटरैक्शन सेट करना चाहिए।
लेआउट
इससे पहले, हमने लेआउट की अवधारणा पेश की थी। लेआउट निर्माण शुरू करने के लिए, आपको पहले अपने एप्लिकेशन की संरचना की रूपरेखा तैयार करनी होगी और उपयोग किए जाने वाले पेज टेम्पलेट्स की पहचान करनी होगी।
यदि आपसे कुछ छूट गया है तो चिंता न करें। आप आवश्यकता पड़ने पर लेआउट सूची को बढ़ा सकते हैं।
लेआउट सूची
लेआउट सूची आपके वेब एप्लिकेशन के सभी लेआउट प्रदान करती है। यहां, आप विभिन्न प्रकार के ऑपरेशन कर सकते हैं और लेआउट प्रबंधित कर सकते हैं।
लेआउट सूची तक पहुंचने के लिए, यूआई डिज़ाइनर टैब में बाएं टूलबार पर चौथा टैब चुनें या शॉर्टकट कुंजी 4 का उपयोग करें। आपके सभी एप्लिकेशन लेआउट यहां प्रदर्शित किए जाएंगे.
प्रत्येक एप्लिकेशन में कम से कम एक लेआउट होना चाहिए। जब आप एक नया एप्लिकेशन बनाते हैं, तो चयनित एप्लिकेशन टेम्पलेट के आधार पर एक या कई लेआउट स्वचालित रूप से बनाए जाएंगे। उनमें से एक को **डिफ़ॉल्ट** के रूप में चिह्नित किया गया है।
लेआउट सूची में, आप लेआउट पर निम्नलिखित क्रियाएं कर सकते हैं:
- चुनना,
- नया जोड़ो,
- नाम बदलें,
- डुप्लिकेट,
- मिटाना।
मूलभूत ढांचा
नया पेज बनाते समय लेआउट सूची से डिफ़ॉल्ट लेआउट स्वतः चयनित हो जाता है। हालाँकि, यदि आवश्यक हो तो इसे किसी भिन्न लेआउट से बदला जा सकता है।
डिफ़ॉल्ट लेआउट का उपयोग विकास की गति को बढ़ाता है, इसलिए हम डिफ़ॉल्ट के रूप में सबसे अधिक उपयोग किए जाने वाले लेआउट का उपयोग करने की सलाह देते हैं। ध्यान दें कि एक समय में केवल एक लेआउट को डिफ़ॉल्ट के रूप में सेट किया जा सकता है। डिफ़ॉल्ट लेआउट को ओवरराइड करने से मौजूदा पृष्ठों पर कोई प्रभाव नहीं पड़ता है जब तक कि प्रारंभिक लेआउट हटा नहीं दिया जाता है।
डिफ़ॉल्ट लेआउट को लेआउट सूची में नीले स्टार आइकन से चिह्नित किया गया है।
नया लेआउट बनाएं
आप विभिन्न पेज प्रकारों के लिए अलग-अलग लेआउट डिज़ाइन कर सकते हैं। नया लेआउट बनाने के लिए इन चरणों का पालन करें:
-
CTRL/⌘+Lदबाएँ या UI डिज़ाइनर के बाएँ टूलबार से लेआउट सूची (शॉर्टकट4) खोलें और पैनल हेडर पर प्लस बटन पर क्लिक करें। - दिखाई देने वाले मोडल में लेआउट नाम प्रदान करें। हम एक पठनीय शीर्षक का उपयोग करने की सलाह देते हैं जो पृष्ठों पर लेआउट निर्दिष्ट करते समय त्वरित पहचान के लिए लेआउट की संरचना को दर्शाता है।
- लेआउट टेम्पलेट चुनें:
- आधार: अतिरिक्त तत्वों के बिना रिक्त टेम्पलेट, बिना नेविगेशन वाले पृष्ठों, जैसे प्रमाणीकरण या त्रुटि पृष्ठों के लिए अच्छा है।
- साइडबार बायाँ: साइडबार मेनू के साथ टेम्पलेट, व्यवस्थापक पैनल, सीएमएस, ईआरपी, आदि के लिए अच्छा है।
- शीर्ष मेनू: शीर्ष मेनू वाला टेम्पलेट, वेबसाइटों या लैंडिंग पृष्ठों के लिए अच्छा है।
- यदि इस लेआउट को डिफ़ॉल्ट बनाना है तो डिफ़ॉल्ट लेआउट सेटिंग सक्षम करें।
- क्रिएट बटन पर क्लिक करें.
आपके द्वारा बनाए जा सकने वाले लेआउट की संख्या की कोई सीमा नहीं है।
लेआउट का नाम बदला जा रहा है
किसी लेआउट का नाम बदलने के लिए, लेआउट नाम पर डबल-क्लिक करें, आवश्यक परिवर्तन करें, और सहेजने के लिए Enter दबाएँ या परिवर्तनों को वापस लाने के लिए Esc दबाएँ।
डुप्लिकेटिंग लेआउट
किसी लेआउट को उसकी सामग्री और सेटिंग्स सहित डुप्लिकेट करने के लिए:
- उस लेआउट पर होवर करें जिसे आप डुप्लिकेट करना चाहते हैं।
- डुप्लिकेट आइकन पर क्लिक करें.
डुप्लिकेट किए गए लेआउट स्वचालित रूप से सूची में उनके नाम के साथ जोड़े गए इंडेक्स के साथ दिखाई देते हैं। यदि आप लेआउट सेट को डिफ़ॉल्ट के रूप में डुप्लिकेट करते हैं, तो स्रोत लेआउट नव निर्मित लेआउट द्वारा ओवरराइड नहीं किया जाता है।
लेआउट हटाया जा रहा है
लेआउट हटाने के लिए:
- उस लेआउट पर होवर करें जिसे आप हटाना चाहते हैं।
- ट्रैश आइकन पर क्लिक करें.
- मिटाने की पुष्टि।
किसी भी पेज से लिंक किए गए लेआउट को हटाने के लिए, आपको किसी भी लिंक किए गए पेज को हटाने से पहले उसके लिए लेआउट को फिर से असाइन करना चाहिए। यह पुष्टिकरण मोडल के माध्यम से या प्रत्येक पृष्ठ के लिए मैन्युअल रूप से किया जा सकता है।
डिफ़ॉल्ट लेआउट को हटाने के लिए, आपको डिफ़ॉल्ट के रूप में एक और लेआउट सेट करना चाहिए।
❗️ महत्वपूर्ण: आप लेआउट डिलीट ऑपरेशन को पूर्ववत नहीं कर सकते।
लेआउट सेटिंग
बाएं सेटिंग साइडबार से इसकी सेटिंग्स तक पहुंचने के लिए लेआउट सूची में लक्ष्य लेआउट पर क्लिक करें।
सेटिंग्स साइडबार हेडर से, आप नाम पर क्लिक करके चयनित लेआउट का नाम बदल सकते हैं या उसे हटा सकते हैं।
आप चयनित लेआउट को डिफ़ॉल्ट के रूप में सेट कर सकते हैं और सभी लिंक किए गए पेज यहां देख सकते हैं। किसी लिंक किए गए पृष्ठ को संपादित करने के लिए, सूची में उस पर क्लिक करें।
इसके अलावा, आप लेआउट के लिए कुछ व्यावसायिक तर्क बना सकते हैं।
लेआउट बिजनेस लॉजिक
व्यवसाय तर्क टैब में, कोई कार्रवाई सेट करने के लिए ट्रिगर का चयन करें। यह चयनित ट्रिगर पर केंद्रित व्यवसाय प्रक्रिया संपादक खोलेगा।
यहां, आप एक या अधिक ट्रिगर्स के लिए एक्शन फ़्लो बना सकते हैं, जैसे नेविगेशन लागू करना, गुणों को सशर्त रूप से बदलना, दृश्यता को टॉगल करना, डेटा भेजना और बहुत कुछ। अधिक जानकारी के लिए व्यवसाय प्रक्रिया के निर्माण पर हमारी मार्गदर्शिका देखें।
🔔 इष्टतम एप्लिकेशन प्रदर्शन के लिए, बैकएंड साइड पर जटिल व्यावसायिक प्रक्रियाओं का निर्माण करें।
संपादन लेआउट
वैश्विक घटकों और पेज टेम्प्लेट के रूप में लेआउट, सभी लिंक किए गए पेजों पर सभी संशोधनों को स्वचालित रूप से लागू करते हैं।
किसी लेआउट को संपादित करने के लिए, लेआउट सूची में लक्ष्य आइटम का चयन करें और यूआई तत्व पैनल से किसी भी आवश्यक घटक को कैनवास क्षेत्र पर खींचकर और छोड़ कर जोड़ें।
किसी लेआउट को संपादित करते समय, याद रखें कि टेम्पलेट में एक अपरिवर्तनीय पेज कंटेनर घटक शामिल है। यह टेम्प्लेट के भीतर आपके पृष्ठ की सामग्री का स्थान निर्धारित करता है। पेज कंटेनर को हरे रंग में हाइलाइट किया गया है और लेआउट संपादन मोड में अंदर के घटक शामिल नहीं हो सकते हैं। सामग्री सीधे पृष्ठ पर परिभाषित की जाती है, और पृष्ठ कंटेनर का आकार उसके मूल घटक द्वारा निर्धारित किया जाता है।
पृष्ठों
आवश्यक लेआउट बनाने के बाद, वेब ऐप पेज बनाना शुरू करने का सबसे अच्छा समय है। आवश्यक लेआउट बनाने के बाद, वेब ऐप पेज बनाना शुरू करने का सबसे अच्छा समय है। प्रत्येक वेब एप्लिकेशन पृष्ठ लक्ष्य URL द्वारा उपयोगकर्ता के वेब ब्राउज़र पर प्रदर्शित सामग्री प्रदान करता है।
पन्ने का पेड़
पेज ट्री आपको आपकी वेबसाइट की संरचना दिखाता है - आपकी साइट के पेज और वे फ़ोल्डर जिनमें वे पेज हैं। यहां, आप विभिन्न ऑपरेशन कर सकते हैं और पृष्ठों और फ़ोल्डरों को व्यवस्थित कर सकते हैं।
पेज ट्री खोलने के लिए, यूआई डिज़ाइनर के बाएं टूलबार से तीसरा टैब चुनें या 3 दबाएं। यहां आपके सभी एप्लिकेशन पेज प्रदर्शित होंगे।
प्रत्येक आवेदन में कम से कम एक पृष्ठ अवश्य होना चाहिए। जब आप कोई नया एप्लिकेशन बनाते हैं, तो चयनित एप्लिकेशन टेम्पलेट के आधार पर एक या कई पेज पहले से ही बनाए जाते हैं।
आप पेजों और फ़ोल्डरों पर निम्नलिखित क्रियाएं कर सकते हैं:
- चुनना,
- नया पेज या फ़ोल्डर जोड़ें,
- नाम बदलें,
- पेज और फ़ोल्डरों को फ़ोल्डर में/बाहर ले जाएँ,
- डुप्लिकेट,
- मिटाना।
सूचकांक पेज
इंडेक्स पृष्ठ आपके एप्लिकेशन का प्रारंभिक पृष्ठ है। जब आपका एप्लिकेशन चलता है, तो यदि आपने कोई रीडायरेक्ट नहीं बनाया है तो यह पेज सबसे पहले रेंडर किया जाएगा।
इंडेक्स पेज पेज ट्री में हाउस आइकन को चिह्नित करता है और इसे किसी अन्य पेज पर स्विच नहीं किया जा सकता है। डिफ़ॉल्ट रूप से, यह पेज स्वचालित रूप से बनाए गए डिफ़ॉल्ट लेआउट से जुड़ा हुआ है, लेकिन आप इसे पेज सेटिंग्स में बदल सकते हैं।
नया पेज बनाएं
अपने वेब एप्लिकेशन में एक पेज जोड़ने के लिए:
-
CTRL/⌘+Pदबाएँ या UI डिज़ाइनर के बाएँ टूलबार से पेज ट्री (शॉर्टकट3) खोलें और पैनल के हेडर पर प्लस बटन पर क्लिक करें। - दिखाई देने वाले मोडल में पेज यूआरएल प्रदान करें।
- पृष्ठ के लिए मूल फ़ोल्डर का चयन करें या पृष्ठ को मूल में रखने के लिए फ़ील्ड को खाली छोड़ दें।
- पेज लेआउट चुनें.
- क्रिएट बटन पर क्लिक करें.
💡 फ़ोल्डर बनाए बिना नेस्टेड रूट बनाने के लिए, पेज यूआरएल फ़ील्ड में लक्ष्य पेज के लिए एक पूरा पथ प्रदान करें, उदाहरण के लिए, सेटिंग्स/प्रोफ़ाइल। इस मामले में पेज प्रोफ़ाइल को फ़ोल्डर सेटिंग में नेस्ट करके बनाया जाएगा।
आप अपने वेब एप्लिकेशन के लिए असीमित पेज और फ़ोल्डर्स बना सकते हैं।
🔔 ऐपमास्टर स्टूडियो के साथ निर्मित वेब ऐप्स पेज यूआरएल द्वारा ऐप रूटिंग उत्पन्न करते हैं, इसलिए पेज जेनरेशन फॉर्म में, सही प्रारूप में पेज यूआरएल का उपयोग करें और, सर्वोत्तम समझ के लिए, एक अनुकूल यूआरएल का उपयोग करें।
नया फ़ोल्डर बनाएं
आप नेविगेशन को व्यवस्थित करने और पृष्ठों के लिए सही राउटर बनाने के लिए फ़ोल्डर बना सकते हैं। नया फ़ोल्डर बनाने के लिए:
-
CTRL/⌘+SHIFT+Pदबाएँ या UI डिज़ाइनर के बाएँ टूलबार से पेज ट्री (शॉर्टकट 3) खोलें और पैनल के हेडर पर फ़ोल्डर बटन पर क्लिक करें। - दिखाई देने वाले मोडल में फ़ोल्डर का नाम प्रदान करें।
- नेस्टेड राउटर बनाने के लिए यदि आवश्यक हो तो पैरेंट फ़ोल्डर का चयन करें
- क्रिएट बटन पर क्लिक करें.
यूआई तत्व
आपके ऐप के उपयोगकर्ता इंटरफ़ेस में तत्व शामिल हैं: इनपुट फ़ील्ड, बटन, छवियां, चेकबॉक्स, कैलेंडर, छवियां और आइकन जो प्रत्येक एक विशिष्ट उद्देश्य को पूरा करते हैं।
ऐपमास्टर एक ड्रैग-एंड-ड्रॉप विज़ुअल एडिटर प्रदान करता है जो आपको कोड लिखने और तुरंत पूर्वावलोकन करने के बजाय तत्वों को सीधे पृष्ठ पर चुनने और रखने की सुविधा देता है।
तत्व जोड़ना
कैनवास में एक तत्व जोड़ने के लिए:
- यूआई तत्वों की सूची के साथ यूआई तत्व पैनल खोलें (शॉर्टकट
1)। - आवश्यक तत्व का चयन करें या खोज बार का उपयोग करें।
- चयनित तत्व को पृष्ठ या लेआउट कैनवास पर खींचें।
ड्रैगिंग तत्व को लक्ष्य के अंदर रखने के लिए, तत्व को लक्ष्य तत्वों के ऊपर छोड़ें।
किसी तत्व के पहले या बाद में एक तत्व जोड़ने के लिए, तत्व को लक्ष्य की सीमा के ऊपर तब तक खींचें जब तक कि एक विभाजक दिखाई न दे।
विभाजक मूल कंटेनर दिशा पर निर्भर करता है:
- यदि मूल कंटेनर दिशा लंबवत है , तो तत्व ऊपर या नीचे से जोड़े जाएंगे।
- यदि मूल कंटेनर दिशा क्षैतिज है , तो तत्व बाएँ या दाएँ से जोड़े जाएंगे।
तत्वों को अनुकूलित करें
आपके द्वारा कैनवास में जोड़ा गया प्रत्येक घटक अनुकूलन योग्य सेटिंग्स के व्यापक सेट से संपन्न है। तत्व गुणों के साथ, आप तत्व की उपस्थिति और प्रदर्शित होने वाले डेटा दोनों को प्रबंधित कर सकते हैं।
किसी तत्व को कॉन्फ़िगर करने के लिए:
- कैनवास पर लक्ष्य घटक का चयन करें.
- उपस्थिति पैनल पर जाएँ, दाएँ साइडबार पर पहला टैब।
- पैनल के भीतर, वह विशिष्ट सेटिंग आइटम चुनें जिसे आप संशोधित करना चाहते हैं।
- निर्दिष्ट फ़ील्ड में अपना पसंदीदा मान दर्ज करें।
कैनवास वास्तविक समय में प्रतिक्रिया करता है, आपके समायोजन को तुरंत प्रदर्शित करता है।
अतिरिक्त मार्गदर्शन के लिए, एक टूलटिप उभरने के लिए अपने माउस कर्सर को किसी सेटिंग पर संक्षेप में घुमाएं, जो उस सेटिंग के फ़ंक्शन का संक्षिप्त विवरण प्रदान करता है।
इन इंटरैक्टिव सुविधाओं के अलावा, ऐपमास्टर अपने विशेष बिजनेस प्रोसेस ब्लॉक, सेट प्रॉपर्टीज और सेट डेटा के माध्यम से अनुकूलन क्षमताओं को बढ़ाता है। ये ब्लॉक उन्नत स्तर की पहुंच प्रदान करते हैं, जिससे आप अपने वेब एप्लिकेशन में प्रत्येक घटक की सेटिंग्स को प्रोग्रामेटिक रूप से बदल सकते हैं।