Atlas学习手记(19):客户端简单控件介绍
ASP.NET Atlas中引入了客户端控件的概念,用面向对象思想将客户端JavaScript将要操作的DOM元素封装起来,带来了更清晰的代码模型以及更好的可复用性(不足之处是效率有所降低)。Atlas的客户端控件是连接JavaScript与DOM元素的桥梁,我们应该尽可能的使用客户端控件与DOM元素打交道,也就是以Atlas的方法来编写我们的程序。
本文主要简单介绍一下Atlas中的客户端简单控件。
主要内容
1.概述
2.Sys.Component基类
3.Sys.UI.Control基类
4.其他控件
一.概述
ASP.NET Atlas中引入了客户端控件的概念,用面向对象思想将客户端JavaScript将要操作的DOM元素封装起来,带来了更清晰的代码模型以及更好的可复用性(不足之处是效率有所降低)。Atlas的客户端控件是连接JavaScript与DOM元素的桥梁,我们应该尽可能的使用客户端控件与DOM元素打交道,也就是以Atlas的方法来编写我们的程序。
二.Sys.Component基类
Sys.Component是所有的Atlas客户端控件的抽象基类,它的属性和方法如下:
名称 |
描述 |
属性 |
|
id |
Atlas组件的标识符,将Atlas客户端组件与DOM元素连接起来。这个id值与DOM元素的id属性值相同,Atlas使用这个id以找到相关的DOM元素。 |
bindings |
该组件的绑定集合。 |
dataContext |
该组件的绑定的操作对象。如果您设置了这个属性,那么所有绑定条目默认会继承这个对象,但您也可以在绑定的声明中覆盖这个默认的设定。 |
isInitialized |
布尔值,代表该组件是否被初始化过。只读。 |
isUpdating |
该组件是否正在更新中,在开始调用beginUpdate()方法到调用endUpdate()方法期间为true,其他时间为false。只读。 |
方法 |
|
beginUpdate |
更新组件,提高性能或者减少屏幕闪烁,必须与endUpdate配对使用 |
endUpdate |
更新组件,提高性能或者减少屏幕闪烁,与beginUpdate配对使用 |
initialize |
构造函数 |
事件 |
|
propertyChanged |
当组件的某个属性变化时,应该引发该事件。Atlas绑定的实现依赖于这个事件。 |
三.Sys.UI.Control基类
所有的Atlas客户端控件都必须继承于Sys.UI.Control,它的基本定义形式如下:
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
它的属性和方法:
名称 |
描述 |
属性 |
|
accessKey |
获取或设置控件的accessKey,该属性是DOM元素中的accessKey属性的包装。 |
associatedElement |
返回控件的相关DOM元素。这个属性应该传入给控件的构造函数,并在构造以后不可以修改。 |
behaviors |
该组件的Behavior集合。 |
cssClass |
获取或设置控件的CSS Class,该属性是DOM元素中的class属性的包装。 |
enabled |
代表该控件是否被启用,该属性是DOM元素中的enabled属性的包装。 |
parent |
获取或设置该控件的父控件。 |
style |
获取该控件相对应的DOM元素的style属性值。 |
tabIndex |
获取或设置该控件的tab index。 |
visibilityMode |
获取或设置该控件在隐藏时的显示模式,可选枚举值:Sys.UI.VisibilityMode.Collapse代表该控件隐藏时不占用页面空间,Sys.UI.VisibilityMode.Hidden代表该控件隐藏时依然占有其位置。 |
visible |
获取或设置该控件是否可见。 |
方法 |
|
addCssClass |
为该控件添加一个CSS Class。 |
removeCssClass |
删除该控件的一个CSS Class。 |
containsCssClass |
返回布尔值,代表该控件是否有指定的CSS Class。 |
toggleCssClass |
如果该控件没有指定的CSS Class,则添加,如果有,则删除。 |
focus |
使该控件获得输入焦点。 |
scrollIntoView |
使该控件滚动到屏幕可视范围内。 |
onBubbleEvent |
处理该控件的子控件发出的Bubble事件。 |
raiseBubbleEvent |
该方法会调用该控件所有父控件的onBubbleEvent方法,来实现Bubble事件。 |
四.其他控件
这里简单介绍一下Atlas内置的一些客户端简单控件。
名称 |
描述 |
Button |
Atlas将DOM元素中的Button概念扩展,使Button不单单指type为button或submit的HTML input元素,还可以应用到例如span,a等元素上,提供开发人员统一的编程接口。 |
CheckBox |
CheckBox封装了type为checkbox的input DOM元素。 |
HyperLink |
HyperLink控件继承于Sys.UI.Label,用来封装HTML中的a元素。 |
Image |
Image控件作为对DOM元素img的封装。 |
InputControl |
InputControl类是一个抽象类,作为所有提供用户输入的控件(例如TextBox,见下文)的基类,提供了输入数据验证等公有操作。 |
Label |
Atlas中的Label控件可以用来显示一段文字,同时也可以作为一段HTML的占位符。 |
Select |
Select控件封装了DOM元素select,可用来表示一个Drop Down List。 |
TextBox |
Atlas中的TextBox封装了type为input的DOM元素input,或是DOM元素textarea。 |
关于客户端简单控件件简单的学习到这儿,在下一篇我会用一个简单的例子来说明Button的使用。
[说明:本文内容基本来自于Dflying的文章]
Worktile,新一代简单好用、体验极致的团队协同、项目管理工具,让你和你的团队随时随地一起工作。完全免费,现在就去了解一下吧。
https://worktile.com