Through the study of the above content , I believe readers have a general understanding of various project templates and item templates , This section further describes the project files that are included by default in the project template, as well as the item template files , First of all, I will explain the initial contents and functions of these documents , Then it introduces how to add controls to a page , And how to register event handler for control and Design CSS style .

1. Default file in project template

In every project created using the project template JavaScript Of Windows In the app store project , Will include default.html、default.js and default.css Three files . Compared with other project templates , The three files in the blank project template contain only the underlying structure , There is no specific function implementation , Take the blank project template as an example , Respectively introduced default.html、default.js and default.css Three files .

(1)default.html file

default.html The file is the default startup page for the application , You can add controls directly to it , In an application with multiple pages , You can use this page as the base page and load the contents of other pages in it . By default , stay default.html The contents of the document head Element contains pairs of WinJS The library files 、 Style files and JavaScript References to documents . The code snippet looks like this :

<!— Yes WinJS References to Libraries -->

<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>

<!— For style files and background JavaScript References to code files -->

<link href="/css/default.css" rel="stylesheet" />

<script src="/js/default.js"></script>

In the code above , First of all, I quote WinJS In the library ui-dark.css、base.js and ui.js Three files ,ui-dark.css yes JavaScript Theme style library , The theme style used to design the foreground interface ;base.js File provides the basic class library to support program running , Handler activation is included in the base class library 、 Hang up 、 Function of abnormal behavior, etc ,ui.js yes WinJS Control library , Contains some Windows Common controls and control styles used in the foreground interface of the app store . And then I quote default.css and default.js file ,default.css The file is used to design for the default startup page and the overall application CSS style ,default.js The file is used to implement the logical function of the default startup page and handle the life cycle events of the application .

    (2)default.js file

As mentioned above ,default.js The file is used to implement the logical function of the default startup page , And handle application activation 、 Suspend Events . By default ,default.js The content of the file contains an anonymous function , Application activation is defined in this anonymous function 、 The event handler that suspends two events , Also called 了 WinJS.Application.start function . When WinJS.Application.start The application starts running when the function executes .

The following first introduces the application activation event handler , Corresponding JavaScript The code snippet looks like this :

app.onactivated = function (args) {

if (args.detail.kind === activation.ActivationKind.launch) {

if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

// This application just started .

} else {

// This application is reactivated from a suspended state





In the code above ,onactivated Is the name of the activation event . In the active event handler , First of all, according to the parameters args Get the activation type of the current application , Determine whether the current application is activated due to user startup , If it is , Then continue to determine whether the application has just been run or reactivated after being suspended , Readers can carry out relevant logical processing according to the activation mode , Only comments are given here, and no specific implementation code is given . Next call WinJS.UI.processAll Function initialization WinJS Library controls , In order to prevent UI Thread blocking , Use here setPromise Function asynchronously executes the process of initializing the control .

Next, we'll introduce the event handling functions for application pending events , The code snippet looks like this :

app.oncheckpoint = function (args) {


In the code above ,oncheckpoint Is the name of the pending event . By default, there is no specific function implementation in the pending event handler , Developers can add code to it to define the behavior of the application when it hangs .

stay default.js End of file , Called WinJS.Application.start function , After calling this function, the application will start running .

(3)default.css file

default.css By default, the file is divided into two parts , The first part contains a body Mark , Can be in body Add code design under tag default.html On the page body Style of element , The second part contains four statements , Respectively used to design applications in the horizontal screen 、 Fill view 、 Secondary view 、 And the display style in vertical screen state . Because the four sentences have the same structure , Here is just the function of the first statement . The first sentence is as follows :

@media screen and (-ms-view-state: fullscreen-landscape) {


In the code above ,@media After that is the name of a device , It means that we will design the style when we use a certain device next . @media screen It means the design is the style of using the monitor ,and What follows in parentheses is a conditional judgment , Determine whether the current view state of the application is horizontal screen , If it is , Use the style in braces . No specific style code has been added to the braces in the above statement , Developers can design styles according to their needs .

2. New file created using item template

The above describes the default file in the project template , I'll start with Visual Studio 2012 Provided item template , These Item Templates contain some basic code , Developers can design application functions directly on the basis of these codes . In common item templates , There are some item templates that readers may be familiar with , such as "HTML page " A template 、"JavaScript file " Item Templates and " Style sheets " A template , So I won't explain these Item Templates too much , The following will be " Page control " The item template is an example to explain what the template contains by default .

Use " Page control " Item template creates a new file , Three files are automatically added , The default names are pagecontrol.html、pagecontrol.js and pagecontrol.css, The contents and functions of these three files are introduced respectively .


pagecontrol.html The file contains a HTML The basic structure of the page , stay head Element contains pairs of WinJS The library files 、pagecontrol.css and pagecontrol.js References to documents , The code snippet looks like this :

<!— Yes WinJS References to Libraries -->

<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>

<!— For style files and background JavaScript References to code files -->

<link href="pagecontrol.css" rel="stylesheet" />

<script src="pagecontrol.js"></script>

In the code above , First of all, three WinJS The library files , stay pagecontrol.html The function of these three documents is related to default.html Same on page , I won't repeat it here . And then I quote pagecontrol.css and pagecontrol.js file ,pagecontrol.css Files are used to design pagecontrol.html Page style ,pagecontrol.js Used to implement pagecontrol.html The logical function of the page .

stay body The element contains one div Elements , This div The content of the element is divided into the title part and the main content part of the page ,header Element is used to define the title of the page ,section Elements are used to design the main content of the page . The code snippet looks like this :

<div class="pagecontrol fragment">

// Page title section

<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>



// The main content of the page

<section aria-label="Main content" role="main">

<p>Content goes here.</p>



In the code above , The title section contains a button and a h1 Elements , The button uses WinJS In the library win-backbutton The style changes its shape to a left arrow , And set up disabled Property changes its state to invisible ;h1 Element is used to display the title of the page . The main content section contains a p Elements , Used to display a piece of text .


pagecontrol.js Files are used to implement pagecontrol.html The logical function of the page , By default ,pagecontrol.js The code of the file is contained in an anonymous function , Called inside an anonymous function WinJS.UI.Pages.define function , Used to define a PageControl Control , The code snippet looks like this :

(function () {

"use strict";

WinJS.UI.Pages.define("/pagecontrol/pagecontrol.html", {

ready: function (element, options) {


unload: function () {


updateLayout: function (element, viewState, lastViewState) {




In the code above ,"use strict" Represents the current strict programming mode ,WinJS.UI.Pages.define The first argument to the function is pagecontrol.html Address of the page . The second parameter is an object , There are three functions defined in this object , Respectively ready、unload and updateLayout. among ready Function is mainly used to initialize PageControl Control ,unload The function navigates out pagecontrol.html Page , When pagecontrol When the display interface of the page changes , Will call updateLayout function .


stay pagecontrol.css It's defined in the file pagecontrol.html Page CSS style , The default content is settings p The display position of the element , among p The element is contained in a class named pagecontrol Element of , The code snippet looks like this :

.pagecontrol p {

margin-left: 120px;


The above is the initial content and function of the item template file , Next, how to add controls to a file .

Win10 series :JavaScript More articles about files in project templates and item template files

  1. About H5 Project under development TS( or JS) A record of files compiled in order into a file

    because js The execution features of , Multiple js File composition of a file or multiple js When the file is loaded , It needs to be done in the specified order , Otherwise, an error will be reported . Let's take a look at the current mainstream H5 What the engine does . The way egrets do What the current version does stay tsc ...

  2. Gridview The usage of edit template and item template in

    <asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server&q ...

  3. Win10 series :JavaScript Project templates and item templates

    Use Visual Studio Development Windows When the app store applies , The template provided by it can help us quickly create an application . among , Building a new Windows You can select the required template class in the project template when you apply the project in the app store ...

  4. How to be in TFS Add a report to the process template of

    In the process of creating a new team project ,TFS Of " New team project wizard " According to the process template type selected by the user (CMMI, Scrum,Agile etc. ) Automatically create a SSRS(SQL Server Rep ...

  5. thinkPHP Syntax in templates

    One . Import CSS and JS file    1.css link       js  scr        <link rel='stylesheet' type='text/css' href='__PUB ...

  6. In the template TemplateBinding problem

    Yesterday, a friend asked me for help with a custom watermark control binding problem , The problem is the text entered in the text box , Cannot bind to On the corresponding dependency properties ( Custom dependency properties PassText), He has been struggling for a long time and can't find out the problem . After helping him solve the problem , A little bit here do ...

  7. Flask08 contain (include)、 Inherit (extends)、 macro ???、 The source of the variable in the template 、 utilize bootstrap Build your own web structure

    1 contain Put the contents of another file directly , Copy and paste {% include " Template path " %} Be careful : The templates are all placed in templates Under this folder , You can create a new folder inside to separate : ...

  8. Django Templates, custom tags and filters , Template inheritance (extend),Django The model layer of

    Last wonderful review The view function : request object request.path Request path request.GET GET Request data QueryDict {} request.POST POST Request data Quer ...

  9. Win10 series :JavaScript Template binding

    WinJS Library templates provide a convenient way to format and display multiple pieces of data , In this way, you can combine the template with ListView or FlipView To control the display format of data . Define a WinJS The method and definition of Library template WinJS Warehouse control ...

Random recommendation

  1. The core component in my heart ( pluggable AOP)~ The fourth time Exception interceptor

    Back to directory I've talked about interceptors before , The second time   Cache interceptor , in fact , The most I can say in that lecture is AOP And cache components , There is no detailed description of the concept of interception , This talk , Don't say AOP, Let's talk about interceptors , Interceptor Interceptio ...

  2. About memory data and JSON

    gossip : In use WebBroker Write a small website , I feel a lot : 1. If it's writing a little thing , You should think about it first WebBroker, Because it can be used in minutes . 2. If you want to write a big thing , Maybe we should also consider WebBr ...

  3. In depth understanding of Activity- Mission , Back off the stack , Boot mode

    One . Mission . The concept of fallback stack A task is composed of multiple users who can interact with users and perform certain functions activities Set . these Activity Is scheduled to fall back on the stack , It can be opened and displayed at the right time . When we use Android hand ...

  4. node In process control ,co,thunkify Why? return callback() Process control can be achieved ?

    Preface I'm learning generator ,yield ,co,thunkify When , There are a lot of puzzles , After a lot of practice , Also slowly learn to use , Slowly understand , A while ago, a colleague from other projects came to our project team to study node, Find out ...

  5. ACM1720_A+Bcoming( A new way of conversion of base system )—— The code is very few !

    using namespace std; int main() { int a,b; while(cin>>hex>>a>>b) { cout<<dec ...

  6. Mac_ To configure adb environment variable

    1. Open the terminal Terminal. 2. Get into HOME Catalog : Command line input echo( There's a space between them ) $HOME 3. establish .bash_profile file : Command line input touch( There's a space between them ).bash ...

  7. Linux DM9000 Network card driver complete analysis

    Linux DM9000 Network card driver complete analysis

  8. html/css Get the first chapter

    1. Basic course to learn Probably 3 Read the following two tutorials in your spare time . HTML Text tutorial CSS Text tutorial 2. practice After reading the tutorial . When doing the first exercise , To sum up, for example : 1)div In the middle You need to set properties :margin-left:a ...

  9. [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property &#39;source&#39; to &#39;org.eclipse.js

    terms of settlement : double-click server, Check on [Server Options] Inside [Publish module contexts to separte XML files], As shown in the figure below .

  10. Learn from scratch python

    since 20 century 90 s Python Since the birth of language , It has been widely used in system management task processing and Web Programming . Let's take a look at it today Python The five advantages of ! NO.1 One of the three major programming languages in the world python It's a kind of face ...