应用动态html页面上,在你的 Sliverlight 应用中集成动态 HTML 页面

VB.NET代码下载地址:

具体下载目录在 /2014年资料/4月/20日/在你的 Sliverlight 应用中集成动态 HTML 页面

Introduction

本文说明如何与 Silverlight集成动态生成的html页面并实现交互。好比我们做了两个页面来编辑和展示邮件。有用过WYSIWYG HTML editor吗?如果用过，就会发现仅仅支持2,3个免费用户使用的工具根本没法用，而有些开发工具价格高达400刀！

柳暗花明又一村 - CKEditor(或者其他类似的)就能满足你的需求.

背景

刚开始我有些思路混乱 Silverlight该怎么和 HTML交互呢.本打算直接从网上找一下调用URL地址的代码，可惜不行！

Silverlight只能连上一个 HTML (ASP) 页面 - 也就是VS里Silverlight默认生成的页面. 所以只需要调整这些页面的代码就醒了。这都通过修改host上的web.config文件实现。如果不清楚到底是哪个文件，就让他们的内容一模一样。

使用代码

咱们从默认页开始 -我这以HTML页面为例(ASP类似). 先在body下面加两个参数:

第一个参数使内容为可见 (否则 HTML的内容会被 Silverlight页面覆盖). 第二个参数在Silverlight加载时触发 (实际是js的函数处理-详情见下文).

接下来加上div标签作为动态展示HTML内容的容器. 添加下面代码到 silverlight ControlHost:

记得在silverlightControlHost作用域外添加div标签- 否则HTML内容只会兼容IE!!

当然我们还需要在script域设置一些js的函数来处理相应的事件以及和Silverlight的交互. 这些东西简单明了就不再赘述了 - 只是要注意: 多数操作HTML元素的函数都是在运行时被置于div容器中，你也能够根据需求定制化开发.

使用CKEditor编辑js脚本修改 HTML 部分:

(可以查看源文件中的全部HTML)

Silverlight部分

这一步通过在HTML页面中规划相关代码实现相关内容的展示，与js的交互.

首先添加与HTML交互的接口。所有需要通过js与HTML交互的功能都要加上该前缀:

_

另外还需要两个公有属性保存高度和宽度以便控制内容展示区域大小 (属性会在Silverlight应用加载页面时被设置);

Public HTMLWidth As Double = 0

Public HTMLHeight As Double = 0

两个公有方法体 (Show_MailEditor和Show_MailViewer)可以在被调用处编辑或浏览邮件.Show_MailViewer带有两个参数(主题 和 内容) .两个方法都是先创建动态 HTML内容，插入隐藏的div中进行大小裁剪后展示(HTML页里的效果就是Silverlight中的重叠展示. 由于CKEditor在运行时被加载,替换textarea要耗费一些时间, 所以需要个定时器来进行延迟处理. 之后定焦到动态HTML页面上的元素 -否则页面只能响应最初的动作之后就会卡死 (别问我为啥...它就是这么工作的!).

设置该接口的调用权限,需要在全局模块里创建如下实例:

Module modGlobal

'Make the interface available for global use from all project parts

Public objMailInterface As MailInterface = Nothing

End Module

接下来要在Silverlight 应用里注册该接口. 在Application_Startup过程的文件App.xaml.vb里添加:

objMailInterface = New MailInterface

HtmlPage.RegisterScriptableObject("MailInterface", objMailInterface)

前面提到，应用在运行时要向接口提供浏览内容展示区的大小信息. 在MainPage_SizeChanged事件里的MainPage.xaml.vb添加:

objMailInterface.HTMLHeight = Me.ActualHeight

objMailInterface.HTMLWidth = Me.ActualWidth

现在就能随处调用该页面了:

objMailInterface.Show_MailEditor()

//or

objMailInterface.Show_MailViewer("Mail Demo", "

Hello World!

This is a test text...")

感谢 Hiren Khirsaria 在他的文章中 article介绍了 Silverlight 和 JavaScript的通信方式!

详细代码信息可以从开头处下载 - 以便调试学习!