none
Essential Silverlight翻译连载---第五章 交互和事件处理 RRS feed

  • 常规讨论

  • Silverlight交互

    声明式语言表示XAML提供了很多可能,包括创建所有类型的形状(见第4章),动画元素(见第6章),播放声音视频数据(见第7章)。但如果您在Silverlight中加入少量JavaScript代码,将会释放出它的真实的力量。JavaScript本身是一个强大的语言,但开发者也可以在Silverlight中使用JavaScript API。本书第三部分,特别是第8章,将更详细地讲述JavaScript访问。虽然本书主要关注的是声明式语言XAML,但没有脚本,很多事将不能做。

    这一章解释Silverlight事件处理。特别是什么是事件,怎么获取和处理它们。大部份的事件处理代码都以“XAML code-behind”的方式存在于Filename.xaml.js文件中。从技术手段上来说,javaScript代码可以放置在任何JavaScript文件中,只需要在主HTML文件中通过<script>标签来引用就行了。如果在.xaml.js文件中使用触发XAMLJavaScript代码,而在html.js文件中加入触发JavaScript代码的HTML页面,就可以使应用程序更易于打包和开发。

    大部份的文件清单最少有三个文件---HTML文件,XAML文件,一个或多个JavaScript文件。部分文件的内容总是很相似,例如createSilverlight()方法的代码。从下一个例子开始,我们将调整内含的XAML文件的,将不再给出createSilverlight()方法的代码。就好象之前没有给出HTML文件的代码一样。尽管如此,您也可以在本书配套的代码(http://www.oreilly.com/catalog/9780596516116)中找到例子的完整代码。

    提示:如果对HTML,XAML和JavaScript文件的作用有任何疑问,请复习第2章的基本概念。

    事件和事件处理

    Silverlight事件是当Silverlight应用程序运行时会发生某些事情。这些事情可能是鼠标单击,鼠标移动,键盘输入,应用程序接受或失去焦点,应用程序开始完全载入或是其他类似的事情。所有事件依赖于一个对象,这样不管鼠标指针在矩形之上还是文本之上,单击时都会有所不同。

    Silverlight现在支持超过24个事件,将来的版本可能会更多。本章只关心最重要的一些事件,并提供之前不曾提及到的事件的相关背景知识。

    事件处理是一个代码块,在事件发生(或叫触发)时被执行。这里所说的事件和事件处理和HTML中的JavaScript事件概念非常接近。

    声明事件处理

    有两种途径给一个事件分配一个事件处理---使用声明式方法或使用代码。让我们从第一个选项开始,并使用鼠标事件。Silverlight支持几种鼠标事件,其中之一是用户单击鼠标左键时发生的MouseLeftButtonDown(在鼠标被释放前发生)。

    让我们回顾一下第二章的第一个例子“Hello World”,它包含了三个元素,外层的<Canvas>,一个<Rectangle>和一个<TextBlock>。我们给这三个元素添加事件处理。添加一个事件处理非常容易:添加一个和事件名称相同的属性(在此例中,使用LeftMouseButtonDown而不是JavaScript中的OnLeftMouseButtonDown)。这个属性的值是JavaScript的方法名称。当事件触发时将调用这个方法一次。例5-1显示了这个包括三个事件处理的XAML文件:

    5-1 使用事件处理,XAML文件(MouseClick.xaml

    <Canvas xmlns="http://schemas.microsoft.com/client/2007"

            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

            MouseLeftButtonDown="mouseClick">

    <Rectangle Width="200" Height="75" Stroke="Orange" StrokeThickness="15"

                 MouseLeftButtonDown="mouseClick" />

    <TextBlock FontFamily="Arial" FontSize="32" Canvas.Left="30" Canvas.Top="20"

                 Foreground="Black" Text="Silverlight"

                 MouseLeftButtonDown="mouseClick" />

    </Canvas>

    JavaScript事件处理方法存在于MouseClick.js.xaml文件内,它象ASP.NET事件处理方法一样接收两个参数:

    sender

    接收到事件的那个对象的引用,并会调用事件处理。

    eventArgs

    事件的信息,例如,当处理一个鼠标事件时,可以得到当前鼠标的位置。简单的事件处理方法所做的是显示哪个元素触发了事件。为了实现这个功能,需要使用到sender参数的字符串表达。例如,当<TextBlock>元素触发了事件,sender.toString()所返回的是TextBlock。例5-2中的.xaml.js文件中的“XAML code-behind”代码演示了这项功能。

    5-2 使用事件处理,XAML JavaScript文件(MouseClick.xaml.js

    function mouseClick(sender, eventArgs)

    {

        alert('Ouch, says ' + sender.toString() + 'l');

    }

    现在,当您单击文本块时,将会弹出两个JavaScript窗口:一个是文本块的,另一个是canvas的(图5-1)。这叫做“事件浮升机制”。无论何时,当一个元素接收到一个事件,它会把事件向上传播到父节点(在本例中,<TextBlock>把事件传播给<Canvas>)。如果父节点本身还有父节点,事件还会继续向上传播。这种机制和JavaScriptExplorer浏览器里的事件机制很相似,它经常用于嵌套的XAML结构,并且需要为几个对象添加事件处理。当然例5-1的这种机制是很少使用的,一般只给一个元素添加事件处理。

    译者注:由于使用了XAML的代码隐藏文件,所以这个例子需要的是四个文件,除了前面一章所讲的三个文件外,还多了一个xaml.js文件。例5-2所演示的就是这个文件。这样就需要在html文件内多加一行代码引用这个文件。在html文件中的

    <script type="text/javascript" src="MouseClick.html.js"></script> originalAttribute="src" originalPath=""MouseClick.html.js"></script>"

    代码后面添加一行

    <script type="text/javascript" src="MouseClick.xaml.js"></script>

    这样就可以正常运行程序了。后面的例子也是这样处理。

    当您想改变触发事件的对象时,把Sender属性赋给事件处理方法非常方便。 一般的规则是把每个属性(例如<Rectangle>对象的Foreground)暴露给JavaScript。实际上,当JavaScript试图访问属性时,Silverlight会从中截取这些请求并进行转换,使得Silverlight属性可以正确地被获取。这些请求不是大小写敏感的,您可以使用Foregroundforeground。本书使用驼峰命名法:Foreground变为foregroundFontSize变为fontSize。下面再介绍两个鼠标事件:MouseHover(当鼠标指针移动至元素的显示区域之上)和MouseLeave(当鼠标指针离开元素显示区域时)。例5-3创建了一个XAML文件,它使用了这两种事件,并指定了前景色。

    5-3 改变事件目录属性,XAML文件(MouseHover.xaml

    <Canvas xmlns="http://schemas.microsoft.com/client/2007"

            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Rectangle Width="200" Height="75" Stroke="Orange" StrokeThickness="15" />

    <TextBlock FontFamily="Arial" FontSize="32" Text="Silverlight"

                 Canvas.Left="30" Canvas.Top="20"

                 Foreground="LightGray" MouseEnter="high" MouseLeave="low" />

    </Canvas>

    XAML的代码隐藏的JavaScript文件(例5-4)访问sender参数并设置foreguound属性。结果显示为文本首先显示为亮灰色,但当鼠标移动到它上面时,它会变为黑色。当鼠标离开文本显示区域时,它又变回为亮灰色。图5-2显示了文本的两种状态。

    5-4 改变事件目标属性,XAML JavaScript文件(MouseHover.xaml.js

    function high(sender, eventArgs) {

        sender.Foreground = 'Black';

    }

    function low(sender, eventArgs) {

        sender.Foreground = 'LightGray';

    }


    My blog: http://blog.csdn.net/dotfun http://dotfun.cnblogs.com

    My contact: QQ:372900288 E-mail:372900288@qq.com msn:sellnet007@hotmail.com

    2009年3月11日 8:22
    版主