👨🏼‍🚀 🗡️ 🛍️ मॉडल-क्यूएमएल में देखें। भाग एक: पूर्वनिर्मित घटक दृश्य 🕖 👵🏽 👩🏻

क्यूएमएल में मॉडल-व्यू के बारे में लेखों की मेरी श्रृंखला के इस भाग में, हम अभ्यावेदन को देखना शुरू करेंगे और उन लोगों के साथ शुरू करेंगे जो तैयार घटकों के आधार पर बने हैं।

QML में मॉडल-दृश्य:

मॉडल-क्यूएमएल में देखें। भाग शून्य, परिचयात्मक
मॉडल-क्यूएमएल में देखें। भाग एक: पूर्वनिर्मित घटक दृश्य
मॉडल-क्यूएमएल में देखें। भाग दो: कस्टम दृश्य
मॉडल-क्यूएमएल में देखें। भाग तीन: QML और जावास्क्रिप्ट में मॉडल
मॉडल-क्यूएमएल में देखें। भाग चार: सी ++ मॉडल

एमवीसी में प्रतिनिधित्व डेटा मैपिंग प्रदान करता है। यह उस प्रोग्राम का हिस्सा है जो यह निर्धारित करता है कि डेटा कैसे दिखेगा और आखिरकार, उपयोगकर्ता क्या देखेगा।

मैंने पहले ही कहा है कि Qt में एक दृश्य के कार्यान्वयन की एक महत्वपूर्ण विशेषता है: यहां का दृश्य नियंत्रण के साथ संयुक्त है। ऐसा क्यों किया जाता है? ग्राफिकल इंटरफेस में, अक्सर डेटा प्रदर्शित करने और इसे बदलने के लिए समान तत्व जिम्मेदार होते हैं। एक उदाहरण टेबल प्रोसेसर है। प्रत्येक सेल न केवल डेटा प्रदर्शित करता है, बल्कि उनके परिवर्तन के लिए भी जिम्मेदार है, जिसका अर्थ है कि यह न केवल प्रस्तुति के कार्य करता है, बल्कि नियंत्रण भी करता है। इसलिए उन्हें एक तत्व में संयोजित करने का निर्णय काफी तार्किक है।

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

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

क्यूएमएल में, सब कुछ बिल्कुल समान है सिवाय इसके कि प्रतिनिधि सभी मॉडलों के लिए डेटा संपादित नहीं कर सकते हैं (और प्रलेखन में मॉडल डेटा को संपादित करने की बहुत संभावना नहीं है)।

संक्षेप में, QML में एक दृश्य के तीन कार्य हैं:

मॉडल में प्रत्येक आइटम के लिए प्रतिनिधि उदाहरण बनाएँ
इन तत्वों को इच्छानुसार व्यवस्थित करें;
तत्वों के माध्यम से नेविगेशन प्रदान करते हैं।

1. सूची

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

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

1) सरल उपयोग के मामले

सूची दृश्य (और अधिकांश अन्य दृश्य) में वर्तमान आइटम की अवधारणा है। कौन सा वर्तमान तत्व CurrentIndex संपत्ति द्वारा निर्धारित किया गया है और वर्तमान तत्व currentItem संपत्ति के माध्यम से सुलभ है। साथ ही, प्रत्येक प्रतिनिधि के पास एक संलग्न ListView.isCurrentItem गुण है, जो इस तत्व के चालू होने पर सही होगा। यह हमें वर्तमान तत्व का चयन करने का अवसर देता है ताकि यह किसी तरह से अलग दिखाई दे।

इसके अलावा, सूची दृश्य वर्तमान आइटम को स्वयं उजागर कर सकता है। ऐसा करने के लिए, आपको एक घटक की आवश्यकता होगी जो हाइलाइट करेगा। सरलतम मामले में, यह एक रंगीन आयत होगी। वर्तमान आइटम को बदलते समय, सूची दृश्य हाइलाइट को स्थानांतरित कर देगा (यह व्यवहार अनुकूलित किया जा सकता है)।

एक सरल उदाहरण के साथ इस सब पर विचार करें।

import QtQuick 2.0 Rectangle { width: 360 height: 360 ListModel { id: dataModel ListElement { color: "orange" text: "first" } ListElement { color: "lightgreen" text: "second" } ListElement { color: "orchid" text: "third" } ListElement { color: "tomato" text: "fourth" } } ListView { id: view anchors.margins: 10 anchors.fill: parent spacing: 10 model: dataModel clip: true highlight: Rectangle { color: "skyblue" } highlightFollowsCurrentItem: true delegate: Item { id: listDelegate property var view: ListView.view property var isCurrent: ListView.isCurrentItem width: view.width height: 40 Rectangle { anchors.margins: 5 anchors.fill: parent radius: height / 2 color: model.color border { color: "black" width: 1 } Text { anchors.centerIn: parent renderType: Text.NativeRendering text: "%1%2".arg(model.text).arg(isCurrent ? " *" : "") } MouseArea { anchors.fill: parent onClicked: view.currentIndex = model.index } } } } }

हम यह निर्धारित करने के लिए प्रतिनिधि में संलग्न संपत्ति ListView.isCurrentItem का उपयोग करते हैं कि क्या यह आइटम चालू है और वर्तमान आइटम में पाठ के अलावा एक तारांकन चिह्न (*) प्रदर्शित करता है। ताकि तत्व पर क्लिक करके यह खुद को चालू कर सके, हमें सूची दृश्य ऑब्जेक्ट तक पहुंच की आवश्यकता है और हम इसे सूची दृश्य संपत्ति का उपयोग करके प्राप्त करते हैं। यहां, इस संपत्ति का उपयोग प्रदर्शन के लिए किया जाता है, इसका उपयोग करना आवश्यक नहीं है, और आप इस ऑब्जेक्ट को सीधे एक्सेस कर सकते हैं, क्योंकि यह वस्तु पहले से ही प्रतिनिधि के दायरे में है। लेकिन अगर प्रतिनिधि को किसी अन्य qml फ़ाइल में परिभाषित किया गया है, तो ListView ऑब्जेक्ट अब प्रतिनिधि के दायरे में नहीं होगा और यह संपत्ति आपको इसे एक्सेस करने की अनुमति देगा।

बैकलाइट के रूप में, एक साधारण रंगीन आयत का उपयोग किया जाता है। इसका आकार ListView द्वारा सेट किया गया है और स्वयं इसे वर्तमान आइटम के पीछे ले जाता है।

कार्यक्रम को लॉन्च करके, हम माउस क्लिक के साथ वर्तमान तत्व को बदल सकते हैं और देख सकते हैं कि बैकलाइट इसके पीछे कैसे चलती है:

एक प्रतिनिधि में संलग्न संपत्तियों की दृश्यता के बारे में एक और महत्वपूर्ण बिंदु। मॉडल डेटा के विपरीत, संलग्न गुण केवल प्रतिनिधि में ही मान्य हैं, लेकिन इसके बाल वस्तुओं में नहीं। यानी हम पाठ तत्व में ListView.isCurrentItem का उपयोग नहीं कर सकते हैं। यह सुविधा स्पष्ट नहीं हो सकती है, यह देखते हुए कि संलग्न गुण स्वयं ऑब्जेक्ट में दिखाई दे रहे हैं और उन्हें एक्सेस करते समय कोई त्रुटि नहीं होगी। उदाहरण के लिए, आप माउसएयर में एक क्लिक पर हैंडलर को निम्न से बदल सकते हैं:

 onClicked: console.log(ListView.isCurrentItem)

और सभी तत्वों पर यह असत्य का उत्पादन करेगा, यहां तक कि वर्तमान पर भी।

एक प्रतिनिधि के बाल तत्वों से पहुंचने के लिए, आपको या तो स्पष्ट रूप से प्रतिनिधि के दायरे को उसकी आईडी के माध्यम से निर्दिष्ट करना होगा, अर्थात। listDelegate.ListView.isCurrentItem या इसके लिए एक मध्यवर्ती संपत्ति का उपयोग करें, जैसा कि समांतर संपत्ति का उपयोग करके उदाहरण में किया गया है।

पहला तरीका अच्छा है कि एक अतिरिक्त संपत्ति नहीं बनाई गई है। यदि प्रतिनिधि कार्यान्वयन को एक अलग QML फ़ाइल में ले जाया जाता है, तो दूसरी विधि का उपयोग किया जाना चाहिए। उदाहरण के लिए, यदि आप इसे ListDelegate.qml फ़ाइल में रखते हैं, तो आप निम्न कोड लिख सकते हैं:

 ListView { delegate: ListDelegate { isCurrent: ListView.isCurrentItem } }

यह आपको प्रतिनिधि दृश्य में सूची को बदले बिना ListView के प्रतिनिधि कार्यान्वयन में बाध्य नहीं करता है और प्रदर्शन (उदाहरण के लिए, पुनरावर्तक + कॉलम) को बदलने की अनुमति देता है।

ListView में, आप अतिरिक्त तत्वों को निर्दिष्ट कर सकते हैं जो सभी तत्वों के आरंभ में और अंत में प्रदर्शित होंगे। ऐसा करने के लिए, शीर्ष लेख और पाद लेख गुणों का उपयोग करें। हम इन तत्वों के साथ पिछले उदाहरण के पूरक हैं:

 header: Rectangle { width: view.width height: 40 border { color: "black" width: 1 } Text { anchors.centerIn: parent renderType: Text.NativeRendering text: "Header" } } footer: Rectangle { width: view.width height: 40 border { color: "black" width: 1 } Text { anchors.centerIn: parent renderType: Text.NativeRendering text: "Footer" } }

परिणामस्वरूप, हमें कुछ ऐसा मिलता है:

2) वर्गों

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

निम्नलिखित उदाहरण में इस पर विचार करें।

 import QtQuick 2.0 Rectangle { width: 360 height: 360 ListModel { id: dataModel ListElement { type: "bird" text: "penguin" } ListElement { type: "bird" text: "raven" } ListElement { type: "reptile" text: "lizard" } ListElement { type: "reptile" text: "turtle" } ListElement { type: "reptile" text: "crocodile" } } ListView { id: view anchors.margins: 10 anchors.fill: parent spacing: 10 model: dataModel clip: true section.property: "type" section.delegate: Rectangle { width: view.width height: 40 color: "lightgreen" Text { anchors.centerIn: parent renderType: Text.NativeRendering font.bold: true text: section } } delegate: Rectangle { width: view.width height: 40 border { color: "black" width: 1 } Text { anchors.centerIn: parent renderType: Text.NativeRendering text: model.text } } } }

हम समूहीकरण के लिए प्रकार फ़ील्ड निर्दिष्ट करते हैं। तदनुसार, इस क्षेत्र के समान मूल्य वाले सभी तत्वों को एक समूह में जोड़ा जाता है। आप यह सुनिश्चित कर सकते हैं कि समूह उन तत्वों को जोड़ता है जिनका पहला अक्षर मेल खाता है (उदाहरण के लिए, पता पुस्तिका के लिए)। ऐसा करने के लिए, Section.criteria प्रॉपर्टी को ViewSection.FirstCharacter पर सेट किया जाना चाहिए।

कार्यक्रम चलाने पर, हमें निम्नलिखित परिणाम मिलते हैं:

3) प्रदर्शन के बारे में

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

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

क्यूटी के पांचवें संस्करण पर कुछ समय तक काम करने के बाद, मैंने किसी तरह इकट्ठे होकर चौथे संस्करण पर अपनी परियोजना शुरू की। और मैंने देखा कि स्क्रॉलिंग तत्व काफी पिछड़ जाते हैं। थोड़ा गहरा खोदते हुए, मैंने देखा कि Qt 5.0 में, डिफ़ॉल्ट कैशबफ़र 320 है, और Qt 4.8 में यह 0. है। कैश के आकार को बढ़ाकर, स्क्रॉल करना काफी आसान है। लेकिन यह इतना भी ध्यान देने योग्य है कि पांचवें संस्करण में उन्होंने तेजी लाने का अच्छा काम किया - चौथे संस्करण की तुलना में, यह अंतर नग्न आंखों को दिखाई देता है।

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

पूर्वगामी के आधार पर, प्रदर्शन के संबंध में दो निष्कर्ष दिए जा सकते हैं:

आपको न्यूनतम संख्या में बाइंडिंग (विशेष रूप से बाइंडिंग में जटिल जावास्क्रिप्ट अभिव्यक्तियों के लिए) के साथ सबसे हल्के प्रतिनिधि बनाने की आवश्यकता है;
यदि स्क्रॉल करने में कोई समस्या है, तो यह बफर के आकार के साथ प्रयोग करने योग्य है।

2. ग्रिड व्यू

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

GridView का उपयोग करने के लिए थोड़ा अनुकूलित पहला उदाहरण:

 import QtQuick 2.0 Rectangle { width: 360 height: 360 ListModel { id: dataModel ListElement { color: "orange" text: "first" } ListElement { color: "lightgreen" text: "second" } ListElement { color: "orchid" text: "third" } ListElement { color: "tomato" text: "fourth" } } GridView { id: view anchors.margins: 10 anchors.fill: parent cellHeight: 100 cellWidth: cellHeight model: dataModel clip: true highlight: Rectangle { color: "skyblue" } delegate: Item { property var view: GridView.view property var isCurrent: GridView.isCurrentItem height: view.cellHeight width: view.cellWidth Rectangle { anchors.margins: 5 anchors.fill: parent color: model.color border { color: "black" width: 1 } Text { anchors.centerIn: parent renderType: Text.NativeRendering text: "%1%2".arg(model.text).arg(isCurrent ? " *" : "") } MouseArea { anchors.fill: parent onClicked: view.currentIndex = model.index } } } } }

ListView के विपरीत, कोई रिक्ति गुण नहीं है। इसके बजाय, सेल आकार सेलहाइट और सेलविद का उपयोग करके सेट किया गया है। यदि तत्व सेल से छोटा है, तो इंडेंट होंगे। यदि अधिक - वे एक दूसरे पर फिट होंगे :)

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

ग्रिड के साथ तत्वों को व्यवस्थित करने और रिक्ति की अनुपस्थिति की संभावना के अलावा, इस घटक का सूची दृश्य से एक और अंतर है - कोई खंड नहीं हैं। अन्यथा, GridView के लिए ListView के बारे में कहा गया सब कुछ सच है।

3. टेबल व्यू

कुछ डेटा को सबसे आसानी से एक तालिका में प्रदर्शित किया जाता है। ऐसा करने के लिए, Qt QTableView वर्ग का उपयोग करता है। QML में, QtQuick Controls मॉड्यूल के आगमन के साथ, डेटा का एक टेबल व्यू बनाने के लिए एक तैयार-निर्मित घटक दिखाई दिया है।

मुझे तुरंत कहना होगा कि मॉडल अभी भी एक सूची के रूप में होना चाहिए। एक मॉडल तत्व एक तालिका पंक्ति से मेल खाता है, और कॉलम के लिए डेटा तत्व की भूमिकाओं से लिया गया है। वहां असली सी ++ टेबल मॉडल पास करें, अर्थात। QAbstractTableModel से व्युत्पन्न वर्ग विफल हो जाएगा - केवल पहला कॉलम दिखाई देगा।

TableView ऑब्जेक्ट की परिभाषा में, हम इंगित करते हैं कि कौन सा कॉलम होना चाहिए और प्रत्येक कॉलम के लिए मॉडल डेटा से किस भूमिका का उपयोग किया जाना चाहिए।

एक उदाहरण पर विचार करें।

 import QtQuick 2.0 import QtQuick.Controls 1.0 Rectangle { width: 360 height: 360 ListModel { id: dataModel ListElement { color: "orange" text: "first" } ListElement { color: "lightgreen" text: "second" } ListElement { color: "orchid" text: "third" } ListElement { color: "tomato" text: "fourth" } } TableView { id: view anchors.margins: 10 anchors.fill: parent model: dataModel clip: true TableViewColumn { width: 100 title: "Color" role: "color" } TableViewColumn { width: 100 title: "Text" role: "text" } itemDelegate: Item { Text { anchors.centerIn: parent renderType: Text.NativeRendering text: styleData.value } } } }

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

परिणामस्वरूप, हमें निम्न तालिका मिलती है:

यह उदाहरण आइटमडेलगेट संपत्ति का उपयोग करता है, जो तालिका में सभी कोशिकाओं के लिए प्रतिनिधि सेट करता है। यदि मुझे कुछ कॉलम के लिए डेटा को थोड़ा अलग तरीके से प्रदर्शित करने की आवश्यकता है तो मुझे क्या करना चाहिए? जब आप TableViewColumn में परिभाषित होते हैं, तो आप इस विशेष कॉलम के लिए एक प्रतिनिधि सेट कर सकते हैं। उदाहरण के लिए, पहले कॉलम में, हमारा रंग टेक्स्ट में प्रदर्शित होता है। चलो इसके बजाय सेल को इस रंग से भरें।

 TableViewColumn { width: 100 title: "Color" role: "color" delegate: Rectangle { color: styleData.value } }

परिणामस्वरूप, हमें रंगीन कोशिकाएँ मिलती हैं:

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

निष्कर्ष

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

कई दृश्यों में प्रतिनिधियों के उदाहरण मक्खी पर बनाए और हटाए गए हैं, इसलिए अच्छे प्रदर्शन के लिए और, तदनुसार, चिकनी एनीमेशन, आपको उन्हें यथासंभव आसान बनाने की कोशिश करनी चाहिए।

मॉडल-क्यूएमएल में देखें। भाग एक: पूर्वनिर्मित घटक दृश्य