🍢 🔭 💄 हम पीएचडी और एक्सटीजेएस में एक अंतर्निहित इंटरफ़ेस डिजाइनर के साथ अपनी आईडीई लिख रहे हैं 🧘 👩‍👩‍👦‍👦 🌆

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

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

परियोजना ने ओआरएम का उपयोग किया, जो स्पष्ट रूप से समान इंटरफेस उत्पन्न करने की संभावना पर संकेत देता था, लेकिन, कई समानताएं होने पर, प्रत्येक प्रपत्र और रिपोर्ट अद्वितीय थे, जिन्हें त्वरित और आसान कॉन्फ़िगरेशन की आवश्यकता थी।

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

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

ऐसे उपकरण की खोज सफल नहीं थी।

आईडीई में क्या शामिल होगा:

एक्सटीजेएस के लिए 1 आवरण, जो घटक कोड उत्पन्न करने के लिए "कैसे जानता है";

ExtJS आवरण तत्वों को जोड़ने के लिए एक साधारण एपीआई के साथ 2 परियोजना फ़ाइल;

3 कोड कलेक्टर जो तत्वों की व्यवस्था करता है और परिणाम को कैश करता है;

4 इंटरफ़ेस डिजाइनर परियोजना सेटिंग्स को सरल बनाने के लिए, कोड संपादक;

5 "उपहार" नियमित कार्यों को स्वचालित करने के लिए तैयार घटकों के रूप में:

शुरुआती लोगों के लिए एक्सटीजे में विरासत की 5.1 गैर-स्पष्ट विशेषताएं;

5.2 संपादकों का पुनर्निर्धारण;

5.3 दो क्लिक में अजाक्स अनुरोध के लिए एक यूआरएल उत्पन्न करना;

5.4 डेटाबेस से संरचना का आयात, रूपों का स्वचालित निर्माण;

बाहरी फ़ाइलों और परियोजनाओं का 5.5 कनेक्शन;

5.6 इंटरफेस का स्थानीयकरण;

5.7 घटना और विधि संपादक;

6 बैकएंड डिजाइनर जो टीम एपीआई के प्रोजेक्ट के साथ फ्रंट-एंड अनुरोधों का अनुवाद करते हैं;

8 परियोजना जनरेटर।

1 लपेटें

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

इस प्रकार, कुछ दिनों में, एक्सटीजेएस घटकों के गुणों के पदानुक्रम को फिर से बनाया गया, जबकि एक ही समय में संस्करण 3 (कई दर्जनों कक्षाएं)। फिर, जैसा कि आवश्यक था, आवश्यक घटकों के व्यवहार का वर्णन करना संभव था, मुख्य लोगों को जेनसन-कॉन्फिगर स्तर पर उत्पन्न किया गया था।

हमें निम्नलिखित फ़ॉर्म की पदानुक्रम मिलती है (चार्ट का एक टुकड़ा, ज़ेंड_फ्रेमवर्क 1):

Ext_Object और इसके वंशज घटक के व्यवहार के लिए जिम्मेदार हैं;

Ext_Config संपत्तियों के भंडारण, सत्यापन और क्रमांकन के लिए जिम्मेदार है;

Ext_Property और इसके वंशज एक विशेष ExtJS घटक (सार्वजनिक गुणों वाले वर्ग, कुछ हद तक ExtJs पुस्तकालय के पदानुक्रम को दोहराते हुए) की विशेषताओं का वर्णन करने के लिए जिम्मेदार हैं।

Ext_Virtual एक वर्ग है। इस वर्ग की वस्तुएं फैक्ट्री द्वारा बनाई जाती हैं यदि एक्सट्राओबजेक्ट का कोई प्रत्यक्ष वंशज नहीं है जो घटक के व्यवहार का वर्णन करता है। यह Ext_Property_xxx गुणों के विवरण के आधार पर बनाया गया है। यह इस बात में भिन्न है कि यह एमुलेशन के लिए वर्ग के नाम को स्वीकार करता है, यह नाम के साथ यह पुस्तकालय के घटकों का प्रतिनिधित्व करता है।

Ext_Object __toString पद्धति को कार्यान्वित करता है, जो घटक के ExtJS कोड को लौटाता है। यदि आवश्यक हो, तो वारिस में इस पद्धति को ओवरराइड किया जा सकता है। यदि ऑब्जेक्ट एक दूसरे के अंदर घोंसले में हैं, तो रूट ऑब्जेक्ट के स्ट्रिंग को रूट करने के क्षण में, पूरी श्रृंखला आसानी से डिकम्प्रेस होगी (जेएस-कोड के स्ट्रिंग में बदल जाएगी)।

जैसा कि अभ्यास से पता चला है, इस समाधान ने सिरदर्द से बचा है।

2 परियोजना फ़ाइल

एक्सटीजेएस पर इंटरफ़ेस एक श्रृंखला में व्यवस्थित और लेआउट में स्थित घटकों के होते हैं।

किसी भी तरह परियोजना घटकों की कनेक्शन सेटिंग्स को स्टोर करना आवश्यक है। आप XML या कुछ अन्य समान प्रारूप को कॉन्फ़िगरेशन फ़ाइल के रूप में उपयोग कर सकते हैं।

इस स्थिति में, हर बार जब आप प्रोजेक्ट लोड करते हैं, तो आपको कॉन्फ़िगरेशन का विश्लेषण करना होगा और ऑब्जेक्ट्स को इनिशियलाइज़ करना होगा, जिसमें लंबा समय लग सकता है। एक सरल, तेज और आसान प्रारूप की आवश्यकता है।

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

उस समय, ट्री क्लास पहले से ही लिखा गया था, जिसने पेड़ की संरचनाओं के साथ बहुत तेज़ी से काम किया, आसानी से एक सेकंड से भी कम समय में 25,000 - 30,000 नेस्टेड तत्वों तक पदानुक्रम का प्रबंधन किया।

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

उस समय एक्स्ट डिज़ाइनर की मुख्य समस्या यह थी कि हर बार जब आप कोड बदलते हैं, तो आपको एप्लिकेशन को फिर से बनाने और स्क्रिप्ट प्रकाशित करने की आवश्यकता होती है।

संरचना डिज़ाइनर_प्रोजेक्ट (प्रोजेक्ट फ़ाइल):

- कंटेनरों का एक सिस्टम विवरण (कौन सी कक्षाएं स्थानांतरित की जा सकती हैं, जिसमें नेस्टेड तत्व शामिल हो सकते हैं, आदि);

- वर्तमान परियोजना की सेटिंग्स (नाम, नाम स्थान, कनेक्टेड फ़ाइलें, आदि);

- एपीआई (परियोजना के साथ काम करने के तरीकों का एक सेट);

- पेड़ (तत्वों का पेड़, परियोजना संरचना)।

यह उल्लेखनीय है कि घटक वर्गों का विस्तार हो सकता है, और गुणों की सूची बढ़ सकती है। यह सभी मामलों में पुराने प्रारूप के साथ संगतता समस्याओं का कारण नहीं है।

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

3 कोड कलेक्टर

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

कोड काफी जटिल और भ्रामक निकला, कई बार रिफलेक्ट किया गया, नई सुविधाओं के आगमन के साथ यह और भी अधिक भ्रमित हो गया।

समय के साथ, उन्होंने एक सहनशील रूप और संरचना हासिल कर ली। डिजाइनर / परियोजना / Code.php

जेएस वस्तुओं के लिए जो मुख्य एक्सटीजेएस घटकों के विस्तार हैं, नेस्टेड तत्वों के लेआउट को सरल बनाने के लिए एक चाल का उपयोग किया गया था। चाइल्डऑब्जेक्ट्स प्रॉपर्टी बनाई गई थी, जो सभी नेस्टेड तत्वों की एक सूची है, इसलिए आइटम में उन तक पहुंच और लिंक करना बहुत आसान है।

डिज़ाइनर_प्रोजेक्ट का कार्य सिद्धांत प्रोजेक्ट संरचना के एक पुनरावर्ती त्रैमासिक में, संबंधित घटकों की खोज और एक दूसरे के सापेक्ष परिमित तत्वों के कोड का सही स्थान।

पॉल ने किया। PHP-EXT रैपर का एक सरलीकृत एनालॉग बनाया गया है। यह एक परियोजना में बदल सकता है और बहुत तेजी से काम करता है। कार्यक्षमता सीमित है, लेकिन कोई भी इसे विकसित करने के लिए परेशान नहीं करता है।

4 डिजाइनर

सबसे दिलचस्प बात के लिए समय आ गया है - एक इंटरफ़ेस डिजाइनर बनाना। वैचारिक रूप से, यह होना चाहिए:

- एक टूलबार वाला एक पैनल जिसमें घटकों की एक सूची है जिसे परियोजना में रखा जा सकता है (बटन, प्रपत्र, खिड़कियां, पैनल);

- मुख्य रूप, जो परियोजना के प्रतिपादन के परिणामों को प्रदर्शित करेगा;

- घटक पदानुक्रम (ट्रीपैनल का उपयोग किया जाता है);

- संपत्ति संपादक (संपत्ति ग्रिड)।

फिलहाल, डिजाइनर की उपस्थिति निम्नलिखित है (पहले से बहुत अलग):

1. परियोजना सेटिंग्स पैनल (लोडिंग, बचत, डिजाइनर / कोड संपादक मोड को स्विच करना, आदि);

2. घटकों की एक सूची के साथ एक टूलबार जिसे परियोजना में जोड़ा जा सकता है;

3. एक पैनल जो परियोजना संरचना प्रदर्शित करता है, तत्वों के ड्रैग एंड ड्रॉप आंदोलन का समर्थन करता है; एक तत्व का चयन करते समय, इसके लिए एक व्यक्तिगत संपत्ति सेटिंग्स पैनल लोड किया जाता है;

4. घटक गुणों की स्थापना के लिए पैनल (घटनाओं और विधियों के संपादन के लिए अतिरिक्त पैनल शामिल हैं)।

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

परिवर्तन करने के बाद, इंटरफ़ेस सर्वर को एक अनुरोध भेजता है, वांछित नियंत्रक अनुरोध स्वीकार करता है, डिज़ाइनर_प्रोजेक्ट में परिवर्तन करता है। परिवर्तनों को सफलतापूर्वक लागू करने के बाद, डिजाइनर जेएस के पुनर्निर्माण का अनुरोध करता है।

डिजाइनर का मुख्य पैनल, जो परियोजना में तत्वों की व्यवस्था के लिए जिम्मेदार है, एक पेड़ है जिसमें ड्रैग एंड ड्रॉप का समर्थन है:

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

संपादक घटकों की बातचीत घटना स्तर पर होती है, व्यक्तिगत भागों और घटकों को अक्सर पता नहीं होता है कि बाहर क्या है। प्रत्येक तत्व में उत्पन्न घटनाओं का एक निर्धारित सेट होता है जिसे मूल घटक आमतौर पर सदस्यता देता है।

संपत्ति ग्रिड के एक विस्तारित घटक का उपयोग संपत्ति संपादक के रूप में किया गया था, सर्वर के साथ संचार के तरीकों से पूरित (यह फ़ील्ड की एक सूची का अनुरोध करता है, गुणों में परिवर्तन भेजता है, और घटनाओं को ट्रिगर करता है)।

हमारे मामले में, इस घटक को डिज़ाइनर कहा जाता था

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

डिजाइनर की प्रारंभिक क्षमताएं सभी समस्याओं को हल करने में विफल रहीं, इसलिए "एक्शनजेज" फाइल परियोजना से जुड़ी हुई थी (जावास्क्रिप्ट कोड के साथ एक फाइल, यह मानक उपकरणों का उपयोग करके क्या नहीं किया जा सकता है, यह जेएस परियोजना के बाद जुड़ा हुआ है)।

Codemirror.net का उपयोग कोड संपादक के रूप में किया जाता है।

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

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

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

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

5 तैयार घटकों के रूप में बन्स, नियमित कार्यों के स्वचालन

5.1 शुरुआती लोगों के लिए एक्सटीजे में विरासत की गैर-स्पष्ट विशेषताएं।

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

Ext.define('mypanel',{ extend:'Ext.Panel', someProperty:{ a:1,b:2,c:3 }, someProperty2:[1,2,3] }); Ext.define('mypanel2',{ extend:'mypanel' }); var a = Ext.create('mypanel'); var b = Ext.create('mypanel2'); b.someProperty.a = 100; b.someProperty2.push(100); console.log(a.someProperty); console.log(b.someProperty); console.log(a.someProperty2); console.log(b.someProperty2);

ऑब्जेक्ट {a = 100, b = 2, c = 3}

ऑब्जेक्ट {a = 100, b = 2, c = 3}

[१, २, ३, १००]

[१, २, ३, १००]

इन विशेषताओं को याद रखना महत्वपूर्ण है, जैसे यह आपको बहुत सारी नसों को बचाएगा। यह एकमात्र नुकसान नहीं है, सावधान रहें।

5.2 संपादक

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

5.3 दो क्लिक में अजाक्स अनुरोध के लिए एक यूआरएल उत्पन्न करना

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

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

यह कैसे काम करता है: फ़ाइल सिस्टम स्कैन किया जाता है, वांछित वर्ग का चयन किया जाता है, विधियों की एक सूची का अनुरोध किया जाता है, इंटरफ़ेस के लिए विवरण के रूप में विधि पर एक टिप्पणी का उपयोग किया जाता है। वांछित यूआरएल स्वचालित रूप से एक टेम्पलेट के रूप में संपत्ति में पंजीकृत है।

माउस को असाइन करने के लिए एक समान दृष्टिकोण का उपयोग किया जा सकता है।

5.4 एक डेटाबेस से एक संरचना का आयात, रूपों का स्वत: निर्माण

प्रोग्रामर के लिए जीवन को आसान बनाने के लिए और कैसे? बेशक, डेटाबेस या ORM की संरचना के आधार पर फ़ील्ड्स को फॉर्म, स्टोरेज, टेबल में आयात करना।

उस तालिका / ऑब्जेक्ट का चयन करें जिससे हम फ़ील्ड आयात करना चाहते हैं। इसकी संरचना और डेटा प्रकारों के आधार पर, सिस्टम स्वचालित रूप से कोशिकाओं में हमारे लिए आवश्यक मूल्यों को प्रतिस्थापित करता है और रूपों के पदानुक्रम को भरता है।

उदाहरण के लिए, Ext.form.field.Number को int के लिए प्रतिस्थापित किया जाता है। Ext.form.field.Text का उपयोग varchar, आदि के लिए किया जाता है।

साथ ही, फ़ील्डबेल को जोड़ा जाता है यदि यह प्रपत्र फ़ील्ड या दिनांक स्वरूप है, यदि यह संग्रहण फ़ील्ड और अन्य गुण हैं।

अब तत्वों का वर्णन करने की थकाऊ प्रक्रिया एक-दो क्लिक करती है।

5.5 बाहरी फ़ाइलों और परियोजनाओं को जोड़ना

बाहरी जेएस फाइलों और अन्य परियोजनाओं को परियोजना से जोड़ने का अवसर क्यों नहीं देते। हम एक परियोजना बना सकते हैं जिसमें हम एक विशिष्ट घटक का वर्णन करेंगे - संपादक, बाद में हम इसे कनेक्ट करेंगे जहां इसकी आवश्यकता है। मुख्य बात यह है कि प्रोजेक्ट नामस्थानों को अलग करना है ताकि कोड जनरेटर के प्रत्येक प्रोजेक्ट का अपने नामस्थान में हो, यह बहुत मुश्किल नहीं है।

डिज़ाइनर_प्रोजेक्ट एपीआई के लिए फाइलों और परियोजनाओं की एक सूची को जोड़ने और नामस्थानों को असाइन करने के लिए सभी आवश्यक था। डिज़ाइनर_प्रोजेक्ट_कोड को नामस्थानों के अंदर कोड को विघटित करने और परियोजनाओं को पुन: प्रस्तुत करने के लिए कुछ घंटों में प्रशिक्षित किया गया था।

धीरे-धीरे, डिजाइनर ने तैयार घटकों के साथ फिर से भरना शुरू कर दिया जैसे कि संपादन विंडो, फिल्टर, वस्तुओं के लिंक के लिए फ़ील्ड, वस्तुओं की सूची और बहुत कुछ।

5.6 इंटरफेस का स्थानीयकरण

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

प्लेटफ़ॉर्म ने स्थानीयकरण फ़ाइलों का उपयोग किया था, जिन्हें स्थानीयकरण प्रबंधन इंटरफ़ेस में परिवर्तन पर पुनर्जीवित किया गया था। परिणामस्वरूप, पृष्ठ पर फ़ॉर्म की एक निश्चित JS वस्तु थी:

 appLang = { yes:””, no:””, cancel: '', ... };

यह विचार सरल है - डेवलपर को स्ट्रिंग संपत्तियों के मूल्य के रूप में जेएस-कोड दर्ज करने की अनुमति देने के लिए। ऐसा करने के लिए, टोकन "[js:]" का आविष्कार किया गया था (कोड पीढ़ी के दौरान, ऐसे टोकन वाले गुणों को जेएस-कोड के रूप में जारी किया गया था)।

यह था:

यह संभव हो गया:

यह देखते हुए कि स्थानीयकरण प्रबंधन इंटरफ़ेस पहले से तैयार था, इसके साथ काम करना खुशी की बात थी। समाधान के कार्यान्वयन में इसकी ताकत पर 20 मिनट लगे। अब आप फ़ाइल की सामग्री को बदले बिना परियोजना को स्थानीय कर सकते हैं।

5.7 घटना और विधि संपादकों

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

डिजाइनर ने स्पष्ट, पठनीय कोड की एक लहर उत्पन्न करना शुरू कर दिया।

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

6 बैकएंड

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

हमारे मामले में, इसके अलावा, डिजाइनर के स्रोत कोड को बनाने और उसे छोटा करने के लिए एक कार्रवाई बनाई गई थी, इससे संपादक के लोड को गति देने की अनुमति मिली।

7 प्रोजेक्ट जेनरेटर

एक जनरेटर एक परियोजना फ़ाइल पर कार्रवाई के एक सेट के साथ एक टेम्पलेट है।

सरलीकृत रूप में:

 //    $project = new Designer_Project(); //    Ext_Panel    Ext.panel.Panel $panel = Ext_Factory::object('Panel',array( 'width'=>100, 'height'=>200, 'title'=>'My Panel', 'layout'=>'fit' )); //    $panel->setName('myPanel'); //     $project->addObject(0, $panel); //   $designerStorage = Designer_Factory::getStorage($config); //   $designerStorage->save($projectFile , $project);

एक समान परियोजना संरचना होने पर, ORM- आधारित प्रोजेक्ट जनरेटर लिखना मुश्किल नहीं था। दिन के दौरान, मानक इंटरफेस बनाने के लिए कई टेम्पलेट बनाए गए थे, अब एक मानक इंटरफ़ेस बनाने के लिए कुछ क्लिक किए गए, बाकी समय कस्टम डिजाइन और शोधन पर खर्च किया गया था।

डिजाइनर के पहले संस्करण को लागू करने के लिए 3 सप्ताह की छुट्टी मिली - इस तरह के वैश्विक लक्ष्य के लिए काफी कम अवधि।

प्राप्त लाभ:

- एक क्लिक के साथ मानक इंटरफेस उत्पन्न किए गए, फिर डिजाइनर में और विकसित किए गए;

- जेएस कोड में त्रुटियों की संख्या को काफी कम कर दिया;

- युवा डेवलपर्स एक्सटीजेएस और एक जटिल परियोजना के विकास में आसानी करते हैं;

- इंटरफ़ेस को संशोधित करना बहुत आसान और अधिक दिलचस्प हो गया है, तत्वों को एक माउस आंदोलन के साथ स्थानांतरित किया गया, बिना कोड के एक टुकड़े को हथियाने और किसी अन्य तत्व के साथ कनेक्टिविटी को याद करने के डर के बिना;

- उत्पाद और प्रोटोटाइप विकास की गति में वृद्धि हुई है;

- वांछित वस्तु को शुरू करने के साथ कोड का एक टुकड़ा खोजते समय बटन या कॉलम का नाम बदलने जैसी चीजें अब बट का कारण नहीं बनती हैं;

- "घुटने पर" हमारे अपने विकास के वातावरण को विकसित करने में एक दिलचस्प अनुभव प्राप्त हुआ।

- PHP के विकास ने पूरी तरह से नया सुविधाजनक रूप हासिल कर लिया है;

- एक्सटीजेएस की बहुत सी जटिलताओं को जानने में कामयाब रहे, जिन्हें इस क्षण तक सामना नहीं करना पड़ा।

यह सब क्यों जरूरी था?

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

चूंकि उपकरण बहुत उपयोगी निकला, इसलिए इसे ओपनसोर्स में योगदान देने के लिए समुदाय के साथ साझा करने की इच्छा थी। डिजाइनर और कई अन्य विकास को फिर से डिज़ाइन किया गया है, एक डीवीलियम प्लेटफॉर्म में इकट्ठा किया गया है, जिसका विकास कई वर्षों से चल रहा है। परिणाम आधिकारिक साइट dvelum.net पर देखे जा सकते हैं

हम पीएचडी और एक्सटीजेएस में एक अंतर्निहित इंटरफ़ेस डिजाइनर के साथ अपनी आईडीई लिख रहे हैं