🛄 💥 🤽🏿 सी # और वेब प्रौद्योगिकी में क्रॉस-प्लेटफ़ॉर्म GUI 🔏 🧑🏼‍🤝‍🧑🏻 ✍🏿

बहुत पहले उत्पाद विनिर्देश, आंशिक रूप से मौखिक, में एक आवश्यकता थी - डेस्कटॉप के लिए एक क्रॉस-प्लेटफॉर्म (विंडोज, लिनक्स, मैक) क्लाइंट की उपस्थिति और मोबाइल का एक हल्का संस्करण (विंडोज, एंड्रॉइड, आईफोन)। यदि संभव हो, तो इंटरफ़ेस विभिन्न ओएस के समान संभव होना चाहिए।
मोनो के लिए धन्यवाद , हम क्रॉस-प्लेटफ़ॉर्म एप्लिकेशन लिख सकते हैं, लेकिन जीयूआई के साथ सवाल खुला रहता है। .Net (विंडोज फॉर्म, डब्ल्यूपीएफ) के लिए मौजूदा प्रौद्योगिकियां केवल विंडोज के तहत अच्छी तरह से काम करती हैं, और हमारे पास पहले से ही विंडोज एसएस को पोर्ट करने का दुखद अनुभव था। लिनक्स के तहत, हम GtkSharp का उपयोग कर सकते हैं, लेकिन मैं .Net के साथ विंडोज पर मोनो को स्थापित करने के विचार की तरह नहीं हूं। नतीजतन, आपको प्रत्येक ओएस के लिए एक अलग इंटरफ़ेस लिखना और बनाए रखना होगा।
इस स्थिति में .Net टीम (वेब के लिए पूर्वाग्रह के साथ) क्या कर सकती है? हमने Webkit को एम्बेड करने और html-js-css बंडल पर एक GUI लिखने का फैसला किया।
आज, हम विंडोज के लिए 2 साल और लिनक्स और मैक के लिए एक साल के लिए इस दृष्टिकोण का सफलतापूर्वक उपयोग कर रहे हैं। अभी तक हाथ मोबाइल प्लेटफॉर्म पर नहीं पहुंचे हैं।

क्यों?

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

कैसे?

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

मैक OSX

एक खसखस के तहत एम्बेड करने के लिए कोई विकल्प नहीं है इसलिए, हम मोनोमाक और एक मानक ब्राउज़र का उपयोग करते हैं। लेकिन लाइसेंस में एक पकड़ है। आप मोनो के बिना आवेदन को स्वतंत्र रूप से वितरित कर सकते हैं, अर्थात। उपयोगकर्ता को स्वयं मोनो स्थापित करना होगा और इसलिए, एप्लिकेशन AppStore में नहीं जा सकता। यदि हम आवेदन में मोनो को एम्बेड करना चाहते हैं, तो हमें Xamarin.Mac खरीदना होगा , जिसमें एक प्रोग्रामर के लिए कंपनी के आकार के आधार पर 300 या 1000 डॉलर खर्च होंगे।
खसखस के तहत हमें सबसे संक्षिप्त कोड मिला। केवल गैर-सहज स्थान js से C # कॉल कर रहा है।
ब्राउज़र को इनिशियलाइज़ करने के बाद, हमें एक ऑब्जेक्ट बनाने की ज़रूरत है जिसके द्वारा js C # से कंट्रोलर मेथड्स को कॉल कर सकें। इंटरैक्शन ऑब्जेक्ट को कॉल करें:

webView.WindowScriptObject.SetValueForKey(this, new NSString("interaction"));

हम तरीकों को परिभाषित करते हैं और इंगित करते हैं कि उनमें से किसको js से बुलाया जा सकता है:

  [Export("callFromJs")] public void CallFromJs(NSString message) { CallJs("showMessage", message + "   C#"); } [Export ("isSelectorExcludedFromWebScript:")] public static bool IsSelectorExcludedFromScript(MonoMac.ObjCRuntime.Selector sel) { if (sel.Name == "callFromJs") return false; return true; //      }

अब js में हम callFromJs विधि कह सकते हैं:

  window.interaction.callFromJs('  js.');

टिप्पणियों के साथ घोषित कार्यक्षमता की पूरी सूची

  public partial class MainWindowController : MonoMac.AppKit.NSWindowController { /*  */ //  xib(nib) ,      UI   public override void AwakeFromNib () { base.AwakeFromNib (); //     js    C#.   interaction // window.interaction.callFromJs(param1, param2, param3) -    js. webView.WindowScriptObject.SetValueForKey(this, new NSString("interaction")); webView.MainFrame.LoadHtmlString (@" <html> <head></head> <body id=body> <h1></h1> <button id=btn> C#</button> <p id=msg></p> <script> function buttonClick() { interaction.callFromJs('  js.'); } function showMessage(msg) { document.getElementById('msg').innerHTML = msg; } document.getElementById('btn').onclick = buttonClick; </script> </body> </html>", null); } //    ,       js [Export ("isSelectorExcludedFromWebScript:")] public static bool IsSelectorExcludedFromWebScript(MonoMac.ObjCRuntime.Selector aSelector) { if (aSelector.Name == "callFromJs") return false; return true; //      } [Export("callFromJs")] public void CallFromJs(NSString message) { CallJs("showMessage", new NSObject[] { new NSString(message + "   C#") }); } public void CallJs(string function, NSObject[] arguments) { this.InvokeOnMainThread(() => { webView.WindowScriptObject.CallWebScriptMethod(function, arguments); }); } }

जीथब पर काम करने का उदाहरण ।
जब मुझे पता चला तो मैं वास्तव में इस वीडियो को याद कर रहा था: "कंट्रोलर कोड में WebView का लिंक कैसे जोड़ें।"

उबंटू

मोनो के तहत, हम वेबकिट-शार्प पैकेज का उपयोग करते हैं।
गैर-सहज कोड की मात्रा धीरे-धीरे बढ़ रही है।
J # से C # कॉल करने के लिए, आप संदर्भ द्वारा संक्रमण को रोक सकते हैं।

  browser.NavigationRequested += (sender, args) => { var url = new Uri(args.Request.Uri); if (url.Scheme != "mp") { //mp - myprotocol. //     . //        return; } var parameters = System.Web.HttpUtility.ParseQueryString(url.Query); handlers[url.Host.ToLower()](parameters); //    browser.StopLoading(); };

जे एस से कॉल इस तरह दिखेगा:

  window.location.href = 'mp://callFromJs?msg=  js.';

एक और तरीका टाइटलचैनड इवेंट से जुड़ा हुआ है।
Js में, दस्तावेज़ का शीर्षक सेट करें:

  document.title = JSON.stringify({ method: 'callFromJs', arguments: { msg: '  js'} });

C # में, TitleChanged इवेंट निकाल दिया जाता है, हम शीर्षक को डिसेर्बलाइज़ करते हैं और पिछले दृष्टिकोण की तरह, हैंडलर को कॉल करते हैं।

माना जाता है कि WebKit आवरण में, किसी भी js कोड को C # से निष्पादित किया जा सकता है, जो हमें C # से js कॉल को कार्यान्वित करने की अनुमति देता है:

  public void CallJs(string function, object[] args) { // javascript var js = string.Format(@" {0}.apply(window, {1}); ", function, new JavaScriptSerializer().Serialize(args)); Gtk.Application.Invoke(delegate { browser.ExecuteScript(js); }); }

टिप्पणियों के साथ घोषित कार्यक्षमता की पूरी सूची

  public partial class MainWindow: Gtk.Window { private Dictionary<string, Action<NameValueCollection>> handlers; private WebView browser; public MainWindow (): base (Gtk.WindowType.Toplevel) { Build (); CreateBrowser (); this.ShowAll (); } protected void OnDeleteEvent (object sender, DeleteEventArgs a) { Application.Quit (); a.RetVal = true; } private void CreateBrowser () { //       js handlers = new Dictionary<string, Action<NameValueCollection>> { { "callfromjs", nv => CallJs("showMessage", new object[] { nv["msg"] + "   #" }) } }; browser = new WebView (); browser.NavigationRequested += (sender, args) => { var url = new Uri(args.Request.Uri); if (url.Scheme != "mp") { //mp - myprotocol. //     . //        return; } var parameters = System.Web.HttpUtility.ParseQueryString(url.Query); handlers[url.Host.ToLower()](parameters); //    browser.StopLoading(); }; browser.LoadHtmlString (@" <html> <head></head> <body id=body> <h1></h1> <button id=btn> C#</button> <p id=msg></p> <script> function buttonClick() { window.location.href = 'mp://callFromJs?msg=  js.'; } function showMessage(msg) { document.getElementById('msg').innerHTML = msg; } document.getElementById('btn').onclick = buttonClick; </script> </body> </html> ", null); this.Add (browser); } public void CallJs(string function, object[] args) { var js = string.Format(@" {0}.apply(window, {1}); ", function, new JavaScriptSerializer().Serialize(args)); Gtk.Application.Invoke(delegate { browser.ExecuteScript(js); }); } }

जीथब पर काम करने का उदाहरण ।

विंडोज

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

विशेषताएं

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