🧖🏾 📚 👩‍👩‍👦 बेस्ट क्यूटी क्विक ट्रिक्स: कंपोनेंट्स 😟 👎🏽 💒

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

Example.qml:

import QtQuick 1.0 Rectangle { }

main.qml:

 import QtQuick 1.0 Example { }

इसके अलावा, घटकों को मॉड्यूल के रूप में पैक किया जा सकता है (क्यूटी घटक एक ऐसा मॉड्यूल है) और प्लगइन्स के रूप में प्रकाशित किया जाता है। यह पोस्ट स्वच्छ, आसान-से-बनाए रखने वाले QML कोड को लिखने के लिए घटकों का उपयोग करने के बारे में है।

नए घटक बनाना

पहला उदाहरण अतिरिक्त घटकों को बनाने की सादगी को दर्शाता है, इसलिए उनका उपयोग करने से डरो मत।

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

आइए इस सरल एनालॉग घड़ी उदाहरण को देखें:

उदाहरण डाउनलोड करें / ऑनलाइन देखें
main.qml:

 import QtQuick 1.0 //      . Rectangle { id: root width: 320 height: 320 property variant now: new Date() Timer { id: clockUpdater interval: 1000 //     running: true repeat: true onTriggered: { root.now = new Date() } } Clock { id: clock anchors.centerIn: parent hours: root.now.getHours() minutes: root.now.getMinutes() seconds: root.now.getSeconds() } }

Clock.qml:

 import QtQuick 1.0 //  ,   ,   . Rectangle { id: root width: 262 //   height: 262 //   // public: property int hours: 0 property int minutes: 0 property int seconds: 0 // private: Item { id: impl Image { id: face source: "images/face.png" Image { id: shorthand source: "images/shorthand.png" smooth: true rotation: root.hours * 30 } Image { id: longhand source: "images/longhand.png" smooth: true rotation: root.minutes * 6 } Image { id: thinhand source: "images/thinhand.png" smooth: true rotation: root.seconds * 6 } Image { id: center source: "images/knob.png" } } } }

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

सबसे पहले, यह लॉजिक को मेन.क्लेम फ़ाइल में शेष सरल और समझ में आता है: क्लॉक घटक के घंटे, मिनट और सेकंड को अपडेट करने वाला एक टाइमर वह सब है जो एक डेवलपर को main.qml में देखने की आवश्यकता है यदि वह इसमें कार्यक्षमता जोड़ना चाहता है।

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

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

कुछ अन्य, कम स्पष्ट गुण भी हैं, जैसे कि मिश्रित तत्वों का निर्माण और कार्यान्वयन विवरणों का एनकैप्सुलेशन।

एलीमेंट एलिमेंट एलीमेंट, एलिमेंट बी और एलिमेंट से एक कंपोजिट एलिमेंट (इसे कंपोज्डमेंट कहते हैं) बनाने से तत्वों में नई प्रॉपर्टी और एक्शन जोड़ना आसान हो जाता है। हम अपने ComposedElement में ElementA, ElementB या ElementC को बदलने की आवश्यकता के बिना नए ElementD और ElementE तत्वों को जोड़ सकते हैं। हमारे सरल तत्व एक-दूसरे से अलग-थलग हैं और इसलिए, यदि उनमें से एक अचानक बदलता है, तो बस नहीं टूट सकता।

घटकों को सार्वजनिक और निजी भागों में विभाजित किया जा सकता है, जैसा कि C ++ और जावा कक्षाओं में किया जाता है। किसी घटक का सार्वजनिक एपीआई मूल तत्व में परिभाषित सभी गुणों और विधियों का योग होता है (इसके द्वारा विरासत में दिए गए गुणों सहित)। इसका मतलब है कि ऐसे गुणों को बदला जा सकता है, और घटक के उपयोगकर्ताओं द्वारा ऐसे तरीकों को बुलाया जा सकता है।

नेस्टेड तत्व (रूट नहीं) में परिभाषित किसी भी संपत्ति या विधि को पूरी तरह से निजी एपीआई माना जा सकता है। यह आपको कार्यान्वयन विवरणों को संक्षिप्त करने की अनुमति देता है और अंततः डेवलपर्स के घटक बनाते समय आम हो जाना चाहिए।

इनकैप्सुलेशन के लाभों को साबित करने के लिए, हम Clock.qml से आंतरिक तत्व 'इम्प्लांट' को हटा सकते हैं और एप्लिकेशन को फिर से चला सकते हैं (उदाहरण के लिए, "$ qmiviewer main.qml")। कोई भी नई त्रुटि दिखाई नहीं देगी, क्योंकि घड़ी का सार्वजनिक घटक API परिवर्तित नहीं किया गया है। इसका मतलब है कि हम स्वतंत्र रूप से 'इम्प्लांट' को बदल सकते हैं, यह जानते हुए कि अन्य घटकों के लिए इस तरह के परिवर्तनों से कोई तृतीय-पक्ष प्रभाव दिखाई नहीं देगा।

