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

简介: 在上一篇文章中我们主要讲了C#如何和JS通信, 这一篇文章中,我们将创建一个最基础的Button控件 WUI库中控件的继承机制   我们先解释最简单的继承机制,以后WUI库的继承机制会比这个复杂的多 第一:PanelMain类 我们在上一篇中说了,PanelMain是一个...
上一篇文章中我们主要讲了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

完成了文章的全部内容,修改了代码
 
 

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

目录
相关文章
|
3月前
|
计算机视觉 Python
基于Dlib的人脸识别客户端(UI界面)
基于Dlib的人脸识别客户端(UI界面)
86 2
|
12天前
|
移动开发 前端开发 Java
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
|
7天前
|
前端开发 Linux C#
一款开源、免费、美观的 Avalonia UI 原生控件库 - Semi Avalonia
一款开源、免费、美观的 Avalonia UI 原生控件库 - Semi Avalonia
38 10
|
2月前
|
人工智能 API Apache
推荐3款开源、美观且免费的WinForm UI控件库
推荐3款开源、美观且免费的WinForm UI控件库
319 6
|
2月前
|
API C# 开发者
基于Material Design风格开源、免费的WinForms UI控件库
基于Material Design风格开源、免费的WinForms UI控件库!
|
3月前
|
Linux C# Android开发
分享3款开源、免费的Avalonia UI控件库
分享3款开源、免费的Avalonia UI控件库
288 0
|
4月前
|
搜索推荐 前端开发 C#
推荐7款美观且功能强大的WPF UI库
推荐7款美观且功能强大的WPF UI库
195 2
|
5月前
|
API Android开发
Android项目架构设计问题之选择和使用合适的UI库如何解决
Android项目架构设计问题之选择和使用合适的UI库如何解决
58 0
|
5月前
|
数据可视化 数据挖掘 持续交付
Axure Web端元件库:从Quick UI到500+组件的飞跃
在快速变化的数字世界中,产品设计不仅仅是功能的堆砌,更是用户体验的精心雕琢。原型设计作为产品开发过程中的关键环节,其重要性不言而喻。Axure,作为业界领先的原型设计工具,凭借其强大的交互设计和丰富的功能,赢得了全球设计师和开发者的信赖。而Axure Web端元件库,则是这一平台上的一颗璀璨明珠,它以超过500个精心设计的组件为基础,为设计师们打开了一扇通往高效、高质量原型设计的大门。
209 0
|
2月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。

相关实验场景

更多