मॉडल-क्यूएमएल में देखें। भाग शून्य, परिचयात्मक

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

यह दृष्टिकोण Qt में सक्रिय रूप से उपयोग किया जाता है, और QML में सामान्य रूप से आधारशिला है। इसलिए जो लोग एमएमएल के सिद्धांतों को समझते हैं, वे क्यूएमएल का अध्ययन करेंगे।

QML में मॉडल-दृश्य:

1. मॉडल-क्यूएमएल में देखें। भाग शून्य, परिचयात्मक
2. मॉडल-क्यूएमएल में देखें। भाग एक: पूर्वनिर्मित घटक दृश्य
3. मॉडल-क्यूएमएल में देखें। भाग दो: कस्टम दृश्य
4. मॉडल-क्यूएमएल में देखें। भाग तीन: QML और जावास्क्रिप्ट में मॉडल
5. मॉडल-क्यूएमएल में देखें। भाग चार: सी ++ मॉडल

MVC क्या है?

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

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

तो, इस टेम्पलेट का सार प्रोग्राम को तीन घटकों में विभाजित करना है।

• मॉडल। डेटा के लिए जिम्मेदार और इसके लिए पहुँच प्रदान करता है।
• प्रदर्शन। मॉडल से प्राप्त डेटा प्रदर्शित करने के लिए जिम्मेदार है।
• नियंत्रण। उपयोगकर्ता सहभागिता के लिए जिम्मेदार। मॉडल में डेटा बदल सकते हैं।

योजना के अनुसार, मॉडल को इस प्रकार दर्शाया जा सकता है:



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

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

Qt और QML में MVC

क्यूटी में इस टेम्पलेट का उपयोग करने का मुख्य विचार डेटा और उनके प्रदर्शन का पृथक्करण है।



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

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

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

QML में एक साधारण MVC उदाहरण

एक कार्यक्रम पर विचार करें जो बीच में पाठ के साथ रंगीन आयतों की एक जोड़ी प्रदर्शित करता है।

import QtQuick 2.0 Rectangle { width: 360 height: 360 ListModel { id: dataModel ListElement { color: "orange" text: "first" } ListElement { color: "skyblue" text: "second" } } ListView { id: view anchors.margins: 10 anchors.fill: parent spacing: 10 model: dataModel delegate: Rectangle { width: view.width height: 100 color: model.color Text { anchors.centerIn: parent renderType: Text.NativeRendering text: model.text } } } } 

यहाँ मॉडल ListModel प्रकार है। मॉडल तत्वों के रूप में, विशेष ListElement प्रकार के दो बच्चों का उपयोग किया जाता है, जिसमें हमने दो गुणों को परिभाषित किया है: रंग और पाठ।

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

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

निष्पादन का परिणाम कुछ इस तरह दिखता है:

मॉडल-व्यू में गतिशीलता

एमवीसी में, एक मॉडल निष्क्रिय या सक्रिय हो सकता है।

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

सक्रिय मॉडल इस विचार को सूचित कर सकता है कि डेटा बदल गया है। बदले में, दृश्य इन परिवर्तनों को प्रदर्शित कर सकता है। इस विकल्प को MVC का क्लासिक कार्यान्वयन माना जाता है।

क्यूटी और क्यूएमएल एक सक्रिय मॉडल का उपयोग करते हैं। यह हमें मॉडल में डेटा बदलने का अवसर देता है और अपडेट किए गए डेटा को प्रदर्शित करने के बारे में चिंता नहीं करता है - प्रस्तुति हमारे लिए सब कुछ करेगी।

हम पिछले उदाहरण को बहुत संशोधित करेंगे: एक बटन जोड़ें जो क्लिक किए जाने पर मॉडल में तत्वों को जोड़ देगा।

 import QtQuick 2.0 Rectangle { width: 360 height: 360 ListModel { id: dataModel } Column { anchors.margins: 10 anchors.fill: parent spacing: 10 ListView { id: view width: parent.width height: parent.height - button.height - parent.spacing spacing: 10 model: dataModel clip: true delegate: Rectangle { width: view.width height: 40 color: "skyblue" Text { anchors.centerIn: parent renderType: Text.NativeRendering text: model.index } } } Rectangle { id: button width: 100 height: 40 anchors.horizontalCenter: parent.horizontalCenter border { color: "black" width: 1 } Text { anchors.centerIn: parent renderType: Text.NativeRendering text: "Add" } MouseArea { anchors.fill: parent onClicked: dataModel.append({}) } } } } 

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

प्रोग्राम चलाने और बटन पर क्लिक करने से हमें कुछ इस तरह मिलता है:



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

छोटा निष्कर्ष

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

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