自己动手写客户端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

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

 

 

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

时间: 2024-11-02 23:41:57

自己动手写客户端UI库——创建第一个控件的相关文章

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

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

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库中

Cutting Edge:使用客户端行为扩展ASP.NET DataGrid 控件

asp.net|datagrid|客户端|控件 Cutting Edge:使用客户端行为扩展ASP.NET DataGrid 控件 (可拖动列和客户端排序) 英文原文:Extend the ASP.NET DataGrid with Client-side Behaviors作者:Dino Esposito翻译:MasterLRC源码:CuttingEdge0401.exe 如同比萨饼厨师的擀面杖,DataGrid 控件,对于一个熟练的ASP.NET开发者来说是非常基本而且有用的工具(译者:老外

在VS.NET下创建文件上载控件

创建|控件 在VS.NET下创建文件上载控件 前言:还记得在asp3.0里,我们为了上载文件可真是煞费苦心,写了一大堆的代码,可执行起来还是那么慢.但在asp.net里这个问题可以轻松搞定,这篇文章我们就探讨如何建立一个用户自定义的文件上载控件,并在我们的.ASPX程序中使用它.正文第一步:开发自定义文件上载控件打开VS.NET,建立一个工程:WebApp,我们使用WebApp项目来做我们的工作.在项目WebApp上点右健选择Add下的Add Web User Control-,这时我们就可以建

[转]利用ASP.NET 2.0创建自定义Web控件(2)

原址:http://hi.baidu.com/sjbh/blog/item/5a8298454403a321cffca39c.html   如何生成的? Render() 方法基本上控制着 WebControl 的整个输出.默认情况下,Render() 方法实际上会依次调用 RenderBeginTag().RenderContents() 以及 RenderEndTag().尽管在 ASP.NET 1.x 中调用结构并未变化,但由于该呈现模型,修改这些调用的影响却发生了变化. 您可以覆盖 Re

详细阐述利用ASP.NET 2.0创建自定义Web控件开发说明

asp.net|web|创建|控件|控件开发 简介 从使用基本的文本编辑器到创作标记页面,Web 开发已经经历了一个漫长的过程.目前,集成开发环境 (IDE) 为开发过程中的几乎每个方面都提供了图形化表示形式.此外,还实现各种说明性编程技术以提高效率并降低出现错误的几率.Visual Studio 2005 和 ASP.NET 2.0 中的控件体系结构遵循了这些编程趋势,并且提供了可靠的.可扩展的环境,该环境设计为使开发人员可以创建能够以说明方式配置的控件. 此外,ASP.NET 中新的自适应呈

利用 ASP.NET 2.0 创建自定义 Web 控件

asp.net|web|创建|控件 Jayesh Patel.Bryan Acker.Robert McGovernInfusion Development适用于:Microsoft ASP.NET 2.0Microsoft Visual Studio 2005 摘要:ASP.NET 2.0 中新的自适应呈现模型为控件编写人员提供了很多新的选项.本文展示了这些选项如何使创建 ASP.NET 的自定义控件变得比以前更加容易. 本页内容 简介 自适应呈现模型 创建自定义服务器控件 TagKey 使用

利用ASP.NET 2.0创建自定义Web控件

asp.net|web|创建|控件 从使用基本的文本编辑器到创作标记页面,Web 开发已经经历了一个漫长的过程.目前,集成开发环境 (IDE) 为开发过程中的几乎每个方面都提供了图形化表示形式.此外,还实现各种说明性编程技术以提高效率并降低出现错误的几率.Visual Studio 2005 和 ASP.NET 2.0 中的控件体系结构遵循了这些编程趋势,并且提供了可靠的.可扩展的环境,该环境设计为使开发人员可以创建能够以说明方式配置的控件. 此外,ASP.NET 中新的自适应呈现模型减少了编写

Android零基础入门第17节:Android开发第一个控件,TextView属性和方法大全

原文:Android零基础入门第17节:Android开发第一个控件,TextView属性和方法大全 前面简单学习了一些Android UI的一些基础知识,那么接下来我们一起来详细学习Android的UI界面基本组件.     一.认识TextView 我们知道前面学习的HelloWorld应用程序中就是使用的TextView来显示一个文本,接下来首先一起来学习TextView的使用方法. TextView的作用就是在界面上显示文本.TextView直接继承了 View,是EditText.Bu