WebKit .NET का उपयोग करने के बारे में

परिचय

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

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

इस लेख में, हम Windows के तहत C # में डेस्कटॉप एप्लिकेशन में WebKit .NET का उपयोग करने पर विचार करेंगे।

एंबेडेड ब्राउज़र आवश्यकताएँ

हम एक एम्बेडेड ब्राउज़र के लिए बुनियादी आवश्यकताओं को प्रकट करेंगे।

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

वेब इंस्पेक्टर और डिबगर हर वेब डेवलपर का सबसे अच्छा दोस्त है। और यहाँ इस बारे में क्या? चलो ठीक है - यह यहाँ इतना आसान नहीं है। हम एक एम्बेडेड ब्राउज़र में चल रहे JavaSript को डिबग करने का एक तरीका नहीं खोज पाए थे, लेकिन हमें डोम की जांच करने का एक मौका मिला और जावास्क्रिप्ट कंसोल मिला।

तो WebKit .NET की मूलभूत आवश्यकताएं निम्नलिखित चीजें थीं:

• HTML दस्तावेज़ में मनमानी सामग्री सेट करने की क्षमता
• जावास्क्रिप्ट C # सिंक्रोनाइज़ या एसिंक्रोनसली से कॉल करता है
• C # जावास्क्रिप्ट से या असिंक्रोनस रूप से कॉल करता है
• वेब इंस्पेक्टर

इसके बाद, हम विचार करते हैं कि WebKit .NET में ऊपर क्या मौजूद था और लापता कार्यों को कैसे लागू किया गया था।

HTML सामग्री सेट करना

WebKitBrowser.DocumentText गुण आपको HTML दस्तावेज़ में मनमानी सामग्री सेट करने की अनुमति देता है। हमारा इंटरफ़ेस बाहरी संसाधनों से पूरी तरह से स्वतंत्र है, हम HTML में सीधे सभी जावास्क्रिप्ट और सीएसएस को शामिल करते हैं। उत्पादकता बढ़ाने के लिए, सभी लिपियों को एक छोटा रूप में शामिल किया गया है।

जावास्क्रिप्ट C # से कॉल करता है

WebKit .NET में C # से जावास्क्रिप्ट कॉल के लिए, निम्न हस्ताक्षर के साथ एक Document.InvokeScriptMethod विधि है:

public Object InvokeScriptMethod( string Method, params Object[] args ) 

दुर्भाग्य से, इस पद्धति के पास जावास्क्रिप्ट फ़ंक्शन के मापदंडों को पारित करने में समस्या है - यह सिर्फ काम नहीं करता है।

इस समस्या को हल करने के लिए, हमें C # से अपना स्वयं का जावास्क्रिप्ट कॉल प्रोटोकॉल विकसित करना पड़ा। विचार इस प्रकार है:

• दिए गए पहचानकर्ता के साथ div का उपयोग मापदंडों को पारित करने के लिए किया जाता है
• C # जावास्क्रिप्ट फ़ंक्शन के लिए JSON स्ट्रिंग में नाम और पैरामीटर सरणी को क्रमबद्ध करता है और दिए गए डिव में डालता है
• जावास्क्रिप्ट JSON को पुनः प्राप्त करता है, इसे डिसेरिअलाइज़ करता है, और निर्दिष्ट फ़ंक्शन को कॉल करता है

C # में जावास्क्रिप्ट फ़ंक्शन को कॉल करने के लिए कोड इस प्रकार है:

 public object CallJS(string functionName, object[] arguments, bool async) { var dict = new Dictionary<string, object>(); dict["arguments"] = arguments; dict["functionName"] = functionName; dict["async"] = async; SetJsBuffer(dict); return webKitBrowser.Document.InvokeScriptMethod("JS_CALL_HANDLER"); } private void SetJsBuffer(object data) { string id = "cs-js-buffer"; Element elem = null; try { elem = webKitBrowser.Document.GetElementById(id); } catch (Exception) { } //  ,     if (elem == null) { elem = webKitBrowser.Document.CreateElement("div"); elem.SetAttribute("id", id); webKitBrowser.Document.GetElementsByTagName("body")[0].AppendChild(elem); } elem.TextContent = Newtonsoft.Json.JsonConvert.SerializeObject(data); } 

और जावास्क्रिप्ट में, कॉल को इस तरह संभाला जाता है:

 JS_CALL_HANDLER = function() { //       div var dataFromCSharp = getDataFromDOM("cs-js-buffer"); if (!dataFromCSharp) { return; } if (!dataFromCSharp.async) { return window[dataFromCSharp.functionName].apply( window, dataFromCSharp.arguments ); } else { Ext.Function.defer(function () { window[dataFromCSharp.functionName].apply( window, dataFromCSharp.arguments ); }, 1); } } 

कॉल को अतुल्यकालिक बनाने के लिए, हम केवल निर्दिष्ट फ़ंक्शन को कॉल करते हैं
1 मी देरी। चूंकि हमें अतुल्यकालिक कॉल की आवश्यकता नहीं है जो मान लौटाते हैं,
तब ऐसा समाधान हमें पूरी तरह से संतुष्ट करता है।

जावास्क्रिप्ट से सी # कॉल

मूल रूप से WebKit .NET में जावास्क्रिप्ट से कोई मूल C # कॉल तंत्र नहीं है। दस्तावेज़ीकरण के माध्यम से देखने के बाद, WebKitBrowser.DocumentTitleChanged इवेंट मिला। यह शायद एकमात्र ऐसी घटना है जिसे JavaScript आसानी से किसी भी समय document.title सेट करके उत्पन्न कर सकता है।

दो चीजें हैं जो इस घटना को आकर्षक बनाती हैं:

• document.title को काफी बड़ा सेट किया जा सकता है, 16Kb से अधिक
• डॉक्यूमेंट को सेट करना। केवल डॉक्यूमेंट को पूरा करने के बाद ही जावास्क्रिप्ट को पूरा किया जाता है।

इसने जावास्क्रिप्ट से हमारे C # कॉल प्रोटोकॉल का आधार बनाया।
निम्न सूची C # कॉल करने के लिए जावास्क्रिप्ट कोड प्रदान करती है।

 var callMap = {}; //   callback  /** * If call is synchronous, function returns response, received from c#, * otherwise - response data will be passed to callback. * * @param {Object} config Call properties * @param {String} config.name Name of C# function to call * @param {Object[]} config.arguments Array of arguments, that will be passed to C# function * @param {Boolean} config.async True, if this request must be performed asynchronously, * in this case callback and scope must be specified * @param {Function} config.callback Callback function * @param {Object} config.scope Scope for callback */ callCSharp = function(config) { var id = generateId(); //    var callObject = { id : id, name : config.name, arguments : config.arguments, async : config.async }; if (config.async) { callObject.callbackHandler = "COMMON_ASYNC_HANDLER"; callMap[id] = { callback: config.callback, scope : config.scope }; } // invoke C# by triggering WebKitBrowser.DocumentTitleChanged event document.title = Ext.encode(callObject); // elegant, isn't it! // execution continues only after all C# handlers will finish if (!config.async) { var csharpResponse = getDataFromDOM(id); return csharpResponse.response; } } 

जैसा कि लिस्टिंग से देखा जा सकता है, प्रत्येक कॉल को एक विशिष्ट पहचानकर्ता प्रदान किया जाता है।
इसके बाद इसका उपयोग दिव्य तत्व के लिए पहचानकर्ता के रूप में किया जाता है जिसमें C # परिणाम देता है।

यदि कॉल समकालिक है, तो इसके पूरा होने से ठीक पहले, C # हैंडलर कर सकते हैं
अपना परिणाम HTML डॉक्यूमेंट के शरीर में रखें। इस स्थिति में, callCSharp विधि हो सकती है
दस्तावेज़ सेट करने के तुरंत बाद डोम से परिणाम निकालें।

अतुल्यकालिक कॉल के लिए, C # को पूरा होने पर कॉलबैक फ़ंक्शन लॉन्च करना चाहिए
संचालकों। इस मामले में, C # से हम निम्नलिखित लिस्टिंग में दिखाए गए विशेष जावास्क्रिप्ट विधि को कहते हैं:

 /** * Handler for all C# async requests. * It calls real callback according to passed id. * * C# provides JSON of special format in div with passed id: * { * response : {...}, * success : true or false * } * * response and success are passed to callback function * @param {String} id Id of C# call */ COMMON_ASYNC_HANDLER = function(id) { var dataFromCSharp = getDataFromDOM(id); var callbackParams = callMap[id]; delete callMap[id]; callbackParams.callback.apply(callbackParams.scope, [ dataFromCSharp.response, dataFromCSharp.success ]); } 

C # पक्ष में, हमारे पास CallManager वर्ग है जो JavaScript से कॉल करने के लिए सदस्यता को नियंत्रित करता है। CallManager के पास एक एकल WebKitBrowser.DocumentTitleChanged ईवेंट हैंडलर है, जो WebKitBrowser.DocumentTitle प्रॉपर्टी के मूल्य को डिसेरलाइज़ करता है और जावास्क्रिप्ट नाम (config) नाम पर निर्भर करता है, मापदंडों के साथ संबंधित पंजीकृत हैंडलर को पास करता है। CallManager कॉल के प्रकार को भी ध्यान में रखता है: सिंक्रोनस या एसिंक्रोनस। प्रकार के आधार पर, हैंडलर को या तो सिंक्रोनस या एसिंक्रोनस रूप से कहा जाता है।

वेब इंस्पेक्टर

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

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

दुर्भाग्य से, WebKit .NET देशी WebKit वेब इंस्पेक्टर के उपयोग की अनुमति नहीं देता है और यहां कोई दूरस्थ डीबगिंग समर्थित नहीं है। इसलिए, हमने फायरबग लाइट (1.4.0) का उपयोग करने का फैसला किया, जो फायरबग पर आधारित एक एम्बेडेड डिबगर है।

Firebug Lite के HTML पेज में हम निम्न प्रकार से जुड़ते हैं:

 <!DOCTYPE html> <html> <head> ... <script type='text/javascript' src='/path/to/firebug-lite.js'> { overrideConsole: true, startInNewWindow: true, startOpened: true, enableTrace: true } </script> ... </head> <body>...</body> </html> 

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

 browser.Url = new Uri( "http://localhost/path/to/debug-version-of-interface.html", System.UriKind.Absolute); browser.NewWindowCreated += new NewWindowCreatedEventHandler( (sender, newWindowEventArgs) => { // create new form with single item - Firebug Lite window debuggerForm = new DebuggerForm(newWindowEventArgs.WebKitBrowser); debuggerForm.Show(); }); 

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

निष्कर्ष

ऊपर वर्णित सभी सुधारों के बाद, WebKit .NET एक पूरी तरह से प्रयोग करने योग्य एम्बेडेड ब्राउज़र बन गया है जो कि काफी काम करता है और काफी बड़े डोम के साथ मुकाबला करता है।

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