👏🏿 🚵🏾 💐 ग्रिड नियंत्रण ... 1 जारी रखा 👩🏿‍🍳 🏇🏿 🖱️

पहली पोस्ट में, हमने ग्रिड की कार्यक्षमता को कई वर्गों में तोड़ दिया। आइए जल्दी से फिर से उनका वर्णन करें:

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

हमने पाठ डेटा के लिए मॉडल और दृश्य का वर्णन भी किया (ModelText, ModelTextCallback। ViewText)। चलिए एक ग्रिड बनाने की कोशिश करते हैं और टेक्स्ट डेटा को बाइंड करते हैं। हम नई कार्यक्षमता को जोड़ेंगे जो विशेष मॉडल / दृश्य / नियंत्रक के रूप में काम करने के लिए मानक ग्रिड के लिए आवश्यक है।

संक्षिप्तता के लिए, मैं कोड, शेयर्ड_एप्ट्र आदि में संकेत भेजूंगा। तो चलिए जाने ...

int main() { Application app; //   GridWindow grid_window("Demo"); //    ModelTextCallback m; m.getCallback = [](CellID cell)->String { return String.Format("Item[%d, %d]", cell.row, cell.column); }; //   ,     grid_window.AddData(RangeAll(), ViewText(m), LayoutAll()); //      grid_window.SetRows(10); grid_window.SetColumns(10); //   grid_window.Show(100, 100, 300, 300); app.run(); }

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

 class ViewOddRowBackground: public View { public: void Draw(DrawContext& dc, Rect rect, CellID cell) const override { //  ,    if (cell.row%2 == 0) dc.FillRect(rect, ColorRGB(200, 200, 255)); } }; void plugOddRowBackgroud(Grid& grid) { grid.AddData(RangeAll(), ViewOddRowBackground(), LayoutAll(Transparent)); }

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

  GridWindow grid_window("Demo"); plugOddRowBackgroud(grid_window.GetGrid());

अब हम ग्रिड को लागू करते हैं।

 class ViewCellBounds: public View { public: void Draw(DrawContext& dc, Rect rect, CellID cell) const override { //     dc.Line(rect.BottomLeft(), rect.BottomRight()); //       dc.Line(rect.TopRight(), rect.BottomRight()); } }; void plugCellBounds(Grid& grid) { grid.AddData(RangeAll(), ViewCellBounds(), LayoutAll(Transparent)); } ... GridWindow grid_window("Demo"); plugCellBounds(grid_window.GetGrid());

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

 class ModelSelection: public Model { public: Range GetSelectedRange() const { return m_selected_range; } void SetSelectedRange(Range new_selected_range) { m_selected_range = new_selected_range; changed.invoke(*this); } CellID GetActiveCell() const { return m_active_cell; } void SetActiveCell(CellID new_active_cell) { m_active_cell = new_active_cell; changed.invoke(*this); } private: Range m_selected_range; CellID m_active_cell; }; class ViewSelection: public View { public: ViewSelection(ModelSelection selection) : m_selection(selection) {} void Draw(DrawContext& dc, Rect rect, CellID cell) const override { //    ->   if (m_selection.GetActiveCell() == cell) dc.DrawFrame(rect); //    ->   //       if (m_selection.GetSelectedRange().HasCell(cell)) { dc.FillRect(rect, ColorSelectedBackground); dc.SetTextColor(ColorSelectedText); } } private: ModelSelection m_selection; }; ModelSelection plugSelection(Grid& grid) { ModelSelection selection; grid.AddData(RangeAll(), ViewSelection(selection), LayoutAll(Transparent)); return selection; } ... GridWindow grid_window("Demo"); plugCellBounds(grid_window.GetGrid()); plugSelection(grid_window.GetGrid());

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

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

अक्सर ग्रिड का एक शीर्षक होता है - ग्रिड का वह हिस्सा जो हमेशा खिड़की के शीर्ष पर रहता है। कभी-कभी बाईं ओर एक समान निर्माण होता है (आमतौर पर वे वहां लाइन नंबर लिखते हैं)। स्क्रॉल करते समय, ये क्षेत्र यथावत बने रहते हैं। आइए देखें कि शीर्षक हमारे साथ कैसा दिख सकता है:

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

आइए आगे भी कहते हैं कि निश्चित क्षेत्र किसी भी तरफ हो सकते हैं।

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

 class ModelGrid: public Model { public: ModelGrid(); CacheGrid GetGrid(CellID cell) const { return m_grids[cell.row][cell.column]; } private: CacheGrid m_grids[3][3]; }; class ViewGrid: public View { public: ViewGrid(ModelGrid model) :m_model(model) {} void Draw(DrawContext& dc, Rect rect, CellID cell) const override { CacheGrid cacheGrid = m_model.GetGrid(cell); cacheGrid.Draw(dc); } };

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

यहाँ हम फिर से रुकते हैं और देखते हैं कि हमने अभी तक किस तरह का युद्धाभ्यास किया है? शुरुआत में, हमारे पास एक बयान था - एक ग्रिड कोशिकाओं का एक सेट है, और एक सेल एक ऐसी जगह है जहां कुछ भी प्रदर्शित होता है। अब यह पता चला है कि सेल ग्रिड सहित कुछ भी प्रदर्शित कर सकता है। श्रृंखला बंद है - ग्रिड कोशिकाओं को खींचता है, कोशिकाएं ग्रिड को खींचती हैं। यह चिकन और अंडे के दार्शनिक सवाल को उठाता है। प्राथमिक क्या है? एक ग्रिड जिसमें कोशिकाएँ या एक सेल होता है जो ग्रिड सहित किसी भी चीज़ का प्रतिनिधित्व कर सकता है। ऐसा लगता है कि एक सेल की अवधारणा अधिक सार्वभौमिक है। पहले लेख से CellCache वर्ग को याद रखें - इसमें पहली बात यह है कि Triples <Range, View, Layout> को Range द्वारा फ़िल्टर किया गया था, अर्थात वास्तव में सेल को triples स्टोर नहीं करना चाहिए, लेकिन <View, Layout> deuces - जो यह बताता है कि सेल में क्या और कहाँ है। आकर्षित करना। CellCache माउस घटनाओं को आकर्षित और संसाधित कर सकता है (उन्हें वांछित नियंत्रक को पास कर सकता है), जबकि ग्रिड का कहीं भी उल्लेख नहीं किया गया है।

लेकिन क्या होगा अगर हम एक विंडो क्लास बनाते हैं जो CacheGrid नहीं, बल्कि CacheCell खींचती है? तब हमें ग्रिड विंडो क्लास नहीं मिलती है, लेकिन एक अधिक सार्वभौमिक नियंत्रण, जिसमें हम बस दो <व्यू, लेआउट> के रूप में, सेट करते हैं कि क्या और कहाँ आकर्षित करना है। उदाहरण के लिए, {<ViewCheck, LayoutLeft>, <ViewText, LayoutAll>} का संयोजन हमें चेकबॉक्स नियंत्रण का मानक नियंत्रण देता है। अन्य संयोजन अन्य प्रकार के नियंत्रण देंगे, और विभिन्न लेआउट हमें किसी भी कॉन्फ़िगरेशन में दृश्य की व्यवस्था करने की क्षमता देते हैं। उदाहरण के लिए, पाठ के दाईं ओर स्थित चेकबॉक्स, नीचे, ऊपर - जो भी हो।

आइए इस विंडो को आइटमविंडो कहते हैं (एक सेल एक अवधारणा है जो ग्रिड से संबंधित है, आइटम अधिक तटस्थ है)। मुझे तीन वर्गों का एक पदानुक्रम मिला:

आइटमविंडो - सार्वभौमिक नियंत्रण, कैशेसेल का एक उदाहरण है। वास्तव में, संपूर्ण विंडो एक एकल कक्ष है।
ListWindow ItemWindow का वंशज है। CacheCell उदाहरण के लिए एक ViewGrid जोड़ता है, जो सेल में एकल ग्रिड आकर्षित करेगा। यह विकल्प निश्चित क्षेत्रों (शीर्षक, आदि) के बिना सरल सूचियों के लिए अच्छा है
GridWindow ListWindow का वंशज है। तीन पंक्तियों और स्तंभों के साथ ListWindow में घोषित ग्रिड बनाता है। इस ग्रिड पर एक और ViewGrid को परिभाषित करता है, जो नौ उपग्रहों को खींचता है। यह उन लोगों के लिए एक नियंत्रण है, जिन्हें सुर्खियों की जरूरत है।

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

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

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

ग्रिड नियंत्रण ... 1 जारी रखा

More articles: