GUI मशीन के साथ इंटरएक्टिव प्रोटोटाइप

पिछली श्रृंखला में ...

श्रृंखला के पिछले लेखों में, हमने प्रोटोटाइप टूल को खोजने की प्रक्रिया का विस्तार से वर्णन किया है जो हमें सूट करता है और हमारे अपने उपकरण बनाने का इतिहास है - जीयूआई मशीन।

अब हमने जो किया उसके बारे में अधिक विस्तार से बात करने का समय आ गया है। पाठक के मूल्यवान समय को बर्बाद न करने के लिए, मैं GUI मशीन प्रोटोटाइप टूल, इसकी कार्यक्षमता और क्षमताओं को बिना किसी मंदी और गीतात्मक खुदाई के वर्णन करना शुरू करूंगा।

लेख न केवल उन लोगों के लिए दिलचस्प होगा जो पहले से ही उपकरण से परिचित हैं और इसके बारे में अधिक सीखना चाहते हैं, बल्कि उन लोगों के लिए भी जो सक्रिय रूप से एक प्रोटोटाइप टूल की खोज कर रहे हैं और उनके तुलनात्मक विश्लेषण का संचालन करते हैं।

सारांश

नाम: GUI मशीन
जन्म का वर्ष: 2009
रिलीज की तारीख: 24 जनवरी, 2011
जन्म स्थान: सेंट पीटर्सबर्ग, रूस
संगठन: एले सॉफ्टवेयर
प्रो व्यवसाय: एक गतिशील प्रोटोटाइप उपकरण।
प्रो कौशल: कोड लिखने के बिना जटिल डेस्कटॉप और वेब अनुप्रयोगों के इंटरैक्टिव प्रोटोटाइप बनाना
पर्यावास: विंडोज, मैक ओएस, लिनक्स
विदेशी एनालॉग्स: एक्सयूआर आरपी, जीयूआई डिजाइन स्टूडियो, एमएस एक्सप्रेशन ब्लेंड
घरेलू एनालॉग्स: कोई नहीं
व्यक्तिगत गुण: सादगी, कार्यात्मक सामग्री, सहजता, उच्च गति और प्रोटोटाइप में आसानी।
भाषाओं का ज्ञान: रूसी और अंग्रेजी
मेरे बारे में: एक सफल आईटी कंपनी में जन्मे, लगातार नई कार्यक्षमता के साथ अद्यतन, सुधार और त्रुटियों से छुटकारा। महत्वाकांक्षी, मेरी भव्य योजनाएं हैं। सॉफ्टवेयर विकास की दुनिया में भविष्य के क्रांतिकारी।
संपर्क: www.guimachine.ru

पहले परिचित थे

इसके साथ शुरू करने के लिए, मैं आवेदन के उद्देश्य, हल किए जाने वाले कार्यों, विशेषज्ञता और एप्लिकेशन इंटरफ़ेस को प्रस्तुत करने के लिए संक्षेप में वर्णन करना आवश्यक समझता हूं।

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

CRM सिस्टम के वेब इंटरफ़ेस का प्रोटोटाइप:


कॉर्पोरेट पोर्टल एले सॉफ्टवेयर का प्रोटोटाइप:


GUI मशीन में प्रोटोटाइप के लिए किसी विशेष ज्ञान और कौशल की आवश्यकता नहीं होती है, इसके लिए कोड लिखने की आवश्यकता नहीं होती है। इस प्रकार, उपकरण न केवल डेवलपर्स के लिए, बल्कि विश्लेषकों, परियोजना प्रबंधकों, डिजाइनरों, तकनीकी लेखकों, प्रयोज्य विशेषज्ञों के लिए बहुत अधिक है, जो सीधे ग्राहक / भविष्य के उपयोगकर्ता के साथ संवाद करते हैं और सबसे अधिक पूरी तरह से और सही ढंग से उनकी आवश्यकताओं और इच्छाओं का प्रतिनिधित्व करते हैं, जो बाद में महत्वपूर्ण जानकारी के न्यूनतम नुकसान के साथ प्रोटोटाइप में सन्निहित होगा।

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

