👍🏻 📂 👩‍👩‍👧‍👦 jRIApp - ऑनलाइन व्यापार एप्लिकेशन बनाने के लिए नया HTML5 ढांचा 🌮 🔻 👨‍👩‍👦

jRIApp वेब अनुप्रयोगों को विकसित करने के लिए बनाया गया एक और HTML5 फ्रेमवर्क है, जो उनकी कार्यक्षमता में डेस्कटॉप अनुप्रयोगों के लिए बहुत अधिक हीन नहीं है।

मौजूदा चौखटे जैसे कि angularJS या emberJS से मुख्य अंतर फ्रेमवर्क के साथ एकीकृत एक डेटा सेवा की उपलब्धता है, साथ ही इस प्रकार के ढांचे में सबसे सामान्य MVC डिज़ाइन के बजाय MVVM डिज़ाइन आर्किटेक्चर का उपयोग है।
सामान्य शब्दों में, इसे एक HTML5 फ्रेमवर्क के रूप में वर्णित किया जा सकता है जो डेटा बाइंडिंग को लागू करता है, HTML तत्वों में तार्किक रूप से संलग्न तर्क के लिए एक बुनियादी ढांचा है, डेटा (DbContext, DbSet) के साथ काम करने के लिए कक्षाएं हैं और इसमें एक कार्यान्वित सर्वर-साइड डेटा सेवाएँ हैं।

फ़्रेमवर्क का क्लाइंट भाग जावास्क्रिप्ट में लिखा गया है ( टाइपस्क्रिप्ट संस्करण वर्तमान में विकास में है ), और सर्वर भाग C # में है।

यह रूपरेखा MIT लाइसेंस के तहत GitHub पर प्रकाशित हुई है । इसमें ASP.NET MVC4 का उपयोग करके लिखा गया डेमो एप्लिकेशन शामिल है और इसके उपयोग पर प्रलेखन शामिल है।

JRIApp का उपयोग करके बनाए गए एप्लिकेशन की शैली WCF RIA सेवा के साथ Microsoft सिल्वरलाइट का उपयोग करके एप्लिकेशन बनाने के समान है। डेटा बाइंडिंग में एक समान सिंटैक्स है - यूनिडायरेक्शनल, बिडायरेक्शनल, एक डेटा कनवर्टर का उपयोग कर सकता है। बटन या हाइपरलिंक जैसे तत्वों को कमांड के माध्यम से क्रियाओं को जोड़ा जा सकता है।

उदाहरण के लिए, डेमो ऐप्लिकेशन में पेज स्विच कैसे बनाया जाता है:

<div style="margin-top:40px;text-align:left; border:none;width:100%;height:15%"> <!----> <div style="float:left;" data-bind="{this.dataSource,to=dbSet,source=VM.productVM}" data-view="name=pager,options={sliderSize:20,hideOnSinglePage=false}"> </div> <!--  -  -   --> <div style="float:left; padding-left:10px;padding-top:10px;"> <span>Total:</span> <span data-bind="{this.value,to=totalCount,source=VM.productVM.dbSet}"></span>,   <span>Selected:</span> <span data-bind="{this.value,to=selectedCount,source=VM.productVM}"></span> </div>     <!--    --> <button style="float:right;" data-bind="{this.command,to=addNewCommand,mode=OneWay,source=VM.productVM}"> + New Product </button> </div>

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

एक छोटे टेम्पलेट का एक उदाहरण:

 <div id="stackPanelItemTemplate" data-role="template" class="stackPanelItem" > <fieldset> <legend><span data-bind="{this.value,to=radioValue}"></span></legend> Time: <span data-bind="{this.value,to=time,converter=dateTimeConverter,converterParam='HH:mm:ss'}"></span> </fieldset> </div>

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

इसके अलावा, मैं इस विषय में कुछ मूल बातें शामिल करना चाहूंगा ताकि फ्रेमवर्क के साथ शुरुआत की जा सके।

ढांचे के आधार वर्ग:

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

इस वर्ग में निहित एक और महत्वपूर्ण कार्य यह है कि इसकी एक विधि, विस्तार है , जो आपको व्युत्पन्न वर्गों में कार्यक्षमता विरासत में मिलती है।

एक नई वस्तु वर्ग बनाने का एक उदाहरण:

 var NewObject = RIAPP.BaseObject.extend( { // _create:function (radioValue) { this._super(); this._radioValue = radioValue; }, //   _getEventNames:function () { var base_events = this._super(); return ['radio_value_changed'].concat(base_events); }, //     _onRadioValueChanged: function(){ this.raiseEvent('radio_value_changed',{value: this.radioValue}) } }, { //   radioValue:{ set:function (v) { if (this._radioValue !== v){ this._radioValue = v; this.raisePropertyChanged('radioValue'); this._onRadioValueChanged(); } }, get:function () { return this._radioValue; } } }, function (obj) { // ,        //app -     closure scope app.registerType('custom.NewObject', obj); });

इसके अलावा, ऑब्जेक्ट क्लास को अन्य मॉड्यूल से प्राप्त किया जा सकता है

  var Instance = app.getType('custom.NewObject').create('radioValue1');

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

उदाहरण के लिए, मॉड्यूल में से एक, newObjMod, हम क्लास निर्यात करते हैं:

  var thisModule = this; thisModule.NewObject = NewObject;

और दूसरे में हम आयात करते हैं:

  var NewObject = app.modules.newObjMod.NewObject;

फ्रेमवर्क में कक्षाओं की परिभाषा के आधार का अध्ययन करने के बाद, हम डेटा बाइंडिंग की परिभाषा पर आगे बढ़ सकते हैं, अर्थात्। वस्तु के लिए, बाध्यकारी ।

डेटा बाइंडिंग:

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

HTML तत्व के लिए डेटा बाइंडिंग का एक उदाहरण, चुनें :

 <select size="1" style="width:220px" data-bind="{this.dataSource,to=mailDocsVM.dbSet,mode=OneWay,source=VM.sendListVM} {this.selectedValue,to=selectedDocID,mode=TwoWay,source=VM.sendListVM} {this.toolTip,to=currentItem.DESCRIPTION,mode=OneWay,source=VM.sendListVM.mailDocsVM}" data-view="options:{valuePath=MailDocID,textPath=NAME}">

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

कस्टम व्यू मॉडल के आरंभीकरण (निर्माण) का उदाहरण:

 //    startUp   Application RIAPP.global.UC.fn_Main = function (app) { //      app.global.defaults.imagesPath = '@Url.Content("~/Scripts/jriapp/img/")'; //  view model      VM   Application app.VM.errorVM = app.getType('custom.ErrorViewModel').create(); app.VM.sendListVM = app.getType('custom.SendListVM').create(); //        view model app.VM.sendListVM.load(); };

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

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

बाइंडिंग जीवनचक्र:

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

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

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

निम्नलिखित उदाहरण में, हमने संकेत दिया कि हम चाहते हैं कि नाम विस्तारक के तहत पंजीकृत एक तत्व दृश्य बनाया जाए।

 <span data-bind="{this.command,to=expanderCommand,mode=OneWay,source=VM.headerVM}" data-view="name=expander"></span>

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

 <input type="text" data-bind="{this.value,to=testProperty,mode=TwoWay,source=VM.testObject1}" data-view="options:{updateOnKeyUp=true}" /> // <div data-bind="{this.dataSource,to=dbSet,source=VM.productVM}" data-view="name=pager,options={sliderSize:20,hideOnSinglePage=false}"> </div>

मॉड्यूलर संरचना:

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

परिणाम:

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

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

jRIApp - ऑनलाइन व्यापार एप्लिकेशन बनाने के लिए नया HTML5 ढांचा

ढांचे के आधार वर्ग:

डेटा बाइंडिंग:

बाइंडिंग जीवनचक्र:

मॉड्यूलर संरचना:

परिणाम:

More articles: