👱 🙆🏻 👩🏻‍🤝‍👨🏼 QML इंजन के इंटर्नल्स। भाग 2: बाइंडिंग 🖨️ 🤞🏿 👨🏿‍⚕️

यह पोस्ट इस ( अनुवादित ) लेख का एक निरंतरता है।

पिछली पोस्ट में, हमने देखा कि QML इंजन फ़ाइलों को कैसे लोड करता है। आपको याद दिला दूं कि पहले QML फाइल को पार्स किया जाता है, फिर एक इंटरमीडिएट बाइट कोड में संकलित किया जाता है, और अंत में बाइट कोड निर्देश के बाद, प्रत्येक QML फ़ाइल में प्रत्येक ईवेंट के लिए C ++ ऑब्जेक्ट बनाया जाता है। उदाहरण के लिए, हमने देखा कि जब QML फ़ाइल में कोई पाठ तत्व होता है, तो इंजन C ++ QQuickText वर्ग का एक उदाहरण बनाता है।

वास्तव में, फ़ाइलों को डाउनलोड करना लगभग सब कुछ है जो क्यूएमएल इंजन करता है। डाउनलोड करने के बाद, यह आवेदन प्रक्रिया में हस्तक्षेप करना बंद कर देता है। रनटाइम में इवेंट हैंडलिंग और रेंडरिंग तत्व पूरी तरह से C ++ के साथ टिकी हुई है। उदाहरण के लिए, एक TextInput तत्व जैसी घटनाओं को संभालता है QQuickTextInput :: keyPressEvent () और QML इंजन की भागीदारी के बिना, QQuickTextInput :: updatePaintNode () अपडेट।

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

एक उदाहरण:

import QtQuick 2.0 Rectangle { width: 300 height: 300 color: "lightsteelblue" Text { anchors.centerIn: parent text: "Window Area: " + (parent.width * parent.height) } }

इस उदाहरण में दो प्रकार के गुण सम्‍मिलित हैं:

एक साधारण संपत्ति असाइनमेंट, जैसे कि C ++ क्लास QQuickRectangle के आयत तत्व की चौड़ाई संपत्ति के लिए 300 का मान असाइन करना। इस मामले में, VME केवल इस घटक को बनाने के लिए STORE_DOUBLE बायोटेक निर्देश निष्पादित करता है। VME केवल फ़ंक्शन QMetaObject :: metacall (QMetaObject :: WriteProperty, ...) को कॉल करता है , जो अंततः QQuickRectangle :: SetWidth () पर कॉल के साथ समाप्त होता है। इस असाइनमेंट के बाद। QML इंजन केवल इस असाइनमेंट के बारे में भूल जाता है।
एक बाध्यकारी असाइनमेंट, जैसे ऊपर दिए गए उदाहरण में, "विंडो एरिया:" + (पेरेंट.विवेक * पैरेंट.हाईट) को टेक्स्ट प्रॉपर्टी या पैरेंट को सेंटर इन प्रॉपर्टी में। बाइंडिंग के जादू के लिए धन्यवाद, जब भी आयत तत्व की ऊंचाई या चौड़ाई में कोई बदलाव होता है, तो टेक्स्ट प्रॉपर्टी अपने आप अपडेट हो जाएगी। यह कैसे काम करता है? कोई जादू नहीं, जवाब खोजने के लिए पर पढ़ें।

बाइंडिंग बनाएं

यदि हम QML_COMPILER_DUMP = 1 पैरामीटर सेट करते हैं, तो हम देखेंगे कि बाइंडर्स STORE_COMPILED_BINDING स्टेटमेंट द्वारा बनाए गए हैं:

 ... 9 STORE_COMPILED_BINDING 43 1 0 10 FETCH 19 11 STORE_COMPILED_BINDING 17 0 1 ...

संकलित बाइंडिंग, यह वास्तव में एक अनुकूलित विकल्प है। चलिए STORE_BINDING स्टेटमेंट द्वारा बनाई गई सामान्य बाइंडिंग पर एक नज़र डालते हैं। QQmlVME :: रन () फ़ंक्शन एक QQmlBinding ऑब्जेक्ट बनाता है, जिसके लिए यह फ़ॉर्म की एक स्ट्रिंग से गुजरता है

 function $text() { return “Window Area: ” + (parent.width * parent.height) }

जो एक JS अभिव्यक्ति है।

यह सही है, हर बंधन एक जावास्क्रिप्ट फ़ंक्शन है। फ़ंक्शन का एक भाग "फ़ंक्शन $ टेक्स्ट ()" क्यूएमएल कंपाइलर द्वारा जोड़ा गया है, इसलिए वी 8 , जो कि क्यूएमएल का जेएमएल इंजन है, जैसा कि आप अनुमान लगा सकते हैं, केवल जेएस कोड निष्पादित करते हैं। स्ट्रिंग फ़ंक्शन को फिर v8 :: v8 कंपाइलर द्वारा फंक्शन ऑब्जेक्ट में संकलित किया जाता है। वी 8 इंजन, अंतर्निहित जेआईटी संकलक के कारण , मूल कोड बनाता है। यह बनाए गए v8 :: फ़ंक्शन ऑब्जेक्ट को निष्पादित नहीं करता है, लेकिन इसे भविष्य के लिए बचाता है।

कुल: STORE_BINDING स्टेटमेंट निष्पादित करते समय, एक QQmlBinding ऑब्जेक्ट बनाया जाता है, जो इसके लिए पारित फ़ंक्शन को v8 में स्ट्रिंग के रूप में संकलित करता है :: इसके लिए अंतर्निहित V8 JS इंजन का उपयोग करके फ़ंक्शन ऑब्जेक्ट।

प्रदर्शन बंधन