हालाँकि, उन्होंने लिखा, बातचीत की, एक या दो बार से अधिक प्रोटोटाइप के लाभों के बारे में तर्क दिया, इसलिए मैंने पाठक को इस विषय पर आगे चर्चा के साथ परेशान नहीं किया, लेकिन GUI मशीन इंटरफ़ेस का वर्णन करने के लिए आगे बढ़ेगा।

जीयूआई मशीन इंटरफ़ेस

GUI मशीन कार्यक्षेत्र सॉफ्टवेयर इंटरफेस बनाने और संपादन पर ध्यान केंद्रित करने में मदद करने के लिए आयोजित किया जाता है।



रिबन शैली में मेनू एप्लिकेशन विंडो के शीर्ष पर प्रस्तुत किया गया है, जो सबसे लोकप्रिय संचालन और सेटिंग्स तक त्वरित पहुंच प्रदान करता है। केंद्र में निचला प्रोटोटाइप संपादन क्षेत्र है, जिस पर विभिन्न घटकों से इंटरफ़ेस स्क्रीन को इकट्ठा किया जाता है। संपादन क्षेत्र के तहत, परियोजना पृष्ठों की जड़ें दिखाई जाती हैं। बाएँ और दाएँ मुख्य कार्य पैनल हैं: घटक, परतें, ऑब्जेक्ट गुण, टेम्पलेट और इतिहास । सभी पैनलों को छोटा किया जा सकता है, संपादन क्षेत्र के किनारों के साथ छिपाया जाता है, आकार (दोनों ऊंचाई और चौड़ाई में), स्थानांतरित और बंद किया जाता है। केवल एक शीर्ष पंक्ति को छोड़कर, मेनू को छोटा भी किया जा सकता है। इस प्रकार, आप "खुद के लिए" आवेदन की उपस्थिति को अनुकूलित कर सकते हैं और अधिक सुविधाजनक और सुखद काम के लिए प्रोटोटाइप के संपादन क्षेत्र के लिए अधिकतम मात्रा में खाली कर सकते हैं। आप कीबोर्ड शॉर्टकट Ctrl + H का उपयोग करके सभी पैनलों को जल्दी से छिपा सकते हैं ।



इसके अलावा, पैनल प्रबंधन एप्लिकेशन के शीर्ष क्षैतिज मेनू की उपयोगिता और फ्रेम टैब से उपलब्ध है:



यहां आप पैनल छिपा सकते हैं या प्रदर्शित कर सकते हैं (एक समय में या सभी एक साथ), उनकी स्थिति को ठीक करें, उनके हेडर के प्रदर्शन को बंद करें।

घटकों

अवयव पैनल कई विभिन्न घटकों वाले इंटरफेस के निर्माण के लिए मुख्य कार्य उपकरण है। उपकरण को संपादन क्षेत्र में वस्तुओं को जोड़ने के लिए डिज़ाइन किया गया है। पैनल में घटकों के 4 सेट होते हैं: मानक, उन्नत, आकृतियाँ, वाडिन । इसकी मानक उपस्थिति (नामों के साथ घटकों का एक पेड़) के अलावा, पैनल में एक वैकल्पिक कॉम्पैक्ट प्रतिनिधित्व है:



आप पैनल के अंदर राइट-क्लिक करके घटकों को प्रदर्शित कर सकते हैं।

मानक घटक

किसी भी इंटरफ़ेस को बनाने के लिए उपयोग किए जाने वाले मानक घटकों का एक सेट: बटन (ड्रॉप-डाउन और सामान्य), पैनल (नियमित, टैब-पैनल, विभाजन-पैनल), पाठ लेबल, फ़ील्ड और क्षेत्र, चेकबॉक्स, रेडियो बटन, सूचियाँ (ड्रॉप-डाउन और सामान्य), पेड़ तालिका, विंडो, मेनू, पॉपअप मेनू और अन्य।
किट के लगभग सभी घटक ऑपरेटिंग सिस्टम के मूल घटक हैं। इसका मतलब है कि घटकों की उपस्थिति और व्यवहार विरासत में मिला है, ऑपरेटिंग सिस्टम से उधार लिया गया है, जिस पर प्रोटोटाइप व्यू मोड में चल रहा है।


सभी मानक घटक शीर्ष क्षैतिज अनुप्रयोग मेनू के मानक टैब पर भी देखे जा सकते हैं:



नीचे दिया गया चित्र मानक मोड वाले व्यू मोड में विंडोज 7 में चलने वाली एक विंडो दिखाता है:



और अब एक ही खिड़की, लेकिन मैक ओएस पर चल रहा है:



और लिनक्स पर:



सामान्य इंटरफ़ेस तत्वों के अलावा, सेट में लेआउट - डायनेमिक और स्टैटिक - ऑब्जेक्ट भी शामिल हैं, जिस पर GUI मशीन में बनाया गया कोई भी इंटरफ़ेस आधारित है। यह वे हैं जो जीयूआई मशीन में काम की बारीकियों का निर्धारण करते हैं।

स्टेटिक लेआउट

उपयोगकर्ताओं के विशाल बहुमत के लिए स्टेटिक लेआउट सबसे आम है। वास्तव में, यह एक कंटेनर है जिसमें कई मनमाने ढंग से स्थित वस्तुएं हो सकती हैं। इसकी स्थिर प्रकृति इस तथ्य में निहित है कि सभी निहित वस्तुओं का आकार और स्थिति कठोर रूप से तय की गई है और उन्हें देखने के मोड में नहीं बदला जा सकता है। स्थैतिक लेआउट के आधार पर प्रोटोटाइप बहुत जल्दी बनाए जा सकते हैं। इस तरह के प्रोटोटाइप का मुख्य उद्देश्य स्क्रीनशॉट बनाना है (इसे चालू करें - इसे चलाएं - इसे बंद करें - इसे बंद करें), क्योंकि उनकी गतिशीलता की डिग्री कम है।



आकृति का बायां हिस्सा संपादन क्षेत्र में कई वस्तुओं से युक्त एक स्थिर लेआउट दिखाता है। पहले भाग में - एक ही लेआउट, लेकिन दृश्य में लॉन्च किया गया। इस लेआउट के "स्थिर" स्वरूप को दिखाने के लिए व्यूपोर्ट जानबूझकर लंबवत फैला हुआ है: जब विंडो को आकार दिया गया था, तो निहित वस्तुओं की स्थिति और आकार अपरिवर्तित रहे।

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



आकृति में दिखाए गए उपकरणों का सेट आपको संपादन क्षेत्र पर चयनित कई वस्तुओं की स्थिति को क्षैतिज और लंबवत रूप से संरेखित करने की अनुमति देता है, उनकी चौड़ाई और ऊंचाई को बराबर करता है, उन्हें निर्दिष्ट अंतराल पर वांछित क्रम में क्रमिक रूप से व्यवस्थित करता है।

गतिशील लेआउट

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



इसके अलावा, पिछले आंकड़े की तरह, यहां लेआउट विंडो जानबूझकर बढ़ाया गया है। जब खिड़की को आकार दिया गया, तो कुछ वस्तुओं की स्थिति और आकार भी बदल गया। यह लेआउट सेल के प्रकार पर निर्भर करता है जिसमें यह या वह ऑब्जेक्ट स्थित है (उनमें से 3 प्रकार हैं)।

प्लेसहोल्डर

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

उन्नत घटक

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


मानक की तरह, उन्नत घटकों को आवेदन के ऊपरी क्षैतिज मेनू के उन्नत टैब पर भी पाया जा सकता है:



नीचे दिया गया चित्र विस्तारित मोड से घटकों वाले दृश्य मोड में लॉन्च की गई विंडो दिखाता है (ज़ाहिर है, केवल वे जो इंटरफ़ेस तत्व हैं)।

वाडिन वेब घटक

वाडिन वेब घटकों का सेट, मानक सेट के विपरीत, गैर-देशी, प्लेटफ़ॉर्म-स्वतंत्र है - यह आपके ऑपरेटिंग सिस्टम पर समान दिखता है और काम करता है।
इसमें सबसे लोकप्रिय और अक्सर उपयोग किए जाने वाले घटक शामिल हैं, मानक सेट से घटकों को डुप्लिकेट करना, और 2 अधिक जटिल, गैर-मानक घटक: तिथि पिकर और कैलेंडर ।


जैसा कि आप अनुमान लगा सकते हैं, वाडिन घटकों को शीर्ष क्षैतिज अनुप्रयोग मेनू के वाडिन टैब पर भी दोहराया गया है:



नीचे दिया गया चित्र वैडिन वेब घटकों वाले व्यू मोड में शुरू हुई विंडो दिखाता है:

आंकड़े

अपने स्वयं के कस्टम नियंत्रण या कस्टम आकार की खिड़कियां बनाने के लिए सरल (वर्ग, सर्कल, आयत, अंडाकार, रोम्बस) और जटिल (बहुभुज) ज्यामितीय आकृतियों का एक सेट। स्वाभाविक रूप से मंच स्वतंत्र।


आकृतियाँ शीर्ष क्षैतिज अनुप्रयोग मेनू के आकृतियाँ टैब पर भी पाई जा सकती हैं:



नीचे दिया गया चित्र सभी मोड वाले व्यू मोड में लॉन्च की गई विंडो दिखाता है।

वस्तु के गुण

जीयूआई मशीन में प्रत्येक घटक के लिए, हमने "इसे बाहर लाने" की कोशिश की और इसके गुणों की अधिकतम संख्या को परिवर्तनशील बनाया। यह आपको किसी भी वस्तु को अनुकूलित करने, संशोधित करने, अनुकूलित करने की अनुमति देता है।

सभी ऑब्जेक्ट गुण 3 समूहों में विभाजित हैं: प्रकार गुण, मानक गुण, संपादक के लिए गुण ।

पहले समूह में वे गुण शामिल होते हैं जो केवल एक विशेष प्रकार की वस्तुओं के लिए विशिष्ट होते हैं (आकृति में - एक खिड़की के गुण, एक प्रकार की वस्तु JWindow)। किसी अन्य प्रकार की वस्तु के लिए गुणों का सेट (उदाहरण के लिए, एक बटन के लिए - प्रकार जेब्टन का एक ऑब्जेक्ट) अलग होगा।

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

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

GUI मशीन आपको एक ही प्रकार की कई वस्तुओं के गुणों को बदलने की अनुमति देती है, जिन्हें संपादन क्षेत्र में चुना गया है।

पाठ सामग्री के प्रारूपण और लेआउट के लिए जिम्मेदार वस्तुओं में से कुछ सबसे लोकप्रिय और अक्सर सामना की जाने वाली संपत्तियां भी आवेदन के ऊपरी क्षैतिज मेनू के संपादन टैब पर प्रस्तुत की जाती हैं:



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

HTML संपादक

पाठ सामग्री के साथ वस्तुओं के लगभग सभी गुणों को अंतर्निहित एचटीएमएल-संपादक में संपादित किया जा सकता है। इसे शुरू करने के लिए, पाठ संपत्ति के दाईं ओर छोटे बटन पर क्लिक करें:



HTML संपादक आपको पाठ को एक दृश्य संपादक में संपादित करने की अनुमति देता है, साथ ही सीधे HTML कोड भी लिखता है।



HTML संपादक, जैसा कि आप समझते हैं, वस्तुओं को अनुकूलित करने की संभावनाओं का बहुत विस्तार करता है। अजीब तरह से पर्याप्त है, अधिकांश प्रोटोटाइप टूल में यह कार्यक्षमता गायब है।

जटिल वस्तुओं के लिए संपादक

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



एक उदाहरण के रूप में, नीचे तालिका संपादक का वर्णन है:



जैसा कि आप ऊपर के आंकड़े से देख सकते हैं, टेबल हेडर और इसकी सामग्री दोनों को संपादित करना संभव है। दोनों ही मामलों में, पाठ को HTML संपादक में संपादित किया जा सकता है। तालिका कोशिकाओं के लिए, उस प्रकार का चयन करना प्रस्तावित है जो उनकी सामग्री निर्धारित करता है। बेशक, तालिका की पंक्तियों और स्तंभों को जोड़ना, हटाना और स्थानांतरित करना संभव है।

अन्य जटिल वस्तुओं के लिए, ऑपरेशन के अपने सेट के साथ समान संपादक हैं।

डिफ़ॉल्ट ऑब्जेक्ट गुण

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

समूहों

परत पैनल वर्तमान परियोजना पृष्ठ की सभी वस्तुओं को प्रदर्शित करता है। डिफ़ॉल्ट दृश्य एक पेड़ है। एक वस्तु किसी अन्य वस्तु की संतान है, यदि पहली को उसके अंदर स्थित दूसरे में डाला जाता है। एक वस्तु किसी अन्य वस्तु के लिए माता-पिता है यदि पहली में दूसरा भी शामिल है।

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



पैनल संदर्भ मेनू आपको इसकी वैकल्पिक दृश्य - परतों की सूची प्रदर्शित करने की अनुमति देता है। इस प्रकार में, वस्तुओं का पदानुक्रम प्रदर्शित नहीं होता है, लेकिन परतों की एक सूची उच्चतम से निम्नतम तक प्रदर्शित होती है। प्रत्येक परत एक वस्तु से मेल खाती है। यहां, परतों की अवधारणा का उपयोग शास्त्रीय अर्थ में किया जाता है: सबसे ऊपरी परत की वस्तु (उच्चतम संख्या के साथ) दूसरों के शीर्ष पर प्रदर्शित होती है, बॉटलमॉस्ट परत (संख्या 0 के साथ) अन्य वस्तुओं के पीछे होती है।

उपकरण आपको वस्तुओं की परतों को बदलने की अनुमति देता है और इस प्रकार, इंटरफ़ेस में उनका सही स्थान सुनिश्चित करता है।


परतों के साथ काम करने के लिए उपकरण शीर्ष क्षैतिज अनुप्रयोग मेनू के संपादन टैब पर भी उपलब्ध हैं:

टेम्पलेट्स

एक टेम्पलेट आमतौर पर इस्तेमाल की जाने वाली वस्तुओं का एक पूर्व-तैयार लेआउट है। टेम्प्लेट का उपयोग एक प्रोटोटाइप के डिज़ाइन को महत्वपूर्ण रूप से गति देता है और सुविधाजनक बनाता है, खासकर जब विभिन्न प्रोटोटाइप इंटरफेस में समान ऑब्जेक्ट या इंटरफ़ेस भाग होते हैं:
3 प्रकार के टेम्प्लेट बनाना संभव है:

• सरल - एक अलग वस्तु का एक टेम्पलेट;
• समग्र - इसमें निहित सभी बाल वस्तुओं के साथ एक वस्तु टेम्पलेट (उदाहरण के लिए, एक संपूर्ण इंटरफ़ेस);
• इंटरएक्टिव - पूर्वनिर्धारित कार्यों के साथ एक इंटरफ़ेस टेम्पलेट।

टूल का उपयोग करके, आप अनुकूलित ऑब्जेक्ट्स, ब्लैंक, वायरफ्रेम, पूरे इंटरफेस की अपनी लाइब्रेरी बना सकते हैं। इसके अलावा, आप GUI मशीन के किसी अन्य उपयोगकर्ता को टेम्प्लेट के सेट स्थानांतरित कर सकते हैं या इसके विपरीत, अपने लिए अन्य लोगों के टेम्प्लेट स्थापित कर सकते हैं।

निर्मित टेम्पलेट GUI मशीन स्थापना निर्देशिका के / टेम्पलेट्स / डेटा फ़ोल्डर में संग्रहीत हैं। किसी अन्य उपयोगकर्ता के लिए बनाए गए टेम्प्लेट को स्थानांतरित करने के लिए, यह उसके कंप्यूटर पर GUI मशीन की स्थापना निर्देशिका के लिए टेम्पलेट फ़ोल्डर की सामग्री की प्रतिलिपि बनाने के लिए पर्याप्त है।

कहानी

चित्र को पूरा करने के लिए, यह अंतिम पैनल - इतिहास प्रस्तुत करता है।

यह उपकरण, मुझे लगता है, विस्तृत विवरण की आवश्यकता नहीं है। इसके साथ, आप प्रोजेक्ट फ़ाइल के किसी भी पिछले राज्य में वापस आ सकते हैं।

जब भी आप प्रोजेक्ट में कोई ऑपरेशन करते हैं, इतिहास सूची में एक नया रिकॉर्ड जुड़ जाता है। संग्रहीत सूची प्रविष्टियों की संख्या एक कस्टम मूल्य है। यदि निर्दिष्ट संख्या पार हो गई है, तो सबसे पुरानी प्रविष्टियां हटा दी जाएंगी। परियोजना के प्रत्येक पृष्ठ के लिए इतिहास सूची अलग से संग्रहीत की जाती है। सूची में ऑपरेशन की तिथि और समय प्रदर्शित करना संभव है, साथ ही साथ व्यक्तिगत प्रविष्टियों को रंग में हाइलाइट करना।

