👵🏾 🚢 🙎🏽 शुद्ध QML और जावास्क्रिप्ट में प्लास्माइड 🚗 🍭 👴🏿

जावास्क्रिप्ट का उपयोग करके शुद्ध QML में प्लास्माइड बनाने के बारे में हब पर एक भी पोस्ट नहीं किया गया है। इस पोस्ट को इस कमी को ठीक करने का इरादा है।

सिद्धांत और इतिहास का एक सा

प्लास्मॉइड प्लाज्मा शेल के लिए एक विजेट है जो केडीई 4 में दिखाई दिया। केडीई 4 के पहले संस्करणों के चरण में, सभी प्लास्मोइड विशेष रूप से सी ++ में लिखे गए थे, फिर अजगर समर्थन दिखाई दिया। सी ++ में, यह कहना, बहुत आसान नहीं था (जटिलता के कारण, भाषा की सभी मूल बातों का ज्ञान, आदि), अजगर में यह पहले से ही बहुत आसान था। चूँकि KDE Qt का उपयोग करके C ++ में लिखा गया है, इसलिए इस Qt का उपयोग करना बेहतर होगा (कम से कम KDE में वे सोचते हैं कि)। जब QML दिखाई दिया, तो KDE ने तुरंत QML + JS + C ++ में प्लास्मोइड्स बनाने के लिए पूर्ण समर्थन दिया, और अब वे विशेष रूप से QML में प्लास्मोइड्स बनाने पर जोर देते हैं।

एक हब पर पहले से ही पायथन और सी ++ में प्लास्मोइड्स के निर्माण के बारे में पोस्ट थे, अब क्यूएमएल के लिए बारी आ गई है। लेकिन पोस्ट की यह श्रृंखला (मैं एक से अधिक पोस्ट लिखने की उम्मीद करता हूं) केवल QML + JS + C ++ के एक गुच्छा का उपयोग करके एक प्लास्माइड बनाने के बारे में नहीं है, बल्कि एक उभरते विजेट डेवलपर के सभी नुकसानों के बारे में भी हो सकता है। तथ्य यह है कि techbase.kde.org पर QML plasmoids के बारे में अभी भी बहुत कम जानकारी है, इस वजह से, मैंने लगातार # kde और # प्लाज्मा @ irc.freenode.net पर डेवलपर्स के साथ चर्चा की थी। वैसे, वे सभी पूरी तरह से और हमेशा सभी मामलों में मदद करते हैं, बिना किसी अपवाद के, जिसके लिए वे कर्म में एक बड़े और मोटे प्लस हैं।

उपकरण

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

उदाहरण के रूप में उबंटू का उपयोग करना, सब कुछ बहुत सरल है:

sudo apt-get install kde-sdk

या इससे भी सरल:

 sudo apt-get install plasmate

लेकिन उचित स्थापना के लिए, आपको कुबंटू-पीपा बैकपोर्ट स्थापित करने की आवश्यकता है , आप इसके बारे में यहां पढ़ सकते हैं।

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

तो फिर सबसे दिलचस्प।

प्लाज्मा QML घटक

फिलहाल, किसी भी दृश्य इंटरफ़ेस का वर्णन करने के लिए पहले से ही बहुत सारे प्लाज्मा घटक हैं, और न केवल दृश्य, बल्कि डेटा के साथ काम करने के लिए इंटरफेस (उदाहरण के लिए, डेटा स्रोत )।

सभी घटकों को http://api.kde.org , अर्थात् यहां पाया जा सकता है । प्लाज़्माटेक्स्ट्राकम्पर्स और प्लाज़्माकंपर्सर्स का उपयोग आमतौर पर विज़ुअल इंटरफ़ेस बनाने के लिए किया जाता है, लेकिन अक्सर अंतिम एक ही पर्याप्त होता है। एक विस्तृत विवरण वहां पाया जा सकता है।

प्लास्मेट में एक प्लास्माइड बनाते समय, भविष्य का विजेट डेस्कटॉप पर स्थापना के लिए तैयार है। मैं अभी से वर्कपीस पर आपका ध्यान आकर्षित करना चाहता हूं - आवश्यक आयात पहले से ही इसके साथ जुड़े हुए हैं और i18n का उपयोग भी किया जाता है, जो स्थानीयकरण के लिए बहुत उपयोगी है। वैसे, फिलहाल QtQuick 1.1 को रिक्त स्थान में इंगित किया गया है, हालांकि आप पहले से ही Qt5 को QtQuick 2.0 के साथ अपने सिस्टम में रख सकते हैं। यदि आप इसे जोड़ने की कोशिश करते हैं - प्लासमेट कसम खाएगा क्योंकि नवीनतम KDE में प्लाज्मा (और संस्करण 5.0 से पहले) में QtQuick 2 का समर्थन नहीं है।

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

DataSource CML से QML में डेटा प्रदाता का एक सा है। उदाहरण के लिए, हम QML में वर्तमान समय का पता नहीं लगा सकते हैं, लेकिन C ++ और संबंधित हेडर फ़ाइलों का उपयोग करना काफी है। इस मामले में, हमें एक DataEngine लिखना होगा जो इस जानकारी (समय) को उन सभी plasmoids को आपूर्ति करेगा जो इसे स्रोत ( DataSource ) के रूप में उपयोग करते हैं, वैसे, इस मामले में plasmoids को किसी भी भाषा में लिखा जा सकता है।

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