कुछ बिंदु पर, हमारे बंधन को निष्पादित करने की आवश्यकता होगी, जिसका अर्थ है कि V8 को बाइंडिंग बॉडी के साथ इसे पारित करने वाले फ़ंक्शन को निष्पादित करना होगा और असाइनमेंट के परिणाम को लक्ष्य संपत्ति में असाइन करने के लिए वापस करना होगा। यह कॉल मुख्य रूप से निर्माण चरण के अंत में होता है, QQmlVME :: पूर्ण () फ़ंक्शन क्रमिक रूप से प्रत्येक बंधन के लिए अद्यतन () विधि को कॉल करता है। हमारे मामले में, QQmlBinding :: अद्यतन () फ़ंक्शन कहा जाता है । अद्यतन () विधि बस v8 :: फ़ंक्शन ऑब्जेक्ट की सामग्री को निष्पादित करती है और निष्पादन का परिणाम हमारी आयत की पाठ संपत्ति पर लिखती है।

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

 #0 QQuickItem::width (this=0x6d8580) at items/qquickitem.cpp:4711 #1 0x00007ffff78e592d in QQuickItem::qt_metacall (this=0x6d8580, _c=QMetaObject::ReadProperty, _id=8, _a=0x7fffffffc270) at .moc/debug-shared/moc_qquickitem.cpp:675 #2 0x00007ffff7a61689 in QQuickRectangle::qt_metacall (this=0x6d8580, _c=QMetaObject::ReadProperty, _id=9, _a=0x7fffffffc270) at .moc/debug-shared/moc_qquickrectangle_p.cpp:526 #3 0x00007ffff7406dc3 in ReadAccessor::Direct (object=0x6d8580, property=..., output=0x7fffffffc2c8, n=0x0) at qml/v8/qv8qobjectwrapper.cpp:243 #4 0x00007ffff7406330 in GenericValueGetter (info=...) at qml/v8/qv8qobjectwrapper.cpp:296 #5 0x00007ffff49bf16a in v8::internal::JSObject::GetPropertyWithCallback (this=0x363c64f4ccb1, receiver=0x363c64f4ccb1, structure=0x1311a45651a9, name=0x3c3c6811b7f9) at ../3rdparty/v8/src/objects.cc:198 #6 0x00007ffff49c11c3 in v8::internal::Object::GetProperty (this=0x363c64f4ccb1, receiver=0x363c64f4ccb1, result=0x7fffffffc570, name=0x3c3c6811b7f9, attributes=0x7fffffffc5e8) at ../3rdparty/v8/src/objects.cc:627 #7 0x00007ffff495c0f1 in v8::internal::LoadIC::Load (this=0x7fffffffc660, state=v8::internal::UNINITIALIZED, object=..., name=...) at ../3rdparty/v8/src/ic.cc:933 #8 0x00007ffff4960ff5 in v8::internal::LoadIC_Miss (args=..., isolate=0x603070) at ../3rdparty/v8/src/ic.cc:2001 #9 0x000034b88ae0618e in ?? () ... [more ?? frames from the JIT'ed v8::Function code] ... #1 0x00007ffff481c3ef in v8::Function::Call (this=0x694fe0, recv=..., argc=0, argv=0x0) at ../3rdparty/v8/src/api.cc:3709 #2 0x00007ffff7379afd in QQmlJavaScriptExpression::evaluate (this=0x6d7430, context=0x6d8440, function=..., isUndefined=0x7fffffffcd23) at qml/qqmljavascriptexpression.cpp:171 #3 0x00007ffff72b7b85 in QQmlBinding::update (this=0x6d7410, flags=...) at qml/qqmlbinding.cpp:285 #4 0x00007ffff72b8237 in QQmlBinding::setEnabled (this=0x6d7410, e=true, flags=...) at qml/qqmlbinding.cpp:389 #5 0x00007ffff72b8173 in QQmlBinding::setEnabled (This=0x6d7448, e=true, f=...) at qml/qqmlbinding.cpp:370 #6 0x00007ffff72c15fb in QQmlAbstractBinding::setEnabled (this=0x6d7448, e=true, f=...) a /../../qtbase/include/QtQml/5.0.0/QtQml/private/../../../../../../qtdeclarative/src/qml/qml/qqmlabstractbinding_p.h:98 #7 0x00007ffff72dcb14 in QQmlVME::complete (this=0x698930, interrupt=...) at qml/qqmlvme.cpp:1292 #8 0x00007ffff72c72ae in QQmlComponentPrivate::complete (enginePriv=0x650560, state=0x698930) at qml/qqmlcomponent.cpp:919 #9 0x00007ffff72c739b in QQmlComponentPrivate::completeCreate (this=0x698890) at qml/qqmlcomponent.cpp:954 #10 0x00007ffff72c734c in QQmlComponent::completeCreate (this=0x698750) at qml/qqmlcomponent.cpp:947 #11 0x00007ffff72c6b2f in QQmlComponent::create (this=0x698750, context=0x68ea30) at qml/qqmlcomponent.cpp:781 #12 0x00007ffff79d4dce in QQuickView::continueExecute (this=0x7fffffffd2f0) at items/qquickview.cpp:445 #13 0x00007ffff79d3fca in QQuickViewPrivate::execute (this=0x64dc10) at items/qquickview.cpp:106 #14 0x00007ffff79d4400 in QQuickView::setSource (this=0x7fffffffd2f0 at items/qquickview.cpp:243 #15 0x0000000000400d70 in main ()

हम देखते हैं कि qv8qobjectwrapper.cpp फ़ाइल में रैपर QObject :: qt_metacall (QMetaObject :: ReadProperty, ...) फ़ंक्शन को आवश्यक संपत्ति का मूल्य बताता है । रैपर (रैपर ऑब्जेक्ट) को V8 :: फंक्शन में संकलित V8 कोड से बुलाया गया था। दुर्भाग्य से, उत्पन्न मशीन कोड में कॉल स्टैक नहीं है, इसलिए GDB यह दिखाने में सक्षम नहीं है कि क्या हो रहा है ?? । मैंने आपको थोड़ा धोखा दिया और दो अलग-अलग कॉल स्टैक्स के ऊपर दिखाया, जो लाइन नंबरिंग में थोड़ा अंतर बताता है।

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

