हाइब्रिड Qt क्विक और C ++ एप्लिकेशन बनाना

शुभ दोपहर,% उपयोगकर्ता नाम%!

थोड़ा पृष्ठभूमि:

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

एक रूपरेखा बनाना

तो, मेरे काम पर क्यूटी Sdk स्थापित करने के अंतिम सेकंड, हम शुरू करते हैं।
QtCreator खोलें, "GUI Qt एप्लिकेशन" प्रकार का एक नया प्रोजेक्ट बनाएं। इस विज़ार्ड विंडो में एक निर्देशिका, एक नाम चुनें, यहाँ:

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

#include #include <QtDeclarative / QDeclarativeContext>
#include <QtDeclarative / QDeclarativeView>

मेनविंडो क्लास के कंस्ट्रक्टर में, निम्नलिखित बदलाव करें:

MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
{
QDeclarativeView* dv = new QDeclarativeView();
dv->setSource(QUrl("qrc:/main.qml"));
QDeclarativeContext* cntx = dv->rootContext();
cntx->setContextProperty("window",this);

dv->setResizeMode(QDeclarativeView::SizeRootObjectToView);
setCentralWidget(dv);
}

मुझे थोड़ा समझाने दें - हम QDeclarativeView प्रकार का एक विजेट बनाते हैं - यह एक ऐसा तत्व है जो QML प्रदर्शित कर सकता है। फिर हम रूट QML तत्व का नाम सेट करते हैं - main.qml, जो उन संसाधनों से लिया जाता है जिन्हें हम बाद में जोड़ते हैं। तब हमें एक नया "विंडो" गुण जोड़ने के लिए विजेट संदर्भ मिलता है। अब QML से विंडो नामक ऑब्जेक्ट तक पहुंचना संभव होगा - यह हमारा फॉर्म है। इसकी आवश्यकता क्यों है यह थोड़ी देर बाद स्पष्ट हो जाएगा। आकार बदलने का तरीका नीचे सेट किया गया है - अब रूट QML तत्व विंडो को फिट करने के लिए आकार देगा, न कि इसके विपरीत। सेटपॉइंट्रलविजेट विधि QMainWindow के लिए एक केंद्रीय विजेट सेट करती है। हर कोई जो Qt में आया है, निस्संदेह इससे परिचित है।

हमारी परियोजना को QML फ़ाइल की आवश्यकता है जो ऊपर उल्लेखित थी। इसे जोड़ें:

अब इसी तरह संसाधन फ़ाइल जोड़ें:


यह स्वचालित रूप से खुलता है, नीचे क्लिक करें "जोड़ें" -> "पूर्वसर्ग जोड़ें", "/ नया / उपसर्ग 1" प्रकट होता है। हम सरलता के लिए केवल "/" मिटाते हैं और छोड़ते हैं। अब वहाँ main.qml फ़ाइल जोड़ें ("जोड़ें" -> "फ़ाइल जोड़ें")। एक और छोटी बात - एक परिवर्तन * .pro फ़ाइल में किए जाने की आवश्यकता है
क्यूटी + = कोर घोषणात्मक
इस सरल तरीके से, हम QtDeclarative4 पुस्तकालय पर निर्भर करने के लिए परियोजना को उजागर करते हैं

अब आप सुरक्षित रूप से परियोजना शुरू कर सकते हैं और देख सकते हैं ... सफेद वर्ग 62 से 100 है :) लेकिन उपस्थिति धोखा दे रही है - वास्तव में यह सफेद वर्ग की तुलना में बहुत अधिक है, यह एक ऐसा अनुप्रयोग है जिसका इंटरफ़ेस QML में लिखा गया है, और C ++ में तर्क।
कुछ इस तरह से किसी भी एप्लिकेशन का निर्माण शुरू हो जाता है जो Qt क्विक और C ++ का हाइब्रिड होगा। मुख्य बिंदु QDeclarativeView विजेट का मूल संदर्भ है, C ++ ऑब्जेक्ट तक पहुंचने के लिए एक नई संपत्ति जोड़ रहा है। यह संपत्ति QML और C ++ के बीच एक प्रकार का पुल बन जाएगा।

एक इंटरफ़ेस और तर्क बनाना

तो, आधार बनाने के चरण को पारित किया जाता है, अब काम का तर्क।
Mainwindow.h फ़ाइल में, वर्ग विवरण में जोड़ें
public slots:
QString slotEncode(QString sIn);
QString slotDecode(QString sIn);
bool slotCheck(int val);

नाम से, यह स्पष्ट है कि पहले दो स्लॉट एन्कोडिंग और डिकोडिंग से निपटेंगे। दोनों इनपुट स्ट्रिंग को स्वीकार करेंगे जो उपयोगकर्ता क्यूएमएल में प्रवेश करता है, और क्रमशः, एन्कोडेड या डीकोड किया गया संस्करण। सामान्य कार्यों के बजाय स्लॉट क्यों हैं? क्योंकि यह स्लॉट है, साथ ही साथ Q_INVOKABLE मैक्रो (अधिक विवरण के लिए दस्तावेज़ देखें) का उपयोग करते हुए घोषित किए गए फ़ंक्शंस, जो सेटकेनटेक्प्रोपरेट्टी () का उपयोग करके दिखाई देने वाली किसी वस्तु तक पहुंचकर क्यूएमएल से बुलाए जा सकते हैं। सीधे शब्दों में, आप QML :) में window.slotEncode () लिख सकते हैं। इसके अलावा, Q_PROPERTY मैक्रो का उपयोग करते हुए घोषित सभी गुण QML कोड से सुलभ हैं - उन्हें सीधे नाम से एक्सेस किया जा सकता है।

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

अब यह केवल प्रोग्राम इंटरफ़ेस बनाने के लिए बनी हुई है :)
शायद मैं इंटरफ़ेस के उस संस्करण को छोड़ दूंगा, जो लगभग 15 मिनट में दुनिया के एक रचनात्मक दृश्य के बिना एक साधारण प्रोग्रामर द्वारा किया जाता है (हालांकि मेरी प्रेमिका, एक कलाकार, आमतौर पर मुझे ऐसी चीजें करने में मदद करती है):
import QtQuick 1.0

Rectangle {
width: 365
height: 200
gradient: Gradient {
GradientStop {
position: 0
color: "#696363"
}

GradientStop {
position: 1
color: "#000000"
}
}

Text {
id: text1
x: 37
y: 27
color: "#fbfbfb"
text: " "
style: Text.Raised
font.pixelSize: 12
}

Text {
id: text2
x: 198
y: 27
color: "#ffffff"
text: " "
style: Text.Raised
font.pixelSize: 12
}

// .
Rectangle {
color: "#4de013"
radius: 6
border.width: 5
border.color: "#f5f9f4"
x: 36
y: 66
width: 133
height: 20
TextInput {
id: text_input1
width: parent.width - 20
height: parent.height - 5
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
text: ""

font.pixelSize: 12
}
}

// .
Rectangle {
color: "#48c819"
radius: 6
border.width: 5
border.color: "#f5f9f4"
width: 133
height: 20
x: 201
y: 66
TextInput {
id: text_input2
width: parent.width - 20
height: parent.height - 5
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
text: ""
font.pixelSize: 12
}
}

// .
Rectangle {
id: bEncode
property alias text: label.text

width: 135
height: 60
radius: 20
border.width: 2
border.color: "#090606"

gradient: Gradient {
GradientStop {
id: gradientstop1
position: 0.01
color: "#ffffff"
}

GradientStop {
id: gradientstop2
position: 0.28
color: "#867d7d"
}

GradientStop {
id: gradientstop3
position: 1
color: "#000000"
}
}

signal clicked()
x: 36
y: 110

Text {
id: label
color: "#ffffff"
text: ""
font.strikeout: false
font.pointSize: 10
horizontalAlignment: Text.AlignHCenter
anchors.centerIn: parent
}

MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: {
text_input2.text = window.slotEncode(text_input1.text)
}
onEntered: {
bEncode.state = "green"
}
onExited: {
bEncode.state = "gray"
}
}
states: [
State {
name: "gray"
},
State {
name: "green"

PropertyChanges {
target: gradientstop1
color: "#ffffff"
}

PropertyChanges {
target: gradientstop2
color: "#34c22a"
}

PropertyChanges {
target: gradientstop3
color: "#000000"
}
}
]

}

// .
Rectangle {
id: bDecode
property alias text: label.text

width: 136
height: 60
radius: 20
border.width: 2
border.color: "#090606"

gradient: Gradient {
GradientStop {
id: gradientstop21
position: 0.01
color: "#ffffff"
}

GradientStop {
id: gradientstop22
position: 0.28
color: "#867d7d"
}

GradientStop {
id: gradientstop23
position: 1
color: "#000000"
}
}

signal clicked()
x: 200
y: 110

Text {
id: label2
text: ""
color: "#ffffff"
font.strikeout: false
font.pointSize: 10
horizontalAlignment: Text.AlignHCenter
anchors.centerIn: parent
}

MouseArea {
id: mouseArea2
anchors.fill: parent
hoverEnabled: true
onClicked: {
text_input1.text = window.slotDecode(text_input2.text)
}
onEntered: {
bDecode.state = "green"
}
onExited: {
bDecode.state = "gray"
}
}
states: [
State {
name: "gray"
},
State {
name: "green"

PropertyChanges {
target: gradientstop21
color: "#ffffff"
}

PropertyChanges {
target: gradientstop22
color: "#34c22a"
}

PropertyChanges {
target: gradientstop23
color: "#000000"
}
}
]

}
}



मुझे बिल्कुल भी यकीन नहीं है कि वाक्य रचना को सही ढंग से उजागर किया जाएगा - चलो आशा करते हैं कि जावास्क्रिप्ट के साथ समानता एक सकारात्मक भूमिका निभाएगी!

स्रोत से लिंक करें - Tyk!

काम का परिणाम:

एक छोटा सा सारांश

हमारे काम का परिणाम एक हाइब्रिड अनुप्रयोग था। भविष्य में, ऐसे अनुप्रयोगों का निर्माण गैर-मानक QtQuick इंटरफ़ेस को उच्च-प्रदर्शन C ++ कोड के साथ संयोजन करने की अनुमति देता है। मुझे उम्मीद है कि यह लेख इन प्रौद्योगिकियों में रुचि रखने वालों के लिए उपयोगी होगा, क्योंकि प्रश्न "क्यूटी क्विक पर साहित्य दें" अधिक आम हो रहे हैं। आपका ध्यान के लिए धन्यवाद!