🧀 🎖️ ⚾️ मॉडल-क्यूएमएल में देखें। भाग तीन: QML और जावास्क्रिप्ट में मॉडल 🚃 🐂 🧗

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

जिस तरह से मॉडल लागू किए जाते हैं, मैं उन्हें तीन श्रेणियों में विभाजित करूंगा:

सी ++ मॉडल;
QML मॉडल
जावास्क्रिप्ट मॉडल।

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

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

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

1. लिस्टमॉडल

यह एक काफी सरल और, एक ही समय में, कार्यात्मक घटक है। लिस्टमॉडल में तत्वों को सांख्यिकीय रूप से परिभाषित किया जा सकता है (यह पहले उदाहरण में प्रदर्शित होता है) और गतिशील रूप से जोड़ा / हटाया (क्रमशः, दूसरे उदाहरण में)। हम दोनों विधियों का अधिक विस्तार से विश्लेषण करेंगे।

1) स्थिर

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

import QtQuick 2.0 Rectangle { width: 360 height: 240 ListModel { id: dataModel ListElement { color: "orange" texts: [ ListElement { text: "one" }, ListElement { text: "two" } ] } ListElement { color: "skyblue" texts: [ ListElement { text: "three" }, ListElement { text: "four" } ] } } ListView { id: view anchors.margins: 10 anchors.fill: parent spacing: 10 model: dataModel delegate: Rectangle { width: view.width height: 100 color: model.color Row { anchors.margins: 10 anchors.left: parent.left anchors.verticalCenter: parent.verticalCenter spacing: 10 Repeater { model: texts delegate: Text { verticalAlignment: Text.AlignVCenter renderType: Text.NativeRendering text: model.text } } } } } }

हम एक मॉडल के रूप में प्रतिनिधि के अंदर ग्रंथों की भूमिका का उपयोग करते हैं, इस प्रकार घोंसले के कई स्तरों को प्राप्त किया जा सकता है।
परिणामस्वरूप, हमें कुछ ऐसा मिलता है:

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

 ListModel { id: dataModel ListElement { color: "orange" text: 1 } ListElement { color: "skyblue" text: "second" } }

हमें यह त्रुटि मिलती है: "विभिन्न प्रकार [स्ट्रिंग -> संख्या] की मौजूदा भूमिका 'पाठ' को निर्दिष्ट नहीं किया जा सकता है" और दूसरे प्रतिनिधि में पाठ के बजाय हमें 0 मिलता है।

2) गतिशील

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

ListModel में तत्वों में हेरफेर करने के लिए इंटरफ़ेस एक नियमित सूची के इंटरफ़ेस के समान है। तत्वों को जोड़ा / हटाया / स्थानांतरित किया जा सकता है, आप उनका मूल्य प्राप्त कर सकते हैं और प्रतिस्थापित या संपादित कर सकते हैं।

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

 ListModel { id: dataModel Component.onCompleted: { append({ color: "orange", text: "first" }) append({ color: "skyblue", text: "second" }) } }

एक वस्तु न केवल एक शाब्दिक द्वारा निर्धारित की जा सकती है, बल्कि एक चर को पार करके जिसमें यह वस्तु शामिल है:

 var value = { color: "orange", text: "first" } append(value)

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

 QtObject { id: obj function alive() { console.log("It's alive!") } } ListModel { id: dataModel Component.onCompleted: { var value value = { data: { color: "orange", text: "first" }, functions: obj } append(value) value = { data: { color: "skyblue", text: "second" }, functions: obj } append(value) } }

चूँकि हमने डेटा ऑब्जेक्ट में रंग और पाठ गुण रखे हैं, प्रतिनिधि में वे इस ऑब्जेक्ट के गुणों की तरह होंगे, अर्थात। model.data.color।

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

 Component.onCompleted: model.functions.alive()

और यह फ़ंक्शन घटक बनने के बाद कहा जाएगा।

डेटा में कार्य करना एक हैक की तरह अधिक है और मैं सलाह देता हूं कि इस तरह की चीजों से बहुत दूर न जाएं, लेकिन एक मॉडल में वस्तुओं को डालना बहुत आवश्यक चीज है। उदाहरण के लिए, यदि डेटा सीधे JML प्रारूप में QML (XMLHttpRequest का उपयोग करके) नेटवर्क से आता है (और जब वेब संसाधनों के साथ काम करते हैं, तो यह आमतौर पर होता है), तो JSON को डिकोड करने से आपको एक जावास्क्रिप्ट ऑब्जेक्ट मिलेगा जिसे आप बस ListModel में जोड़ सकते हैं।

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

 ListModel { id: dataModel dynamicRoles: true Component.onCompleted: { append({ color: "orange", text: "first" }) append({ color: "skyblue", text: 2 }) } }

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

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

चलो दूसरा उदाहरण लेते हैं और इसे थोड़ा याद करते हैं ताकि मॉडल बनाते समय पाठ तत्व के बिना एक तत्व जोड़ा जाए, और फिर बटन पर क्लिक करके हम "नया" पाठ के साथ तत्वों को जोड़ देंगे।

 import QtQuick 2.0 Rectangle { width: 360 height: 360 ListModel { id: dataModel dynamicRoles: true Component.onCompleted: { append({ color: "orange" }) } } 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: model.color Text { anchors.centerIn: parent renderType: Text.NativeRendering text: model.text || "old" } } } 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({ color: "skyblue", text: "new" }) } } } }

नतीजतन, पाठ के सभी नए तत्व "पुराने" पाठ के रूप में नहीं होंगे और न ही होंगे:

हम मॉडल की परिभाषा को फिर से लिखते हैं और पाठ संपत्ति के साथ एक और तत्व बनाने के चरण में जोड़ते हैं, लेकिन रंग संपत्ति के बिना:

 ListModel { id: dataModel Component.onCompleted: { append({ color: "orange" }) append({ text: "another old" }) } }

हम डेलिगेट परिभाषा को बदल देंगे ताकि यदि निर्दिष्ट न हो तो डिफ़ॉल्ट रंग का उपयोग किया जाए:

 color: model.color || "lightgray"

नतीजतन, मॉडल दोनों भूमिकाओं के साथ बनता है और नए तत्वों को जोड़ने पर सब कुछ जैसा कि प्रदर्शित होता है:

हम स्थैतिक और गतिशील सामग्री मॉडल भी जोड़ सकते हैं। लेकिन स्थैतिक विधि का उपयोग करने से इसकी सभी सीमाएं समाप्त हो जाती हैं और गतिशील रूप से हम केवल वस्तुओं को एक ही प्रकार की भूमिकाओं के साथ जोड़ सकते हैं।

छोटी खबर: Qt 5.1 में, यह मॉडल QtQuick से एक अलग मॉड्यूल QtQml.Models में निकाल दिया गया है। इसका उपयोग करने के लिए, आपको इस मॉड्यूल को कनेक्ट करना होगा:

 import QtQml.Models 2.1

लेकिन सब कुछ फिर से लिखने के लिए जल्दी करना आवश्यक नहीं है - मौजूदा कोड के साथ संगतता के लिए, मॉडल QtQuick मॉड्यूल में भी उपलब्ध होगा।

ListModel को Qt से मॉडल का QML संस्करण माना जा सकता है। इसकी समान कार्यक्षमता है, आपको डेटा में हेरफेर करने की अनुमति देता है और एक सक्रिय मॉडल है। मैं कह सकता हूं कि QML में मॉडल बनाने के लिए यह सबसे कार्यात्मक और सुविधाजनक घटक है।

2. VisualItemModel (ObjectModel)

Qt ढांचे का मॉडल-व्यू आर्किटेक्चर दो मुख्य संस्थाओं को अलग करता है: एक मॉडल और एक दृश्य, और एक सहायक, एक प्रतिनिधि। चूँकि यहाँ दृश्य प्रतिनिधि उदाहरणों के लिए एक कंटेनर है, प्रतिनिधि आमतौर पर वहाँ परिभाषित किया गया है।

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

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

एक उदाहरण के रूप में, हम मॉडल में आयत और पाठ के प्रकारों की वस्तुओं को रखेंगे और उन्हें सूची दृश्य का उपयोग करके प्रदर्शित करेंगे:

 import QtQuick 2.0 Rectangle { width: 360 height: 240 VisualItemModel { id: itemModel Rectangle { width: view.width height: 100 color: "orange" } Text { width: view.width height: 100 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter renderType: Text.NativeRendering text: "second" } } ListView { id: view anchors.margins: 10 anchors.fill: parent spacing: 10 model: itemModel } }

Qt 5.1 में, इस मॉडल को एक अलग मॉड्यूल QtQml.Models में QtQuick से हटा दिया जाता है और इसे ObjectModel कहा जाता है। जैसे ListModel के साथ, इस मॉडल का उपयोग करने के लिए आपको उपयुक्त मॉड्यूल को कनेक्ट करना होगा। इंटरफ़ेस वही रहता है, बस VisualDataModel को ObjectModel से बदलें।

मॉडल VisualDataModel के माध्यम से भी उपलब्ध होगा, ताकि पुराने कोड के साथ संगतता न टूटे। लेकिन अगर आप नए संस्करण के लिए विकसित होते हैं, तो तुरंत नए नाम का उपयोग करना बेहतर होता है।

3. XmlListModel

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

हमें एक्सएमएल फ़ाइल के पते को इंगित करने की आवश्यकता है, तत्वों का चयन करने के लिए मानदंडों को इंगित करें, और यह निर्धारित करें कि प्रतिनिधि में कौन सी भूमिकाएं दिखाई देनी चाहिए। तत्वों के चयन के लिए एक मानदंड के रूप में, हम XPath प्रारूप में एक क्वेरी लिखते हैं। प्रतिनिधि भूमिकाओं के लिए, हम एक XPath अनुरोध भी निर्दिष्ट करते हैं जिसके आधार पर तत्व के लिए भूमिका के लिए डेटा प्राप्त किया जाएगा। RSS को पार्स करने जैसे सरल मामलों के लिए, ये अनुरोध भी सरल होंगे और अनिवार्य रूप से XML फ़ाइल में पथ का वर्णन करेंगे। मैं यहाँ XPath के जंगल में नहीं जाऊँगा, और यदि आप अभी भी यह नहीं समझ पा रहे हैं कि यह किस प्रकार का जानवर है, तो मैं Qt प्रलेखन में संबंधित अनुभाग को पढ़ने की सलाह देता हूँ। यहां मैं ऐसे उदाहरणों का उपयोग करूंगा जो किसी भी मुश्किल चयन को नहीं बनाते हैं, इसलिए मुझे उम्मीद है कि सब कुछ पर्याप्त स्पष्ट होगा।

एक उदाहरण के रूप में, हमें हैबर के आरएसएस फ़ीड और प्रदर्शन लेख के शीर्षक मिलेंगे।

 Rectangle { width: 360 height: 360 color: "lightsteelblue" XmlListModel { id: dataModel source: "http://habrahabr.ru/rss/hubs/" query: "/rss/channel/item" XmlRole { name: "title" query: "title/string()" } } ListView { id: view anchors.margins: 10 anchors.fill: parent spacing: 10 model: dataModel delegate: Rectangle { width: view.width height: 40 radius: 10 Text { anchors.fill: parent horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter elide: Text.ElideRight wrapMode: Text.Wrap renderType: Text.NativeRendering text: model.title } } } }

जिन तत्वों की हमें आवश्यकता है, वे ब्लॉक हैं जो नेस्टेड हैं, और बदले में है। इस रास्ते से, हम अपनी पहली XPath अभिव्यक्ति का निर्माण करते हैं। लेख की शीर्षक वाली हमारी केवल एक भूमिका होगी। इसे पाने के लिए, आपको इसे तत्व से लेने और इसे एक स्ट्रिंग में लाने की आवश्यकता है। इससे हम दूसरी XPath अभिव्यक्ति बनाते हैं। यह मॉडल के गठन को पूरा करता है, यह केवल इसे प्रदर्शित करने के लिए रहता है। परिणामस्वरूप, हमें कुछ ऐसा मिलता है:

इस मॉडल को एक अलग मॉड्यूल में रखा गया है, इसके उपयोग के लिए, आपको अतिरिक्त रूप से इस मॉड्यूल को जोड़ना होगा:

 import QtQuick.XmlListModel 2.0

4. फोल्डर लिस्टमॉडल

कई अनुप्रयोगों के लिए, फ़ाइल सिस्टम तक पहुंच से बाहर नहीं होगा। QML के पास इसके लिए एक प्रायोगिक घटक है, जो फ़ाइल सिस्टम निर्देशिका को एक मॉडल के रूप में प्रस्तुत करता है - FileSystemModel। इसका उपयोग करने के लिए, आपको उसी नाम के मॉड्यूल को कनेक्ट करना होगा:

 import Qt.labs.folderlistmodel 1.0

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

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

उदाहरण के लिए, हमें एक निर्देशिका में फ़ाइलों की एक सूची मिलती है और तालिका में इन फ़ाइलों के बारे में जानकारी प्रदर्शित करते हैं:

 import QtQuick 2.0 import QtQuick.Controls 1.0 import Qt.labs.folderlistmodel 1.0 Rectangle { width: 600 height: 300 FolderListModel { id: dataModel showDirs: false nameFilters: [ "*.jpg", "*.png" ] folder: "file:///mnt/store/Pictures/Wallpapers" } TableView { id: view anchors.margins: 10 anchors.fill: parent model: dataModel clip: true TableViewColumn { width: 300 title: "Name" role: "fileName" } TableViewColumn { width: 100 title: "Size" role: "fileSize" } TableViewColumn { width: 100 title: "Modified" role: "fileModified" } itemDelegate: Item { Text { anchors.left: parent.left anchors.verticalCenter: parent.verticalCenter renderType: Text.NativeRendering text: styleData.value } } } }

हम मॉडल से निर्देशिकाओं को हटाते हैं और केवल * .jpg और * .png फ़ाइलों को छोड़ देते हैं।

इस मॉडल के साथ, प्रतिनिधि को डेटा के रूप में फ़ाइल के बारे में जानकारी है: पथ, नाम, आदि। हम यहां नाम, आकार और संशोधन समय का उपयोग करते हैं।

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

तो, CoverFlow उदाहरण लें और इसे थोड़ा बदलें। हम पिछले उदाहरण से मॉडल लेंगे। तत्व का आकार बढ़ाएँ:

 property int itemSize: 400

और प्रतिनिधि बदलें:

 delegate: Image { property real rotationAngle: PathView.angle property real rotationOrigin: PathView.origin width: itemSize height: width z: PathView.z fillMode: Image.PreserveAspectFit source: model.filePath transform: Rotation { axis { x: 0; y: 1; z: 0 } angle: rotationAngle origin.x: rotationOrigin } }

खैर, अब एक अच्छी बात है कि हम मिला:

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

5. जावास्क्रिप्ट मॉडल

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

मूल रूप से, ऐसे मॉडल निष्क्रिय होते हैं, और उपयुक्त होते हैं जब तत्वों की संख्या तय हो जाती है या शायद ही कभी बदलती है।

हम इस प्रकार के मॉडल के रूप में विचार करेंगे:

सूचियाँ / सरणियाँ;
जावास्क्रिप्ट ऑब्जेक्ट्स और QML घटक
पूर्णांकों।

1) सूची / सरणियाँ

आप एक मॉडल के रूप में साधारण जावास्क्रिप्ट सरणियों का उपयोग कर सकते हैं। सरणी के प्रत्येक तत्व के लिए एक प्रतिनिधि बनाया जाएगा और सरणी तत्व का डेटा स्वयं मॉडलेट संपत्ति के माध्यम से प्रतिनिधि में उपलब्ध होगा।

 import QtQuick 2.0 Rectangle { property var dataModel: [ { color: "orange" }, { color: "skyblue", text: "second" } ] width: 360 height: 240 ListView { id: view anchors.margins: 10 anchors.fill: parent spacing: 10 model: dataModel delegate: Rectangle { width: view.width height: 100 color: modelData.color Text { anchors.centerIn: parent renderType: Text.NativeRendering text: modelData.text || "empty text" } } } }

यदि सरणी में ऑब्जेक्ट हैं, तो मॉडलडैट भी ऑब्जेक्ट होगा और इसमें मूल ऑब्जेक्ट के सभी गुण होंगे। यदि तत्वों के रूप में सरल मूल्य हैं, तो वे मॉडलडैट के रूप में होंगे। उदाहरण के लिए:

 property var dataModel: [ "orange", "skyblue" ]

और प्रतिनिधि में हम इस तरह मॉडल डेटा की ओर मुड़ते हैं:

 color: modelData

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

 property var dataModel: [ { color: "orange", functions: obj }, { color: "skyblue", text: "second", functions: obj } ] QtObject { id: obj function alive() { console.log("It's alive!") } }

और प्रतिनिधि में, हम फ़ंक्शन को कॉल करते हैं:

 Component.onCompleted: modelData.functions.alive()

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

 dataModel.push({ color: "skyblue", text: "something new" }) dataModel = dataModel

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

२) वस्तु

जावास्क्रिप्ट ऑब्जेक्ट और QML ऑब्जेक्ट मॉडल के रूप में कार्य कर सकते हैं। इस मॉडल में एक तत्व होगा और ऑब्जेक्ट के गुण प्रतिनिधि में भूमिकाएँ होंगे।
एक मॉडल के रूप में एक जावास्क्रिप्ट ऑब्जेक्ट का उपयोग करने के लिए बहुत पहले उदाहरण लें और इसे रीमेक करें:

 property var dataModel: null Component.onCompleted: { dataModel = { color: "orange", text: "some text" } }

प्रतिनिधि में वस्तु गुण मॉडलटाटा के माध्यम से सुलभ हैं:

 color: modelData.color

जावास्क्रिप्ट सरणियों के साथ के रूप में, एक मॉडल के रूप में सेट होने के बाद किसी वस्तु को बदलना प्रदर्शन को प्रभावित नहीं करता है, अर्थात। यह एक निष्क्रिय मॉडल भी है।

मैंने एक मॉडल के रूप में एकल QML ऑब्जेक्ट के रूप में जावास्क्रिप्ट मॉडल के उपयोग का भी उल्लेख किया है। यद्यपि इन वस्तुओं को एक पूर्ण QML मॉडल के रूप में उपयोग किया जा सकता है, कार्यक्षमता के संदर्भ में यह कुछ सुविधाओं के साथ, नियमित जावास्क्रिप्ट ऑब्जेक्ट का उपयोग करने का लगभग एक एनालॉग है। इसलिए, मैं उन्हें एक साथ मानता हूं।

QML ऑब्जेक्ट के मॉडल के रूप में उपयोग करने के लिए समान उदाहरण बदलें:

 Item { id: dataModel property color color: "orange" property string text: "some text" }

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

इस तरह के एक मॉडल के साथ, प्रतिनिधि में डेटा मॉडल के माध्यम से और मॉडलडाटा के माध्यम से दोनों उपलब्ध है।

इसके अलावा, यह मॉडल जावास्क्रिप्ट मॉडल का एकमात्र सक्रिय है। क्यूएमएल ऑब्जेक्ट्स के गुणों के कारण सिग्नल होते हैं जो प्रॉपर्टी बदलते समय ट्रिगर होते हैं, ऑब्जेक्ट में प्रॉपर्टी बदलने से डेलिगेट में डेटा बदल जाएगा।

3) पूर्णांक

सबसे सरल मॉडल :) हम मॉडल के रूप में एक पूर्णांक का उपयोग कर सकते हैं। यह संख्या मॉडल तत्वों की संख्या है।

 property int dataModel: 5

या आप सीधे एक मॉडल के रूप में एक स्थिरांक निर्दिष्ट कर सकते हैं:

 model: 5

प्रतिनिधि के पास मॉडलडेटा संपत्ति तक पहुंच होगी, जिसमें सूचकांक शामिल है। सूचकांक भी model.index के माध्यम से उपलब्ध होगा।

इस तरह का एक मॉडल अच्छी तरह से अनुकूल है जब आपको कई समान तत्वों को बनाने की आवश्यकता होती है।

निष्कर्ष के रूप में

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

यदि हम किसी विशेष ट्रिक्स की जरूरत नहीं है (जैसे एक ListModel में भंडारण कार्यों की तरह) माना मॉडल को लागू किया जाता है। उन मामलों में जहां यह विकल्प उपयुक्त है, हम सभी MVC घटकों को एक भाषा में लागू कर सकते हैं और इस तरह कार्यक्रम की जटिलता को कम कर सकते हैं।

लेकिन, मैं एक बात पर ध्यान देना चाहता हूं। सब कुछ QML में खींचने के लिए इसके लायक नहीं है; आपको व्यावहारिक विचारों द्वारा निर्देशित किया जाना चाहिए। कुछ चीजें C ++ में लागू करना आसान हो सकता है। अर्थात् सी + + - हम अगले भाग में विचार करेंगे।

मॉडल-क्यूएमएल में देखें। भाग तीन: QML और जावास्क्रिप्ट में मॉडल