🤙🏿 🍒 🚢 Raudus के लिए jqGrid 👾 🛬 🖐️

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

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

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

और फिर भी मेरे मामले में घटकों का मानक सेट पर्याप्त नहीं था। उदाहरण के लिए, मैं वास्तव में TDBGrid के एक पूर्ण कार्यात्मक एनालॉग का उपयोग करना चाहता था: फिल्टर के साथ, छंटाई के साथ, कोल्पसन के साथ, पेजिंग के साथ आदि। तुरंत, jqGrid पहली बार दिमाग में आया। लेकिन कैसे उसे "घुसपैठ" राउडस बनाने के लिए और क्या यह संभव है?

सौभाग्य से , Raudus के चरम संस्करणों में एक विशेष वर्ग TRaExtendableControlGCD है , जिसे आप संभावित रूप से किसी भी jQuery UI घटक, jQuery प्लगइन, साथ ही ExtJS, Qooxitoo, आदि से Raudus घटक में परिवर्तित कर सकते हैं। इस स्थिति में, नया दिखाई दिया घटक समान रूप से दोनों DesignTime और RunTime में दिखाई देगा।

TRAExtendableControlGCD वर्ग में तीन प्रमुख विधियाँ हैं: RaDrawExtend , RaUpgradExtend और RaRouteExtend , ओवरराइडिंग जो आप अनिवार्य रूप से एक रैपर के चारों ओर लिखते हैं, उदाहरण के लिए, jqGrid ताकि राउडस इस घटक के साथ "कैसे काम करता है" समझता है।
RaDrawExtend - इस पद्धति को ओवरराइड करते हुए, आप जावास्क्रिप्ट कोड लिखते हैं जो jqGrid को इनिशियलाइज़ करता है।
RaRouteExtend - इस पद्धति को ओवरराइड करते हुए, आप उस कोड को लिखते हैं जिसे jqGrid घटक के क्लाइंट भाग में कुछ कार्रवाई के दौरान निष्पादित किया जाना चाहिए। यानी यह jqGrid से किसी भी AJAX अनुरोध की प्रतिक्रिया का स्थान है।
RaUpgradExtend - इस पद्धति को ओवरराइड करते हुए, आप जावास्क्रिप्ट कोड लिखते हैं जिसे RaRouteExtend विधि में कोड के बाद निष्पादित किया जाना चाहिए। यानी यह वह स्थान है जहां घटक का सर्वर पक्ष घटक के ग्राहक पक्ष पर कार्य करता है।
सामान्य शब्दों में इन तीन तरीकों का उपयोग कैसे करें और इससे क्या होता है, आप राउडस वितरण के साथ दिए गए उदाहरणों में देख सकते हैं। वहाँ, विशेष रूप से, jqDatePicker और TinyMCE एम्बेड करने के उदाहरण निहित हैं।

बहुत पहले और स्पष्ट चीज जिसे jqGrid के मामले में लागू करने की आवश्यकता है, वह इसे डेटा से भर रही है और पेजिंग का आयोजन कर रही है। इस मामले में ऐसा कैसे करें?

यह ज्ञात है कि jqGrid कई डेटाटाइप (डेटा प्राप्त करने के तरीके) का समर्थन करता है: json (jsonstring), xml (xmlstring), स्थानीय, जावास्क्रिप्ट और फ़ंक्शन। फ़ंक्शन आपको जावास्क्रिप्ट फ़ंक्शन को डेटा के स्रोत के रूप में निर्दिष्ट करने की अनुमति देता है, और इस फ़ंक्शन के अंदर आप डेटा को एप्लिकेशन के सर्वर साइड से क्वेरी कर सकते हैं, फिर प्राप्त डेटा के साथ jqGrid को भरने के लिए addJSONData विधि का उपयोग करें। हम इस विधि का उपयोग करेंगे।

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

कोड को विस्तृत / संक्षिप्त करें

AJavascript := 'var me=this;' + 'me.onRender=function(){' + // load jQuery library or ensure it is already loaded 'me.r=me.require(["js","/jquery-1.10.1/jquery-1.10.1.min.js"],function(){' + 'me.r=me.require(["js","/jquery.jqGrid-4.5.2/js/jquery.jqGrid.min.js",' + '"js","/jquery.jqGrid-4.5.2/js/i18n/grid.locale-ua.js",' + '"css","/jquery.jqGrid-4.5.2/css/ui.jqgrid.css",'+ '"css","/jquery-ui-1.10.3/themes/base/minified/jquery-ui.min.css"],function(){' + 'me.r=undefined;' + 'me.d=setTimeout(function(){' + 'me.d=undefined;' + 'if(typeof jQuery==="undefined"){' + 'me.getDOM().innerHTML="jQuery library was not loaded";' + 'return;' + '};' + 'if(typeof $.fn.jqGrid==="undefined"){' + 'me.getDOM().innerHTML="jqGrid Class was not loaded";' + 'return;' + '};' + 'me.e=document.createElement("table");' + 'me.e.id="grid' + IntToStr(ID) + '";' + 'me.getDOM().appendChild(me.e);' + 'me.p=document.createElement("div");' + 'me.p.id="pager' + IntToStr(ID) + '";' + 'me.getDOM().appendChild(me.p);' + 'function getData(postdata){' + 'me.route(JSON.stringify(postdata));' + '};' + '$(me.e).jqGrid({' + 'datatype:getData,' + ... 'rowNum:25,'+ 'pager:"#"+me.p.id,'+ 'caption:"jqGrid"' + '});' + '},0);' + '});' + '});' + '};' + ...

हमारे getData फ़ंक्शन के अंदर me.route विधि AJAX का उपयोग करके घटक के क्लाइंट भाग को सर्वर भाग तक पहुंचने का तरीका है। इस प्रकार, हम पोस्टडेटा में निहित मापदंडों के आधार पर सर्वर भाग से एक डेटा सेट का अनुरोध करते हैं । सभी अनुरोध पैरामीटर JSON स्ट्रिंग में पैक किए गए हैं। पोस्टडेटा में डेटा अनुरोध के सेवा पैरामीटर शामिल हैं, जो कि jqGrid प्रलेखन में वर्णित हैं, उनमें से: डेटा के अगले बैच के साथ वर्तमान पृष्ठ संख्या, डेटा के बैच में रिकॉर्ड की संख्या, छँटाई, फ़िल्टर, आदि। सर्वर साइड पर, RaRouteExtend विधि चालू हो जाती है, जिसमें हम भेजे गए अनुरोध मापदंडों को संसाधित करते हैं, JSON स्ट्रिंग के रूप में डेटा का आवश्यक भाग बनाते हैं और इस हिस्से को इस तरह RaUggradExtend विधि में jqGrid पर वापस भेजते हैं:

  AJavascript := AJavascript + 'var me=this;' + 'if(me.e){' + 'var v=JSON.parse('''+FJSON+''');'+ '$(me.e)[0].addJSONData(v);' + '};';

जहां FJSON एक JSON स्ट्रिंग के रूप में दर्शाए गए डेटा का एक हिस्सा है।

तो पहले कॉल पर क्या होता है :
1. उपयोगकर्ता पहले jqGrid के साथ एक फॉर्म अपलोड करता है। सर्वर विधि RaDrawExtend निष्पादित किया गया है, jqGrid आरंभिक है।
2. jqGrid डेटा का पहला हिस्सा पाने के लिए जावास्क्रिप्ट getData () फ़ंक्शन करता है।
3. सर्वर विधि RaRouteExtend निष्पादित किया गया है। डेटा अनुरोध पैरामीटर के आधार पर एक डेटा सेट उत्पन्न होता है, जो दर्शाता है कि पहला डेटा पेज अनुरोध किया गया है (पृष्ठ = 1)। डेटा सेट को JSON स्ट्रिंग से क्रमबद्ध किया गया है।
4. सर्वर विधि RaUpgradExtend निष्पादित होती है, जिसमें जावास्क्रिप्ट कोड जोड़ा जाता है जो jqGrid में डेटा जोड़ता है।
5. RaUpgradExtend विधि में लिखा गया जावास्क्रिप्ट कोड निष्पादित किया गया है और jqGrid डेटा से भरा है।

जब आप डेटा के अगले टुकड़े के साथ पृष्ठ पर जाते हैं तो क्या होता है :
1. उपयोगकर्ता jqGrid में डेटा के साथ अगले पृष्ठ पर जाता है।
2. jqGrid फिर से डेटा के अगले बैच को पाने के लिए जावास्क्रिप्ट getData () फ़ंक्शन करता है।
3. सर्वर विधि RaRouteExtend निष्पादित किया गया है। डेटा अनुरोध पैरामीटर के आधार पर एक डेटा सेट उत्पन्न होता है, जो दर्शाता है कि अगला डेटा पेज अनुरोध किया जा रहा है (पेज = 2, पेज = 3, आदि)। डेटा सेट को JSON स्ट्रिंग से क्रमबद्ध किया गया है।
4. सर्वर विधि RaUpgradExtend निष्पादित होती है, जिसमें जावास्क्रिप्ट कोड जोड़ा जाता है जो jqGrid में डेटा जोड़ता है।
5. RaUpgradExtend विधि में लिखा गया जावास्क्रिप्ट कोड निष्पादित किया गया है और jqGrid डेटा से भरा है।

वह, वास्तव में, सब है। यदि आपके कोई प्रश्न हैं, तो पूछें। शायद लेख में कई परिशोधनों को जोड़ना होगा।
आपको धन्यवाद और शुभकामनाएँ!

Raudus के लिए jqGrid

More articles: