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:

完成全部内容

时间: 2024-07-29 23:52:35

CodeFirst写界面——自己写客户端UI库的相关文章

自己动手写客户端UI库——事件机制(设计思路大放送)

在上一篇文章中我们创建了一个Button控件,并把这个控件显示在界面上, 在这一篇文章中,我们将为这个控件增加一个事件和一个方法 一:怎么绑定事件的问题 在Winform中,我们对一个按钮绑定事件的方式如下(这是真正的事件) 然而,在WUI库中,为一个按钮绑定事件是这样的,(这不是一个事件,这只是调用了一个方法,给这个方法传递了一个i额委托) 问题: 为什么会有这样的差异呢?实在是无奈之举(也希望园友多提意见) 回答: 我们在给一个WUI按钮绑定事件的时候,这个按钮有可能已经呈现在界面上了:也有

自己动手写客户端UI库——创建第一个控件

在上一篇文章中我们主要讲了C#如何和JS通信, 这一篇文章中,我们将创建一个最基础的Button控件 WUI库中控件的继承机制 我们先解释最简单的继承机制,以后WUI库的继承机制会比这个复杂的多 第一:PanelMain类 我们在上一篇中说了,PanelMain是一个特殊的Panel,每一个用户程序都应该自己实现一个PanelMain类的子类,用户把这个子类的实例交给WUI库,WUI库把这个实例当作第一个容器控件添加到窗体中,WUI库告诉用户什么时候这个用户控件创建完毕,用户可以在PanelMa

用C++写UI库最本质的思想就是不用C++写UI(如何用 C++ 从零编写 GUI?内含多个开源UI作者的回复,非常精彩)

作者:Bingo链接:https://www.zhihu.com/question/24462113/answer/83371803来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 用C++写UI库最本质的思想就是不用C++「写」UI. 不管是开放C++底层库到XML+Json+Lua的实现,或是单一使用XML完成布局管理,或是现前流行的使用Electron(http://electron.atom.io/)也就是HTML+CSS+JS完成UI实现的,本质上都不希望

利用epoll写一个&quot;迷你&quot;的网络事件库

epoll是linux下高性能的IO复用技术,是Linux下多路复用IO接口select/poll的增强版本,它能显著提高程序在大量并发连接中只有少量活跃的情况下的系统CPU利用率.另一点原因就是获取事件的时候,它无须遍历整个被侦听的描述符集,只要遍历那些被内核IO事件异步唤醒而加入Ready队列的描述符集合就行了.epoll除了提供select/poll那种IO事件的水平触发(Level Triggered)外,还提供了边缘触发(Edge Triggered),这就使得用户空间程序有可能缓存I

javascript动手写日历组件(2)——优化UI和添加交互(by vczero)

一.优化UI 继上一篇,http://www.cnblogs.com/vczero/p/js_ui_1.html.开始优化UI,主要优化的部分有: (1)增加星期行.(2)字体设置.(3)日期垂直居中.(4)将单元格->底部线条.(5)修改文本的颜色对比.(6)将内部调用的函数加前缀_,如_addHeader()._addWeekday(). 修改的后基本效果如下图: 整个代码做了小修小改: 1 var Calendar = function(div){ 2 this.div = documen

[Android学习系列2]用webview写界面,加载本地js,js,html文件

以jquery mobile为例 1.在android界面拖入一个webview,然后添加一个internet权限 <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="18" /> <uses-permission android:name="android.permission.INTERNET"/> <application ........

iOS开发过程中,是用Storyboard/xib做界面,还是用代码来写界面,还是混合使用

以下是个人观点,非喜勿喷 关于iOS 开发过程中,是用Sb/xib 做界面 还是代码写界面,一直是讨论不断 各自成帮结派, 拖拉派.代码派.中间派 1. 拖拉派 ,Storyboard/xib 使用者, 像是海贼王里的能力者,开发快.Auto Layout .结构清晰,直观,一目了然 (个人觉得,小项目如此,超过10个界面以上,界面关系在复杂的话,看起来真是一团糟),能力者是有缺点的不会游泳, 同样Storyboard/xib 同样有它的缺点:(以下摘自) a). 所有的ViewControll

C?#? ?读?写?S?Q?L?数?据?库?I?m?a?g?e?字?段

数据库的Image字段保存的是字节,所以写入数据库Image字段和从数据库Image字段读取的内容都应该为字节. 1.数据库Image字段读写文件      写文件:写文件的过程为将文件以流文件形式打开并将内容读取到一个byte数组,然后将此byte数组写入数据库的Image字段. 源码:     FileInfo finfo=new FileInfo("文件名");   //绝对路径 if(finfo.Exists) {         SqlConnection conn=new 

如何写一个处理多媒体的中间库

这里实现一个简单的多媒体数据流的处理库,它是以Filter的思想来实现的,通过Filter可以实现多路数据采集,处理和输出; 一. 如何实现一个filter 1.定义一个Filter descripter 结构,它包含了Filter的主要属性和行为: typedef struct McFilterDesc{ McFilterId id; const char* name; const char* text; McFilterCategory category; const char* encFo