资源描述
Windows803响应用户交互.docx
《Windows803响应用户交互.docx》由会员分享，可在线阅读，更多相关《Windows803响应用户交互.docx（44页珍藏版）》请在冰豆网上搜索。
Windows803响应用户交互
动手实验
响应用户交互
实验版本：
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
概述
Windows8提供了一种全新编程平台，使开发人员在台式机、平板电脑和其他设备上都能同样轻松地编写丰富的应用程序。
利用这个新平台开发的应用程序称为“Metro风格的应用”，可以在HTML和JavaScript中编写，或使用XAML和C#、VB或C++编写。
通过HTML编程模型，熟悉HTML5和JavaScript的开发人员能够利用他们的技能来构建应用，并把应用放到Windows应用商店中出售，而XAML编程模型提供了一个Silverlight和WPF开发人员非常熟悉的环境。
Metro风格的应用依赖于Windows运行时（也称为WinRT）提供的API。
WinRT提供数千个类，它们分为100多个命名空间，用于执行从与其他应用程序共享内容到访问Windows应用商店的一切活动。
WinRTAPI由MicrosoftWindowsLibraryforJavaScript（也称为WinJS）和.NET予以补充，其中.NET用于以其他语言编写的应用程序。
这些API共同提供了构建丰富多彩的Metro风格的应用的基础。
本实验旨在介绍Windows8Metro风格的应用的一系列实验中的响应用户交互系列。
在本实验中，您将使用HTML和JavaScript进行简单的练习，初步体验开发用户交互功能的乐趣。
目标
本实验将向您展示：
如何处理用户的触控输入
识别输入设备的各种属性
处理键盘和鼠标的简单输入
简单熟悉Windows.Devices.Input命名空间提供的工具类
操作墨迹数据
系统要求
要完成本实验，您的计算机必须安装以下软件：
MicrosoftWindows8正式版
适用于Windows8的MicrosoftVisualStudio2012RTM
安装
要完成本实验，您需要在计算机上执行以下步骤完成准备工作：
1.安装MicrosoftWindows8正式版
2.安装适用于Windows8的MicrosoftVisualStudio2012RTM
练习
本实验包括以下练习：
1.触控输入
2.标识输入设备
3.响应键盘输入
4.响应鼠标输入
本实验预计用时：
40-60分钟
练习1：
触控输入
在本练习中，我们将引导您完成对触控输入的响应，包括手势触控和鼠标点击。
在练习开始前，我们首先创建一个新的JavaScript项目并将其命名为GestureSample。
应确保从JavaScript模版列表中选择“WindowsMetroStyle”下的“空白应用程序”
任务1–触控输入与响应
1.打开GestureSample项目下的default.html文件，在
标签之间用以下代码覆盖原代码：
Html
2.打开js文件夹下的default.js文件，用以下代码覆盖原代码：
JavaScript
（function（）{
"usestrict";
varscenarios={url:
"/html/gesture.html"};
functionactivated（eventObject）{
if（eventObject.detail.kind===Windows.ApplicationModel.Activation.ActivationKind.launch）{
//UsesetPromisetoindicatetothesystemthatthesplashscreenmustnotbetorndown
//untilafterprocessAllandnavigatecompleteasynchronously.
eventObject.setPromise（WinJS.UI.processAll（）.then（function（）{
//Navigatetoeitherthefirstscenarioortothelastrunningscenario
//beforesuspensionortermination.
varurl=WinJS.Application.sessionState.lastUrl||scenarios.url;
returnWinJS.Navigation.navigate（url）;
}））;
}
}
WinJS.Navigation.addEventListener（"navigated",function（eventObject）{
varurl=eventObject.detail.location;
varhost=document.getElementById（"contentHost"）;
//Callunloadmethodoncurrentscenario,ifthereisone
host.winControl&&host.winControl.unload&&host.winControl.unload（）;
WinJS.Utilities.empty（host）;
eventObject.detail.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（）{
"usestrict";
varpage=WinJS.UI.Pages.define（"/html/gesture.html",{
ready:
function（element,options）{
}
}）;
}）（）;
4.在“usestrict”;语句下面添加以下关于获取颜色的函数
JavaScript
//获取一种颜色
functiongetColorFromIndex（index）{
varcolors=["rgb（0,140,0）","rgb（0,98,140）","rgb（194,74,0）","rgb（89,0,140）","rgb（191,150,0）","rgb（140,0,0）"];
returncolors[index%colors.length];
}
//获取已选颜色在colors数组中的下一个颜色
functiongetNextColorFromColor（color）{
varcolors=["rgb（0,140,0）","rgb（0,98,140）","rgb（194,74,0）","rgb（89,0,140）","rgb（191,150,0）","rgb（140,0,0）"];
returngetColorFromIndex（colors.indexOf（color）+1）;
}
5.下面定义定义一些监听鼠标操作的函数
6.当鼠标按下时，触发的方法如下：
JavaScript
//当鼠标键位按下时触发的方法
functiononTableTopPointerDown（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.currentTarget）{
e.target.targetedContacts.push（e.pointerId）;
}
}
elseif（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.pointerId）;
}
}
else{
return;
}
if（!
e.target.gestureObject）{
e.target.gestureObject=newMSGesture（）;
e.target.gestureObject.target=e.target;
e.target.gestureObject.pointerType=e.pointerType;
e.target.addEventListener（"MSGestureChange",onPieceGestureChange,false）;
e.target.addEventListener（"MSGestureEnd",onPieceGestureEnd,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.target.style.zIndex=e.target.parentElement.topmostZ;
}
elseif（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
//当鼠标键位抬起时触发的方法
functiononTableTopPointerUp（e）{
vartableTop;
if（e.target===e.currentTarget）{
tableTop=e.target;
}
else{
tableTop=e.target.parentElement;
}
vari=tableTop.targetedContacts.indexOf（e.pointerId）;
if（i!
==-1）{
tableTop.targetedContacts.splice（i,1）;
}
}
8.除了监听鼠标事件外，我们还要监听屏幕的触摸事件。
在实验中，我们在屏幕上绘制了一些小方块，用它们来响应用户的触摸手势的变化
9.以下函数用于响应小方块上的触摸手势
JavaScript
//停止操作小方块时触发的事件
functiononPieceGestureEnd（e）{
cleanUpTileGesture（e.target）;
}
//在小方块上轻敲时触发的方法
functiononPieceGestureTap（e）{
e.target.style.backgroundColor=getNextColorFromColor（e.target.style.backgroundColor）;
cleanUpTileGesture（e.target）;
}
//在小方块上手势保持不变时触发的方法
functiononPieceGestureHold（e）{
e.target.style.msTransform=e.target.startingTransform;
e.target.style.backgroundColor=getColorFromIndex（e.target.startingColorIndex）;
cleanUpTileGesture（e.target）;
}
//在小方块上手势变化时触发的方法
functiononPieceGestureChange（e）{
if（e.target.parentElement.targetedContacts.length!
==0）{
return;
}
varcurrentXform=newMSCSSMatrix（e.target.style.msTransform）;
varcurrentScale=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（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,-e.offsetY）;
}
}
10.除此之外，对于面板，我们也给予了触摸手势的支持
JavaScript
//面板上手势变化时触发的方法
functiononTableTopGestureChange（e）{
if（（e.target===e.currentTarget）&&（e.target.targetedContacts.length!
==0））{
varcurrentXform=newMSCSSMatrix（e.target.style.msTransform）;
e.target.style.msTransform=currentXform.
translate（e.offsetX,e.offsetY）.
translate（e.translationX,e.translationY）.
rotate（e.rotation*180/Math.PI）.
scale（e.scale）.
translate（-e.offsetX,-e.offsetY）;
}
}
//在面板上轻敲时触发的方法
functiononTableTopGestureTap（e）{
if（（e.target===e.currentTarget）&&（e.target.targetedContacts.length!
==0））{
e.target.style.msTransform=newMSCSSMatrix（）;
}
e.gestureObject.pointerType=null;
}
//在面板上手势保持不变时触发的方法
functiononTableTopGestureHold（e）{
if（（e.target===e.currentTarget）&&（e.target.targetedContacts.length!
==0））{
initialize（）;
}
e.gestureObject.pointerType=null;
}
11.然后在添加一些工具函数
JavaScript
//手势停止操作面板时触发的方法，用于还原变量
functiononTableTopGestureEnd（e）{
e.gestureObject.pointerType=null;
}
//移除小方块上注册的事件
functioncleanUpTileGesture（elt）{
elt.gestureObject=null;
elt.removeEventListener（"MSGestureChange",onPieceGestureChange）;
elt.removeEventListener（"MSGestureEnd",onPieceGestureEnd）;
elt.removeEventListener（"MSGestureTap",onPieceGestureTap）;
}
12.最后，利用以上函数完成页面的初始化，并为页面的元素添加一些事件处理的句柄
JavaScript
//初始化面板
functioninitialize（）{
varwidth=640;
varheight=360;
varsize=Math.min（width,height）*0.5;
varradius=size/Math.SQRT2+1.0;
varpieces=document.getElementsByClassName（"PuzzlePiece"）;
varangleDelta=2.0*Math.PI/pieces.length;
varangleStart=angleDelta/2.0;
//初始化四个小方块的大小、颜色等属性
for（vari=0;ivarangle=angleStart+i*angleDelta;
pieces[i].style.msTransform=（newMSCSSMatrix（））.translate（-size/2.0,-size/2.0）.
translate（width/2.0+radius*Math.cos（angle）,height/2.0+radius*Math.sin（angle））;
pieces[i].startingTransform=pieces[i].style.msTransform;
pieces[i].style.backgroundColor=getColorFromIndex（i）;
pieces[i].startingColorIndex=i;
pieces[i].style.width=size+"px";
pieces[i].style.height=size+"px";
pieces[i].style.zIndex=i;
pieces[i].gestureObject=null;
}
//初始化整个面板区域的大小、颜色等属性，并注册鼠标点击和手势操作的事件
vartableTop=document.getElementsByClassName（"TableTop"）[0];
tableTop.style.width=width+"px";
tableTop.style.height=height+"px";
tableTop.style.backgroundColor="rgb（0,0,0）";
tableTop.style.msTransform=（newMSCSSMatrix（））;
tableTop.addEventListener（"MSPointerDown",onTableTopPointerDown,true）;
tableTop.addEventListener（"MSPointerUp",onTableTopPointerUp,true）;
tableTop.addEventListener（"MSPointerCancel",onTableTopPointerUp,true）;
tableTop.gestureObject=newMSGesture（）;
tableTop.gestureObject.target=tableTop;
tableTop.gestureObject.pointerType=null;
tableTop.targetedContacts=[];
tableTop.topmostZ=3;
t
升级会员 