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

上一篇文章中我们创建了一个Button控件,并把这个控件显示在界面上,

在这一篇文章中,我们将为这个控件增加一个事件和一个方法

一:怎么绑定事件的问题


在Winform中,我们对一个按钮绑定事件的方式如下(这是真正的事件)


然而,在WUI库中,为一个按钮绑定事件是这样的,(这不是一个事件,这只是调用了一个方法,给这个方法传递了一个i额委托)


问题:

为什么会有这样的差异呢?实在是无奈之举(也希望园友多提意见)

回答:

我们在给一个WUI按钮绑定事件的时候,这个按钮有可能已经呈现在界面上了;也有可能还没有呈现在界面上;

如果还没有呈现在界面上,那也倒简单,我只要在呈现的时候(也就是把html代码append到浏览器之前),顺便用js给他绑定一个click事件就好了。

但如果他已经呈现在界面上了,该怎么办呢?我虽然也可以用JS绑定事件,但我却不知道该什么时候执行这段JS,这一段代码“btn2.Click += btn2_Click;”是我的用户写的,我不知道他们会什么时候用这一段代码。

所以,无奈之下,只能用这种方法“btn.BindClickEvent(OnClick);”来让用户绑定事件,这样我就可以在BindClickEvent方法内执行那一段JS代码了,毕竟BindClickEvent这个方法是我写的,我可以随意的控制他,让他做我想做的事情

二:Button的BindClickEvent方法

第一:
这个方法接收一个类型为Action<Button,EventArgs>类型的参数,Action其实就是一个委托,如果对这个东西不了解的朋友,可以看看我之前写的一篇文章《30分钟Linq教程》泛型委托那个小节
第二:
我们把这个参数存入了一个私有的List容器中,为什么这么做呢?一个按钮可以绑定多个Click事件,而且还要有先后顺序,所以按顺序存好,后面点击事件触发的时候,就可以直接遍历这个容器,按顺序执行这个容器中的委托就好了
第三:
Button实例IsRendered属性标致只着当前控件是否已经渲染在界面上了
第四:
我们每在界面上添加一个Button,就把这个Button的实例存在这个字典中。为以后使用这个按钮(比如说触发他的事件)打下基础
第五:
我们判断是不是第一次对这个Button的实例做Click事件的绑定,如果是,那么就做下面的工作,如果不是,就不必做了;也就是说不管我给这个按钮绑定多少个Click事件,下面的工作也只做一次
第六:
我们让浏览器执行了一段JS脚本,这段Js脚本执行过之后,事件才算绑定成功;这段脚本给Button的Dom元素绑定了一个click事件,这个事件调用了C#中的ButtonClick方法,并给这个方法传递了一个参数,这个参数就是Button的ID

三:RenderContext的ButtonClick方法


第一:

在本系列的第一篇文章中,我们介绍了C#是怎么和JS通讯的,这里就不多做介绍,只说2点:

1、JS要通过window.external调用C#里的方法

2、要把浏览器的ObjectForScripting设置给一个对象,这个对象必须是ComVisible的

第二:

所有的按钮,Dom元素的所有的click事件都会流入这个方法,这个方法是个路由器,把事件路由给用户的委托

第三:

我们根据按钮的ID,从字典(上一个小节有介绍)中拿出了按钮的实例,然后调用了实例方法Click,

四:Button类的Click方法



我们在这个方法中,遍历了所有绑定到Button实例上的“事件”,并且执行了这些事件。

遗留问题:这里没有太关注事件的执行顺序,以后会改进

五:PanelMain的AddChild方法


第一:

假设一个控件还没有渲染到界面上,那么是否允许开发人员对他绑定事件呢?当然是允许的!那么对于这一类使用方式,是在什么时候绑定事件的呢?就是在渲染的时候绑定的!

我们把控件添加到页面之后,马上就执行了这项工作,Button的ToJs方法就是在做这个工作,稍后介绍这个方法

第二:

只有当一个控件渲染到界面上之后,我们才会把它存入静态字典中,就是这行代码:RenderContext.ControlDic.Add(ctl.Id, ctl);

第三:

对于一个容器控件来说,他有一个Children集合,用来存储他自身的子控件,就是这行代码:this.Children.Add(ctl);

六:Button的ToJs方法


在这个方法中,我们把绑定事件的JS脚本得到,并反馈给调用者,

以后可能还会有其他的脚本,所以智力使用了StringBuilder

七:移除一个事件绑定


第一:

事件列表中应该存在待移除的事件

第二:

事件列表中就剩这么一个待移除的事件,并且,这个按钮已经渲染在界面上了;就执行js的解绑脚本

第三:

在事件列表中移除这个事件

八:移除所有事件绑定


第一:

当事件列表中存在事件记录

第二:

这个按钮已经被渲染在页面上,那么就执行JS解绑脚本

第三:

清空事件记录容器

修改记录

2015-1-22:

完成了文章的部分内容,修改了昨天写的代码

 

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

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

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

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

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

动手写缓存

目前市面上已经有很多开源的缓存框架,比如Redis.Memcached.Ehcache等,那为什么还要自己动手写缓存?本章将带领大家从0到1写一个简单的缓存框架,目的是让大家对缓存的类型.缓存的标准.缓存的实现以及原理方面有一个系统的了解,做到知其然,知其所以然. 缓存定义的规范 JSR是Java Specification Requests的缩写,意思是Java规范提案,它已成为Java界的一个重要标准.在2012年10月26日JSR规范委员会发布了JSR 107(JCache API)的首个

客户端交互设计:手机平台客户端UI设计

文章描述:客户端UI设计之手机平台之争. 1. 当前手机平台的争锋     为了占领移动互联网的制高点,当前的几大IT巨头都以手机平台为基础展开争夺.占领移动平台就是占领了用户的移动桌面,也就为自身的移动服务争取到了最佳位置.       微软公司推出windows phone 7, 曝光了windows 8:苹果公司也开了iOS 5的发布会:谷歌的Android 3.0的发布,Android 2.4 的若隐若现等等:大家都在努力提升平台体验.另外,惠普的Web OS.黑莓公司也都在研制和发布新

Webix JavaScript UI 库可以帮你构建跨平台的HTML5 和 CSS3 程序

XB 软件公司最近发布了JavaScript UI 库Webix ,其中包含的组件超过45个,用这些组件可以构建跟HTML5 和 CSS3 兼容的程序,这些程序不仅能在个人电脑上运行,还能用在iOS. Android 和 Blackberry 设备上运行.它能访问离线web存储.地理位置( geolocation) API.能在画布上绘图,并集成了jQuery 和 Backbone.js. Webix提供了简单的服务端集成控件,PHP. ASP.NET.Java和 Ruby等各种技术都可以跟客户

动手写个数字输入框2:起手式——拦截非法字符

前言  最近在用Polymer封装纯数字的输入框,开发过程中发现不是坑,也有不少值得研究的地方.本系列打算分4篇来叙述这段可歌可泣的踩坑经历: 1. <动手写个数字输入框1:input[type=number]的遗憾> 2. <动手写个数字输入框2:起手式--拦截非法字符> 3. <动手写个数字输入框3:痛点--输入法是个魔鬼> 4. <动手写个数字输入框4:魔鬼在细节--打磨光标位置> 从源头抓起--拦截非法字符  从<动手写个数字输入框1:inpu

谈一谈JS消息机制和事件机制的理解_javascript技巧

消息/事件机制是几乎所有开发语言都有的机制,并不是deviceone的独创,在某些语言称之为消息(Event),有些地方称之为(Message). 其实原理是类似的,只不过有些实现的方式要复杂一点.我们deviceone统一就叫消息. 消息基础概念 还有一些初学者不太熟悉这个机制,我们先简单介绍一些基础概念,如果熟悉的人可以跳过这个部分. 一个/条消息可以理解为是一个数据结构,包含以下几个基本部分: 1.消息源:就是消息的来源,发出这个消息的对象 2.消息名:就是消息的唯一标示 3.消息数据:消

Flash AS3.0 强大的事件机制

ActionScript 3.0系列教程(4):爽快使用XML ActionScript 3.0系列教程(5):强大的事件机制 回顾和比较 AS1.0玩家最爱用onClipEvent(), on(),又方便又直接.缺点在于逻辑分散到了各个舞台元件中,难以管理和维护.更加别说代码重用了.别跟俺说可以Copy, Paste,这不叫重用,这叫低级. AS2.0中,增加了一些事件处理机制: (1)回调函数: onLoad, onComplete等.相信兄弟们最熟悉的应该就是XML.onload回调函数了

10个优秀的 Web UI 库/框架

UI(User Interface)即用户界面,也称人机界面.是指用户和某些系统进行交互方法的集合,实现信息的内部形式与人类可以接受形式之间的转换.本文为WUI用户整理了10个优秀的 Web UI 库/框架,为你的下一个Web设计的高效开发作好准备. 1. IT Mill ToolkitIT Mill Toolkit是一个开源的Web UI 框架,为富 Web 应用程序提供widgets 和工具.无需担忧Web 浏览器.DOM . JavaScript的兼容性性问题. 2. LivePipe U