👩🏽‍⚖️ 😪 🔮 डेस्कटॉप के लिए क्यूटी घटक 👩🏽‍🏫 🔞 🏾

यह पोस्ट " स्मार्ट फोन फॉर स्मार्ट पोस्ट " प्रतियोगिता में भाग ले रही है।

जैसा कि आप जानते हैं, QML ग्राफिक प्राइमिटिव पर आधारित है और यहां तक कि तुच्छ बटन भी उन्हें (आयत, ढाल, पाठ, माउस क्षेत्र, उदाहरण के लिए) से खींचना होगा। UI बनाने की प्रक्रिया को सुविधाजनक बनाने के लिए Qt Components का निर्माण किया गया। वे आपको डेटा दर्ज करने या प्रदर्शित करने के लिए बटन, टेक्स्ट फ़ील्ड, ड्रॉपबॉक्स और अन्य नियंत्रण बनाने की अनुमति देते हैं। आधिकारिक रिलीज में, के लिए घटक
मोबाइल प्लेटफ़ॉर्म: सिम्बियन और MeeGo। लेकिन क्यूटी लैब्स के पास डेस्कटॉप प्लेटफॉर्म के लिए एक संस्करण भी है, जो (कुछ समय बाद) Qt5 में शामिल किया जाएगा, एक यूजर इंटरफेस बनाने के मुख्य साधन के रूप में (जैसा कि हम याद करते हैं, QML Qt5 में पहले नंबर पर आता है, और QtGui दूसरे स्थान पर आता है)। उसी समय, घटक स्वयं ऑपरेटिंग सिस्टम के मूल स्वरूप के अनुकूल होते हैं।

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

बिल्ली के तहत, 3 ऑपरेटिंग सिस्टम के तहत लॉन्च किया जाता है और विषय पर कुछ चर्चाएं एकत्र की जाती हैं।

तो, कैलकुलेटर में विभिन्न बटन के साथ एक डिस्प्ले और दो टैब शामिल हैं: एक साधारण सेट (ऊपर स्क्रीनशॉट में) और एक उन्नत।

हम पहले कोड से निपटेंगे।

क्यूटी घटक कैलकुलेटर

घटकों के साथ काम करते समय जानने वाली पहली और सबसे दिलचस्प बात यह है कि वे QmlApplicationViewer या QDeclarativeView का स्पष्ट रूप से उपयोग नहीं करते हैं। Qml फ़ाइल QDeclarativeEngine के माध्यम से लॉन्च की गई है । और अब घटक स्वयं एक QDeclarativeView बनाते हैं जब इसकी आवश्यकता होती है (जो कि, जब एक नई विंडो बनाई जाती है)। काम को सुविधाजनक बनाने के लिए, QmlDesktopViewer वर्ग घटक रिपॉजिटरी में है , जो आपके प्रोजेक्ट को सामान्य स्रोत के पेड़ से जोड़कर और main.cpp में इसका उपयोग करके कनेक्ट करना आसान है।

#include <QtGui/QApplication> #include "qmldesktopviewer.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); QmlDesktopViewer *viewer = new QmlDesktopViewer(); viewer->open("qrc:/main.qml"); QObject::connect(&app, SIGNAL(lastWindowClosed()), viewer, SLOT(quit())); return app.exec(); }

अब QML की ओर मुड़ते हैं। मुख्य .qml फ़ाइल बनाएँ, जो अनुप्रयोग शुरू होने पर लॉन्च की जाएगी

 import QtQuick 1.1 import QtDesktop 0.1 Window { function buttonPressed(name, offset) { var text = display.text var pos = display.cursorPosition display.text = text.substr(0,pos) + name + text.substr(pos) display.cursorPosition = pos+name.length-offset } title: "Calc on Components" width: 400 height: 600 maximumHeight: 900 minimumHeight: 250 maximumWidth: 1000 minimumWidth: 300 visible: true id: mainWindow TextField { id: display anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right anchors.margins: 4 height: 60; font.pixelSize: 40 } TabFrame { id: frame position: "North" anchors.top: display.bottom anchors.left: parent.left anchors.right: parent.right anchors.bottom: parent.bottom anchors.margins: 4 Tab { id: simpleTab title: "Simple" anchors.margins: 4 CalcButtonRow { anchors.left: parent.left anchors.right: parent.right height: parent.height/4 anchors.top: parent.top names: ["7","8","9","+"] onButtonPressed: mainWindow.buttonPressed(name, 0) } //  3  } //   } Component.onCompleted: display.focus = true }

मैंने स्रोत को थोड़ा कम कर दिया, लेकिन इस फ़ाइल में कुल 125 लाइनें हैं।

तो, यहाँ मुख्य तत्व विंडो है । यह सिर्फ एक QDeclarativeView बनाता है, जो इसके सभी तत्वों को प्रदर्शित करता है। विंडो के लिए, आप शीर्षक, ऊंचाई, चौड़ाई, अधिकतम और न्यूनतम ऊंचाई और चौड़ाई, दृश्यता सेट कर सकते हैं। सामान्य तौर पर, खिड़की के लिए मानक सेट। विंडो में पहला तत्व हमारी डिस्प्ले है, जिसे TextField पर लागू किया गया है। अगर किसी ने मोबाइल Qt Components पर विकसित किया है, तो यह तत्व परिचित होना चाहिए। इसमें लगभग मोबाइल उपकरणों की तरह ही एपीआई है।

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

इस मामले में CalcButtonRow हमारा घटक है जिसमें 4 बटन होते हैं ( नाम संपत्ति के माध्यम से पारित किए गए नामों के साथ ) और उन्हें चौड़ाई और ऊंचाई में फैलाते हैं ताकि बटन टैब के पूरे स्थान पर कब्जा कर लें (प्रदर्शन QtGui में टैब विजेट पर QGridLayout का एक एनालॉग बन जाता है)। समाधान माथे पर है और उत्पादन में कई समस्याओं के अधीन है, लेकिन यह परीक्षण के लिए करेगा।

 import QtQuick 1.0 import QtDesktop 0.1 Item { signal buttonPressed(string name) property variant names: ["","","",""] Button { anchors.left: parent.left anchors.top: parent.top anchors.bottom: parent.bottom width: parent.width/4 text: names[0] onClicked: buttonPressed(text) } // 3  }

मैंने स्रोत कोड फिर से घटाया (मूल में 43 लाइनें)। पार्श्व बटन पक्षों पर स्थित हैं, केंद्रीय बटन - मूल तत्व के केंद्र में। मूल तत्व की एक चौथाई चौड़ाई के साथ सभी 4।
यहां हम बटन तत्व से मिलते हैं, जिसे मोबाइल घटकों से भी परिचित होना चाहिए। बटन क्लिक हैंडलर में, हम अपने तत्व से बटन पर लिखे टेक्स्ट के साथ एक सिग्नल का उत्सर्जन करते हैं।

चलिए वापस main.qml पर चलते हैं

 //    function buttonPressed(name, offset) { var text = display.text var pos = display.cursorPosition display.text = text.substr(0,pos) + name + text.substr(pos) display.cursorPosition = pos+name.length-offset } //     onButtonPressed: mainWindow.buttonPressed(name, 0) //      (sin(), cos()  ..) onButtonPressed: mainWindow.buttonPressed(name, 1)

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

यह ENTIRE कोड है। कुल मिलाकर, लगभग 160 qml लाइनें निकलीं।
QtGui में लिखे गए समान कोड (एक डिजाइनर के बिना, लूप में कंस्ट्रक्टर में सभी वस्तुओं की पीढ़ी के साथ, QSignalMapper और ऐसे रूपों के लिए कोड को कम करने के अन्य तरीके) ने c ++ कोड (main.cpp को छोड़कर) की लगभग 130 लाइनें लीं।

यानी कोड की मात्रा लगभग बराबर है। आइए विभिन्न ओएस में परिणाम देखें

लिनक्स केडीई 4

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

विंडोज 7

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

मैक ओएस एक्स 10.6

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

QLineEdit के लिए यह आवश्यक था कि वह न्यूनतम न्यूनतम निर्दिष्ट करें। QML संस्करण को फिर से नहीं बनाया गया है।

QtGui के बजाय QML का उपयोग करने से अच्छा है

आप पूछते हैं कि हमें इन घटकों की आवश्यकता क्यों है, अगर QtGui है। जवाब आसान है। अधिक सुखद और समृद्ध इंटरफ़ेस बनाने के लिए। मैं वस्तुओं को बदलते समय गतिज स्क्रॉलिंग, सुंदर एनिमेशन जैसी प्रसिद्ध विशेषताओं के बारे में बात नहीं करूंगा।

कैलकुलेटर यूआई में क्या जोड़ा जा सकता है? पहली बात जो मन में आती है वह दर्ज किए गए पाठ पर प्रदर्शन पर फ़ॉन्ट आकार की निर्भरता है। अधिक पाठ, छोटा फ़ॉन्ट। इसके लिए हमारे TextField को डिस्प्ले पर बदलें

  TextField { function adaptFontSize() { var width = display.width var length = display.text.length var newFontSize = 40 if (width/26 < length) { newFontSize = 1.5*(display.width/display.text.length) if (newFontSize < 20) newFontSize = 20 } display.font.pixelSize = newFontSize } id: display anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right anchors.margins: 4 height: 60; font.pixelSize: 40 onWidthChanged: adaptFontSize() onTextChanged: adaptFontSize() Behavior on font.pixelSize { NumberAnimation{easing: Easing.OutElastic; duration: 200}} }

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

आप कई और उदाहरणों के साथ आ सकते हैं जहां QML डेस्कटॉप UI एप्लिकेशन बनाना आसान बनाता है।

डेस्कटॉप के लिए क्यूटी अवयवों की वर्तमान स्थिति

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

QtGui के बजाय घटकों का उपयोग करने के पेशेवरों और विपक्ष

पेशेवरों:

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

विपक्ष:

यह अभी भी गहरा अल्फ़ा है, बहुत छोटा और बहुत अधिक बग प्रदर्शित नहीं करता है
डेटा लेयर के साथ सहभागिता की जटिलता (घोषणात्मक संदर्भ, प्लग इन और अन्य तरीकों के गुण)
उन लोगों के लिए असामान्य जो QML के साथ सौदा नहीं करते थे
शायद सभी नहीं (और मुझे संदेह है कि रिलीज में भी वे QtGui की सभी कार्यक्षमता का समर्थन करेंगे)

डेस्कटॉप के लिए क्यूटी घटक