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

上一篇文章中我们主要讲了C#如何和JS通信,

这一篇文章中,我们将创建一个最基础的Button控件

WUI库中控件的继承机制

我们先解释最简单的继承机制,以后WUI库的继承机制会比这个复杂的多 第一:PanelMain类 我们在上一篇中说了,PanelMain是一个特殊的Panel,每一个用户程序都应该自己实现一个PanelMain类的子类,用户把这个子类的实例交给WUI库,WUI库把这个实例当作第一个容器控件添加到窗体中,WUI库告诉用户什么时候这个用户控件创建完毕,用户可以在PanelMain创建完毕的事件中,完成接下去的工作,比如创建更多的子控件 第二:ControlBase类 是所有控件的基类,并提供一个基础的属性和方法 第三:ControlContainer类 是所有容器类控件的基类,这里会提供一些AddChild之类的方法和一些特殊的属性 第四:ControlSimple类 是所有基本元素的积累,比如说Button和Lable类

使用Button类

在上一篇文章中,我们实现了继承自PanelMain的Main类, 而且我们在这个类中注册了OnRender事件, 我们在这个事件中创建了我们的Button类的实例,并使用了他 看起来是不是很方便啊,第二幅图是最终的运行结果

Button类的构造函数

我们在构造函数中把Id属性赋值为Button加一个随机数,随机数主要是为了保证页面中所有的按钮的ID不会重复

Button类的ToHTML方法

首先:Button类是继承自ControlSimple类,ControlSimple类继承自ControlBase类 其次:Button类重写了父类(ControlBase类)中的ToHTML方法,这个方法是所有控件必须要实现的方法,一个控件要呈现在用户的眼前,必定需要一段HTML代码,这样浏览器才好呈现这个控件,我们这个方法就是做这个工作的 再次:我们创建的这个DIV的ID就是我们Button类实例的ID,为以后浏览器和C#交互打下基础

PanelMain的AddChild方法

在这个方法中,我们把创建出来的Button添加到了WebBrowser的页面上 因为前面我们提到过,PanelMain是一个特殊的Panel,他其实代表着页面的Body,我们添加一个控件,就是添加到页面的body中去的 红框勾出来的两处代码,我们在下一篇文章中解释

完善工作

第一: 在用户的应用程序发布时,我们不希望让用户看到右键菜单,也不希望让用户看到脚本错误(如下两个图片),(而且将来WUI库中会自己实现菜单) 所以我们使用这两行代码完成这两项工作  WB.ScriptErrorsSuppressed = true;   WB.IsWebBrowserContextMenuEnabled = false;  同时,我们也加入了预编译指令#if !DEBUG,来保证只有Release状态下,这两行代码才生效 第二: 我们使用System.Environment.CurrentDirectory来获取应用程序的启动目录,以保证用户把工程放在任何位置的时候,资源都能正确的加载

2015-1-20:完成了文章的部分内容,完成了所有代码 2015-1-21完成了文章的全部内容,修改了代码

我会在下一篇文章中介绍控件的事件机制-------------------您的推荐是我写下去的动力>>>>>>>>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏nice_每一天

一天带你入门到放弃vue.js(二)

至此在vue中提供了计算属性,computed,在main.js指定computed对象中指定计算

1151
来自专栏HTML5学堂

2016.05 第二周 群问题分享

HTML+CSS 如何实现360浏览器默认为极速模式打开网页 2016.05.09~2016.05.13 核心概念 meta参数设置 参考答案 <meta na...

36111
来自专栏技术墨客

React——Flow代码静态检查 转

Flow是Facebook开源的静态代码检查工具,他的作用是在运行代码之前对React组件以及Jsx语法进行静态代码的检查以发现一些可能存在的问题。Flow可以...

1151
来自专栏hightopo

网络拓扑图上文本的巧妙应用

1503
来自专栏大前端开发

从编程小白到全栈开发:响应用户的操作

咳嗽连续咳了一个多月,蓝瘦,我都快要忘记更新文章了...还好一个读友提醒我怎么好久没更新了,我才提起一口气,嘎吱嘎吱的重新转起我这磨损严重的脑袋来。

974
来自专栏程序员的知识天地

web前端开发规范总结

Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦)。不同公司不同团队具有不同的规范和文档。...

4052
来自专栏开源优测

Selenium3源码之common下action_chains.py模块分析

介绍 本文主要对action_chains.py模块的源码进行分析说明,其代码位置如图: ? 在action_chains.py模块中定义和实现了类:Actio...

3246
来自专栏十月梦想

一天带入门到放弃vue.js(三)

自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是vue的指令if,f...

3044
来自专栏前端说吧

小程序学习笔记

4925
来自专栏Google Dart

AngularDart 4.0 高级-生命周期钩子 顶

Angular创建它,渲染它,创建和渲染它的子项,在数据绑定属性发生变化时对其进行检查,并在将它从DOM中删除之前对其进行销毁。

1181

扫码关注云+社区

领取腾讯云代金券