CodeFirst寫界面——本身寫客戶端UI庫

何謂CBS程序

CBS程序就是Client+Browser+Service的程序

純CS程序寫界面，有各類難處，那麼我就在Client端引入Browser，讓Browser渲染基於HTML的UI界面

何謂WUI

就算用用HTML渲染UI界面，那麼開發人員仍是要掌握HTML+CSS+JS的知識，這些知識仍是比較複雜的

WUI庫就是把 HTML+CSS+JS封裝成起來，組成一個界面元素庫，(相似於Extjs和easyui)

意圖是讓開發人員就只要掌握C#代碼，就能寫出漂亮的UI界面

第一步：WUI庫中的主窗口

一個WinForm程序必然有一個主窗口 咱們把這個主窗口封裝到WUI庫中

這個主窗口裏面有一個WebBrowser，（這對於最終的用戶來講是不可見的，最終使用者不會操做這個WebBrowser）

第二步：基礎的UI資源

咱們在WUI庫中添加了一些基礎的UI資源，注意這些資源都會被複制到輸出目錄中，之後會考慮把這些內容作到Resource 中

Index.html代碼中有兩點須要說明： 第一點：<meta http-equiv="X-UA-Compatible" content="IE=9" /> 這是讓咱們使用的WebBrowser，以IE9的模式來渲染界面，這一行代碼很重要，沒有這一行代碼，就算你裝了IE11，那麼WebBrowser可能仍舊不會 表現成你想象的那樣； 第二點：window.external.WUIPageLoaded(); 這行代碼會觸發WUI庫的內部事件，告訴最終用戶基礎的界面渲染已經完成了，用戶能夠在這個事件觸發後，添加本身的界面元素。 這裏涉及到JS和C#通信，待會兒再說。

第三步：CodeFirst建立UI

咱們的WUI.Demo程序是一個WinForm程序集，可是我把IDE默認生成的那個窗口（Form1）刪掉了，並且修改了一下Program.cs程序

在入口函數（Main）中，Application.Run了咱們在WUI庫中建立的窗體（對於一個基於WUI庫建立的程序來講，只有這麼一個窗口），咱們知道這個窗口的WebBrowser中沒有任何東西，然而咱們給WUIMain的屬性PanelMain賦值了，這就是咱們要添加的東西了

第四步：一個特殊的Panel

在上面的代碼中，咱們給PanelMain屬性賦值爲Main的實例，那麼咱們看一下Main是一個什麼樣的類型 首先：這個類繼承自PanelMain類，PanelMain類是WUI庫提供的一個基類 其次：這個基類中有一個事件叫OnRender，剛剛咱們看到的JS方法中window.external.WUIPageLoaded();這行代碼就會觸發這個事件。

咱們知道，一個用戶界面上，有不少界面元素，這些界面元素裝在一個容器中 咱們的Main類型就是最上層的容器，最上層的容器是一個特殊的容器，他的類型是PanelMain；（大家可能看到了，咱們在OnRender事件中又添加了一個Panel，這個Panel就不是特殊的容器了，但這篇文章咱們不講這裏） 到此爲止，咱們有一個疑問， 第一：何時觸發的OnRender事件呢？ 這個時候咱們就去看PanelMain的代碼

看完PanelMain的代碼咱們疑問更多了： 第一：何時調用的Loaded方法呢？ 第二：何時執行的ToJs方法呢？

第五步：C#與JS通訊的開端

咱們知道，咱們在Program.cs中把Main類的實例交給了WUIMain窗口，那麼這個窗口拿Main類的實例作了什麼呢？讓咱們來看看WUIMain的代碼

（說明一下WB就是咱們的瀏覽器控件了） 首先：咱們讓瀏覽器加載了那個主頁文檔（之後咱們會作成動態的路徑） 第二：咱們建立了一個RenderContext類的實例，而且把Main的實例交給類這個類型的構造函數 第三：咱們把瀏覽器的DomWindow賦值給了這個實例的IHTMLWin屬性 第四：咱們把這個實例賦值給了瀏覽器的ObjectForScripting屬性

這裏有一點須要說明：要想使用IHTMLWindow2這個類型，必需要引用Mirosoft.mshtml這個擴展庫（注意，要在「擴展」裏去找），引用了這個擴展庫以後，在名稱空間那裏加上這一行using mshtml;就可使用 IHTMLWindow2這個類型了

第六步：C#與JS通訊的高潮

然而咱們的疑問仍是沒有解決，那麼只能繼續看RenderContext的代碼 首先：咱們在這個類型的構造函數中獲得了Main的實例 其次：咱們把這個類型設置成了ComVisible （注意，要想設置一個類型爲ComVisible，必需要使用System.Runtime.InteropServices;名稱空間）

你們注意到了，這個類型裏有一個公開的WUIPageLoaded方法，這個方法名是否是很眼熟呢？對了，就是咱們在JS中調用的方法window.external.WUIPageLoaded(); 須要注意的有兩點： 第一：必定要用 window.external調用這個方法 第二：若是這個類型不設置成ComVisible就調用不到 第三：在WUIPageLoaded方法中，咱們讓瀏覽器執行了一段腳本，就是PanelMain的ToJs方法裏的腳本了，這個時候就把這個控件渲染到瀏覽器中去了 第四：咱們調用了PanelMain實例的Loaded方法，在那個方法裏，咱們觸發了OnRender事件，這樣咱們的用戶就知道何時他該接管接下去的工做了

注意： 在這裏咱們用C#讓瀏覽器執行了腳本 瀏覽器用JS代碼讓咱們的C#也作了工做 這就是C#和JS的通訊了呢！

第七步：尾聲

咱們的程序看起來像這個樣子 我固然知道這不是你想要看到的結果 那麼，請您對這篇文章點個贊吧------------------------->> 您的支持是我寫下一篇的動力！！！

修改記錄

2015-1-19：

完成所有內容