前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >自己动手写客户端UI库——创建第一个控件

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

作者头像
liulun
发布2018-01-12 14:49:17
8960
发布2018-01-12 14:49:17
举报
文章被收录于专栏:liulun

上一篇文章中我们主要讲了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完成了文章的全部内容,修改了代码

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015-01-21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档