तो, बाध्यकारी V8 :: फ़ंक्शन कोड चलाकर किया जाता है। V8 इंजन Qt से रैपर कॉल करके अज्ञात वस्तुओं और गुणों तक पहुंच प्राप्त करता है। V8 :: फ़ंक्शन का परिणाम लक्ष्य संपत्ति को लिखा जाता है।

बाइंडिंग अद्यतन

खैर, अब हम जानते हैं कि पाठ संपत्ति का मूल अर्थ कैसे निकला। इसे अपडेट करने के बारे में क्या? क्यूएमएल इंजन को कैसे पता चलता है कि माता-पिता की आयत की ऊंचाई या चौड़ाई में परिवर्तन होने पर इस संपत्ति को अपडेट करने की आवश्यकता है?

इस प्रश्न का उत्तर उसी ऑब्जेक्ट रैपर में रहता है, जिसे आप याद करते हैं, जब वी 8 को संपत्ति तक पहुंचने की आवश्यकता होती है। हमारा रैपर संपत्ति के मूल्य को वापस करने की तुलना में थोड़ा अधिक करता है: यह उन सभी संपत्तियों को दर्ज करता है जिन्हें एक्सेस करने का अनुरोध किया गया था। अनिवार्य रूप से, जब किसी संपत्ति तक पहुंच होती है, तो रैपर स्नैप-कैप्चर फ़ंक्शन को कॉल करता है जो वर्तमान में चल रहा है। हमारे उदाहरण में, यह QQmlJavaScriptExpression :: GuardCapture :: CaptureProperty () (QQmlBinding QQmlJavaScriptExpression वर्ग का एक उपवर्ग है)।

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

उदाहरण के लिए, यहाँ QQuickItem वर्ग में चौड़ाई की संपत्ति की घोषणा है:

 Q_PROPERTY(qreal width READ width WRITE setWidth NOTIFY widthChanged)

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

सेल्फ डिफाइंड प्रॉपर्टीज में NOTIFY सिग्नल होना बहुत जरूरी है और जब भी हमारी प्रॉपर्टी बदलती है तो उसे भेजें। यदि आप ऐसा करना भूल जाते हैं, तो बंधन को फिर से शुरू नहीं किया जाएगा, और तदनुसार, संपत्ति का बंधन सही ढंग से काम नहीं करेगा। दूसरी ओर, यदि उस समय एक NOTIFY संकेत भेजा जाता है जब संपत्ति को नहीं बदला गया है, तो बंधन निष्क्रिय काम करेगा।

संक्षेप में: जब किसी संपत्ति का उपयोग करते हैं, तो आवरण वस्तु बाइंडिंग से कैप्चर फ़ंक्शन को कॉल करती है, जो इस बाइंडिंग को संपत्ति के NOTIFY सिग्नल से जोड़ता है, ताकि जब संपत्ति में परिवर्तन हो, तो बंधन फिर से किया जाता है ...

निष्कर्ष

आज हमने देखा कि QML में बाइंडिंग कैसे काम करती है। संक्षेप में: बाइंडिंग एक JS फ़ंक्शन है जिसे हर बार इसमें शामिल गुणों को निष्पादित किया जाता है।

मुझे उम्मीद है कि यह लेख आपके लिए दिलचस्प था, उदाहरण के लिए, बाइंडिंग के आंतरिक तर्क का अध्ययन करना मेरे लिए बहुत दिलचस्प था।

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

QML इंजन के इंटर्नल्स। भाग 2: बाइंडिंग

बाइंडिंग बनाएं

प्रदर्शन बंधन

बाइंडिंग अद्यतन

निष्कर्ष

More articles: