ताइज़ेन: पहले चरण (भाग 2)

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

एक भाग

पार्ट टू

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

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

अंजीर। लीका द्वारा

गिट रिपॉजिटरी में एक प्रशिक्षण परियोजना शामिल है जो इस तरह के एक अनुप्रयोग बनाने के चरणों पर चर्चा करती है। सभी महत्वपूर्ण चरणों को टैग के साथ चिह्नित किया गया है (पाठ में आगे देखें)। READMe.txt दो टैग के बीच होने वाले परिवर्तनों का वर्णन करता है।

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

वर्तमान में, तीन टैब ShoppingListMainForm से जुड़े हुए हैं (लेख का पहला भाग देखें)। जनसंख्या को दो तक कम करें, अर्थात तीसरा टैब हटाएं। अनइंस्टॉल को पहले यूआई बिल्डर में किया जाता है, और फिर हम कोड में ऑर्डर को पुनर्स्थापित करते हैं।
UI बिल्डर में स्थापना रद्द करें:

1. IDL_FORM में हम हैडर से तीसरे पैनल (HEADERITEM3) के लिए बटन हटाते हैं;
2. हम स्वयं IDL_PANEL3 पैनल को सीधे हटाते हैं - इसके विवरण के साथ एक xml-file;
3. Workflow में TabScene3 निकालें;
4. परिवर्तन सहेजें :)

सामान्य तौर पर, उपरोक्त बिंदु स्पष्ट हैं, लेकिन हम तीसरे पर अधिक विस्तार से विचार करेंगे।

TabScene3 के साथ, इसके संक्रमण भी हटा दिए जाते हैं, जिसमें TabScene1 - IDSCNT_3 से संक्रमण शामिल है। इसलिए, आपको TabScene1 से TabScene में संक्रमण जोड़ना होगा, आइए इसे IDSCNT_2 कहें।



डिफ़ॉल्ट रूप से, एक नया संक्रमण संक्रमण स्टैक पर इतिहास बचाता है। आप संक्रमण गुणों के बारे में अधिक यहाँ पढ़ सकते हैं। यह टैब के बीच संक्रमण को याद रखने का कोई मतलब नहीं है, इसलिए हम इतिहास की संपत्ति को no सेट करते हैं:



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

कोड जनरेशन सिस्टम ShoppingListMainForm::OnActionPerformed() के ईवेंट हैंडलर में ShoppingListMainForm::OnActionPerformed() कमांड ShoppingListMainForm::OnActionPerformed() , जो बनी हुई है उसे उचित मामले में ले जाना है:

 void ShoppingListMainForm::OnActionPerformed(const Tizen::Ui::Control& source, int actionId) { SceneManager* pSceneManager = SceneManager::GetInstance(); AppAssert(pSceneManager); switch(actionId) { case ID_HEADER_ITEM1: pSceneManager->GoForward(SceneTransitionId(IDSCNT_1)); break; case ID_HEADER_ITEM2: pSceneManager->GoForward(SceneTransitionId(IDSCNT_2)); break; default: break; } } 

कोड पुनर्स्थापित करें:

1. पैनल के स्रोत कोड को हटाएं - फ़ाइलें ShoppingListTab3.h और ShoppingListTab3.cpp;
2. AppResourceId.h और AppResourceId.cpp से पहचानकर्ताओं का स्वचालित निष्कासन UI बिल्डर के साथ काम करते समय नहीं होता है, इसलिए अतिरिक्त लाइनों को मैन्युअल रूप से हटाना आवश्यक है: IDL_PANEL3 (पैनल आईडी) और IDSCNN_3 (इस पैनल में संक्रमण आईडी);
3. ShoppingListPanelFactory से तीसरे पैनल के संदर्भ निकालें।

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

हम सीधे एप्लिकेशन के विकास के लिए आगे बढ़ते हैं।

एप्लिकेशन को सूचियों को प्रबंधित करने के लिए डिज़ाइन किया गया है - और हम उनसे निपटेंगे। UI बिल्डर का उपयोग करके IDL_PANEL1.xml पैनल खोलें, फिर टूलबॉक्स विंडो से कार्यक्षेत्र पर ListView घटक, ListView & TableView टैब खींचें। टैब पर प्रस्तुत छह प्रकार की सूचियों के बीच के अंतर को दस्तावेज़ीकरण में विस्तार से वर्णित किया गया है, और अब एक और "खुशी" हमें इंतजार कर रही है - ओवरलैपिंग ऑर्डर का नियंत्रण काम नहीं करता है (मैंने शब्द z- क्रम का इस तरह अनुवाद किया है):



GUI घटकों को "परतों" के माध्यम से ले जाने के लिए बटन निष्क्रिय हैं। वर्तमान में, IDC_LISTVIEW1 IDC_LABEL1 बंद कर देता है - कोई समस्या नहीं है, क्योंकि सूची दृश्य पारदर्शी है। हालाँकि, यदि, उदाहरण के लिए, एक बटन (बटन घटक) बंद है, तो हम बस इसे दबा नहीं सकते हैं! सामान्य तौर पर, यूआई बिल्डर का उपयोग करके जेड-ऑर्डर को अधीन करना संभव नहीं है, इसलिए, एक नियमित पाठ संपादक का उपयोग करके IDL_PANEL1.xml खोलें और घटकों को जोड़ने के लिए जिम्मेदार लाइनों को स्वैप करें:

 <ScenePanel Bversion="2.0.0.201311071821" Dversion="20120315"> <LogicalCoordinate>720</LogicalCoordinate> <Panel id="IDL_PANEL1"> … /*   */ </Panel> <Label id="IDC_LABEL1" parent="IDL_PANEL1"> … /*   */ </Label> <ListView id="IDC_LISTVIEW1" parent="IDL_PANEL1"> … /*   */ </ListView> </ScenePanel> 

के साथ बदलें

 <ScenePanel Bversion="2.0.0.201311071821" Dversion="20120315"> <LogicalCoordinate>720</LogicalCoordinate> <Panel id="IDL_PANEL1"> … /*   */ </Panel> <ListView id="IDC_LISTVIEW1" parent="IDL_PANEL1"> … /*   */ </ListView> <Label id="IDC_LABEL1" parent="IDL_PANEL1"> … /*   */ </Label> </ScenePanel> 

फिर परिवर्तनों को सहेजें और UI बिल्डर का उपयोग करके फिर से खोलें। घटक उलटे होते हैं। यदि आप परिवर्तित नहीं हुए हैं, तो आपको कॉफी पीने की ज़रूरत है, फिर आराम करें, वह स्थिति लें जो ताईज़ेन को समझने के लिए सबसे सुविधाजनक है और फिर से शुरू करें। आप अभी भी Tizen IDE को पुनः आरंभ कर सकते हैं।

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

अब ListView को जीवन के साथ भरें: कार्यक्षेत्र में संदर्भ मेनू पर कॉल करें और Add Event Handler चुनें।



इस मामले में न्यूनतम आवश्यक सेट IListViewItemEventListener और IListViewItemProvider आइटम हैं। इन मदों का चयन करने का मतलब है कि इन इंटरफेस को लागू करने वाली एक वस्तु को ListView को सौंपा जाएगा। पहला इंटरफ़ेस सूची आइटम की घटनाओं पर प्रतिक्रिया करने के लिए जिम्मेदार है, और दूसरा इन वस्तुओं को बनाने के लिए डेटा प्रदान करता है। इस मामले में, ऐसी वस्तु ShoppingListTab1 वर्ग का उदाहरण है, अर्थात। मूल पैनल (IDL_PANEL1.xml फ़ाइल में वर्णित)।

फ़िनिश बटन पर क्लिक करने के बाद, कोड जनरेशन सिस्टम स्वचालित रूप से शॉपक्लूज़टैब १.एच और शॉपिंग लिस्टटैब १.पीसीपी फ़ाइलों में सूची दृश्य और सब्सक्रिप्शन के कार्यान्वयन को पंजीकृत करेगा। अपने काम के परिणामों को बदलना बेहतर नहीं है - वह चेतावनी के बिना मैन्युअल रूप से संशोधित कोड को संशोधित करना पसंद करता है। इस संबंध में, सौंदर्यवादी आदतों के लिए बेहतर है कि वह अपनी सेवाओं को पूरी तरह से त्याग दे और सब कुछ कलम से लिख दे। इस स्तर पर प्रोजेक्ट कैसा दिखता है - लेबल v0.1 देखें।

IListViewItemProvider के बारे में, सब कुछ बहुत स्पष्ट है: सूची द्वारा सूची आइटम बनाएं / हटाएं, मदों की संख्या लौटाएं। हम सूची के एक तत्व के रूप में CustomItem का उपयोग करेंगे (क्या मैंने अनुकूलन का वादा किया है?)। इसमें EnrichedText जोड़ें, जिसका उपयोग TextElements के लिए एक कंटेनर के रूप में किया जाएगा - यह हमारा तत्व टेक्स्ट प्रदर्शित करेगा।

मैं जानबूझकर इन तत्वों के उद्देश्य का विस्तार से वर्णन नहीं करता हूं - प्रलेखन में सब कुछ महान विस्तार से कहा गया है। मेरा लक्ष्य कुछ नुकसान की पहचान करना है।

EnrichedText आपको बहुत लचीले ढंग से पाठ को प्रारूपित करने की अनुमति देता है, लेकिन इसकी संभावनाएं असीमित नहीं हैं। सबसे पहले, आप इसमें लंबे पाठ नहीं जोड़ सकते। इसका अर्थ है कि पाठ प्रदर्शन क्षेत्र 2048 पिक्सेल (प्रयोगात्मक रूप से पाया गया) से अधिक नहीं होना चाहिए। मुझे संदेह है कि यह सीमा अधिकतम बनावट आकारों के कारण है जो पाठ रेंडरिंग लाइब्रेरी के साथ काम कर सकती है। सवाल यह उठता है कि जब आप तैयार किए गए घटक टेक्स्टबॉक्स का उपयोग कर सकते हैं तो ऐसी कठिनाइयाँ क्यों? सच्चाई यह है कि पाठ बॉक्स तब भी धीमा होना शुरू होता है जब स्क्रॉल करने योग्य पाठ का आकार स्क्रीन का आकार दोगुना हो। फिलहाल, ListView + CustomItem + EnrichedText गुच्छा का उपयोग करके आप सबसे आसान स्क्रॉलिंग बना सकते हैं। हां, हम टेक्स्ट को भागों में तोड़ते हैं और एक एडेप्टर बनाते हैं जो स्क्रॉल करने पर इसे धीरे-धीरे लिस्ट व्यू में फीड करेगा। ता'ज़ेन धैर्य सिखाती है।



एक और जाल TextElement में खाली स्ट्रिंग है। यदि आप एक खाली स्ट्रिंग द्वारा शुरू किए गए पाठ तत्व को खींचने का प्रयास करते हैं, तो एप्लिकेशन क्रैश हो जाएगा। सुरक्षित होने के लिए, मैं आमतौर पर टेक्स्ट के अंत में लाइन फीड कैरेक्टर \ n जोड़ता हूँ:

 pTextElement->Construct(strSomeText + "\n"); 

IDC_LABEL1 की अब आवश्यकता नहीं है और इसे हटाया जा सकता है। इस स्तर पर प्रोजेक्ट कैसा दिखता है - लेबल v0.2 देखें।

अब उन घटनाओं पर विचार करें जो IListViewItemEventListener में संसाधित होती हैं। OnListViewItemLongPressed और OnListViewItemStateChanged ईवेंट बहुत स्पष्ट हैं - वे तब होते हैं जब आप किसी आइटम पर क्लिक करते हैं। लेकिन OnListViewItemSwept घटना मेरे लिए एक रहस्य बनी हुई है: मैं अभी तक इसे कॉल करने में कामयाब नहीं हुआ।

OnListViewContextItemStateChanged इवेंट विशेष उल्लेख के योग्य है - यह सूची तत्व के भीतर संदर्भ मेनू का एक प्रकार है। यह एक बहुत ही सुंदर, हालांकि बहुत सरल प्रभाव के माध्यम से महसूस किया जाता है - तत्व पक्ष में स्थानांतरित कर दिया जाता है, जबकि सब्सट्रेट गतिशील रूप से "हल्का" होता है। OnListViewContextItemStateChanged घटनाओं को घटित करने के लिए, customItem को उन्हें उत्पन्न करना होगा, इसलिए आपको तथाकथित ItemContext को उनसे कनेक्ट करना होगा:

 pItemContext = new (std::nothrow) ListContextItem();//   pItemContext->Construct(); pItemContext->AddElement(ID_CNTX_BTN_DELETE, "Delete"); … AppAssert(pItemContext); pItem->SetContextItem(pItemContext); //    CustomItem 

यहां हमने संदर्भ में एक डिलीट बटन जोड़ा है, जो संबंधित तत्व को हटा देगा। हम सूची आइटम के साथ काम पर लौट आएंगे, लेकिन अब हम डेटा प्रबंधन पर आगे बढ़ेंगे।

भाग तीन