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：

完成所有内容