🕴🏿 👨🏽‍✈️ 🥇 हम ऑफ़लाइन कार्य की संभावना के साथ Ext JS 4 पर MVC एप्लिकेशन लिख रहे हैं 👧🏿 💆🏼 ✌🏾

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

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

आज इस समस्या को हल किया गया है - HTML5 का अपने स्थानीय भंडारण के साथ उपयोग करना (इस भंडारण के साथ पारदर्शी रूप से काम करने की क्षमता के साथ एक्सटी 4 और एचटीएमएल 5 एप्लीकेशन कैश (एप्लीकेशन कैश)। इन तकनीकों का संयोजन हमें निम्नलिखित योजना को लागू करने की अनुमति देता है: एक नेटवर्क की उपस्थिति में, स्थिर फाइलें (HTML / CSS / JS कोड और चित्र) साइट से डाउनलोड की जाती हैं और हम एक केंद्रीकृत सर्वर डेटाबेस के साथ काम करते हैं, एक नेटवर्क की अनुपस्थिति में, एप्लिकेशन कैश से स्टेटिक्स डाउनलोड किया जाता है और हम स्थानीय भंडारण के साथ काम करते हैं, जब इंटरनेट तक पहुंच दिखाई देती है तो सर्वर डेटाबेस में सहेजा जाता है। उसी समय, पेज URL के सक्रिय कनेक्शन के बिना, ब्राउज़र नेटवर्क एक्सेस त्रुटि नहीं दिखाता है, लेकिन एक कार्यात्मक प्रणाली जो स्थानीय भंडारण के साथ काम करती है। स्पष्टीकरण और एक कामकाजी उदाहरण (हो सकता है कि मेरी vds Habroeffect के नीचे न हों) - कट के नीचे। लेख बल्कि बड़ा, लेकिन उम्मीद है, बहुत जानकारीपूर्ण निकला।

एचटीएमएल 5

यदि आप एचटीएमएल 5 से परिचित हैं - इस अध्याय को छोड़ने के लिए स्वतंत्र महसूस करें, यदि नहीं - तो यहां आपको प्रयुक्त तकनीकों का संक्षिप्त विवरण मिलेगा।

अनुप्रयोग कैश

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

<html manifest="http://site.ru/names.appcache">…</html>

मैनिफ़ेस्ट फ़ाइल के प्रकार को टेक्स्ट / कैश-मेसेफ़ पर सेट किया जाना चाहिए। अपाचे वेब सर्वर के लिए, उदाहरण के लिए, कॉन्फ़िगरेशन फ़ाइल में जोड़ें:

 AddType text/cache-manifest .appcache

Java के लिए web.xml जोड़ें:

 <mime-mapping> <extension>appcache</extension> <mime-type>text/cache-manifest</mime-type> </mime-mapping>

सरल मैनिफ़ेस्ट फ़ाइल का एक उदाहरण:

 CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js

पहली पंक्ति (CACHE MANIFEST) की आवश्यकता है। यदि आप उन संसाधनों को जोड़ना चाहते हैं जिन्हें हमेशा नेटवर्क की आवश्यकता होती है, तो उन्हें NETWORK लाइन के बाद जोड़ें:

 CACHE MANIFEST index.html NETWORK: login.php

आप यहाँ प्रकट फ़ाइल प्रारूप पर करीब से देख सकते हैं। एप्लिकेशन कैश को तीन तरीकों से अपडेट किया जा सकता है: इसे ब्राउज़र में उपयोगकर्ता द्वारा हटाए जाने के लिए मजबूर किया जा सकता है, जब प्रकट फ़ाइल अपडेट की जाती है, तो कैश अपडेट किया जाएगा, और अंत में, कैश को जावास्क्रिप्ट से अपडेट करने के लिए मजबूर किया जा सकता है।
ब्राउज़र समर्थन: क्रोम 4+, फ़ायरफ़ॉक्स 4+, सफारी 4+, ओपेरा 11+, IE 10, iOS 5+, एंड्रॉइड 3+।

स्थानीय भंडारण

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

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

स्थानीय भंडारण के साथ काम करना सरल है - यह सिर्फ एक कुंजी-मूल्य संरचना है:

 localStorage.setItem('name', 'Hello World!'); localStorage.getItem('name'); localStorage.removeItem('name');

समर्थित ब्राउज़र: क्रोम 5+, फ़ायरफ़ॉक्स 3.6+, ओपेरा 10+, सफारी 4+, IE 8+।

एक्सट जेएस 4 में स्थानीय भंडारण

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

प्रेरित?

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

फ़ाइल संरचना स्क्रीनशॉट में दिखाई गई है, index.html, /app.js और / app / निर्देशिका वास्तव में हमारे लिए महत्वपूर्ण हैं।

एक्सटी जेएस का चौथा संस्करण इंटरफ़ेस विकसित करने के लिए एमवीसी मॉडल का उपयोग करने का सुझाव देता है, हम इसका पालन करेंगे:

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

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

तो, ज़ाहिर है, यह सब HTML के साथ शुरू होता है:

 <!--     - Application Cache --> <html manifest="UsersApp.appcache"> <head> <link rel="stylesheet" type="text/css" href="ext-4.0.7-gpl/resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="ext-4.0.7-gpl/ext-dev.js" type="text/javascript" charset="utf-8"></script> <script src="app.js" type="text/javascript" charset="utf-8"></script> </head> <body style="padding: 25px;"><div id="console"><h2> </h2></div></body> </html>

यहां कुछ भी विशेष नहीं है - कैशिंग के लिए आवश्यक संसाधनों के साथ प्रकट फ़ाइल को इंगित किया गया है, फ्रेमवर्क शैलियों और कस्टम शैलियाँ जुड़ी हुई हैं, एक्सट जेएस कर्नेल और एप्लिकेशन एंट्री पॉइंट ऐप। जेएस लोड किए गए हैं। जेएस 4 एक्सट्रीम एक डायनेमिक लोडिंग मैकेनिज्म को लागू करता है जो आपको फ्लाई पर आवश्यक जेएस फाइलों को कनेक्ट करने की अनुमति देता है - इस प्रकार, ऐप की केवल एक जेएस फाइल। जेएस एप्लिकेशन को सीधे ही html में लिखा जाता है।

इनपुट जावास्क्रिप्ट फ़ाइल सरल है:

 //    JS  Ext.Loader.setConfig({ enabled: true, disableCaching: false, paths: {UsersApp: 'app', Ext: 'ext-4.0.7-gpl/src'} }); //  ,     Ext.require(["UsersApp.view.win"]); Ext.application({ name: 'UsersApp', launch: function(){ Ext.create("UsersApp.view.win").show(); }, controllers: ["Main"] });

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

ध्यान दें कि वास्तव में वस्तुओं का नाम उस पथ के अनुरूप है जिसमें ये वस्तुएं संग्रहीत हैं। उदाहरण के लिए, UsersApp.store.storeLocal ऑब्जेक्ट /app/store/storeLocal.js निर्देशिका में संग्रहीत किया जाता है, जबकि भौतिक निर्देशिका ऐप के नाम के लिए UsersApp एप्लिकेशन नाम की मैपिंग Ext.Loader बूटलोडर सेटिंग्स में सेट है।

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

तो, हमारे आवेदन UsersApp.view.win विजेट बनाता है और मुख्य नियंत्रक का उपयोग करता है। नियंत्रक को हमेशा लॉन्च से पहले कहा जाता है () विधि कहा जाता है, यह सिस्टम घटकों को बांधने के लिए सभी आवश्यक प्रारंभिक कार्य करता है।

UsersApp.view.win विंडो का कोड सरल है (इसके बाद, मुख्य कॉन्फ़िगरेशन पैरामीटर, दृश्य कॉन्फ़िगरेशन जैसे ऊँचाई-चौड़ाई और अन्य महत्वहीन क्षण स्रोत कोड में लेख के अंत में पाए जा सकते हैं):

 Ext.define('UsersApp.view.win', { extend: 'Ext.Window', requires: ['UsersApp.view.grid'], itemId: 'usersWindow', layout: 'fit', items: [ { xtype: 'NamesGridPanel', itemId: 'NamesGrid' } ] });

यहाँ हम UsersApp.view.win वर्ग को परिभाषित करते हैं, जो कि Standard Ext.Window विंडो के वर्ग का विस्तार करता है और इसके लिए UsersApp.view.grid को लोड करने की आवश्यकता होती है। तालिका कोड:

 Ext.define('UsersApp.view.grid', { extend: 'Ext.grid.Panel', alias: 'widget.NamesGridPanel', requires: ['Ext.grid.plugin.CellEditing', 'Ext.form.field.*'], itemId: 'usersGrid', //   -      initComponent : function() { //        //    ,  //   CellEditing this.cellEditing = Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 2 }); this.plugins = this.cellEditing; this.columns = this.columnsGet(); this.tbar = this.tbarGet(); //       this.callParent(); }, tbarGet: function(){ return[ { text: '', iconCls: 'add', handler: this._onUserAddClick }, { text: '', iconCls: 'delete', handler: this._onUserDelClick } ] }, columnsGet: function(){ return [ { text: '', field: 'textfield', dataIndex: 'firstName' }, { text : '', field: 'textfield', dataIndex: 'secondName' } ] }, _onUserAddClick: function(button){ //      }, _onUserDelClick: function(button){ //      } })

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

यह दो रिपॉजिटरी बनाने का समय है - सर्वर और स्थानीय। इन दोनों स्टोरेज में एक ही मॉडल होगा (क्योंकि उनमें वास्तव में एक ही संरचना के डेटा होते हैं), लेकिन अलग-अलग समीपताएं। मॉडल UsersApp.model.Names वर्ग द्वारा वर्णित है:

 Ext.define('UsersApp.model.Names', { fields: [{name: 'id', type: 'int', useNull: true}, {name: 'firstName'}, {name: 'secondName'}], extend: 'Ext.data.Model', //       ,   validations: [{ type: 'length', field: 'firstName', min: 1 },{ type: 'length', field: 'secondName', min: 1 } ] });

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

सर्वर-साइड डेटा लोडिंग के साथ एक स्टोरेज बनाएँ:

 Ext.define('UsersApp.store.store', { extend: 'Ext.data.Store', requires : ['UsersApp.model.Names', 'Ext.data.proxy.Ajax'], model: 'UsersApp.model.Names', proxy: { type: 'ajax', api: { read: 'crud.php?act=read', update: 'crud.php?act=update', create: 'crud.php?act=create', destroy: 'crud.php?act=delete' }, reader: { type: 'json', root: 'names', idProperty: 'id' }, writer: { type: 'json', writeAllFields: false, root: 'names' } } });

तो, सर्वर-लोडिंग मॉडल क्रमशः बनाए गए मॉडल का उपयोग करता है, जो डेटा संरचना का वर्णन करता है, और क्रमशः डेटा पढ़ने और लिखने के लिए कॉन्फ़िगर किए गए "रीडर" रीडर और "लेखक" लेखक के साथ अजाक्स प्रॉक्सी। एपीआई पैरामीटर URL पते को निर्दिष्ट करता है जो डेटा को पढ़ने, अपडेट करने, जोड़ने और हटाने के लिए Ext JS एक्सेस करेगा।

स्थानीय संग्रहण कोड:

 Ext.define('UsersApp.store.storeLocal', { extend: 'Ext.data.Store', requires : ['UsersApp.model.Names', 'Ext.data.proxy.LocalStorage'], model: "UsersApp.model.Names", proxy: { type: 'localstorage', id : 'Names' } });

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

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

 Ext.define("UsersApp.controller.Main", { extend: 'Ext.app.Controller', requires: [ //     - ""  'UsersApp.Utils', 'UsersApp.store.storeLocal', 'UsersApp.store.store' ], init: function(){ //  getStore    , //     -    var storeLocal = this.getStore("storeLocal"); var store = this.getStore("store"); //       ,    //  __   storeLocal.addListener('load', function(){ //    -   // ,     . UsersApp.Utils.ping  //    callback  UsersApp.Utils.ping({ success: this._onPingSuccess, //   failure: this._onPingFailure //   }, this); }, this); //     storeLocal.load(); }, _onPingSuccess: function(){ //   var win = Ext.ComponentQuery.query('#usersWindow')[0]; var storeLocal = this.getStore('storeLocal'); var store = this.getStore('store'); var grid = win.getComponent('NamesGrid'); win.setTitle(", ") //       localCnt = storeLocal.getCount(); //    , // ,    if (localCnt > 0){ //  ,   //      //   for (i = 0; i < localCnt; i++){ var localRecord = storeLocal.getAt(i); var deletedId = localRecord.data.id; delete localRecord.data.id; store.add(localRecord.data); localRecord.data.id = deletedId; } //    store.sync(); //    for (i = 0; i < localCnt; i++){ storeLocal.removeAt(0); } } store.load(); //      grid.reconfigure(store); grid.store.autoSync = true; }, _onPingFailure: function(){ //  ,     var win = Ext.ComponentQuery.query('#usersWindow')[0]; var storeLocal = this.getStore('storeLocal'); var store = this.getStore('store'); var grid = win.getComponent('NamesGrid'); win.setTitle(", ") //      grid.reconfigure(storeLocal); grid.store.autoSync = true; } });

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

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

काम का एक उदाहरण यहाँ पाया जा सकता है । स्रोत (PHP के सर्वर पक्ष के रूप में, मैंने जावा में भी लिखा है - अगर किसी को इसकी आवश्यकता है, तो मैं इसे पोस्ट करूँगा)।

पुनश्च। नए रुस्तवेली एल्बम के साथ पारखी - और गर्म सर्दियों के प्रोग्रामर शाम आपके लिए :)

हम ऑफ़लाइन कार्य की संभावना के साथ Ext JS 4 पर MVC एप्लिकेशन लिख रहे हैं

एचटीएमएल 5

एक्सट जेएस 4 में स्थानीय भंडारण

प्रेरित?

More articles: