细说新一代HTML5/JavaScript的UI控件wijmo5 的新架构

Wijmo 5是一组JavaScript控件,但是不要与Widgets混淆。在此前开发Wijmo的时候,我们能够用像jQuery UI和jQuery Mobile Widget 框架来构建它,同时也为我们构建Web框架--Wijmo节省了时间。

但是,当我们希望构建一个更现代的Wijmo 5,我们认为现在是时候重新审视JavaScript UI组件,尤其是语法和API接口。在做了大量的研究和讨论后,我们使用了“真正的JavaScript控件(true JavaScript Controls)”,如你在.NET中使用类似的属性,方法和事件等API,同样的在JavaScript UI组件的使用方法几乎完全相同。

同时,我们选择IE9作为Wijmo 5浏览器支持的基准版本,因为IE9支持ECMAScript 5语法,而这点对我们的Wijmo 5架构非常关键,由此创造了新的Wijmo 5架构。

ECMAScript 5Controls

我们的Wijmo 5框架直接采用了ECMAScript 5。我们的源码使用TypeScript,这使得开发非常容易。如,使用它创建了控件基类(Base Control Class), 所有的控件均派生自该基类。

JS的控件如同类对象一样,大小写敏感,且提供了构造函数用于初始化,同时也提供了属性、方法、事件。

如,FlexGrid控件可通过如下方法进行初始化:

//初始化FlexGrid实例对象为一个DOM element

