Windows803响应用户交互Word文件下载.docx
- 文档编号:3954738
- 上传时间:2023-05-02
- 格式:DOCX
- 页数:44
- 大小:96.01KB
Windows803响应用户交互Word文件下载.docx
《Windows803响应用户交互Word文件下载.docx》由会员分享,可在线阅读,更多相关《Windows803响应用户交互Word文件下载.docx(44页珍藏版)》请在冰点文库上搜索。
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分钟
触控输入
在本练习中,我们将引导您完成对触控输入的响应,包括手势触控和鼠标点击。
在练习开始前,我们首先创建一个新的JavaScript项目并将其命名为GestureSample。
应确保从JavaScript模版列表中选择“WindowsMetroStyle”下的“空白应用程序”
任务1–触控输入与响应
1.打开GestureSample项目下的default.html文件,在<
body>
<
/body>
标签之间用以下代码覆盖原代码:
Html
divid="
contentHost"
>
/div>
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("
);
//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文件,并输入以下代码:
varpage=WinJS.UI.Pages.define("
{
ready:
function(element,options){
4.在“usestrict”;
语句下面添加以下关于获取颜色的函数
//获取一种颜色
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){
returngetColorFromIndex(colors.indexOf(color)+1);
5.下面定义定义一些监听鼠标操作的函数
6.当鼠标按下时,触发的方法如下:
//当鼠标键位按下时触发的方法
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){
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);
MSGestureEnd"
onPieceGestureEnd,false);
MSGestureTap"
onPieceGestureTap,false);
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){
7.当鼠标按键松开时,触发以下方法
//当鼠标键位抬起时触发的方法
functiononTableTopPointerUp(e){
vartableTop;
tableTop=e.target;
tableTop=e.target.parentElement;
vari=tableTop.targetedContacts.indexOf(e.pointerId);
if(i!
==-1){
tableTop.targetedContacts.splice(i,1);
8.除了监听鼠标事件外,我们还要监听屏幕的触摸事件。
在实验中,我们在屏幕上绘制了一些小方块,用它们来响应用户的触摸手势的变化
9.以下函数用于响应小方块上的触摸手势
//停止操作小方块时触发的事件
functiononPieceGestureEnd(e){
cleanUpTileGesture(e.target);
//在小方块上轻敲时触发的方法
functiononPieceGestureTap(e){
e.target.style.backgroundColor=getNextColorFromColor(e.target.style.backgroundColor);
//在小方块上手势保持不变时触发的方法
functiononPieceGestureHold(e){
e.target.style.msTransform=e.target.startingTransform;
e.target.style.backgroundColor=getColorFromIndex(e.target.startingColorIndex);
//在小方块上手势变化时触发的方法
functiononPieceGestureChange(e){
if(e.target.parentElement.targetedContacts.length!
==0){
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);
10.除此之外,对于面板,我们也给予了触摸手势的支持
//面板上手势变化时触发的方法
functiononTableTopGestureChange(e){
if((e.target===e.currentTarget)&
(e.target.targetedContacts.length!
==0)){
e.target.style.msTransform=currentXform.
translate(e.offsetX,e.offsetY).
//在面板上轻敲时触发的方法
functiononTableTopGestureTap(e){
e.target.style.msTransform=newMSCSSMatrix();
e.gestureObject.pointerType=null;
//在面板上手势保持不变时触发的方法
functiononTableTopGestureHold(e){
initialize();
11.然后在添加一些工具函数
//手势停止操作面板时触发的方法,用于还原变量
functiononTableTopGestureEnd(e){
//移除小方块上注册的事件
functioncleanUpTileGesture(elt){
elt.gestureObject=null;
elt.removeEventListener("
onPieceGestureChange);
onPieceGestureEnd);
onPieceGestureTap);
12.最后,利用以上函数完成页面的初始化,并为页面的元素添加一些事件处理的句柄
//初始化面板
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;
i<
pieces.length;
i++){
varangle=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+"
pieces[i].style.zIndex=i;
pieces[i].gestureObject=null;
//初始化整个面板区域的大小、颜色等属性,并注册鼠标点击和手势操作的事件
vartableTop=document.getElementsByClassName("
TableTop"
)[0];
tableTop.style.width=width+"
tableTop.style.height=height+"
tableTop.style.backgroundColor="
rgb(0,0,0)"
tableTop.style.msTransform=(newMSCSSMatrix());
tableTop.addEventListener("
MSPointerDown"
onTableTopPointerDown,true);
MSPointerUp"
onTableTopPointerUp,true);
MSPointerCancel"
tableTop.gestureObject=newMSGesture();
tableTop.gestureObject.target=tableTop;
tableTop.gestureObject.pointerType=null;
tableTop.targetedContacts=[];
tableTop.topmostZ=3;
t
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Windows8 03响应用户交互 03 响应 用户 交互