संपादन क्षेत्र

मुख्य कार्य पैनलों का वर्णन पूर्ण है - संपादन क्षेत्र की कार्यक्षमता प्रस्तुत करने के लिए यह सब करना बाकी है।

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



अन्य सेटिंग्स एप्लिकेशन के ऊपरी क्षैतिज मेनू की उपयोगिता और फ़्रेम टैब पर स्थित हैं :



इस सेट के उपकरण, क्षेत्र को स्वयं समायोजित करने के अलावा, आपको उस पर स्थित वस्तुओं की प्रदर्शन सेटिंग्स को बदलने की अनुमति देते हैं (वस्तुओं के क्षेत्र और आकार को दिखाना या दिखाना नहीं है, लेआउट में उनके घोंसले की गहराई, उनके बीच की क्रियाएं), और गाइड लाइनें। आप उस साइड नेविगेशन बार को दिखा या छिपा सकते हैं जिस पर वस्तुओं के आइकन क्षेत्र पर उनके स्थान के अनुसार प्रदर्शित किए जाते हैं।

उपरोक्त सेटिंग्स वाला संपादन क्षेत्र इस तरह दिखेगा:

रिवाइटलिंग इंटरफेस

GUI मशीन इंटरफेस और इसमें इंटरफेस के निर्माण की विशेषताओं से परिचित होने के बाद, पाठक के पास शायद एक सवाल होगा: इंटरफेस को "लाइव", क्लिक करने योग्य, इंटरैक्टिव कैसे बनाया जाए? मैं उत्तर देता हूं: जितना सरल, और अब आप अपने लिए देखेंगे।

ऊपर दिए गए पाठ में, "कार्रवाई" की अवधारणा पहले से ही कई बार चमक चुकी है - यह आधार है, इंटरफेस के पुनरोद्धार के लिए अमृत। अधिक औपचारिक भाषा में, एक क्रिया एक वस्तु (क्रिया वस्तु) की प्रतिक्रिया को किसी अन्य वस्तु (घटना वस्तु) के साथ होने वाली घटना के लिए निर्धारित करने के लिए एक तंत्र है। GUI मशीन में कोई भी कार्य करना कुछ सरल चरणों के लिए आता है:

1. . : .
2. , ( ), . . (), — :
   
3. :
   
   
   
   , -, ( — ) ( — ), -, ( / ) ( , ).
4. . .

इस प्रकार, निम्नलिखित कार्रवाई बनाई गई थी: जब आप चेकबॉक्स का चयन करते हैं, तो स्क्रीन के केंद्र में एक विंडो खुल जाएगी। जाँच करने के लिए, आप दृश्य में एक विंडो (बाईं ओर एक) लॉन्च कर सकते हैं और इसमें निहित चेकबॉक्स का चयन कर सकते हैं। एक दूसरी विंडो खुलेगी। जैसा कि मैंने वादा किया था - सब कुछ सरल है।

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

घटनाओं

सरल घटनाओं के उदाहरण हैं: एक बटन पर क्लिक करना, किसी वस्तु से फोकस प्राप्त करना / खोना, किसी वस्तु का चयन करने की स्थिति बदलना, सूची आइटम चुनना, टेबल सेल चुनना, पॉप-अप मेनू आइटम चुनना, टैब चुनना, पेड़ तत्वों का चयन करना। मेरा सार, मेरा मानना ​​है, उनके नामों से स्पष्ट है और उन्हें अतिरिक्त स्पष्टीकरण की आवश्यकता नहीं है।

जटिल घटनाओं में बहुत रुचि है। उदाहरण के लिए, एक वस्तु के एक हिस्से पर एक माउस घटना। मान लीजिए कि इंटरफ़ेस में छवि के रूप में एक नियंत्रण है - तिपतिया घास:



यह आवश्यक है कि क्लोवर की ऊपरी पंखुड़ी पर क्लिक करने पर कुछ क्रिया की जाए।

हम अपनी छवि को घटना के उद्देश्य के रूप में चुनते हैं, या किसी अन्य वस्तु के रूप में कार्रवाई करते हैं। खुलने वाले संवाद में, माउस घटना का चयन करें । ईवेंट पैरामीटर में, बटन पर क्लिक करें का चयन करें । हम ईवेंट बॉक्स के परिभाषित क्षेत्र की जांच करते हैं और चित्र के वांछित टुकड़े का चयन करते हैं : परिवर्तन सहेजें पर



क्लिक करें और जांचें: छवि को दृश्य में चलाएं और ऊपरी पंखुड़ी पर क्लिक करें - निर्दिष्ट कार्रवाई की जाएगी (विंडो खोलने)।

वर्णित के अलावा, कई और दिलचस्प दिलचस्प घटनाएं हैं: एक टाइमर घटना, एक बंदरगाह से एक संदेश, और अन्य।

कार्रवाई

सरल क्रियाओं में निम्नलिखित शामिल हैं: किसी वस्तु के पाठ को बदलना, किसी वस्तु को लॉक / अनलॉक करना, उसकी दृश्यता को बदलना, विंडो को खोलना / बंद करना और कई अन्य। साथ ही घटनाओं पर विचार करते समय, स्पष्टीकरण के बिना मैं जटिल कार्यों के वर्णन पर आगे बढ़ूंगा।

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

एक बटन के साथ एक डायनामिक लेआउट (तस्वीर के बाईं ओर) होने दें, जिस पर क्लिक करके एक टैब पैनल (तस्वीर के दाईं ओर) के साथ-साथ सभी सामग्रियों को लेआउट के दो केंद्रीय कक्षों में डाला जाना चाहिए।



हम बटन को इवेंट के ऑब्जेक्ट के रूप में और डायनामिक लेआउट को एक्शन के ऑब्जेक्ट के रूप में चुनते हैं।



खुलने वाले संवाद के दाहिने हिस्से में, इन्सर्ट ऑब्जेक्ट या क्लियर सेल्स एक्शन चुनें, दो सेंट्रल लेआउट सेल चुनें, इंसर्ट टू इन्सर्ट (टैब पैनल) चुनें। कार्रवाई सहेजें और जाँच

करें पर क्लिक करें : पूर्वावलोकन में लेआउट लॉन्च करें और बटन पर क्लिक करें - सामग्री के साथ टैब पैनल को गतिशील लेआउट में डाला जाएगा।

वर्णित कार्रवाई के अलावा, कई समान रूप से दिलचस्प जटिल क्रियाएं हैं।

प्रोटोटाइप देखें

प्रोटोटाइप देखने के उपकरण को बिना किसी हिचकिचाहट के अनोखा कहा जा सकता है।

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

टूल की एक अन्य विशेषता: आप संपूर्ण इंटरफ़ेस और उसके भाग या एक व्यक्तिगत ऑब्जेक्ट दोनों को देख सकते हैं। आप एक ही समय में कई इंटरफेस देख सकते हैं - उन्हें अलग-अलग विंडो में लॉन्च किया जाएगा।

देखने में किसी ऑब्जेक्ट को शुरू करने के लिए, आपको इसे चुनने और तीन लॉन्च विधियों में से एक का उपयोग करने की आवश्यकता है: एफ 5 कुंजी का उपयोग करना, संदर्भ मेनू में व्यू आइटम का उपयोग करना या एप्लिकेशन के ऊपरी दाएं कोने में लॉन्च पैनल पर बटन:



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

इसके अलावा, टूल की सहायता से, आप जब आप इसे देखने में शुरू करते हैं, तो आप ऑब्जेक्ट की स्थिति को समायोजित कर सकते हैं:

प्रोटोटाइप निर्यात

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



निर्यात किया गया प्रोटोटाइप कई सबफ़ोल्डर्स वाला एक फ़ोल्डर है और designerviewer.exe निष्पादन योग्य फ़ाइल (या .sh अगर प्रोटोटाइप लिनक्स के लिए बनाया गया था), जिसके लॉन्च से प्रोटोटाइप का लॉन्च होता है। प्रोटोटाइप को किसी अन्य मशीन में स्थानांतरित करने के लिए, आपको संपूर्ण फ़ोल्डर भेजने की आवश्यकता है।

पुनश्च

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