快捷搜索:  test  as

使用Atlas创建自己的Client Control

Atlas客户端脚本供给了数个承袭于Sys.UI.Control的类,从简单如Sys.UI.Button,到繁杂如Sys.UI.Data.ListView,在必然程度上方便了开拓职员,别的可以应用Declarative Syntax也可谓一大年夜进步。然则一样平常仅仅应用Atlas供给的那些类是远远不敷的,开拓职员必须自行应用Atlas进行扩展,并且将自己的扩展融入到Atlas模型中去。

一样平常来说:应用Client Script开拓Atals的Control,必要进行以下几步:

1、编写一个类,并承袭于Sys.UI.Control或其子类。

2、重载getDescriptor措施供给对付类成员的描述。

3、重载initialize措施添加初始化代码。

4、重载dispose措施添加销毁该控件期间码。

5、添加该类对付Declarative Syntax的支持。

这里以一个Culture Selector的开拓生发火为例子,直不雅和具体地阐明上述这些步骤,也能提到编写时必要留意的一些细节。

Culture Selector控件是一个封装了的Atlas控件,用于切换当前页面的Culture情况。我之前写过了一篇文章《本地化与Atlas对付本地化的支持》对照具体地阐发了Atlas中Culture相关问题。Culture Selector将使用这个Atlas的Culture支持实现Culture切换。当然,它还相称的不成熟,只是一个为了阐明问题而作的演示。

我们一步一步地来实现这个控件:

1、编写一个类,并承袭于Sys.UI.Control或其子类。

Jeffz.UI.CultureSelector类的代码框架如下:

1Type.registerNamespace("Jeffz.UI");

2

3Jeffz.UI.CultureSelector = function(associatedElement)

4{

5  Jeffz.UI.CultureSelector.initializeBase(this, [associatedElement]);

6

7  ...

8

9  this.get_culture = function()

10  {

11    return _culture;

12  }

13

14  this.set_culture = function(value)

15  {

16    if (!this.get_isInitialized())

17    {

18      _culture = value;

19      return;

20    }

21

22    if (_culture == value)

23    {

24      return;

25    }

26

27    var cancelArgs = new Sys.CultureCancelEventArgs(value);

28    this.cultureChanging.invoke(this, cancelArgs);

29    canceled = cancelArgs.get_canceled();

30

31    if (!canceled)

32    {

33      _culture = value;

34      this.__updateCulture();

35      this.raisePropertyChanged('culture');

36    }

37

38    this.__changeSelectedOption(_culture);

39  }

40

41  this.get_isLoading = function()

42  {

43    return _isLoading

44  }

45

46  this.cultureChanging = new Type.Event(this);

47

48  ...

49}

50Jeffz.UI.CultureSelector.registerClass('Jeffz.UI.CultureSelector', Sys.UI.Control);  作为演示,在这里Culture Selector直接承袭于Control控件,而不是承袭于Sys.UI.Select控件,以避免Select纷纷的现有成员。上面定义了一个RW属性(culture),一个只读属性(isLoading)和一个事故(culturechanging),并且填写了Atlas中承袭的根基代码。这样的框架存在于所有Sys.UI.Control之类中。此中属性的写法,事故的写法等等,都是Atlas的规范。假如违反了这种规范,运行就可能不精确。

在定义属性时,必要留意可能当时还没有履行initialize措施,必要“分外对待”(16-20行)。别的,为了支持binding,在相宜的时刻必要调用this.raisePropertyChanged措施,这一点,在编写全部类的时刻都必要留意。

别的,在cultureChanging事故里应用了CancelEventArgs,这样可以相应这个事故并取消Culture改变。

2、重载getDescriptor措施供给对付类成员的描述。

这是个相称紧张的措施。在Atlas中,一个类是靠Sys.TypeDescriptor类的实例来描述自己的对外成员。Atlas在获得该实例后即可以进行一些操作,例如异常闻名的“Binding”。Atlas中从一个类得到Sys.TypeDescriptor工具的要领有几种,此中对付实现了Sys.ITypeDescriptorProvider接口的类,就会调用接口中的getDescriptor措施来得到类成员的描述。Atlas中的类大年夜都实现了这个接口,由于它在Sys.Component中就被实现了。自然,对付承袭了Sys.Control的类都有这个措施,我们必要重载它来供给对付自身的描述。代码如下:

this.getDescriptor = function()

{

var td = Jeffz.UI.CultureSelector.callBaseMethod(this, 'getDescriptor');

td.addProperty("culture", String);

td.addProperty("isLoading", Boolean, true);

td.addEvent("cultureChanging", true);

return td;

}  首先,调用父类的getDescriptor措施得到描述父类成员的工具。然后调用各个措施来加入类自身的描述。

Sys.TypeDescriptor添加Property描述的措施定义如下:

Sys.TypeDescriptor.addProperty(propertyName, type, isReadonly, associateAttribute1, associateAtribute2...);

首先必要调用父类的initialize措施进行初始化,然后再履行自己的代码。在初始化代码中每每会处置惩罚控件状态(5-17行),attach控件事故(19-20行),并做一些函数封装等另外事情(22到28行)。

在作函数封装时,一个最常用的措施便是Function.createDelegate。该措施会返回一个回调函数,定义如下:

Function.createDelegate(instance, method)

假如直接将一个函数交给一些HTML控件作为事故的回调函数,在事故发生时this所引用的工具便是该控件,而不是我们自定义的工具,例如把一个函数交给window.setTimeout后,this就变成的window。Function.createDelegate则办理了这一点,一样平常要相应HTML控件的回调时,都应用该措施对照妥帖。它包管了method参数所引用的措施被调用时,this所引用的必然是instance参数工具。

4、重载dispose措施添加销毁该控件期间码。

Sys.Component也实现了Sys.IDisposable接口。是以重载dispose措施也是销毁工具,开释资本的紧张做法。代码如下:

this.dispose = function()

{

if (_selectionChangedHandler)

{

this.element.detachEvent('onchange', _selectionChangedHandler);

_selectionChangedHandler = null;

_loadCompleteHander = null;

}

Jeffz.UI.CultureSelector.callBaseMethod(this, 'dispose');

}Jeffz.UI.CultureSelector.registerBaseMethod(this, 'dispose');

一样平常来说,要做的便是detach事故,开释引用等等。记得在着末要调用父类的dispose函数。

到现在,CultureSelector类已经写得差不多了,我们先来应用一下。首先是HTML:

可以看到init函数内经由过程javascript应用了Jeffz.UI.CultureSelector。并将一个Label的visible属性和cultureSelector的isLoading属性经由过程binding联系了起来。

着末是Atlas Xml Scripts:

可以点击这里查看应用效果。选择下拉框可以发明日期显示的翰墨被改变了,这就阐明Culture Selector功能生效了。

5、添加该类对付Declarative Syntax的支持。

着末,就要添加对付Xml Script的支持了。实现这一步着实可以异常的简单,只要如下一句代码:

Sys.TypeDescriptor.addType('script', 'cultureSelector', Jeffz.UI.CultureSelector);

这样,我们就可以在代码里应用像应用一样平常地应用了。然则为了避免冲突,最好我们照样加上自己的prefix对照好。首先看一下Sys.TypeDescriptor.addType的定义:

Sys.TypeDescriptor.addType(tagPrefix, tagName, type);

于是我们只必要应用第一个参数就能够加上一个prefix:

Sys.TypeDescriptor.addType('jeffz', 'cultureSelector', Jeffz.UI.CultureSelector);

显然,假如prefix被设为了script那么则可以省略。

您可能还会对下面的文章感兴趣: