在最近做的物联网项目中,需要利用封装过的Silverlight刻度控件显示温度,湿度,二氧化碳浓度等值。由于最新的数据是通过js ajax获取的,所以需要把这些数据传递给silverlight显示,这就涉及到js和silverlgiht交互的问题。由于这里我们需要通过js来调用silverlight方法,这里我就做一下调用说明。
首先,在Silverlight项目中,我们把需要被JS调用的方法置为public类型,以便于公布方法。
然后,在被调用方法上加上[ScriptableMember]属性说明,以便于让此方法支持外部调用。
[ScriptableMember] public void InitTemperature(string airte="0",string airhi="0",string earthte="0",string earthhi="0",string ph="0") { var data = new DataNotify(); data.MaxData = 30; data.MinData = -15; data.MinRange = -15; data.MaxRange = 75; data.CurrentData = double.Parse(airte); data.Title = "空气温度"; data.Unit = "℃"; data.ThemeSet = Theme.Red; var uc = new TemperatureControl(data); uc.Margin = new Thickness(-980, 0, 10, 10); Test.Children.Add(uc); //...........中间省略代码.......... var data4 = new DataNotify(); data4.MaxData = 10; data4.MinData = 0; data4.MinRange = 0; data4.MaxRange = 10; data4.CurrentData = double.Parse(ph); data4.Title = "酸碱度"; data4.Unit = "PH"; data4.ThemeSet = Theme.Yellow; var uc4 = new TemperatureControl(data4); uc4.Margin = new Thickness(683, 0, 10, 10); Test.Children.Add(uc4); }
之后,在App.xaml中,需要对被调用的方法赋予对外公布的方法调用别名:
private void Application_Startup(object sender, StartupEventArgs e) { var dict = e.InitParams; this.RootVisual = new MainPage(dict); HtmlPage.RegisterScriptableObject("LoadLatest",this.RootVisual); }
从这里我们看出,我定义了一个别名为”LoadLastest”的方法名称,JS如果进行调用的时候,就会通过调用LoadLastest来触发InitTemperature方法。
这样,我们的Silverlight端就配置完毕了,下面来看看网页端设置:
首先,定义js方法:
var slCtl = null; function pluginLoaded(sender, args) { slCtl = sender.getHost(); } function CallSilverlight() { slCtl.Content.LoadLatest.InitTemperature(lineAirTeGO, lineAirHiGO, lineEarthTeGO, lineEarthHiGO, linePHGO); }
然后,在需要调用的地方,调用CallSilverlight即可。
======================================
加一点不相干的东西。
如果在页面上使用了easyui的combobox,如果silverlight和其挨得太近,那么当点击下拉列表的时候,列表会被silverlght给遮挡住,解决这个问题的方法就是在网页端加上这么一句:
<!--解决菜单被silverlight盖住问题--> <param name="background" value="transparent" />