原文发布日期:2006.12.11
作者:Alessandro Gallo
翻译:webabcd
概述
在xml-script教程的第一部分(译者注:中文在这里)里我们介绍了类型描述符并且知道了如何看懂它们。在本文(第二部分)中我们将了解如何在声明代码里通过客户端控件处理事件。
处理事件
在教程的第一部分讨论类型描述符的时候,我们使用xml-script实例化有类型描述符的客户端组件。有了类的类型描述符,我们就知道如何使用xml-script创建一个实例。例如,Sys.Preview.UI.Button和Sys.Preview.UI.Label类包含在PreviewScript.js文件下,其暴露出的类型描述符如下:
properties: [ { name: 'command', type: String },
{ name: 'argument', type: String } ],
events: [ { name: 'click' } ]
}
Sys.Preview.UI.Label.descriptor = {
properties: [ { name: 'htmlEncode', type: Boolean },
{ name: 'text', type: String } ]
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Hello XML-script</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="TheScriptManager" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Microsoft.Web.Preview"
Name="Microsoft.Web.Resources.ScriptLibrary.PreviewScript.js" />
</Scripts>
</asp:ScriptManager>
<div>
<input type="button" id="btnSay" value="Click Me" />
</div>
<div>
<h1><span id="lblHello"></span></h1>
</div>
<script type="text/xml-script">
<page xmlns="http://schemas.microsoft.com/xml-script/2005">
<components>
<label id="lblHello" />
<button id="btnSay" click="btnSay_click" />
</components>
</page>
</script>
<script type="text/javascript">
<!--
function btnSay_click(evt) {
$find('lblHello').set_text('Hello XML-script!');
}
//-->
</script>
</form>
</body>
</html>
button的click属性是我们感兴趣的部分,它的值是一个全局javascript函数的名字 - btnSay_click,该javascript函数写在后面的javascript代码块里。类型描述符中的一个事件被映射到了xml属性中的同名事件,这个属性的值就是用来处理该事件的javascript函数的名称。
让我们来看看第二种触发事件的方法 - 通过客户端控件。用下面这段代码取代上面的button标签。
<click>
<setPropertyAction target="lblHello" property="text"
value="Hello XML-script!" />
</click>
</button>
Actions
类型描述符中的事件可以用与事件名相同的名字作为xml标签而被解析。它包括一个或多个子元素用来调用action。
一个action就是一个内置了一个事件的执行逻辑的对象。在最后的那个例子中我们用一个被称作SetProperty的action来处理click事件。这个action实际上就是Sys.Preview.SetPropertyAction类的实例,它也有自己的一些类型描述符
properties: [ {name: 'property', type: String},
{name: 'propertyKey' },
{name: 'value', type: String} ]
}
SetPropertyAction还有一个被称作propertyKey的类型描述符。它的作用是设置一些属性的子属性,下面就是一段示例代码,你可以用它替换掉原来的相关代码
<click>
<setPropertyAction target="lblHello"
property="text"
value="Hello XML-script!" />
<setPropertyAction target="lblHello"
property="element"
propertyKey="style.backgroundColor"
value="#FFFF00" />
</click>
</button>
xml-script允许通过声明代码实例化有类型描述符的客户端组件。它允许调用一段javascript函数,或者执行一个或多个action去处理事件。
在下一篇教程里,我们将继续讨论事件,并且介绍一下Microsoft Ajax Library里的其它一些内置action。