帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:控制  Controls  


介绍

本文介绍使用 new AJAX框架开发客户端控件。 我已经附加了一些使用AJAX库开发的示例客户端控件。 本文是学习AJAX客户机组件开发的一个好起点。

背景

JavaScript是面向对象的语言,但是对于其他语言( 如 C# 或者 C++ ),这种方法。 JavaScript没有类的概念,所以对象不是类的实例。 JavaScript对象可以被视为名称和值对的一个 Collection 。

在JavaScript中可以用不同的方式创建对象。 例如:

var table = new Object();//orvar table = {};

可以将属性添加到这里对象中:

table.Name = "Ikea Comp table";//ortable["Name"] = "Ikea Comp table";

如果还没有定义属性,则在赋值过程中创建。

同样,可以将函数添加到上面的table 对象中:

table.GetName = function()
{
 returnthis.Name;
}

在JavaScript中创建对象的另一种方法是:

//this function can be represented //as a class with properties and functions inside it.function Cat()
{
 this.name = "kitty"this.type = "big";
 this.Details = function ()
 {
 alert(this.name +"" +this.type);
 }
}//This method is shared within all objects//Prototype is used to define the template of the object and used //to implement inheritance. Reference to objects and arrays added to //the prototype object are shared between all the instances. //functions defined in prototype are also shared between objects and it //saves a little memory but are a little slow to call as compared to //functions defined in constructor//another way to write Cat.prototype.speak = function()....Cat.prototype={
 speak : function()
 {
 alert('meaaoooww');
 }
}//Static Function on Cat ObjectCat.StaicFunc = function()
{
 //this.name or any other property is not accessible //because it is a static method alert("static function called");
}//object of class;var cat = new Cat(); 
cat.speak();
cat.Details();
Cat.StaicFunc();
Inheitance can be implemented in JavaScript asfunction WildCat()
{
 Cat.call(this); //Calling the base constructor}
WildCat.prototype = new Cat();//Overriding the base function speakWildCat.proptotype.speak = function()
{
 alert('this is wild cat..Beware');
}

创建对象的更快捷方法是:

var team = {name:'', members:[], count:function() { return members.length }}

上面的对象是使用JSON格式创建的。 要了解更多关于JSON格式的信息,"谷歌":- ) 。

AJAX库中的JavaScript

java AJAX库扩展了JavaScript类型系统,以模拟当前在JavaScript中无法使用的对象定向结构,如接口。类和枚举。 类以类似于JavaScript的方式创建。 要在AJAX框架中创建类,请执行以下操作:

Type.registerNamespace('Sample');
Sample.Vehicle = function ()
{
 this._name;
 this._type;
}
Sample.Vehicle.prototype = {
 get_name : function()
 {
 returnthis._name;
 },
 set_name : function (value)
 {
 this._name = value;
 },
 get_type : function()
 {
 returnthis._type;
 },
 set_type : function(value)
 {
 this._type = value;
 },
 Honk : function()
 {
 alert('Loud noise coming...cant you hear that');
 } 
}
Sample.Vehicle.registerClass('Sample.Vehicle');

在上面的例子中,你只需要调用 registerNamespaceregisterClass,用AJAX库注册名称空间和类。 上面的类有两个属性和一个函数。 应使用 get_set_ 格式获取和设置属性值。

registerClass的格式类似于:

NameofClass.registerClass('NameofClass', BaseClass, InterfacesImplemented)

接口可以定义为:

Sample.IDrive = function()
{
 throw Error.notImplemented();
}
Sample.IDrive.prototype = {
Drive : function ()
 {
 throw Error.notImplemented();
 }
}
Sample.IDrive.registerInterface('Sample.IDrive');

从上述 Vehicle 继承一个类类和mplement接口

Sample.Honda = function()
{
 Sample.Vehicle.initializeBase(this);
 //if base class takes arguments in constructor //then they can also be passed//Sample.Vehicle.initializeBase(this, [arg1,arg2,...]);}
Sample.Honda.prototype = {
 Honk: function()
 {
 alert(this._name + ' honking.. .');
 //To call base method//Sample.Honda.callBaseMethod(this, 'Test',[arg1,arg2,...]); }, 
 Drive : function()
 {
 alert('Driving...');
 }
}
Sample.Honda.registerClass('Sample.Honda',Sample.Vehicle, Sample.IDrive);

若要添加/删除事件,请使用 add_eventname/remove_eventname 。 例如:

Sample.List = function() {
 this._items = [];
 this._events = new Sys.EventHandlerList(); 
}
Sample.List.prototype = {
 add : function(item) {
 this._items.push(item);
 this._raiseEvent('itemAdded', Sys.EventArgs.Empty);
 },
 get_events : function() {
 returnthis._events;
 },
 add_itemAdded : function(handler) {
 this.get_events().addHandler('itemAdded', handler);
 },
 remove_itemAdded : function(handler) {
 this.get_events().removeHandler('itemAdded', handler); 
 },
 _raiseEvent : function(eventName, eventArgs) {
 var handler = this.get_events().getHandler(eventName); 
 if (handler) {
 if (!eventArgs) {
 eventArgs = Sys.EventArgs.Empty;
 }
 handler(this, eventArgs);
 }
 }
}
Sample.List.registerClass('Sample.List');

使用AJAX工具包创建客户端组件

从AJAX开始,安装 ASP.NET AJAX工具包,并使用模板" ASP.NET AJAX启用网站"创建一个网站。

在每个启用的AJAX网站中,默认页面上都会有一个 ScriptManager 控件,而'Web.config'是为AJAX配置的。 这个 ScriptManager 控件的主要目的是将所有的AJAX脚本交付给客户端并注册 Web服务 。 这里控件部署的文件可能是由AJAX工具包提供的脚本或者由你创建的任何其他脚本文件。

要部署包含AJAX类和代码的JavaScript文件,请编写:

<asp:ScriptManagerID="ScriptManager1"runat="server"> 
 <Scripts> 
 <asp:ScriptReferencePath="~/TestObjects.js"/></Scripts></asp:ScriptManager>

若要添加对Web服务的引用,请执行下列操作:

<asp:ScriptManagerID="ScriptManager1"runat="server"><Services><asp:ServiceReferencePath="~/Services/Service1.asmx"/><asp:ServiceReferencePath="~/Services/Service2.asmx"/></Services></asp:ScriptManager>

通过在页面上简单地添加这个控件,它可以以声明或者编程的方式交付脚本。

组件的背景

组件是任何应用程序的构件。 它们封装了功能,并允许跨项目重用。 我将讨论AJAX工具包库的组件模型,并给出一个示例。 AJAX库允许使用JavaScript创建组件。 使用AJAX创建组件的过程类似于. NET 框架。 AJAX组件从 Sys.Component 类派生。

AJAX组件分为:

  • 可视组件: 它们有一个用户界面。 它们从 Behavior 或者 Control 类派生。 例如:Button 或者 TextBox 控件在获取焦点( 本文提供的示例) 时的行为。
  • 非可视组件: 他们没有任何用户界面。 它们从 Sys.Component 类派生。

上面的图显示了 ComponentControlBehavior 之间的关系。 ControlBehavior 之间的区别在于,行为被用来增强 Control的基本功能。 例如:如果一个 TextBox 被分配一个 new Behavior,那么它仍然接受输入,但是当它获得焦点时,我们可以改变 TextBox的外观。 同时,创建一个 Control 来更改现有控件的功能,例如: 创建 new 自动更新文本框控件。

.创建一个组件库

创建组件需要重写 Sys.Component 基类的InitializeDispose 方法。

Type.registerNamespace("Sample");
Sample.TestComponent = function() {
 Sample.TestComponent.initializeBase(this);
 }
 Sample.TestComponent.prototype = {
 //Overide initialize method initialize : function() {
 Sample.TestComponent.callBaseMethod(this, 'initialize');
 alert("Initialize called on TestComponent");
 },
 //Overide dispose method dispose : function() {
 alert("Dispose called on TestComponent");
 Sample.TestComponent.callBaseMethod(this, 'dispose');
 },
 time : function() {
 var a = new Date(); 
 alert(a.getTime());
 }
}
Sample.TestComponent.registerClass('Sample.TestComponent',Sys.Component);

在ASPX页上,添加:

//register pageInit function to be called on initialized stage of the pageSys.Application.add_init(pageInit);
function pageInit() {
 //creating component //Alias of Sys.Component.create  $create(Sample.TestComponent, {'id':'testComponent1'});
}
function pageLoad() {
 //find component and call its methods and properties//$find -- Alias of Sys.Application.findvar testComponent = $find('testComponent1');
 testComponent.time();
}

" Sys.Application"是库提供的一个运行时对象,用于管理在应用程序中注册的客户端组件。 $create for是 Sys.Component.create的别名。 这里方法在场景后面执行许多任务以创建组件。 在页面的阶段,必须调用这里方法。 使用 $create 在页面上创建的所有组件都成为 Sys.Application 对象的子组件。 $findSys.Application.find的别名,用于获取 Sys.Application的子组件的引用。 $getSys.UI.DomElement.getElementById的别名,用于获取DOM元素的引用。

$create的完整语法为:

$create(ComponentName, {Dictionary of properties }, 
 { Dictionary of events}, {Dictionary of refrences}, 
 $get(associatedElementID));

对于组件,我们不需要 associatedElementID,但是对于 BehaviorControl,这是必需的参数。

如果组件是 Behavior 或者 Control,则 $create 将它的附加到元素 $get(associatedElementID)

$find的完整语法为:

$find('componentId', container);

默认情况下,$create 创建的所有组件都成为 Sys.Application的子组件,因此如果我们使用 $create 创建一些组件,那么不需要在 $find 中指定容器,因为缺省搜索是在 Sys.Application 中。

$create 执行的工作与下面的代码行执行的工作相同:

var testComponent = new Sample.TestComponent();
 testComponent.set_id('testComponent');
 testComponent.initialize();
 Sys.Application.addComponent(testComponent);

不需要在 Sys.Application 下创建组件,但这是一个很好的实践。 组件可能是复杂的,并且可以包含其他对象或者子组件,因此为初始化和处理实例提供集中的位置非常重要。 在容器 Sys.Application 中添加组件时,它负责初始化和处理组件。 确保在页加载之前已经初始化添加的所有组件。

我们还可以在 PageLoad 事件中创建上述组件的实例,如下所示:

function pageLoad() {
 var testComponent = new Sample.TestComponent();
 testComponent.time();
}

创建行为的

Sys.Component 继承的从 Sys.UI.Behaviour 派生的行为。 必须提供一个要与之关联的元素。 行为的构造函数接受一个元素,该元素被传递给基类构造函数。

例如:

Type.registerNamespace("Sample");
Sample.TestBehavior = function(element) {
 Sample.TestBehavior.initializeBase(this,[element]);
 }
 Sample.TestBehavior.prototype = {
 //Overide initialize method initialize : function() {
 Sample.TestBehavior.callBaseMethod(this, 'initialize');
 alert("Initialize called on TestComponent");
 },
 //Overide dispose method dispose : function() {
 alert("Dispose called on TestComponent");
 Sample.TestBehavior.callBaseMethod(this, 'dispose');
 }
}
Sample.TestBehavior.registerClass('Sample.TestBehavior',Sys.UI.Behavior);

上述行为不执行任何操作。 在 $create 调用期间,必须传递一个元素实例,该实例将被应用到。

$create 将如下所示:

$create(BehaviorName, {Dictionary of properties }, 
 { Dictionary of events}, {Dictionary of refrences}, 
 $get(associatedElementID));

$find 将如下所示:

var instance = $find('ElementName$BehaviorName');

创建控件

Behavior 不同,Control 派生自继承自 Sys.ComponentSys.UI.Control 。 控件的构造函数还需要与。 一个元素只能有一个与之关联的控件。

例如:

Type.registerNamespace("Sample");
Sample.TestControl = function(element) {
 Sample.TestControl.initializeBase(this,[element]);
 }
 Sample.TestControl.prototype = {
 //Overide initialize method initialize : function() {
 Sample.TestControl.callBaseMethod(this, 'initialize');
 alert("Initialize called on TestComponent");
 },
 //Overide dispose method dispose : function() {
 alert("Dispose called on TestComponent");
 Sample.TestControl.callBaseMethod(this, 'dispose');
 }
}
Sample.TestControl.registerClass('Sample.TestControl',Sys.UI.Control);

Control$createBehavior 相同。 $find 也与 Behavior 中的相同。 我们可以通过在 $find 中传递ID来访问一个控件。 不能以编程方式设置控件的ID,如 Behavior的。 这个 Sys.UI.Control 类自动向控件分配一个 ID,它与关联元素的ID相同。 因此,要通过 $find 访问控件,请传递元素的ID 。

AJAX-Enabled服务器控件

上面解释的控件是客户端控件。 这些控件需要在页面生命周期的初始阶段create创建。 创建控件的过程由 $create 语句封装,但是我们需要在页面中手动插入 $create 语句。 如果我们能够自动添加这个 $create 语句,那么就可以拥有服务器控件。 AJAX服务器框架提供了脚本描述符,可以用于将这里语句插入到页代码中。

ScriptComponentDescriptor 可以用来创建non-visual组件,同样,ScriptBehaviorDescriptorScriptControlDescriptor 可以用来创建 BehaviorControl 组件。

在我的下一篇文章中,我将解释AJAX如何启用服务器控件。



文章标签:控制  Controls  

Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语