通过上面内容的学习，相信读者已经对各种项目模板和项模板有了大致的了解，本节将进一步介绍项目模板中默认包含的项目文件以及项模板文件，首先讲解这些文件中的初始内容以及作用，然后介绍在一个页面中如何添加控件，以及如何为控件注册事件处理函数并设计CSS样式。
1.项目模板中的默认文件
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!—对样式文件和后台JavaScript代码文件的引用 -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
在上面的代码中，首先引用了WinJS库中的ui-dark.css、base.js和ui.js三个文件，ui-dark.css是JavaScript主题风格库，用于设计前台界面的主题风格；base.js文件提供了支持程序运行的基础类库，在基础类库中包含了处理程序激活、挂起、异常等行为的函数，ui.js是WinJS控件库，包含了一些Windows应用商店应用的前台界面常用的控件和控件样式。接着引用了default.css和default.js文件，default.css文件用于为默认启动页面和整体应用程序设计CSS样式，default.js文件用于实现默认启动页的逻辑功能和处理应用程序的生命周期事件。
正如上面所提到的，default.js文件用于实现默认启动页的逻辑功能，并处理应用程序的激活、挂起事件。默认情况下，default.js文件的内容中包含一个匿名函数，在这个匿名函数中定义了应用程序激活、挂起两个事件的事件处理函数，还调用了WinJS.Application.start函数。当WinJS.Application.start函数执行时应用程序开始运行。
下面首先介绍应用程序激活事件的处理函数，相应的JavaScript代码片段如下所示：
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
args.setPromise(WinJS.UI.processAll());
在上面的代码中，onactivated是激活事件的名称。在激活事件处理函数中，首先根据参数args获得当前应用程序的激活类型，判断当前应用程序是否因用户启动而激活，如果是，则继续判断应用程序是刚刚运行还是在挂起后重新激活的，读者可以根据激活方式进行相关的逻辑处理，这里只给出了注释并没有给出具体的实现代码。接下来调用WinJS.UI.processAll函数初始化WinJS库控件，为了防止UI线程的堵塞，这里使用setPromise函数异步执行初始化控件的过程。
接下来介绍应用程序挂起事件的事件处理函数，代码片段如下所示：
app.oncheckpoint = function (args) {
在上面的代码中，oncheckpoint是挂起事件的名称。默认情况下挂起事件处理函数中没有具体的功能实现，开发者可以向其中添加代码定义应用程序挂起时的行为。
在default.js文件的最后，调用了WinJS.Application.start函数，调用这个函数后应用程序将开始运行。
@media screen and (-ms-view-state: fullscreen-landscape) {
在上面的代码中，@media后面是一种设备的名称，表示接下来将设计使用某种设备时的样式。 @media screen表示设计的是使用显示器时的样式，and后面小括号内的内容是一个条件判断，判断应用程序当前的视图状态是否为横屏，如果是，就采用大括号内的样式。上面语句中的大括号内还未添加具体样式代码，开发者可以根据需要在其中设计样式。
pagecontrol.html文件包含一个HTML页面的基本结构，在head元素内包含对WinJS库文件、pagecontrol.css和pagecontrol.js文件的引用，代码片段如下所示：
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!—对样式文件和后台JavaScript代码文件的引用-->
<link href="pagecontrol.css" rel="stylesheet" />
<script src="pagecontrol.js"></script>
在body元素中包含一个div元素，这个div元素的内容分为页面的标题部分和主要内容部分，header元素用于定义页面的标题，section元素则用于设计页面的主要内容。代码片段如下所示：
<div class="pagecontrol fragment">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Welcome to pagecontrol</span>
<section aria-label="Main content" role="main">
WinJS.UI.Pages.define("/pagecontrol/pagecontrol.html", {
ready: function (element, options) {
updateLayout: function (element, viewState, lastViewState) {
