在你的 Sliverlight 應用中集成動態 HTML 頁面

VB.NET代碼下載地址:

免費下載地址在 http://linux.linuxidc.com/

用戶名與密碼都是www.linuxidc.com

具體下載目錄在 /2014年資料/4月/20日/在你的 Sliverlight 應用中集成動態 HTML 頁面

下載方法見 http://www.linuxidc.com/Linux/2013-07/87684.htm

Introduction

本文說明如何與 Silverlight集成動態生成的html頁面並實現交互。好比我們做了兩個頁面來編輯和展示郵件。有用過WYSIWYG HTML editor嗎?如果用過，就會發現僅僅支持2,3個免費用戶使用的工具根本沒法用，而有些開發工具價格高達400刀！

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

背景

剛開始我有些思路混亂 Silverlight該怎麼和 HTML交互呢.本打算直接從網上找一下調用URL地址的代碼，可惜不行！

Silverlight只能連上一個 HTML (ASP) 頁面 - 也就是VS裡Silverlight默認生成的頁面. 所以只需要調整這些頁面的代碼就醒了。這都通過修改host上的web.config文件實現。如果不清楚到底是哪個文件，就讓他們的內容一模一樣。

使用代碼

咱們從默認頁開始 -我這以HTML頁面為例(ASP類似). 先在body下面加兩個參數:

<param name="windowless" value="true" />
<param name="onLoad" value="pluginLoaded" />

第一個參數使內容為可見 (否則 HTML的內容會被 Silverlight頁面覆蓋). 第二個參數在Silverlight加載時觸發 (實際是js的函數處理-詳情見下文).

接下來加上div標簽作為動態展示HTML內容的容器. 添加下面代碼到 silverlight ControlHost:

<div id="HTMLContentArea" ></div>

記得在silverlightControlHost作用域外添加div標簽- 否則HTML內容只會兼容IE!!

當然我們還需要在script域設置一些js的函數來處理相應的事件以及和Silverlight的交互. 這些東西簡單明了就不再贅述了 - 只是要注意: 多數操作HTML元素的函數都是在運行時被置於div容器中，你也能夠根據需求定制化開發.

使用CKEditor編輯js腳本修改 HTML 部分:

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

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

Silverlight部分

這一步通過在HTML頁面中規劃相關代碼實現相關內容的展示，與js的交互.

首先添加與HTML交互的接口。所有需要通過js與HTML交互的功能都要加上該前綴:

<ScriptableMember()> _

另外還需要兩個公有屬性保存高度和寬度以便控制內容展示區域大小 (屬性會在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
&apos;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的通信方式!

詳細代碼信息可以從開頭處下載 - 以便調試學習!