मैंने एक XML टेक्स्ट एडिटर लिखा है जो एक ही XML टेक्स्ट के लिए 2 व्यू ऑप्शन प्रदान करता है, एक इंडेंट (वस्तुतः), दूसरा लेफ्ट-जस्टिफाईड। वाम-औचित्यपूर्ण दृश्य के लिए प्रेरणा उपयोगकर्ताओं को व्हाट्सएप के उन पात्रों को देखने में मदद करने के लिए है जो वे सादे पाठ या एक्सपीथ कोड के इंडेंटेशन के लिए उपयोग कर रहे हैं बिना इंडेंटेशन के हस्तक्षेप के बिना जो एक्सएमएल संदर्भ का एक स्वचालित साइड-इफेक्ट है।
मैं बाएं-औचित्य मोड के लिए दृश्य संपादक (संपादक के गैर-संपादन योग्य भाग में) प्रदान करना चाहता हूं जो उपयोगकर्ता की मदद करेगा, लेकिन बहुत विस्तृत किए बिना।
मैंने बस कनेक्टिंग लाइनों का उपयोग करने की कोशिश की, लेकिन यह बहुत व्यस्त लग रहा था। अब तक मैं जिस सर्वश्रेष्ठ के साथ आया हूं, वह नीचे दिए गए संपादक के मॉक अप स्क्रीनशॉट में दिखाया गया है, लेकिन मैं बेहतर / सरल विकल्पों की तलाश कर रहा हूं (जिसके लिए बहुत अधिक कोड की आवश्यकता नहीं है)।
[संपादित करें]
हीटमैप के विचार से (@jimp से) मुझे यह और 3 विकल्प मिलते हैं - a, b और c:
निम्नलिखित अनुभाग एक प्रस्ताव के रूप में स्वीकृत उत्तर का वर्णन करता है, कई अन्य उत्तरों और टिप्पणियों से विचारों को एक साथ लाता है। जैसा कि यह सवाल अब सामुदायिक विकि है, कृपया इसे अद्यतन करने के लिए स्वतंत्र महसूस करें।
NestView
इस विचार का नाम जो इंडेंटेशन का उपयोग किए बिना नेस्टेड कोड की पठनीयता में सुधार करने के लिए एक दृश्य विधि प्रदान करता है।
रूप रेखा लाइंस
NestView के भीतर अलग-अलग छायांकित लाइनों के लिए नाम
ऊपर की छवि नेस्ट व्यू को एक XML स्निपेट की कल्पना करने में मदद करने के लिए इस्तेमाल करती है। हालांकि इस चित्रण के लिए XML का उपयोग किया जाता है, लेकिन नेस्टिंग का उपयोग करने वाला कोई भी अन्य कोड सिंटैक्स इस चित्रण के लिए उपयोग किया जा सकता है।
एक अवलोकन:
घोंसले के स्तर को व्यक्त करने के लिए समोच्च लाइनों को छायांकित किया जाता है (हीटमैप में)
समोच्च लाइनों को दिखाने के लिए जब एक घोंसले के शिकार के स्तर को खोला या बंद किया जा रहा है, तो एंगिल किया जाता है।
एक समोच्च रेखा एक घोंसले के स्तर की शुरुआत को संबंधित छोर से जोड़ती है।
समोच्च लाइनों की संयुक्त चौड़ाई हीटमैप के अलावा, घोंसले के शिकार के स्तर की एक दृश्य छाप देती है।
NestView की चौड़ाई मैन्युअल रूप से पुन: प्रयोज्य हो सकती है, लेकिन कोड में परिवर्तन के रूप में नहीं बदलना चाहिए। कंटूर लाइनों को या तो संपीड़ित किया जा सकता है या इसे रखने के लिए छोटा किया जाता है।
पाठ को कभी-कभी अधिक सुपाच्य विखंडू में विभाजित करने के लिए रिक्त लाइनों का उपयोग कोड किया जाता है। ऐसी लाइनें NestView में विशेष व्यवहार को ट्रिगर कर सकती हैं। उदाहरण के लिए हीटमैप रीसेट किया जा सकता है या एक पृष्ठभूमि रंग समोच्च रेखा का उपयोग किया जाता है, या दोनों।
वर्तमान में चयनित कोड से जुड़ी एक या एक से अधिक समोच्च लाइनों को हाइलाइट किया जा सकता है। चयनित कोड स्तर के साथ जुड़ी समोच्च रेखा पर सबसे अधिक जोर दिया जाएगा, लेकिन अन्य समोच्च रेखाओं में नेस्टेड समूह को उजागर करने में मदद करने के अलावा 'लाइट अप' भी किया जा सकता है।
विभिन्न व्यवहार (जैसे कोड तह या कोड चयन) एक कंटूर लाइन पर क्लिक / डबल-क्लिक करने के साथ जुड़े हो सकते हैं।
समोच्च रेखा के विभिन्न भागों (अग्रणी, मध्य या अनुगामी किनारे) में विभिन्न गतिशील व्यवहार जुड़े हो सकते हैं।
टूलटिप्स को समोच्च रेखा पर माउस हॉवर घटना पर दिखाया जा सकता है
कोड संपादित होते ही NestView लगातार अपडेट किया जाता है। जहां घोंसला बनाना अच्छी तरह से संतुलित धारणा नहीं है, जहां घोंसले का स्तर समाप्त होना चाहिए, लेकिन संबंधित अस्थायी समोच्च लाइनों को चेतावनी के रूप में किसी तरह से उजागर किया जाना चाहिए।
कंटूर लाइन्स के ड्रैग और ड्रॉप व्यवहार का समर्थन किया जा सकता है। समोच्च रेखा के हिस्से को खींचे जाने के अनुसार व्यवहार भिन्न हो सकते हैं।
आमतौर पर लेफ्ट मार्जिन में पाए जाने वाले फीचर्स जैसे कि लाइन नंबरिंग और कलर हाइलाइटिंग फॉर एरर एंड चेंज स्टेट्स नेस्लेव को ओवरले कर सकते हैं।
अतिरिक्त कार्यशीलता
प्रस्ताव अतिरिक्त मुद्दों की एक श्रृंखला को संबोधित करता है - कई मूल प्रश्न के दायरे से बाहर हैं, लेकिन एक उपयोगी दुष्प्रभाव है।
एक नेस्टेड क्षेत्र के प्रारंभ और अंत को नेत्रहीन रूप से जोड़ना
समोच्च लाइनें प्रत्येक नेस्टेड स्तर की शुरुआत और अंत को जोड़ती हैं
वर्तमान में चयनित लाइन के संदर्भ पर प्रकाश डालते हुए
जैसे ही कोड का चयन किया जाता है, नेस्ट व्यू में संबद्ध घोंसले के स्तर को उजागर किया जा सकता है
समान नेस्टिंग स्तर पर कोड क्षेत्रों के बीच अंतर करना
XML के मामले में विभिन्न नामस्थानों के लिए अलग-अलग hues का उपयोग किया जा सकता है। प्रोग्रामिंग लैंग्वेज (जैसे कि c #) नाम वाले क्षेत्रों को सपोर्ट करती हैं, जिनका उपयोग इसी तरह से किया जा सकता है।
एक घोंसले के शिकार क्षेत्र के भीतर अलग-अलग दृश्य ब्लॉकों में विभाजन
पठनीयता की सहायता के लिए अतिरिक्त लाइनों को अक्सर कोड में डाला जाता है। ऐसी खाली लाइनों का उपयोग नेस्ट व्यू की समोच्च लाइनों के संतृप्ति स्तर को रीसेट करने के लिए किया जा सकता है।
मल्टी-कॉलम कोड व्यू
इंडेंटेशन के बिना कोड मल्टी-कॉलम व्यू के उपयोग को अधिक प्रभावी बनाता है क्योंकि शब्द-आवरण या क्षैतिज स्क्रॉलिंग की आवश्यकता कम होती है। इस दृश्य में, एक बार कोड एक कॉलम के निचले भाग तक पहुंच गया है, यह अगले एक में बहता है:
केवल एक दृश्य सहायता प्रदान करने से परे उपयोग
जैसा कि अवलोकन में प्रस्तावित है, NestView संपादन और चयन सुविधाओं की एक श्रृंखला प्रदान कर सकता है जो मोटे तौर पर एक ट्री व्यू नियंत्रण से अपेक्षित है। मुख्य अंतर यह है कि एक विशिष्ट ट्री व्यू नोड में 2 भाग होते हैं: एक विस्तारक और नोड आइकन। एक NestView समोच्च रेखा में 3 भाग हो सकते हैं: एक ओपनर (ढलान), एक कनेक्टर (ऊर्ध्वाधर) और एक करीब (ढलान)।
इंडेंटेशन पर
NestView ने गैर-इंडेंटेड कोड कंप्लीट के साथ प्रस्तुत किया, लेकिन पारंपरिक इंडेंटेड कोड व्यू को बदलने की संभावना नहीं है।
यह संभव है कि कोई भी नेस्टव्यू अपनाने वाला समाधान, बिना कोड टेक्स्ट को प्रभावित किए, बिना किसी भी तरह के इंडेंट और गैर-इंडेंट कोड विचारों के बीच मूल रूप से स्विच करने की एक विधि प्रदान करेगा - जिसमें व्हॉट्सएप वर्ण भी शामिल हैं। इंडेंटेड व्यू के लिए एक तकनीक 'वर्चुअल फॉर्मेटिंग' होगी - जहां टैब या स्पेस कैरेक्टर के बदले डायनामिक लेफ्ट-मार्जिन का इस्तेमाल किया जाता है। नेस्ट व्यू को गतिशील रूप से प्रस्तुत करने के लिए उपयोग किए जाने वाले समान नेस्टिंग-स्तरीय डेटा का उपयोग अधिक पारंपरिक दिखने वाले इंडेंटेड व्यू के लिए भी किया जा सकता है।
मुद्रण
मुद्रित कोड की पठनीयता के लिए इंडेंटेशन महत्वपूर्ण होगा। यहां, टैब / स्पेस वर्णों की अनुपस्थिति और एक डायनामिक लेफ्ट-मार्जिन का मतलब है कि टेक्स्ट राइट-मार्जिन पर रैप कर सकता है और फिर भी इंडेंट व्यू की अखंडता बनाए रख सकता है। लाइन नंबरों को विज़ुअल मार्कर के रूप में इस्तेमाल किया जा सकता है जो यह दर्शाता है कि कोड कहाँ लिपटे हुए हैं और इंडेंटेशन की सटीक स्थिति भी है:
स्क्रीन रियल-एस्टेट: फ्लैट बनाम इंडेंटेड
इस सवाल को संबोधित करते हुए कि क्या नेस्ट व्यू मूल्यवान स्क्रीन रियल एस्टेट का उपयोग करता है:
कंटूर लाइनें एक चौड़ाई के साथ अच्छी तरह से काम करती हैं जैसे कि कोड संपादक की वर्ण चौड़ाई। 12 वर्ण चौड़ाई की एक NestView चौड़ाई इसलिए समोच्च लाइनों को छोटा / संकुचित करने से पहले नेस्टिंग के 12 स्तरों को समायोजित कर सकती है।
अगर एक इंडेंटेड व्यू प्रत्येक नेस्टिंग लेवल के लिए 3 कैरेक्टर-चौड़ाई का उपयोग करता है तो नेस्टिंग को नेस्टिंग के 4 लेवल तक पहुंचने तक बचाया जाता है। इस नेस्टिंग लेवल के बाद फ्लैट व्यू में स्पेस-सेविंग का फायदा होता है जो प्रत्येक नेस्टिंग लेवल के साथ बढ़ता है।
नोट: 4 वर्ण चौड़ाई का एक न्यूनतम इंडेंटेशन अक्सर कोड के लिए अनुशंसित होता है, हालांकि XML अक्सर कम के साथ प्रबंधित करता है। इसके अलावा, वर्चुअल फ़ॉर्मेटिंग का उपयोग कम इंडेंटेशन की अनुमति देता है क्योंकि संरेखण मुद्दों का कोई जोखिम नहीं है
2 विचारों की तुलना नीचे दी गई है:
उपरोक्त के आधार पर, शायद यह निष्कर्ष निकालना उचित है कि दृश्य शैली विकल्प स्क्रीन अचल संपत्ति के अलावा अन्य कारकों पर आधारित होगा। एक अपवाद है कि स्क्रीन स्पेस प्रीमियम पर है, उदाहरण के लिए नेटबुक / टैबलेट पर या जब कई कोड विंडो खुली हों। इन मामलों में, दिखने वाला NestView एक स्पष्ट विजेता प्रतीत होगा।
बक्सों का इस्तेमाल करें
वास्तविक दुनिया के उदाहरण जहां NestView एक उपयोगी विकल्प हो सकता है:
जहां स्क्रीन रियल-एस्टेट प्रीमियम पर है
ए। टैबलेट, नोटपैड और स्मार्टफोन जैसे उपकरणों पर
ख। वेबसाइटों पर कोड दिखाते समय
सी। जब कई कोड विंडो को एक साथ डेस्कटॉप पर दिखाई देने की आवश्यकता होती है
जहां कोड के भीतर पाठ का लगातार व्हाट्सएप इंडेंटेशन प्राथमिकता है
गहरी नेस्टेड कोड की समीक्षा के लिए। उदाहरण के लिए जहाँ उप-भाषाएँ (जैसे XSLT में Linq C # या XPath में) घोंसले के उच्च स्तर का कारण हो सकती हैं।
सरल उपयोग
दृश्य हानि वाले लोगों की सहायता के लिए आकार और रंग विकल्प प्रदान किए जाने चाहिए, और पर्यावरणीय परिस्थितियों और व्यक्तिगत प्राथमिकताओं के अनुरूप भी होना चाहिए:
अन्य प्रणालियों के साथ संपादित कोड की संगतता
नेस्टव्यू विकल्प को शामिल करने वाला एक समाधान आदर्श रूप से आयातित कोड के साथ प्रमुख टैब और स्पेस कैरेक्टर (केवल स्वरूपण भूमिका के रूप में पहचाना गया) को छीनने में सक्षम होना चाहिए। फिर, एक बार छीन लिए जाने के बाद, कोड को बदलाव के बिना बाएं-औचित्यपूर्ण और इंडेंट किए गए विचारों दोनों में बड़े करीने से प्रस्तुत किया जा सकता है। कई उपयोगकर्ताओं के लिए सिस्टम पर मर्ज करना और विलय करना जैसे उपकरण जो व्हाट्सएप-अवेयर नहीं हैं, यह एक बड़ी चिंता होगी (यदि पूर्ण शो-स्टॉपर नहीं है)।
अन्य काम:
ओवरलैपिंग मार्कअप का दृश्य
2004 से दिनांकित वेन्डेल पीज़ द्वारा प्रकाशित शोध , ओवरलैपिंग मार्कअप के विज़ुअलाइज़ेशन के मुद्दे को संबोधित करता है, विशेष रूप से एलएमएनएल । इसमें नेव्यू प्रस्ताव के महत्वपूर्ण समानता वाले एसवीजी ग्राफिक्स शामिल हैं, जैसे, वे यहां स्वीकार किए जाते हैं।
छवियों (नीचे) में दृश्य अंतर स्पष्ट हैं, मुख्य कार्यात्मक भेद यह है कि NestView केवल अच्छी तरह से नेस्टेड XML या कोड के लिए अभिप्रेत है, जबकि Wendell Piez के ग्राफिक्स को ओवरलैप्ड नेस्टिंग का प्रतिनिधित्व करने के लिए डिज़ाइन किया गया है।
ऊपर दिए गए ग्राफिक्स को पुन: प्रस्तुत किया गया - तरह की अनुमति से - http://www.piez.org से
सूत्रों का कहना है:
