The development of JS interface based on wp8 conjecture

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

The general development of wp8 application we will use XAML, but the effect of XAML which are not as good as html+css+js is convenient

So we have to use js to develop wp8 interface.


  1. Select the windows Phone HTML5 application in the new project (or you can create an empty project)
  2. Just add a < layout GRid outermost inside; phone:WebBrowser x:Name= "Browser" /> control can be;

Methods the back-end call JS for InvokeScript WebBrowser control inside with 2 parameters for the method as the method name the first second parameters (not required)

Ps: method name that page JS method, the parameter is to call JS

Methods anterior calls the c# method for window.external.notify JS. Only one parameter

Ps: monitor WebBrowser events ScriptNotify, values in the NotifyEventArgs object's Value


Since c# and JS interaction according to network data packet must have a middleware communication

Do not know if you are not in addition to the $sign, there are no other signs of global variables

 
  /// <summary>
    /// Middleware
    /// </summary>
    public class MiddleWare
    {
        /// <summary>
        /// Method name
        /// </summary>
        public string funName { get; set; }
        /// <summary>
        /// Parameters
        /// </summary>
        public string args { get; set; }
        /// <summary>
        /// The JS method
        /// </summary>
        public string callback { get; set; }
    }

1   Object.prototype.extend = function () {

2  var arg = arguments[0];
3     var that = this;
4     for (var i in that) {
5         that[i] = arg[i] || that[i];
6     }
7     return that;
8 };
9 (function (a) {
10     function jquery() {
11         /*Method call back
12             Methods funName back-end name
13             The args parameter
14             CallBack back off method*/
15         this.Invoke = function (funName, args, callBack) {
16             var arg = arguments;
17             var _middleWare = {
18                 funName: '',
19                 args: '',
20                 callBack: ''
21             }.extend({
22                 funName: arg[0],
23                 args: arg[1],
24                 callBack: arg[2]
25             });
26             window.external.notify(JSON.stringify(_middleWare))
27         }
28     };
29     a["$"] = a["$"] || new jquery();
30 })(window)

In the receiving background receives parameters using the Json.NET class libraries to JSON serialization

To declare a static class

1    
2 public delegate void invokeScript(string scriptName, params string[] args);
3     public class TicketApp
4     {
5         private static TicketApp instance;
6         private TicketApp() { }
7         public static TicketApp Instance
8         {
9             get { if (instance == null) { instance = new TicketApp(); } return instance; }
10         }
11
12         public event invokeScript InvokeScriptEvent;
13
14
15         private void ScriptAction(string scriptName, params string[] args)
16         {
17             if (this.InvokeScriptEvent != null)
18             {
19                 this.InvokeScriptEvent(scriptName, args);
20             }
21         }
22
23         public void Invoke(string jsonStr)
24         {
25             if (!string.IsNullOrWhiteSpace(jsonStr))
26             {
27                 var middleWare = JsonConvert.DeserializeObject<MiddleWare>(jsonStr);
28                ScriptAction(middleWare.callback, new string[] { "2" }); //Used for testing
29             }
30         }
31 }

Then up in the pages bound

        // Constructor
        public MainPage()
        {

            InitializeComponent();
            Browser.ScriptNotify += Browser_ScriptNotify;
            TicketApp.Instance.InvokeScriptEvent += Instance_InvokeScriptEvent;
        }

        void Instance_InvokeScriptEvent(string scriptName, params string[] args)
        {
            Browser.InvokeScript(scriptName, args);
        }

        void Browser_ScriptNotify(object sender, NotifyEventArgs e)
        {
            TicketApp.Instance.Invoke(e.Value);
      }

Write JS in the page above is

  $.Invoke('', '', 'show');
        function show(a) {
            alert(a)
      }

This basic function realization, can realize the intermodulation end before and after.

Because of the previous write ScriptAction (middleWare.callback, new "2" string[] {}); the parameter of 2 so the tips for 2

Call back method and I don't intend to use switch case to write up will be very troublesome to according to the call string approach uses reflection to, everybody has what good method to tell me.


You have any comments please enjoy spit


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Webster at November 29, 2013 - 10:03 AM