इसके अलावा, मैं अपने प्लास्मोइड के उदाहरण के साथ समझाऊंगा - KFilePlaces (https://bugs.kde.org/show_bug.cgi?id=180139)। वास्तव में, वह अभी तक तैयार नहीं है, लेकिन मैं यह देखने के लिए अल्फ़ा संस्करण का उपयोग करूँगा कि यह प्लास्मोइड्स क्या हैं और इस आटे को महसूस करना है।

प्लासॉइड का निर्माण "स्थान"

मौजूदा DataEngine का अवलोकन

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

 plasmaengineexplorer

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

यहाँ 0 से 11 डेटा स्रोत हैं, क्योंकि Datasources। यह सरणी सभी प्रवेश बिंदु हैं। QML में इस इंजन का उपयोग करने के लिए आपको कुछ इस तरह लिखना होगा:

 PlasmaCore.DataSource { id: placesDataSource engine: "places" interval: 1000 connectedSources: sources }

यहाँ स्रोत ये सभी डेटा स्रोत 0 से 11 तक हैं, अर्थात्। एक सरणी। कोई स्पष्ट रूप से निर्दिष्ट कर सकता है:

 PlasmaCore.DataSource { id: placesDataSource engine: "places" interval: 1000 connectedSources: ["0", "2", "11"] }

लेकिन मेरे मामले में, मुझे सभी प्रवेश बिंदुओं को संसाधित करने की आवश्यकता है, इसलिए हम "स्रोत" छोड़ देते हैं।

डेटा स्रोत बनाने के बाद, आप इसका तुरंत उपयोग नहीं कर सकते; आपको एक मॉडल बनाना होगा। ऐसा करने के लिए, एक " DataModel " ऑब्जेक्ट है जो बस DataSource से डेटा लेता है और जिससे डेटा पहले से ही आउटपुट हो सकता है। एक DataModel बनाना भी बहुत सरल है:

 PlasmaCore.DataModel { id: placesDataModel dataSource: placesDataSource }

डेटा स्रोत तत्वों को सॉर्ट करना और फ़िल्टर करना

तो, हमें डेटा मिला। लेकिन, जैसा कि आप देख सकते हैं, वे क्रम में नहीं जाते हैं, और यह बहुत संभव है कि हमें उन्हें कुछ विशेषता (चर) द्वारा क्रमबद्ध करने की आवश्यकता है। मेरे मामले में, मुझे सभी छिपे हुए तत्वों ( छिपे हुए : झूठे पैरामीटर) को दिखाने की आवश्यकता है, और इसडेविस पैरामीटर (डिवाइस या स्थान) द्वारा सॉर्ट करें। ऐसा करने के लिए, हम PlasmaCore.SortFilterModel टूल का उपयोग करते हैं:

 PlasmaCore.SortFilterModel { id: sortedEntriesDataModel filterRole: "isDevice" filterRegExp: "false" sourceModel: PlasmaCore.SortFilterModel { sourceModel: placesDataModel filterRole: "hidden" filterRegExp: "false" sortRole: "isDevice" sortOrder: "AscendingOrder" } }

यहाँ, SortRole वह चर है जिसके द्वारा छँटाई की जाएगी, SortOrder क्रम है; filterRole वह चर है जिसके द्वारा फ़िल्टरिंग किया जाएगा (यानी, सभी अनुचित तत्वों को काट दिया जाएगा), और filterRegExp वह अभिव्यक्ति है जिसकी जाँच करके जाँच की जाएगी। एक कैच है: यदि आप "आइडवाइस" के अलावा किसी और कारण से फ़िल्टर करना चाहते हैं, तो आपको इस SortFilterModel तत्व को लपेटना होगा, क्योंकि इस उदाहरण में "हिडन" वेरिएबल द्वारा अतिरिक्त फ़िल्टरिंग किया गया था।

PlasmaCore.SortFilterModel, PlasmaCore.DataModel का विस्तार है, इसलिए वे संगत हैं।

एक दृश्य सूची बनाएँ

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

चंचल एक कंटेनर है। सामग्री को न केवल साइडबार द्वारा स्क्रॉल किया जा सकता है, जिसे बंद किया जा सकता है, बल्कि माउस या टच-स्क्रीन इशारों द्वारा भी।
यह दृढ़ता से अनुशंसा की जाती है कि आप अन्य प्लाज्मा रनटाइम घटकों से अपनी ~~बाइक के~~ रैपर बनाने के बजाय उपयोग करें, जैसे कि आइटम / पृष्ठ बनाना , आदि। प्लाज़्माकॉर्पेटर्स के साथ। क्रॉलबार ।

हम बनाते हैं:

 PlasmaExtras.ScrollArea { id: entriesScrollArea anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right anchors.horizontalCenter: plasmoidItem.horizontalCenter height: 40 * (entriesListView.count + 1) flickableItem: ListView {

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

स्क्रीन को अव्यवस्थित नहीं करने के लिए, मैंने विशेष रूप से स्पॉइलर में सूची का निर्माण किया:

सूची निर्माण

 PlasmaExtras.ScrollArea { id: entriesScrollArea anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right anchors.horizontalCenter: plasmoidItem.horizontalCenter height: 40 * (entriesListView.count + 1) flickableItem: ListView { id: entriesListView highlightRangeMode: ListView.NoHighlightRange orientation: ListView.Vertical focus: true clip: true model: sortedEntriesDataModel delegate: listViewItemTemplate header: PlasmaComponents.Switch { id: entriesHeaderSwitch anchors.top: parent.top anchors.left: parent.left anchors.right: devicesHeaderLabel.left text: i18n("Places") checked: true } highlight: Rectangle { id: highlightListViewItem anchors.left: parent.left color: "lightgrey"; radius: 6; opacity: 0.6 } } }

मैं यहाँ बहुत अधिक बिंदु नहीं देखता, क्योंकि सूची QML की नियमित सूची दृश्य तत्व है, जिसकी शुरुआत QtQuick 1.0 से होती है ।
आगे बढ़ो।

सूची मदों के लिए एक प्रतिनिधि बनाना

ऐसा लगता है, मुझे इस तरह के एक सरल कदम पर ध्यान क्यों देना चाहिए, लेकिन मैंने उसके साथ बहुत समय बिताया। तथ्य यह है कि डेलीगेट के लिए कंटेनर तत्व प्लाज़्मा.कॉमपर्सलर्स लिस्ट होना चाहिए। यदि आप किसी आइटम को केवल एक आइटम या केवल एक कंटेनर (एक ListItem नहीं) में संलग्न करते हैं, तो सभी आइटम ढेर में मिश्रित हो जाएंगे। काश, कहीं इस बारीकियों के बारे में लिखा गया है।

हम कोशिश करते हैं!

अगर आपने सब कुछ सही किया, तो हमारे पास कुछ इस तरह होगा:

कोड

 import QtQuick 1.1 import org.kde.locale 0.1 import org.kde.plasma.components 0.1 as PlasmaComponents import org.kde.plasma.core 0.1 as PlasmaCore import org.kde.plasma.extras 0.1 as PlasmaExtras Item { width: 200 height: 300 PlasmaCore.DataSource { id: placesDataSource engine: "places" interval: 1000 connectedSources: sources } PlasmaCore.DataModel { id: placesDataModel dataSource: placesDataSource } PlasmaCore.SortFilterModel { id: sortedEntriesDataModel filterRole: "isDevice" filterRegExp: "false" sourceModel: PlasmaCore.SortFilterModel { sourceModel: placesDataModel filterRole: "hidden" filterRegExp: "false" sortRole: "isDevice" sortOrder: "AscendingOrder" } } Component { id: listViewItemTemplate PlasmaComponents.ListItem { id: placeListItem anchors.left: plasmoidItem.left anchors.right: plasmoidItem.right x: 20 height: 40 Item { id: listItemObject anchors.left: plasmoidItem.left anchors.right: plasmoidItem.right PlasmaCore.IconItem { id: placeIconItem anchors.left: parent.left anchors.leftMargin: 5 source: icon } PlasmaComponents.Label { id: placeNameLabel anchors.left: placeIconItem.right anchors.leftMargin: 10 text: name font.pointSize: 12 } PlasmaComponents.ProgressBar { id: placeFreeSizeProgressBar anchors.top: placeNameLabel.bottom anchors.left: placeNameLabel.left width: placeNameLabel.width height: 10 value: kBUsed / kBSize opacity: 0 } } } } PlasmaExtras.ScrollArea { id: entriesScrollArea anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right anchors.horizontalCenter: plasmoidItem.horizontalCenter height: 40 * (entriesListView.count + 1) flickableItem: ListView { id: entriesListView highlightRangeMode: ListView.NoHighlightRange orientation: ListView.Vertical focus: true clip: true model: sortedEntriesDataModel delegate: listViewItemTemplate header: PlasmaComponents.Switch { id: entriesHeaderSwitch anchors.top: parent.top anchors.left: parent.left anchors.right: devicesHeaderLabel.left text: i18n("Places") checked: true } highlight: Rectangle { id: highlightListViewItem anchors.left: parent.left color: "lightgrey"; radius: 6; opacity: 0.6 } } } }

या बाहरी रूप से इस तरह (मेरे मामले में):

कोड को चिपकाया जा सकता है और प्लास्मेट में चिपकाया जा सकता है।

दुर्भाग्य से, पोस्ट बहुत व्यापक थी, इसलिए इसे जारी रखा जाना था!

संदर्भ

केडीई एपीआई
प्लाज्मा रनटाइम एपीआई

मदद

# प्लाज्मा , # kde @ irc.freenode.net

PS मैं बग को उस विशेषता "संरेखित: 'केंद्र' के साथ नहीं समझ सकता हूं - जिसके बाद यह पाठ भी केंद्रित हो जाता है और \ n के बाद भटक नहीं जाता है, \ n" \ _ \ _ \ _ \ _ \ _ \ _ के बाद भटक जाता है, "जिसके परिणामस्वरूप मेरा पद भरा हुआ दिखता है।

शुद्ध QML और जावास्क्रिप्ट में प्लास्माइड