यूआई डिज़ाइनर अवलोकन
वेब ऐप्स बनाने के लिए ऐपमास्टर यूआई डिज़ाइनर के इंटरफ़ेस का विस्तृत विवरण।
सफलतापूर्वक एप्लिकेशन बनाने के बाद, आपको यूआई डिज़ाइनर टैब पर निर्देशित किया जाएगा।
ऐपमास्टर में यूआई डिज़ाइनर को उपयोगकर्ता के अनुकूल बनाया गया है, जिससे आप आसानी से शानदार वेब ऐप पेज बना सकते हैं।
इसके सहज ज्ञान युक्त ड्रैग-एंड-ड्रॉप इंटरफ़ेस के माध्यम से, आप वेब पेज डिज़ाइन कर सकते हैं और उन्हें उन्नत कोडिंग कौशल की आवश्यकता को समाप्त करते हुए सामग्री से भर सकते हैं।
उपयोगकर्ताओं के साथ बातचीत करने के लिए यूआई डिज़ाइनर को चार प्राथमिक अनुभागों में विभाजित किया गया है:
- बायां टूलबार
- टॉप पैनल
- नीचे का पैनल
- कैनवास क्षेत्र
- गुण पैनल
बायां टूलबार
बाईं ओर का टूलबार आपकी वेबसाइट की संरचना के लिए टूल प्रदान करता है। इस साइडबार के शीर्ष पर स्थित आइकन पर क्लिक करने पर, निम्नलिखित पैनल सामने आएंगे:
- यूआई तत्वों की सूची
- तत्व वृक्ष
- पन्ने का पेड़
- लेआउट वृक्ष
- संपत्ति प्रबंधक
यूआई तत्व सूची (शॉर्टकट: 1 )
यूआई तत्व सूची वे सभी तत्व प्रदान करती है जिन्हें पैनल से खींचकर कैनवास क्षेत्र में जोड़ा जा सकता है।
यूआई तत्वों को उनके उद्देश्य के आधार पर श्रेणियों में व्यवस्थित किया जाता है, जिससे नेविगेट करना और आपके ऐप के लिए उपयुक्त विजेट ढूंढना आसान हो जाता है।
तत्व पर तेजी से जाने के लिए, आप पैनल के शीर्ष पर खोज बार का उपयोग कर सकते हैं।
तत्व वृक्ष (शॉर्टकट: 2 )
एलिमेंट्स ट्री से, आप अपने वेब ऐप के चयनित पेज पर रखे गए सभी घटकों को प्रबंधित और व्यवस्थित कर सकते हैं।
यहां, आप इन तत्वों के साथ बातचीत कर सकते हैं:
- वस्तुओं को खींचकर पेड़ के बीच ले जाएँ,
- घटकों का नाम बदलें,
- कैनवास पर तत्वों की दृश्यता स्थिति बदलें (छिपाएँ/दिखाएँ)।
ट्री में तेज़ खोज तत्व के लिए पैनल के शीर्ष पर खोज बार का उपयोग करें।
पेज ट्री (शॉर्टकट: 3 )
पेज ट्री आपको अपनी साइट के पेजों को व्यवस्थित और प्रबंधित करने की अनुमति देता है। आप यहां नए पेज या फोल्डर बना सकते हैं।
पेज ट्री में आप पेजों या फ़ोल्डरों की नकल बना सकते हैं या उन्हें हटा सकते हैं।
ट्री में पेज या फ़ोल्डर को तेजी से खोजने के लिए पैनल के शीर्ष पर सर्च बार का उपयोग करें।
लेआउट सूची (शॉर्टकट: 4 )
लेआउट ट्री आपके पेज लेआउट को प्रबंधित करने में मदद करता है। पेज ट्री की तरह आप लेआउट को डुप्लिकेट या हटा सकते हैं।
ट्री में तेज़ खोज लेआउट के लिए पैनल के शीर्ष पर खोज बार का उपयोग करें।
संपत्ति प्रबंधक (शॉर्टकट: 5 )
संपत्ति प्रबंधक आपकी वेबसाइट के उपयोग के लिए संपत्तियों (जैसे दस्तावेज़, चित्र और एनिमेशन) को अपलोड करने और व्यवस्थित करने की सुविधा प्रदान करता है।
विकास के दौरान आपके द्वारा अपलोड की गई सभी संपत्तियां एसेट मैनेजर में रखी जाएंगी और दोबारा अपलोड किए बिना उनका पुन: उपयोग किया जा सकता है।
आप ऐसी किसी संपत्ति को भी हटा सकते हैं जिसकी आपको अब आवश्यकता नहीं है।
शीश पट्टी
शीर्ष बार दृश्य सेटिंग्स का एक अतिरिक्त सेट प्रदान करता है। बाईं ओर से शुरू करके, मेनू बटन के बगल में, और दाईं ओर विस्तार करते हुए, आपके पास टूल का निम्नलिखित सेट होगा:
- वर्तमान दस्तावेज़: वह पृष्ठ या लेआउट प्रदर्शित करता है जिस पर आप वर्तमान में काम कर रहे हैं।
- ब्रेकप्वाइंट: ब्रेकप्वाइंट आइकन आपको पूर्वावलोकन करने और संशोधित करने के लिए विभिन्न ब्रेकप्वाइंट के बीच स्विच करने में सक्षम बनाता है कि आपकी साइट विभिन्न डिवाइस आकारों पर कैसे दिखाई देती है।
- पूर्ववत करें और फिर से करें: पूर्ववत करें और फिर से करें बटन आपको डिज़ाइनर में किए गए कार्यों को उलटने या पुन: लागू करने की सुविधा देते हैं, जैसे कोई शैली लागू करना या कोई तत्व हटाना। शॉर्टकट भी उपलब्ध हैं: कार्रवाई को पूर्ववत करने के लिए -
CRTL/⌘+Zऔर कार्रवाई को फिर से करने के लिए -CTRL/⌘+SHIFT+Z।
निचला बार
निचला पैनल आपको पृष्ठ दृश्य को ज़ूम करने या उसका आकार बदलने की अनुमति देता है।
पैनल के बाईं ओर, आप अपने कैनवास की ऊंचाई और चौड़ाई सेट करके कस्टम पेज रिज़ॉल्यूशन सेट कर सकते हैं।
दाईं ओर, आप पैमाने को नियंत्रित कर सकते हैं:
- ज़ूम इन या ज़ूम आउट करें
- प्रतिशत में पैमाना निर्धारित करें
- वास्तविक आकार निर्धारित करें
- वर्तमान विंडो को दृश्य क्षेत्र में फिट करें
कैनवास
कैनवास आपका इंटरैक्टिव कार्यक्षेत्र है. यह वह जगह है जहां आप पेज घटकों के साथ जुड़ सकते हैं। आप तत्वों का चयन कर सकते हैं, उनका स्थान बदल सकते हैं और सामग्री को सीधे पृष्ठ पर संपादित कर सकते हैं।
इसके अलावा, आप पृष्ठों और अनुप्रयोगों के बीच तत्वों को कॉपी ( CRTL/⌘+C ) और पेस्ट ( CRTL/⌘+V ) कर सकते हैं या वर्तमान पृष्ठ ( CRTL/⌘+D ) के भीतर तत्वों को डुप्लिकेट कर सकते हैं।
गुण पैनल
डिज़ाइनर के दाईं ओर गुण पैनल आपको चयनित तत्व, लेआउट या पृष्ठ के दृश्य स्वरूप और व्यवहार को अनुकूलित करने की अनुमति देता है।
गुण पैनल में 4 मुख्य पैनल शामिल हैं:
- उपस्थिति पैनल
- अतिरिक्त विकल्प पैनल (वैकल्पिक)
- मीडिया क्वेरीज़ पैनल
- बिजनेस लॉजिक पैनल
पैनल के हेडर पर, आप आइटम के नाम पर क्लिक करके चयनित आइटम का नाम बदल सकते हैं, विवरण पढ़ सकते हैं, या ट्रैश आइकन पर क्लिक करके आइटम को हटा सकते हैं।
उपस्थिति पैनल
उपस्थिति पैनल आपको चयनित तत्व की प्रदर्शित स्थिर सामग्री और गुणों तक पहुंचने की अनुमति देता है। आप इन मानों को उनके संबंधित फ़ील्ड में इनपुट या चुन सकते हैं, और शैलियाँ कैनवास पर आपके तत्वों पर तुरंत लागू हो जाएंगी।
यदि कैनवास पर कोई तत्व चयनित नहीं है, तो यह पैनल वर्तमान पृष्ठ या लेआउट की सेटिंग्स प्रदर्शित करेगा।
अतिरिक्त विकल्प पैनल
अतिरिक्त विकल्प पैनल उन तत्वों के लिए है जिनके लिए अतिरिक्त सेटिंग डेटा या विकल्पों की आवश्यकता होती है।
आप चयनित घटक के आधार पर डेटा स्रोत सेट कर सकते हैं या मैन्युअल रूप से विकल्प दर्ज कर सकते हैं।
मीडिया क्वेरीज़ पैनल
मीडिया क्वेरीज़ पैनल आपको प्रत्येक परिभाषित ब्रेकपॉइंट के लिए आइटम गुणों को ओवरराइड करने में सक्षम बनाता है।
बिजनेस लॉजिक पैनल
बिजनेस लॉजिक पैनल एक तत्व के लिए सभी ट्रिगर प्रदान करता है और ट्रिगर सक्रिय होने पर आपको तत्व इंटरैक्शन स्थापित करने की अनुमति देता है।