var myFlexGrid = newwijmo.grid.FlexGrid(‘#FlexGrid1‘);

属性

在我们的ES 5控件中,我们采用了Object.defineProperty()。这种方法使得我们可以在JS下像使用.NET控件一样便捷。因为,这种方法允许我们定义属性的getters和setters接口,因此,我们可以按照写.NET代码的逻辑思路直接调用属性,非常方便。

设置控件的属性非常方便,直接赋值即可,完全不用通过函数调用来实现。

//设置FlexGrid可编辑

myFlexGrid.isReadOnly= false;

还可通过类似的方法对事件进行赋值、检查属性是否有值。如果IDE支持只能感知(如VS 2013), 则可通过智能感知的自动完成功能来对控件属性赋值。智能感知对于使用控件来说,非常便捷,可以很好的提高工作效率。

为了方便,同样提供了枚举(Enums)

//设置FlexGrid的selectionmode

myFlexGrid.selectionMode= wijmo.grid.SelectionMode.CellRange;

属性还可通过标准的JS对象方式获得,如,您可以通过如下方法获得控件的get属性接口:

//检查FlexGrid是否可编辑

var readOnly = myFlexGrid.isReadOnly;

如果你熟练的使用.NET语法编程,那么你会非常熟悉这些属性方法。如果你熟练的使用JS编程,那么对这种优美的API接口也会喜欢。

可以对比看如下的对Wijmo Grid Widget赋值语法:

//Wijmo的 Grid Widget允许可编辑

$(‘#WijmoGrid1‘).wijgrid(‘option‘,‘allowEditing‘, true);

这种语法可称为“字符串类型编程”,依赖于字符串的大小写来设置属性值,如设置错误,则不会报错,这个对开发调试将会非常麻烦。

方法

Wijmo 5中的方法使用起来非常方便,可直接通过控件调用控件对应的方法,且调试比较方便。

//刷新FlexGrid控件,以引起relayout和redraw

myFlexGrid.refresh();

对比JS Widget 调用刷新的方法

//刷新Wijmo Grid Widget

$(‘#WijmoGrid1‘).wijgrid(‘doRefresh‘);

如同上面的属性一样,依赖字符串大小写调用方法,调试错误则非常麻烦。

事件

Wijmo 5控件中的事件使用,如同.NET控件中的一样,可通过addHandler、removeHandler订阅、取消订阅事件。

//FlexGrid cell编辑完成事件

myFlexGrid.cellEditEnded.addHandler(function (sender, args) {

//Do something

});

对应的JS Widget 订阅事件的语法:

//订阅Wijmo cell 编辑完成事件

$(‘#WijmoGrid1‘).bind(‘wijgridaftercelledit‘,function (e, args) {

//Do something

});

Controls vs.Widgets

综上所述,下面用表对Wijmo 5 Control和JS Widget进行对比

Wijmo 5 Controls JS Widgets
使用TypeScript类,提供类JavaScript构造函数 Functions接口,通过设置JavaScript对象属性
EcmaScript5:属性有getters 和 setters接口 使用“options”的属性,通过设置子参数
直接设置属性值 通过调用函数实现属性赋值
通过控件的实例调用方法 以传递函数名字符串方式进行方法调用
通过在事件调用addHandler订阅 通过使用bind(),并以字符串方式传递widget name + even name订阅事件
IDEs提供智能感知(依赖IDE) 非强类型,无智能感知
设计时语法检测 无语法检测
运行时错误提示 运行时很少错误提示

欢迎各位朋友一起探讨学习!

相关资料链接:

http://www.evget.com/product/3506

时间: 2024-10-11 10:48:20

细说新一代HTML5/JavaScript的UI控件wijmo5 的新架构的相关文章

JavaScript取消默认控件并添加新控件(DOM编程艺术第11章)

这一章实现的这个功能我研究了好久,这个思路我感觉已经是现在的我要膜拜的了,我感觉我的逻辑还是有些问题. 第一个问题:vid.height与vid.videoHeight vid.height = vid.videoHeight; vid.weight = vid.videoWidth;//移除边框-配合实现无边框效果 vid.parentNode.style.height = vid.videoHeight + "px"; //将vid的父元素(那个div)也贴合vid // vide

为什么我们不喜欢用富UI控件

我们对于理解一般意义的抽象关系并没有问题,但如第一部分使用Entity Framework 时说明的,事实恰好相反.我们还喜欢在交付应用程序时利用抽象关系,比如使用Azure等云服务.在这两种情况下,我们都可以专注于最重要的事情——编写应用程序,而不必仔细构建SQL语句以及配置大量服务器. 当抽象关系给显示项目目标造成障碍时,就开始遇到问题.在某种程度上,所有抽象关系,甚至是我们喜欢的抽象关系,都会出现这种情况.有时,Entity Framework创建的SQL语句无法以所需的方式使用架构,或者

【IOS 开发】基本 UI 控件详解 (UIDatePicker | UIPickerView | UIStepper | UIWebView | UIToolBar )

转载注明出处 : http://blog.csdn.net/shulianghan/article/details/50348982 一. 日期选择器 (UIDatePicker) UIDatePicker 属性截图 : 1. UIDatePicker 控件属性 (1) Mode 属性 Mode 属性 : 用于设置 UIDatePicker 模式; -- Date 属性值 : 显示日期, 不显示时间; -- Time 属性值 : 显示时间, 不显示日期; -- Date and Time 属性值

iOS UI控件6

1.微调器(UIStepper) iOS5 新增UI,包含 +.-两个按钮,继承了UIControl 支持的属性: Value Minimum Maximum Current Step Behavior Autorepeat 按住 加号 不松手,数字会持续变化 Continuous 为YES时,用户交互会立即出发ValueChanged事件,NO 表示只有等用户交互结束才出发ValueChanged事件 Wrap 若为YES,value加到超过Maximum值时,会变成Min指. 设置自定义外观

Themes、Windows UI控件新玩法—DevExpress WPF v19.2

通过DevExpress WPF Controls,你能创建有着强大互动功能的XAML基础应用程序,这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案. 无论是Office办公软件的衍伸产品,还是以数据为中心的商业智能产品,都能通过DevExpress WPF控件来实现.DevExpress WPF Controls v19.2全新发布,新版本增强Themes.Windows UI控件等功能,欢迎立即下载体验最新版哦! DevExpress WPF v19.2正式版下载 Them

vue-autoui自匹配webapi的UI控件

vue-autoui 是一款基于vue和element扩展的一个自动化UI控件,它主要提供两个控件封装分别是auto-form和auto-grid; 通过这两个控件可以完成大多数的信息输入和查询输出的需要.auto-form和auto-grid是通过json来描述展示的结构,在处理上要比写html标签来得方便简单, 但这控件的最大优势并不是在这里,它最重要的功能是可以结合webapi的信息来自动输出界面,只需要调整webapi的信息结构即可完成UI的调整. 基础使用 控件可以直接在vuejs功能

android_常用UI控件_01_TextView3_点击打开新的activity

点击textview打开新的activity (1) MainActivity.java package com.example.android_textview_opennewactivity; import android.os.Bundle; import android.app.Activity; import android.content.Intent; import android.text.SpannableString; import android.text.Spanned;

android_常用UI控件_01_TextView4_rollingsubtitles效果加链接文字

(1)Mainactivity.java package com.example.android_textview_rollingsubtitles; import java.sql.Wrapper; import android.os.Bundle; import android.app.Activity; import android.text.Html; import android.text.TextUtils; import android.text.TextUtils.Truncat

C# WPF 使用委托修改UI控件

近段时间在自学WPF,是一个完全不懂WPF的菜鸟,对于在线程中修改UI控件使用委托做一个记录,给自已以后查询也给需要的参考: 界面只放一个RichTextBox,在窗体启动时开起两个线程,调用两个函数,每隔1秒写一次当前时间 一 界面XAML如下: <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&qu