Windows803响应用户交互.docx

1、Windows8 03响应用户交互动手实验响应用户交互实验版本： 1.0.0最后更新日期： 10/11/2018目录概述 3练习 1：触控输入 5任务 1 触控输入与响应 5练习 2：标识输入设备 13任务 1 检索鼠标属性 13任务 2 检索键盘属性 16任务 3 检索触摸属性 17任务 4 检索指针属性 19练习 3：响应键盘输入 22任务 1 添加快捷键操作 22练习 4：响应鼠标输入 24任务 1 制作简易面板 24小结 30概述Windows 8 提供了一种全新编程平台，使开发人员在台式机、平板电脑和其他设备上都能同样轻松地编写丰富的应用程序。利用这个新平台开发的应用程序称为“Met

2、ro 风格的应用”，可以在 HTML 和 JavaScript中编写，或使用 XAML 和 C#、VB 或 C+ 编写。通过 HTML编程模型，熟悉 HTML5 和 JavaScript 的开发人员能够利用他们的技能来构建应用，并把应用放到 Windows应用商店中出售，而 XAML 编程模型提供了一个 Silverlight 和 WPF 开发人员非常熟悉的环境。Metro 风格的应用依赖于 Windows 运行时（也称为WinRT）提供的 API。WinRT 提供数千个类，它们分为 100 多个命名空间，用于执行从与其他应用程序共享内容到访问 Windows 应用商店的一切活动。WinRT

3、API 由 Microsoft Windows Library for JavaScript（也称为 WinJS）和 .NET 予以补充，其中 .NET 用于以其他语言编写的应用程序。这些 API 共同提供了构建丰富多彩的 Metro 风格的应用的基础。本实验旨在介绍 Windows 8 Metro 风格的应用的一系列实验中的响应用户交互系列。在本实验中，您将使用 HTML 和 JavaScript进行简单的练习，初步体验开发用户交互功能的乐趣 。目标本实验将向您展示： 如何处理用户的触控输入 识别输入设备的各种属性 处理键盘和鼠标的简单输入 简单熟悉Windows.Devices.Input

4、命名空间提供的工具类 操作墨迹数据 系统要求要完成本实验，您的计算机必须安装以下软件： Microsoft Windows 8 正式版 适用于 Windows 8 的 Microsoft Visual Studio 2012 RTM 安装要完成本实验，您需要在计算机上执行以下步骤完成准备工作：1. 安装 Microsoft Windows 8 正式版2. 安装适用于 Windows 8 的 Microsoft Visual Studio 2012 RTM练习本实验包括以下练习：1. 触控输入2. 标识输入设备3. 响应键盘输入4. 响应鼠标输入 本实验预计用时：40-60 分钟 练习 1：触控

5、输入在本练习中，我们将引导您完成对触控输入的响应，包括手势触控和鼠标点击。在练习开始前，我们首先创建一个新的JavaScript项目并将其命名为GestureSample。应确保从JavaScript模版列表中选择“Windows Metro Style”下的“空白应用程序”任务 1 触控输入与响应1. 打开GestureSample项目下的default.html文件，在标签之间用以下代码覆盖原代码：Html2. 打开js文件夹下的default.js文件，用以下代码覆盖原代码：JavaScript(function () use strict; var scenarios = url: /

6、html/gesture.html ; function activated(eventObject) if (eventObject.detail.kind = Windows.ApplicationModel.Activation.ActivationKind.launch) / Use setPromise to indicate to the system that the splash screen must not be torn down / until after processAll and navigate complete asynchronously. eventObj

7、ect.setPromise(WinJS.UI.processAll().then(function () / Navigate to either the first scenario or to the last running scenario / before suspension or termination. var url = WinJS.Application.sessionState.lastUrl | scenarios.url; return WinJS.Navigation.navigate(url); ); WinJS.Navigation.addEventListe

8、ner(navigated, function (eventObject) var url = eventObject.detail.location; var host = document.getElementById(contentHost); / Call unload method on current scenario, if there is one host.winControl & host.winControl.unload & host.winControl.unload(); WinJS.Utilities.empty(host); eventObject.detail

9、.setPromise(WinJS.UI.Pages.render(url, host, eventObject.detail.state).then(function () WinJS.Application.sessionState.lastUrl = url; ); ); WinJS.Application.addEventListener(activated, activated, false); WinJS.Application.start();)();3. 在js文件夹下新建gesture.js文件，并输入以下代码：JavaScript(function () use stric

10、t; var page = WinJS.UI.Pages.define(/html/gesture.html, ready: function (element, options) );)();4. 在“use strict”;语句下面添加以下关于获取颜色的函数JavaScript/获取一种颜色 function getColorFromIndex(index) var colors = rgb(0, 140, 0), rgb(0, 98, 140), rgb(194, 74, 0), rgb(89, 0, 140), rgb(191, 150, 0), rgb(140, 0, 0); ret

11、urn colorsindex % colors.length; /获取已选颜色在colors数组中的下一个颜色 function getNextColorFromColor(color) var colors = rgb(0, 140, 0), rgb(0, 98, 140), rgb(194, 74, 0), rgb(89, 0, 140), rgb(191, 150, 0), rgb(140, 0, 0); return getColorFromIndex(colors.indexOf(color) + 1); 5. 下面定义定义一些监听鼠标操作的函数6. 当鼠标按下时，触发的方法如下：

12、JavaScript/当鼠标键位按下时触发的方法 function onTableTopPointerDown(e) if (e.currentTarget.gestureObject.pointerType = null) e.currentTarget.msSetPointerCapture(e.pointerId); e.currentTarget.gestureObject.pointerType = e.pointerType; e.currentTarget.gestureObject.addPointer(e.pointerId); if (e.target = e.curren

13、tTarget) e.target.targetedContacts.push(e.pointerId); else if (e.currentTarget.gestureObject.pointerType = e.pointerType) e.currentTarget.msSetPointerCapture(e.pointerId); e.currentTarget.gestureObject.addPointer(e.pointerId); if (e.target = e.currentTarget) e.target.targetedContacts.push(e.pointerI

14、d); else return; if (!e.target.gestureObject) e.target.gestureObject = new MSGesture(); e.target.gestureObject.target = e.target; e.target.gestureObject.pointerType = e.pointerType; e.target.addEventListener(MSGestureChange, onPieceGestureChange, false); e.target.addEventListener(MSGestureEnd, onPie

15、ceGestureEnd, false); e.target.addEventListener(MSGestureTap, onPieceGestureTap, false); e.target.addEventListener(MSGestureHold, onPieceGestureHold, false); e.target.gestureObject.pointerType = e.pointerType; e.target.gestureObject.addPointer(e.pointerId); e.target.parentElement.topmostZ += 1; e.ta

16、rget.style.zIndex = e.target.parentElement.topmostZ; else if (e.target.gestureObject.pointerType = e.pointerType) e.target.gestureObject.addPointer(e.pointerId); e.target.parentElement.topmostZ += 1; e.target.style.zIndex = e.target.parentElement.topmostZ; 7. 当鼠标按键松开时，触发以下方法JavaScript/当鼠标键位抬起时触发的方法

17、function onTableTopPointerUp(e) var tableTop; if (e.target = e.currentTarget) tableTop = e.target; else tableTop = e.target.parentElement; var i = tableTop.targetedContacts.indexOf(e.pointerId); if (i != -1) tableTop.targetedContacts.splice(i, 1); 8. 除了监听鼠标事件外，我们还要监听屏幕的触摸事件。在实验中，我们在屏幕上绘制了一些小方块，用它们来响

18、应用户的触摸手势的变化9. 以下函数用于响应 小方块上的触摸手势JavaScript/停止操作小方块时触发的事件 function onPieceGestureEnd(e) cleanUpTileGesture(e.target); /在小方块上轻敲时触发的方法 function onPieceGestureTap(e) e.target.style.backgroundColor = getNextColorFromColor(e.target.style.backgroundColor); cleanUpTileGesture(e.target); /在小方块上手势保持不变时触发的方法 f

19、unction onPieceGestureHold(e) e.target.style.msTransform = e.target.startingTransform; e.target.style.backgroundColor = getColorFromIndex(e.target.startingColorIndex); cleanUpTileGesture(e.target); /在小方块上手势变化时触发的方法 function onPieceGestureChange(e) if (e.target.parentElement.targetedContacts.length !

20、= 0) return; var currentXform = new MSCSSMatrix(e.target.style.msTransform); var currentScale = Math.sqrt(currentXform.m11 * currentXform.m22 - currentXform.m12 * currentXform.m21); if (e.scale * currentScale = 0.1) e.target.style.msTransform = currentXform.translate(e.offsetX, e.offsetY). translate

21、(e.translationX, e.translationY). rotate(e.rotation * 180 / Math.PI). scale(e.scale). translate(-e.offsetX, -e.offsetY); else e.target.style.msTransform = currentXform.translate(e.offsetX, e.offsetY). translate(e.translationX, e.translationY). rotate(e.rotation * 180 / Math.PI). translate(-e.offsetX

22、, -e.offsetY); 10. 除此之外，对于面板，我们也给予了触摸手势的支持JavaScript/面板上手势变化时触发的方法 function onTableTopGestureChange(e) if (e.target = e.currentTarget) & (e.target.targetedContacts.length != 0) var currentXform = new MSCSSMatrix(e.target.style.msTransform); e.target.style.msTransform = currentXform. translate(e.offs

23、etX, e.offsetY). translate(e.translationX, e.translationY). rotate(e.rotation * 180 / Math.PI). scale(e.scale). translate(-e.offsetX, -e.offsetY); /在面板上轻敲时触发的方法 function onTableTopGestureTap(e) if (e.target = e.currentTarget) & (e.target.targetedContacts.length != 0) e.target.style.msTransform = new

24、 MSCSSMatrix(); e.gestureObject.pointerType = null; /在面板上手势保持不变时触发的方法 function onTableTopGestureHold(e) if (e.target = e.currentTarget) & (e.target.targetedContacts.length != 0) initialize(); e.gestureObject.pointerType = null; 11. 然后在添加一些工具函数JavaScript/手势停止操作面板时触发的方法，用于还原变量 function onTableTopGestu

25、reEnd(e) e.gestureObject.pointerType = null; /移除小方块上注册的事件 function cleanUpTileGesture(elt) elt.gestureObject = null; elt.removeEventListener(MSGestureChange, onPieceGestureChange); elt.removeEventListener(MSGestureEnd, onPieceGestureEnd); elt.removeEventListener(MSGestureTap, onPieceGestureTap); 12.

26、 最后，利用以上函数完成页面的初始化，并为页面的元素添加一些事件处理的句柄JavaScript/初始化面板 function initialize() var width = 640; var height = 360; var size = Math.min(width, height) * 0.5; var radius = size / Math.SQRT2 + 1.0; var pieces = document.getElementsByClassName(PuzzlePiece); var angleDelta = 2.0 * Math.PI / pieces.length; va

27、r angleStart = angleDelta / 2.0;/初始化四个小方块的大小、颜色等属性 for (var i = 0; i pieces.length; i+) var angle = angleStart + i * angleDelta; piecesi.style.msTransform = (new MSCSSMatrix().translate(-size / 2.0, -size / 2.0). translate(width / 2.0 + radius * Math.cos(angle), height / 2.0 + radius * Math.sin(angl

28、e); piecesi.startingTransform = piecesi.style.msTransform; piecesi.style.backgroundColor = getColorFromIndex(i); piecesi.startingColorIndex = i; piecesi.style.width = size + px; piecesi.style.height = size + px; piecesi.style.zIndex = i; piecesi.gestureObject = null; /初始化整个面板区域的大小、颜色等属性，并注册鼠标点击和手势操作

29、的事件 var tableTop = document.getElementsByClassName(TableTop)0; tableTop.style.width = width + px; tableTop.style.height = height + px; tableTop.style.backgroundColor = rgb(0, 0, 0); tableTop.style.msTransform = (new MSCSSMatrix(); tableTop.addEventListener(MSPointerDown, onTableTopPointerDown, true)

30、; tableTop.addEventListener(MSPointerUp, onTableTopPointerUp, true); tableTop.addEventListener(MSPointerCancel, onTableTopPointerUp, true); tableTop.gestureObject = new MSGesture(); tableTop.gestureObject.target = tableTop; tableTop.gestureObject.pointerType = null; tableTop.targetedContacts = ; tableTop.topmostZ = 3; t