हम इस विचार का विस्तार भी कर सकते हैं और स्थिति के आधार पर, Clock.qml को 'इम्प्लांट' के किसी भी तत्व को गतिशील रूप से लोड करने देते हैं। यह QML में बहुरूपता की अवधारणा का परिचय देता है; इस तरह के तंत्र के कार्यान्वयन को एक अभ्यास के रूप में पाठक पर छोड़ दिया जाता है।

यदि हमारे पास प्रत्येक घटक के लिए एक अच्छी तरह से डिजाइन, न्यूनतम सार्वजनिक एपीआई है, तो हम एक विशिष्ट कार्यान्वयन नहीं, बल्कि विकासशील इंटरफेस पर ध्यान केंद्रित कर सकते हैं।

पुन: उपयोग करने वाले घटक

जांचें कि क्या हम वास्तव में Clock.qml घटक का पुन: उपयोग कर सकते हैं। यह विश्व समय प्रदर्शित करने वाली घड़ियों को बनाने के लिए बहुत अच्छा है। इस मामले में, हमें उन पर दूसरे हाथ की आवश्यकता नहीं है। हम Clock.qml के व्यवहार को थोड़ा बदल सकते हैं ताकि बाद वाले घंटे, मिनट या सेकंड प्रदर्शित न करें यदि उनका मूल्य शून्य से कम है। Id = thinhand के साथ एक छवि तत्व के लिए, हम दृश्यमान गुण को सेकंड की संख्या के साथ जोड़ सकते हैं:

 visible: root.seconds > -1

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

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

संशोधित उदाहरण तीन शहरों के लिए विश्व घड़ियों और स्थानीय मौसम की जानकारी प्रदर्शित करता है।

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

उदाहरण डाउनलोड करें / ऑनलाइन देखें
main.qml:

 Rectangle { ... property variant cities: ["Berlin", "Helsinki", "San Francisco"] property variant utcOffsets: [1, 2, -8] property variant now: new Date() signal refresh() Timer { ... property int hours onTriggered: { hours = root.now.getHours() root.now = new Date() //      : if (hours != root.now.getHours()) { root.refresh() } } } Row { anchors.horizontalCenter: parent.horizontalCenter Repeater { model: root.cities //           . Rectangle { id: current width: 262 //   height: 320 //   property string city: cities[index] property int utcOffset: utcOffsets[index] XmlListModel { id: cityQuery ... } ListView { model: cityQuery anchors.fill: parent delegate: Item { Clock { id: clock anchors.left: parent.left anchors.top: parent.top // ,  UTC      , //     : hours: root.now.getUTCHours() + current.utcOffset + 24 minutes: root.now.getMinutes() seconds: -1 } Row { ... Image { id: icon source: "http://www.google.com" + model.iconUrl } Text { id: label text: current.city + ", "+ model.temperature + "°C\n" + model.humidity + "\n" + model.windCondition } } } } } } } }

हमारा लक्ष्य main.qml को समझना आसान बनाना है। उसी समय, हम Clock.qml को अनावश्यक रूप से जटिल नहीं बनाना चाहते हैं, क्योंकि, इस मामले में, इसे एक साधारण एनालॉग घड़ी के रूप में उपयोग करना मुश्किल होगा। इसलिए, हमने एक नया घटक बनाया, जिसमें मौसम डेटा और क्लॉक घटक एकत्र करना शामिल है। इसमें टाइमर, अपडेट लॉजिक, XmlListModel और क्लॉक इंटीग्रेशन शामिल है। यहां सीधे utcOffsets और शहरों के सरणियों को सेट करने के बजाय, हम WeatherWorldClock घटक के लिए नए सार्वजनिक गुण जोड़ते हैं:

 // public: property string city: "" property int utcOffset: 0

हम इन सरणियों और पुनरावर्तक को main.qml से हटा सकते हैं।

उदाहरण डाउनलोड करें / ऑनलाइन देखें
main.qml:

 import QtQuick 1.0 //       . Rectangle { id: root width: 786 height: 320 Row { id: cities anchors.fill: parent anchors.horizontalCenter: parent.horizontalCenter WeatherWorldClock { city: "Berlin" utcOffset: 1 } WeatherWorldClock { city: "Helsinki" utcOffset: 2 } WeatherWorldClock { city: "San Francisco" utcOffset: -8 } } }

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

निष्कर्ष

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

बेस्ट क्यूटी क्विक ट्रिक्स: कंपोनेंट्स

नए घटक बनाना

पुन: उपयोग करने वाले घटक

निष्कर्ष

More articles: