微软的Visual Studio提供了多种构成win8应用的方式，其中最让我感到激动的是基于网页设计语言的开发模式，它提供了结合HTML5与Javascript来开发应用的方法，通过这种方法进行开发，不但可以掌握win8应用的开发方式，又可以提高网页的设计水平，达到一石二鸟的效果。

为了学习这种开发，我找了许多电子书来看，但最后结果都不太理想，突然有一天我惊喜的发现微软的官方有相应的教程和完整的电子书供下载，于是我就通过这两样资料，展开了学习，并把自己的学习经历记录下来，供以后查阅和大家参考。

一、总体概述

在Hello World这一节内容中，HTML文件主要使用了三种元素，input、button与Rating，还利用了组块级元素div用于区域分隔。

一般调用方式为：

<input id=" " type="text"/>

<button id=" ">内容</button>

<div id=" ">内容</div>

div元素可以不填写内容，然后利用innerText方法进行动态生成，例如显示欢迎信息。

在JS部分，包含了onactivated与oncheckpoint函数，前者涉及到首次启动和再次唤醒的初始化问题，后者涉及程序挂起的问题。

二、功能实现

①获取input框内的内容

使用 document.getElementById("<id>").value

例如：

对<inputid="nameInput"type="text"/>

使用 var userName =document.getElementById("nameInput").value;来调用

②更改div元素的内容

对<div id="greetingOutput"></div>

使用document.getElementById("greetingOutput").innerText="<string>";来调用，注意此时不用获取value属性。

③注册button事件与写button函数

首先要写一个button的执行函数，它执行的内容就是获取input，经过字符运算，打印到div元素，注意到JS的字符串支持相加，相加后串联。

代码如下

function buttonClickHandler(eventInfo)

{

    var userName = document.getElementById("nameInput").value;

    var greetingString = "Hello, " + userName + "!";

    document.getElementById("greetingOutput").innerText = greetingString;

}

其中事件参数eventInfo可以随便命名，不写也不会报错，但为了严密起见，还是跟随着官方的写法。

接下来就是要注册事件，注册时间发生在程序激活以后，在onactivated函数内，有语句args.setPromise(WinJS.UI.processAll());这一句用来扫描HTML中的WinJS控件并进行初始化。

WinJS.UI.processAll()方法具有异步性，也就是说它后面的代码可以比它先执行，这样有可能就会造成未初始化完毕就执行后面的代码，从而引发错误。

对于一般的HTML元素如button没有这个顾虑，但是对WinJS控件就不行，为了统一起见，我们把所有的脚本都放在通用的位置。

使用setPromise的then方法可以解决这个问题，对于WinJS的processAll，它返回一个promise来表明已经完成，它支持then方法，该方法的参数为completed函数，当promise返回时会执行completed，从而保证它在processAll之后执行。具体写法如下：

原来的函数为：

args.setPromise(WinJS.UI.processAll());

现在变为：

args.setPromise(WinJS.UI.processAll().then(function completed { } ));

我们只需要在completed函数内填写注册程序即可，如下：

args.setPromise(WinJS.UI.processAll().then(function completed()

{

    var helloButton = document.getElementById("helloButton");

    helloButton.addEventListener("click", buttonClickHandler, false);

}));

可以看到，注册时不用获取value的值，而直接访问元素，注册使用addEventListener方法，该方法的三个参数分别为：触发方式、函数名、事件处理时机，其中触发方式有click、mousemove等，触发时机分为：捕获、目标、冒泡，true只在捕获阶段处理事件，而false在目标与冒泡阶段处理，一般填false，该方法还有后续参数，这里暂时用不到。

这样就完成了button、input、div的事件，程序就可以运行了。

三、CSS修饰

①对于背景，在default.html中有一行对css的调用如下：

<link href="//Microsoft.WinJS.1.0/css/ui-drak.css" rel="stylesheet" />

它表示深色背景，将dark改为light，即可显示浅色背景。

②对于元素，一般在default.css中进行设置。

设置步骤为，先为元素添加class属性，如下：

<body>

    <h1 class="headerClass">Hello, world!</h1>

    <div class="mainContent">

        <p>What's your name?</p>

        <input id="nameInput" type="text" />

        <button id="helloButton">Say "Hello"</button>

        <div id="greetingOutput"></div>

    </div>

</body>

在css中调用的方式为：

body {

}

.headerClass {

    margin-top: 45px;

    margin-left: 120px;

}

.mainContent {

    margin-top: 31px;

    margin-left: 120px;

    margin-bottom: 50px;

}

#greetingOutput {

    height: 20px;

    margin-bottom: 40px;

}

注意到与body直接相连的元素使用了"."，而中间隔着mainContent的greetingOutput使用了"#"，其中的属性margin表示边距，单位为px（像素点），下面这张来自百度百科的图片指明了各个边距的含义。

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/25/89/wKioL1NjAXuBVyxTAAEot38eT7U010.jpg" title="margin.jpg" alt="wKioL1NjAXuBVyxTAAEot38eT7U010.jpg" />

此外还有很多修饰属性，可以查阅有关css的资料。

四、WinJS控件Rating

与HTML不同，WinJS控件不是通过标签添加，而是通过为div元素指定data-win-control属性，如下：<div id="ratingControlDiv" data-win-control="WinJS.UI.Rating"></div>，这个控件用于打分，一共五颗星，值可以在0到5之间变化。

接下来同样要注册和处理该事件，把它放在completed函数内注册即可，注册代码如下：

var ratingControlDiv = document.getElementById("ratingControlDiv");

var ratingControl = ratingControlDiv.winControl;

ratingControl.addEventListener("change", ratingChanged, false);

同样的，先获取元素，不同的是还要在获取的基础上获取winControl方法的值，然后是事件注册，此时的触发条件为change。

当事件触发时，执行ratingChanged函数打印分数：

function ratingChanged(eventInfo)

{

    var ratingOutput = document.getElementById("ratingOutput");

    ratingOutput.innerText = eventInfo.detail.tentativeRating;

}

经过这些步骤，第一个应用“Hello World”就完成了，在这个过程中我不仅巩固了网页设计的知识，也了解了WinJS的一些特点。

Win8 HTML5与JS编程学习笔记（一）的更多相关文章

  1. Win8 HTML5与JS编程学习笔记（二）

    近期一直受到win8应用的Grid布局困扰,经过了半下午加半个晚上的奋斗,终于是弄明白了Grid布局方法的规则.之前我是阅读的微软官方的开发教程,书中没有详细说明CSS3的布局规则,自己鼓捣了半天也是 ...

  2. 转 网络编程学习笔记一：Socket编程

    题外话 前几天和朋友聊天,朋友问我怎么最近不写博客了,一个是因为最近在忙着公司使用的一些控件的开发,浏览器兼容性搞死人:但主要是因为这段时间一直在看html5的东西,看到web socket时觉得很有 ...

  3. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  4. js再学习笔记

    #js再学习笔记 ##基本 1.js严格区分大小写   2.js末尾的分号可加,也可不加   3.六种数据类型(使用typeof来检验数据的类型) `typeof` - undefined: `var ...

  5. Linux Shell编程学习笔记——目录（附笔记资源下载)

    LinuxShell编程学习笔记目录附笔记资源下载 目录(?)[-] 写在前面 第一部分 Shell基础编程 第二部分 Linux Shell高级编程技巧 资源下载 写在前面 最近花了些时间学习She ...

  6. DirectX 11游戏编程学习笔记之8: 第6章Drawing in Direct3D(在Direct3D中绘制)(习题解答)

            本文由哈利_蜘蛛侠原创,转载请注明出处.有问题欢迎联系2024958085@qq.com         注:我给的电子版是700多页,而实体书是800多页,所以我在提到相关概念的时候 ...

  7. JS数组学习笔记

    原文:JS数组学习笔记 最近在备课数组,发现很多ES5的方法平时很少用到.细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助. 概念 数组是值的有序集合.每个 ...

  8. 多线程编程学习笔记——async和await（一）

    接上文 多线程编程学习笔记——任务并行库(一) 接上文 多线程编程学习笔记——任务并行库(二) 接上文 多线程编程学习笔记——任务并行库(三) 接上文 多线程编程学习笔记——任务并行库(四) 通过前面 ...

  9. 多线程编程学习笔记——async和await（二）

    接上文 多线程编程学习笔记——async和await(一) 三.   对连续的异步任务使用await操作符 本示例学习如何阅读有多个await方法方法时,程序的实际流程是怎么样的,理解await的异步 ...

随机推荐

  1. Excel下拉框多列显示，如何只显示一列

    小编最近接手一个项目,之于需要导数据,但是我们需要提前把表头什么的设置好,更方便其他小伙伴们帮助我们导入数据,小伙伴们都知道,在excel中设置下拉菜单很简单,直接用数据有效性-序列就可以实现,今天小 ...

  2. JavaMail API 概述

    JavaMail API提供了一种与平台无关和协议独立的框架来构建邮件和消息应用程序. JavaMail API提供了一组抽象类定义构成一个邮件系统的对象.它是阅读,撰写和发送电子信息的可选包(标准扩 ...

  3. Linux 高性能服务器编程——I/O复用

    问题聚焦:     前篇提到了I/O处理单元的四种I/O模型.     本篇详细介绍实现这些I/O模型所用到的相关技术.     核心思想:I/O复用 使用情景: 客户端程序要同时处理多个socket ...

  4. SQL语句常见问题的总结(持续更新)

    语言问题 修改语言注册表\HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432\ORACLE\KEY_DevSuitHome1中的NLS_LANG修改为AMERICAN_AMERIC ...

  5. Struts 2 之校验器

    对于输入校验,Struts2提供了两种方式,1.使用validate方法:2.基于XML配置实现 . validate()方法 支持校验的Action必须实现Validateable接口,一般直接继承 ...

  6. NET中小型企业级项目开发架构系列（一）

    前端时间我们开发了基于Net的一套搭建sprint.NET+NHibernate+MVC+WCF+EasyUI等中小型企业级系统开发平台,现在把整个开发过程中的步步进展整理出来和大家分享,这个系列可能 ...

  7. 随机采样和随机模拟：吉布斯采样Gibbs Sampling实现高斯分布参数推断

    http://blog.csdn.net/pipisorry/article/details/51539739 吉布斯采样的实现问题 本文主要说明如何通过吉布斯采样来采样截断多维高斯分布的参数(已知一 ...

  8. javascript之事件模型

    事件模型 冒泡型事件(Bubbling):事件由叶子节点沿祖先节点一直向上传递到根节点 捕获型事件(Capturing):由DOM树最顶元素一直到最精确的元素,与冒泡型事件相反 DOM标准事件模型:D ...

  9. Redis简介以及数据类型存储

    由于我们在大型互联网项目当中,用户访问量比较大,比较多,会产生并发问题,对于此,我们该如何解决呢,Redis横空出世,首先,我们来简单的认识一下Redis,详细介绍如下所示: Redis是一个开源的, ...

  10. 【Unity Shader实战】卡通风格的Shader（一）

    写在前面 本系列其他文章: 卡通风格的Shader(二) 呜,其实很早就看到了这类Shader,实现方法很多,效果也有些许不一样.从这篇开始,陆续学习一下接触到的卡通类型Shader的编写. 本篇的最 ...