यूनिवर्सल GUI ~ = दुख का अंत

मेरे लिए, आदर्श GUI एक ऐसा ऐप है जिसे प्रोग्रामिंग, डिज़ाइन, रखरखाव की आवश्यकता नहीं होती है, और यह किसी भी भाषा के साथ और बिना किसी भी प्लेटफ़ॉर्म पर समान रूप से काम करने में सक्षम है। क्या यह हमारे जीवनकाल में संभव है कि हम इसका पता लगाने की कोशिश करेंगे।

व्यक्तिगत रूप से Vue / React, JavaFX, Python PyQt से कुछ सीखना आसान है, ... लेकिन उपयोगकर्ता-OS / ब्राउज़रों / प्लेटफार्मों के बारे में सोचे बिना एक सरल और सुरुचिपूर्ण तरीके से डेटा चिड़ियाघर के साथ डेटा प्राप्त करना और बातचीत करना ऐसे उपकरणों के लिए एक अनसुलझा काम है। मैं प्रोग्रामिंग की भाषा को बदलना, रेक को रेक करना और मेरे सिर को कचरे से दबाना, नए ढांचे (यहां तक ​​कि पुराने, भूल गए) में नहीं आना चाहता। मैं GUI चौखटे के सभी प्रकार के संघर्ष से विचलित हुए बिना, वास्तव में अपने कार्य को पूरा करना चाहता हूं। और मैंने अपने लिए एक समाधान ढूंढा।

एक एक्सचेंज प्रोटोकॉल के रूप में, हम एक प्रोग्रामिंग या एक डिग्री या किसी अन्य के लिए प्रोग्रामिंग / लोकप्रियता / पठनीयता / समर्थन के मामले में शीर्ष प्रारूप के रूप में Json का उपयोग करेंगे।

सर्वर Json डेटा भेजता है, जिसके अनुसार हमारे ऐप GUI को एक चित्र डिज़ाइन करना चाहिए जो एक सुंदर GUI के चश्मे को संतुष्ट करता है। Google अपने सामग्री डिजाइन के साथ आज मानक है, इसलिए इसे ले लो।

आधुनिक जीयूआई की आवश्यकताओं में मानक तत्वों की उपस्थिति शामिल है, जैसे बटन, इनपुट फ़ील्ड, टेबल आदि। हमें अनुमान लगाने के लिए कि जीयूआई को बताने के लिए सम्मेलनों के न्यूनतम सेट का उपयोग कैसे करें कि हमें स्क्रीन पर कुछ तत्वों की आवश्यकता है। यहाँ मुख्य हैं:

• स्टेटलेस बटन {eless नाम ’: me पुश मी’}। यदि तत्व में केवल एक नाम है, तो यह एक बटन है।
• इनपुट फ़ील्ड {'नाम': 'मुझे संपादित करें', 'मूल्य': ''} है क्योंकि टाइप मान एक स्ट्रिंग है।
• स्विचर बटन {'नाम': 'मेरा राज्य', 'मान': असत्य} क्योंकि गलत प्रकार बूलियन है।
• सूची से चुनें {'नाम': 'स्विच कुछ', मूल्य: 'पसंद 1', विकल्प = ['पसंद 1', 'पसंद 2', 'पसंद 3']}
• {‘name’:’Image, ‘url'’: ’..’, ‘width’: .., ‘height’:… }
• {‘name’:’My table’, 'headers'=[‘Name’, ‘Synonym’], rows = [
  [‘young’, ‘youthful’],
  [‘small’, ‘ meager’],
  ...]
  }
  

कस्टमिज़ेबिलिटी के लिए, आप तत्व प्रकार को {type: 'ButtonSwitcher'} पर सेट कर सकते हैं यदि JSON द्वारा स्वचालित रूप से चयनित प्रकार आपको सूट नहीं करता है। यह तब संभव है जब एक ही JSON को एक से अधिक तरीकों से प्रदर्शित किया जा सके। उदाहरण के लिए, 'एक सूची से चयन करें' को ड्रॉप-डाउन सूची के साथ इनपुट क्षेत्र के रूप में दर्शाया जा सकता है, या यह बटन का एक क्षैतिज सेट भी हो सकता है, जिनमें से एक सक्रिय है और वर्तमान मूल्य से मेल खाता है।

विकल्पों की एक छोटी संख्या के साथ यह बड़ी संख्या (3 से अधिक) - इनपुट-चयन फ़ील्ड के साथ स्वचालित रूप से बटन विकल्प का उपयोग करने के लिए समझ में आता है। हमारा GUI ही रेंडरिंग के लिए सबसे अच्छा तरीका चुनता है, लेकिन अगर आपको वास्तव में इसकी आवश्यकता है - टाइप करें: ... मदद करने के लिए। आम तौर पर, प्रकार की आवश्यकता नहीं होती है और कार डिजाइनर को अपने दम पर सामना करना पड़ता है।

आइए तस्वीर को विस्तार से पूरा करें:

• यदि नाम स्क्रीन पर प्रदर्शित नहीं होना चाहिए, तो इसे _ से शुरू होना चाहिए;
• - , ‘icon’: ‘ Material Design ’; push - {‘name’: ‘_Check’, ‘icon’: ‘check’}
• , Viewers, , ‘colors’, ‘params’,… // . — , .

तत्वों के तार्किक समूहन के लिए, हम एक ब्लॉक की अवधारणा को पेश करते हैं जो समूहों को तार्किक रूप से संबंधित तत्वों को एक दृश्य ब्लॉक में जोड़ता है।

{'नाम': 'ब्लॉक 1', 'एलम्स': [{'नाम': '_चेक', 'आइकन': 'चेक'}, ...]}
ब्लॉक के भीतर, सभी तत्वों के नाम अद्वितीय होने चाहिए, क्योंकि वे आईडी हैं ।

आम तौर पर, ब्लॉक क्षैतिज रूप से बनाए जाते हैं यदि वे स्क्रीन पर सब कुछ फिट नहीं कर सकते हैं (उदाहरण के लिए, उन्होंने मोबाइल पर ऐप GUI शुरू किया है), ऑटो डिजाइनर उन्हें छुपाता है, लेकिन टूलबार में आइकन जोड़ता है जो उन्हें एक टैप से खोलने की अनुमति देता है। यह आपको छोटे स्क्रीन पर भी एक जटिल GUI के साथ काम करने का विकल्प देता है।

वर्णन का शीर्ष स्तर स्क्रीन है। यह {'name': 'Screan', ब्लॉक: [..], मेनू: [{'name': 'स्क्रीन', 'आइकन': ..,}, ..], 'टूलबार': [JSON सेट] जैसा दिखता है - तत्व (बटन, फ़ील्ड, जो भी हो)]}

सशर्त uniGUI के लिए कार्यान्वयन विवरण जोड़ें जो हमारे JSON प्रोटोकॉल का समर्थन करता है। यह एक अलग प्रक्रिया है जो वेबसोकेट डेटा सर्वर के साथ संचार करती है और सर्वर के लिए महत्वपूर्ण इस डेटा के सभी अपडेट की बाद की रिपोर्टिंग के साथ अपने डेटा का प्रदर्शन प्रदान करती है।

सर्वर से कनेक्ट होने पर, UniGUI स्क्रीन प्राप्त करने की उम्मीद करता है। इसे प्राप्त करने के बाद, वह उपयोगकर्ता के लिए वर्तमान स्क्रीन के लिए एक इष्टतम तरीके से प्राप्त जानकारी को डिज़ाइन करता है और खींचता है, फिर वह उपयोगकर्ता और सर्वर की प्रतिक्रिया की प्रतीक्षा करता है। निर्मित डेटा छवि से, सर्वर को JSON संदेशों की एक धारा प्राप्त होती है जो पूरी तरह से वर्णन करती है कि उपयोगकर्ता ने क्या किया। उनके पास प्रपत्र ['ब्लॉक', 'एलम', 'प्रकार की कार्रवाई', 'मूल्य'], जहां 'ब्लॉक' और 'एलएमएम' ब्लॉक और तत्व के नाम हैं, मूल्य घटना का मूल्य है।

सर्वर या तो परिवर्तन को स्वीकार कर सकता है या विसंगति के बारे में जानकारी विंडो भेजकर उन्हें वापस रोल कर सकता है। यह एक डायलॉग बॉक्स उठा सकता है, जिसे ब्लॉक के रूप में वर्णित किया गया है, और अतिरिक्त है। 'बटन' पैरामीटर, जो संवाद पर बटन का वर्णन करता है। क्लाइंट वर्तमान सर्वर डेटा और उनके परिवर्तनों को तुरंत प्रदर्शित करता है। केवल सर्वर द्वारा बदल दी गई वस्तुओं को भेजा जाता है। घटनाओं को प्राप्त करने और उनके प्रसंस्करण को सुनिश्चित करने के लिए, हम एक वेबसोकेट परत (फ्रेमवर्क) बनाएंगे, जो स्वचालित रूप से हमारे डेटा (ऑब्जेक्ट्स) से जुड़े हैंडलर को कॉल में संदेशों का अनुवाद करेगा।

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

उदाहरण के लिए, एक मामले में, परत में एक स्क्रीनशॉट फ़ोल्डर होता है, प्रत्येक मॉड्यूल जिसमें पायथन में एक स्क्रीन का विवरण होता है। स्टार्टअप पर, परत स्क्रीन को पढ़ती है, उपयोगकर्ता को वैश्विक प्राथमिकता के साथ एक देता है = 0. सभी डेटा jsonpickle का उपयोग करके स्वचालित रूप से प्रसारित होता है। प्रोग्रामर के विवरण की देखभाल को हटाकर जटिल तत्वों की अपनी "बुद्धिमत्ता" है। उदाहरण के लिए, एक तालिका पंक्तियों का एक सेट प्राप्त करती है, जिसमें डिफ़ॉल्ट आईडी पंक्ति अनुपस्थित हो सकती है जब पंक्ति में डेटा की संख्या == शीर्ष लेखों में तत्वों की संख्या। इस स्थिति में, जब उपयोगकर्ता एक पंक्ति का चयन करता है या अपनी सामग्री को संपादित करता है, तो सर्वर आईडी को आईडी के रूप में पंक्ति में भेज देगा। यदि पंक्ति में डेटा की संख्या हेडर में एक से अधिक है, तो पंक्तियों में अंतिम तत्व को आईडी के रूप में व्याख्या की जाती है और यह वह है जो सर्वर को भेजा जाता है। इस तरह के स्वचालन से जीवन सरल हो जाता है, जहाँ आपको किसी विशेष की आवश्यकता नहीं होती हैलेकिन अगर आपको अचानक इसकी आवश्यकता है, तो यह कम से कम श्रम-गहन तरीके से उपलब्ध है।

JSON में स्वचालित अनुवाद प्रदान करने का कार्य, जो एक या दो पृष्ठों पर एक प्रारूप का अनुसरण करता है, किसी भी भाषा में पूरी तरह से हल करने योग्य है (मुझे आशा है कि)।

जटिल अनुप्रयोगों के लिए इस दृष्टिकोण की प्रयोज्यता पर चर्चा नहीं करने के लिए, नीचे स्क्रीनशॉट हैं जैसे कि यूनीयूआई द्वारा स्पंदन में लिखा गया है। बहु-प्लेटफ़ॉर्म और जेएस / क्रोम जैसी अतिरिक्त परतों की कमी के कारण चुनाव उस पर गिर गया। स्पंदन माइनस में, आप घृणित डेस्कटॉप समर्थन और ऊपरी परत कोड (GUI तत्व) की निम्न गुणवत्ता, बिंदु अद्यतन के लिए एक अप्रिय वास्तुकला और डेटा के रूप में तत्वों को प्रबंधित करने के लिए लिख सकते हैं, जो कि, हालांकि, इसका इलाज किया जाता है।



संदेश प्रवाह ऐप GUI -> सर्वर कुछ इस तरह दिखता है:

स्पंदन: [शब्दकोष, नियम, =, 658]
स्पंदन: [_Details, लिंक्स, @, @Folliculitis]
स्पंदन: [_Details, लिंक्स, @, @Adolescent]
स्पंदन: [टूलबार, _बैक, =, _बैक]
स्पंदन: [टूलबार, _Forward, =, _Forward]
स्पंदन: [टूलबार, _Back, =, _Back]
स्पंदन: [_Details, _Status, =, वर्चुअल]
स्पंदन: [_Details, _Status] , =, स्थिर]
स्पंदन: [_Details, लिंक्स, @,सूजन]
स्पंदन: [_Details, _Status, =, आभासी]
स्पंदन: [_Details, _Status, =, स्थिर]
स्पंदन: [टूलबार, _Back, =, _Back]
स्पंदन: [_Details, लिंक्स, @, @Folliculitis]

वहाँ होगा। सर्वर से घटनाओं की प्रतीक्षा करते समय इस तरह के GUI को धीमा कर दें। नहीं, क्योंकि GUI सर्वर सूचना मोड में काम करता है, जो सामान्य उपयोगकर्ता GUI के रूप में सभी उपयोगकर्ता क्रियाओं पर प्रतिक्रिया करता है। डिफ़ॉल्ट रूप से, यह उपयोगकर्ता के कार्यों पर सर्वर चुप्पी को ओके मानता है। स्क्रीन बदलते समय, यह स्पष्ट है कि इसका विवरण आना चाहिए। जीयूआई के विशिष्ट ऐप सी की तुलना में देरी हो सकती है।

संपूर्ण। वर्तमान साधनों पर, जीयूआई बनाने के लिए यह संभव है कि मानक ड्रियर सेवा कोड का 90% हटा दिया जाए और यह परेशान न हो कि यह कहां और कैसे काम करेगा। कम से कम व्यवसाय / विज्ञान अनुप्रयोगों के लिए। यह लेख अवधारणा का एक प्रमाण है कि एक सशर्त ऐप ब्राउज़र बनाना न केवल संभव है, बल्कि आवश्यक है।