Essentials of Developing Windows® Store Apps Using HTML5 and JavaScript

O F F I C I A L M I C R O S O F T L E A R N I N G P R O D U C T
20481C
Essentials of Developing Windows® Store
Apps Using HTML5 and JavaScript
Companion Content
ii Essentials of Developing Windows® Store Apps Using HTML5 and JavaScript
Information in this document, including URL and other Internet Web site references, is subject to change
without notice. Unless otherwise noted, the example companies, organizations, products, domain names,
e-mail addresses, logos, people, places, and events depicted herein are fictitious, and no association with
any real company, organization, product, domain name, e-mail address, logo, person, place or event is
intended or should be inferred. Complying with all applicable copyright laws is the responsibility of the
user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in
or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical,
photocopying, recording, or otherwise), or for any purpose, without the express written permission of
Microsoft Corporation.
Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property
rights covering subject matter in this document. Except as expressly provided in any written license
agreement from Microsoft, the furnishing of this document does not give you any license to these
patents, trademarks, copyrights, or other intellectual property.
The names of manufacturers, products, or URLs are provided for informational purposes only and
Microsoft makes no representations and warranties, either expressed, implied, or statutory, regarding
these manufacturers or the use of the products with any Microsoft technologies. The inclusion of a
manufacturer or product does not imply endorsement of Microsoft of the manufacturer or product. Links
may be provided to third party sites. Such sites are not under the control of Microsoft and Microsoft is not
responsible for the contents of any linked site or any link contained in a linked site, or any changes or
updates to such sites. Microsoft is not responsible for webcasting or any other form of transmission
received from any linked site. Microsoft is providing these links to you only as a convenience, and the
inclusion of any link does not imply endorsement of Microsoft of the site or the products contained
therein.
© 2013 Microsoft Corporation. All rights reserved.
Microsoft and the trademarks listed at

http://www.microsoft.com/about/legal/en/us/IntellectualProperty/Trademarks/EN-US.aspx are trademarks of
the Microsoft group of companies. All other trademarks are property of their respective owners
Product Number: 20481C
Released: 01/2014
MICROSOFT LICENSE TERMS
MICROSOFT INSTRUCTOR-LED COURSEWARE
These license terms are an agreement between Microsoft Corporation (or based on where you live, one of its
affiliates) and you. Please read them. They apply to your use of the content accompanying this agreement which
includes the media on which you received it, if any. These license terms also apply to Trainer Content and any
updates and supplements for the Licensed Content unless other terms accompany those items. If so, those terms
apply.
BY ACCESSING, DOWNLOADING OR USING THE LICENSED CONTENT, YOU ACCEPT THESE TERMS.
IF YOU DO NOT ACCEPT THEM, DO NOT ACCESS, DOWNLOAD OR USE THE LICENSED CONTENT.
If you comply with these license terms, you have the rights below for each license you acquire.
1. DEFINITIONS.
a. “Authorized Learning Center” means a Microsoft IT Academy Program Member, Microsoft Learning
Competency Member, or such other entity as Microsoft may designate from time to time.
b. “Authorized Training Session” means the instructor-led training class using Microsoft Instructor-Led
Courseware conducted by a Trainer at or through an Authorized Learning Center.
c. “Classroom Device” means one (1) dedicated, secure computer that an Authorized Learning Center owns
or controls that is located at an Authorized Learning Center’s training facilities that meets or exceeds the
hardware level specified for the particular Microsoft Instructor-Led Courseware.
d. “End User” means an individual who is (i) duly enrolled in and attending an Authorized Training Session
or Private Training Session, (ii) an employee of a MPN Member, or (iii) a Microsoft full-time employee.
e. “Licensed Content” means the content accompanying this agreement which may include the Microsoft
Instructor-Led Courseware or Trainer Content.
f. “Microsoft Certified Trainer” or “MCT” means an individual who is (i) engaged to teach a training session
to End Users on behalf of an Authorized Learning Center or MPN Member, and (ii) currently certified as a
Microsoft Certified Trainer under the Microsoft Certification Program.
g. “Microsoft Instructor-Led Courseware” means the Microsoft-branded instructor-led training course that
educates IT professionals and developers on Microsoft technologies. A Microsoft Instructor-Led
Courseware title may be branded as MOC, Microsoft Dynamics or Microsoft Business Group courseware.
h. “Microsoft IT Academy Program Member” means an active member of the Microsoft IT Academy
Program.
i. “Microsoft Learning Competency Member” means an active member of the Microsoft Partner Network
program in good standing that currently holds the Learning Competency status.
j. “MOC” means the “Official Microsoft Learning Product” instructor-led courseware known as Microsoft
Official Course that educates IT professionals and developers on Microsoft technologies.
k. “MPN Member” means an active Microsoft Partner Network program member in good standing.
l. “Personal Device” means one (1) personal computer, device, workstation or other digital electronic device
that you personally own or control that meets or exceeds the hardware level specified for the particular
Microsoft Instructor-Led Courseware.
m. “Private Training Session” means the instructor-led training classes provided by MPN Members for
corporate customers to teach a predefined learning objective using Microsoft Instructor-Led Courseware.
These classes are not advertised or promoted to the general public and class attendance is restricted to
individuals employed by or contracted by the corporate customer.
n. “Trainer” means (i) an academically accredited educator engaged by a Microsoft IT Academy Program
Member to teach an Authorized Training Session, and/or (ii) a MCT.
o. “Trainer Content” means the trainer version of the Microsoft Instructor-Led Courseware and additional
supplemental content designated solely for Trainers’ use to teach a training session using the Microsoft
Instructor-Led Courseware. Trainer Content may include Microsoft PowerPoint presentations, trainer
preparation guide, train the trainer materials, Microsoft One Note packs, classroom setup guide and Pre-
release course feedback form. To clarify, Trainer Content does not include any software, virtual hard
disks or virtual machines.
2. USE RIGHTS. The Licensed Content is licensed not sold. The Licensed Content is licensed on a one copy
per user basis, such that you must acquire a license for each individual that accesses or uses the Licensed
Content.
2.1 Below are five separate sets of use rights. Only one set of rights apply to you.
a. If you are a Microsoft IT Academy Program Member:

i. Each license acquired on behalf of yourself may only be used to review one (1) copy of the Microsoft
Instructor-Led Courseware in the form provided to you. If the Microsoft Instructor-Led Courseware is
in digital format, you may install one (1) copy on up to three (3) Personal Devices. You may not
install the Microsoft Instructor-Led Courseware on a device you do not own or control.
ii. For each license you acquire on behalf of an End User or Trainer, you may either:
1. distribute one (1) hard copy version of the Microsoft Instructor-Led Courseware to one (1) End
User who is enrolled in the Authorized Training Session, and only immediately prior to the
commencement of the Authorized Training Session that is the subject matter of the Microsoft
Instructor-Led Courseware being provided, or
2. provide one (1) End User with the unique redemption code and instructions on how they can
access one (1) digital version of the Microsoft Instructor-Led Courseware, or
3. provide one (1) Trainer with the unique redemption code and instructions on how they can
access one (1) Trainer Content,
provided you comply with the following:
iii. you will only provide access to the Licensed Content to those individuals who have acquired a valid
license to the Licensed Content,
iv. you will ensure each End User attending an Authorized Training Session has their own valid licensed
copy of the Microsoft Instructor-Led Courseware that is the subject of the Authorized Training
Session,
v. you will ensure that each End User provided with the hard-copy version of the Microsoft Instructor-
Led Courseware will be presented with a copy of this agreement and each End User will agree that
their use of the Microsoft Instructor-Led Courseware will be subject to the terms in this agreement
prior to providing them with the Microsoft Instructor-Led Courseware. Each individual will be required
to denote their acceptance of this agreement in a manner that is enforceable under local law prior to
their accessing the Microsoft Instructor-Led Courseware,
vi. you will ensure that each Trainer teaching an Authorized Training Session has their own valid
licensed copy of the Trainer Content that is the subject of the Authorized Training Session,
vii. you will only use qualified Trainers who have in-depth knowledge of and experience with the
Microsoft technology that is the subject of the Microsoft Instructor-Led Courseware being taught for
all your Authorized Training Sessions,
viii. you will only deliver a maximum of 15 hours of training per week for each Authorized Training
Session that uses a MOC title, and
ix. you acknowledge that Trainers that are not MCTs will not have access to all of the trainer resources
for the Microsoft Instructor-Led Courseware.
b. If you are a Microsoft Learning Competency Member:

User attending the Authorized Training Session and only immediately prior to the
commencement of the Authorized Training Session that is the subject matter of the Microsoft
Instructor-Led Courseware provided, or
2. provide one (1) End User attending the Authorized Training Session with the unique redemption
code and instructions on how they can access one (1) digital version of the Microsoft Instructor-
Led Courseware, or
3. you will provide one (1) Trainer with the unique redemption code and instructions on how they
can access one (1) Trainer Content,
iv. you will ensure that each End User attending an Authorized Training Session has their own valid
licensed copy of the Microsoft Instructor-Led Courseware that is the subject of the Authorized
Training Session,
v. you will ensure that each End User provided with a hard-copy version of the Microsoft Instructor-Led
Courseware will be presented with a copy of this agreement and each End User will agree that their
use of the Microsoft Instructor-Led Courseware will be subject to the terms in this agreement prior to
providing them with the Microsoft Instructor-Led Courseware. Each individual will be required to
denote their acceptance of this agreement in a manner that is enforceable under local law prior to
vi. you will ensure that each Trainer teaching an Authorized Training Session has their own valid
licensed copy of the Trainer Content that is the subject of the Authorized Training Session,
vii. you will only use qualified Trainers who hold the applicable Microsoft Certification credential that is
the subject of the Microsoft Instructor-Led Courseware being taught for your Authorized Training
Sessions,
viii. you will only use qualified MCTs who also hold the applicable Microsoft Certification credential that is
the subject of the MOC title being taught for all your Authorized Training Sessions using MOC,
ix. you will only provide access to the Microsoft Instructor-Led Courseware to End Users, and
x. you will only provide access to the Trainer Content to Trainers.
c. If you are a MPN Member:
User attending the Private Training Session, and only immediately prior to the commencement
of the Private Training Session that is the subject matter of the Microsoft Instructor-Led
Courseware being provided, or
2. provide one (1) End User who is attending the Private Training Session with the unique
redemption code and instructions on how they can access one (1) digital version of the
Microsoft Instructor-Led Courseware, or
3. you will provide one (1) Trainer who is teaching the Private Training Session with the unique
redemption code and instructions on how they can access one (1) Trainer Content,
iv. you will ensure that each End User attending an Private Training Session has their own valid licensed
copy of the Microsoft Instructor-Led Courseware that is the subject of the Private Training Session,
v. you will ensure that each End User provided with a hard copy version of the Microsoft Instructor-Led
Courseware will be presented with a copy of this agreement and each End User will agree that their
use of the Microsoft Instructor-Led Courseware will be subject to the terms in this agreement prior to
providing them with the Microsoft Instructor-Led Courseware. Each individual will be required to
denote their acceptance of this agreement in a manner that is enforceable under local law prior to
vi. you will ensure that each Trainer teaching an Private Training Session has their own valid licensed
copy of the Trainer Content that is the subject of the Private Training Session,
vii. you will only use qualified Trainers who hold the applicable Microsoft Certification credential that is
the subject of the Microsoft Instructor-Led Courseware being taught for all your Private Training
Sessions,
viii. you will only use qualified MCTs who hold the applicable Microsoft Certification credential that is the
subject of the MOC title being taught for all your Private Training Sessions using MOC,
ix. you will only provide access to the Microsoft Instructor-Led Courseware to End Users, and
x. you will only provide access to the Trainer Content to Trainers.
d. If you are an End User:

For each license you acquire, you may use the Microsoft Instructor-Led Courseware solely for your
personal training use. If the Microsoft Instructor-Led Courseware is in digital format, you may access the
Microsoft Instructor-Led Courseware online using the unique redemption code provided to you by the
training provider and install and use one (1) copy of the Microsoft Instructor-Led Courseware on up to
three (3) Personal Devices. You may also print one (1) copy of the Microsoft Instructor-Led Courseware.
You may not install the Microsoft Instructor-Led Courseware on a device you do not own or control.
e. If you are a Trainer.

i. For each license you acquire, you may install and use one (1) copy of the Trainer Content in the
form provided to you on one (1) Personal Device solely to prepare and deliver an Authorized
Training Session or Private Training Session, and install one (1) additional copy on another Personal
Device as a backup copy, which may be used only to reinstall the Trainer Content. You may not
install or use a copy of the Trainer Content on a device you do not own or control. You may also
print one (1) copy of the Trainer Content solely to prepare for and deliver an Authorized Training
Session or Private Training Session.
ii. You may customize the written portions of the Trainer Content that are logically associated with
instruction of a training session in accordance with the most recent version of the MCT agreement.
If you elect to exercise the foregoing rights, you agree to comply with the following: (i)
customizations may only be used for teaching Authorized Training Sessions and Private Training
Sessions, and (ii) all customizations will comply with this agreement. For clarity, any use of
“customize” refers only to changing the order of slides and content, and/or not using all the slides or
content, it does not mean changing or modifying any slide or content.
2.2 Separation of Components. The Licensed Content is licensed as a single unit and you may not
separate their components and install them on different devices.
2.3 Redistribution of Licensed Content. Except as expressly provided in the use rights above, you may
not distribute any Licensed Content or any portion thereof (including any permitted modifications) to any
third parties without the express written permission of Microsoft.
2.4 Third Party Notices. The Licensed Content may include third party code tent that Microsoft, not the
third party, licenses to you under this agreement. Notices, if any, for the third party code ntent are included
for your information only.
2.5 Additional Terms. Some Licensed Content may contain components with additional terms,
conditions, and licenses regarding its use. Any non-conflicting terms in those conditions and licenses also
apply to your use of that respective component and supplements the terms described in this agreement.
3. LICENSED CONTENT BASED ON PRE-RELEASE TECHNOLOGY. If the Licensed Content’s subject

matter is based on a pre-release version of Microsoft technology (“Pre-release”), then in addition to the
other provisions in this agreement, these terms also apply:
a. Pre-Release Licensed Content. This Licensed Content subject matter is on the Pre-release version of
the Microsoft technology. The technology may not work the way a final version of the technology will
and we may change the technology for the final version. We also may not release a final version.
Licensed Content based on the final version of the technology may not contain the same information as
the Licensed Content based on the Pre-release version. Microsoft is under no obligation to provide you
with any further content, including any Licensed Content based on the final version of the technology.
b. Feedback. If you agree to give feedback about the Licensed Content to Microsoft, either directly or
through its third party designee, you give to Microsoft without charge, the right to use, share and
commercialize your feedback in any way and for any purpose. You also give to third parties, without
charge, any patent rights needed for their products, technologies and services to use or interface with
any specific parts of a Microsoft technology, Microsoft product, or service that includes the feedback.
You will not give feedback that is subject to a license that requires Microsoft to license its technology,
technologies, or products to third parties because we include your feedback in them. These rights
survive this agreement.
c. Pre-release Term. If you are an Microsoft IT Academy Program Member, Microsoft Learning
Competency Member, MPN Member or Trainer, you will cease using all copies of the Licensed Content on
the Pre-release technology upon (i) the date which Microsoft informs you is the end date for using the
Licensed Content on the Pre-release technology, or (ii) sixty (60) days after the commercial release of the
technology that is the subject of the Licensed Content, whichever is earliest (“Pre-release term”).
Upon expiration or termination of the Pre-release term, you will irretrievably delete and destroy all copies
of the Licensed Content in your possession or under your control.
4. SCOPE OF LICENSE. The Licensed Content is licensed, not sold. This agreement only gives you some
rights to use the Licensed Content. Microsoft reserves all other rights. Unless applicable law gives you more
rights despite this limitation, you may use the Licensed Content only as expressly permitted in this
agreement. In doing so, you must comply with any technical limitations in the Licensed Content that only
allows you to use it in certain ways. Except as expressly permitted in this agreement, you may not:
• access or allow any individual to access the Licensed Content if they have not acquired a valid license
for the Licensed Content,
• alter, remove or obscure any copyright or other protective notices (including watermarks), branding
or identifications contained in the Licensed Content,
• modify or create a derivative work of any Licensed Content,
• publicly display, or make the Licensed Content available for others to access or use,
• copy, print, install, sell, publish, transmit, lend, adapt, reuse, link to or post, make available or
distribute the Licensed Content to any third party,
• work around any technical limitations in the Licensed Content, or
• reverse engineer, decompile, remove or otherwise thwart any protections or disassemble the
Licensed Content except and only to the extent that applicable law expressly permits, despite this
limitation.
5. RESERVATION OF RIGHTS AND OWNERSHIP. Microsoft reserves all rights not expressly granted to
you in this agreement. The Licensed Content is protected by copyright and other intellectual property laws
and treaties. Microsoft or its suppliers own the title, copyright, and other intellectual property rights in the
Licensed Content.
6. EXPORT RESTRICTIONS. The Licensed Content is subject to United States export laws and regulations.
You must comply with all domestic and international export laws and regulations that apply to the Licensed
Content. These laws include restrictions on destinations, end users and end use. For additional information,
see www.microsoft.com/exporting.
7. SUPPORT SERVICES. Because the Licensed Content is “as is”, we may not provide support services for it.
8. TERMINATION. Without prejudice to any other rights, Microsoft may terminate this agreement if you fail
to comply with the terms and conditions of this agreement. Upon termination of this agreement for any
reason, you will immediately stop all use of and delete and destroy all copies of the Licensed Content in
your possession or under your control.
9. LINKS TO THIRD PARTY SITES. You may link to third party sites through the use of the Licensed
Content. The third party sites are not under the control of Microsoft, and Microsoft is not responsible for
the contents of any third party sites, any links contained in third party sites, or any changes or updates to
third party sites. Microsoft is not responsible for webcasting or any other form of transmission received
from any third party sites. Microsoft is providing these links to third party sites to you only as a
convenience, and the inclusion of any link does not imply an endorsement by Microsoft of the third party
site.
10. ENTIRE AGREEMENT. This agreement, and any additional terms for the Trainer Content, updates and
supplements are the entire agreement for the Licensed Content, updates and supplements.
11. APPLICABLE LAW.

a. United States. If you acquired the Licensed Content in the United States, Washington state law governs
the interpretation of this agreement and applies to claims for breach of it, regardless of conflict of laws
principles. The laws of the state where you live govern all other claims, including claims under state
consumer protection laws, unfair competition laws, and in tort.
b. Outside the United States. If you acquired the Licensed Content in any other country, the laws of that
country apply.
12. LEGAL EFFECT. This agreement describes certain legal rights. You may have other rights under the laws
of your country. You may also have rights with respect to the party from whom you acquired the Licensed
Content. This agreement does not change your rights under the laws of your country if the laws of your
country do not permit it to do so.
13. DISCLAIMER OF WARRANTY. THE LICENSED CONTENT IS LICENSED "AS-IS" AND "AS
AVAILABLE." YOU BEAR THE RISK OF USING IT. MICROSOFT AND ITS RESPECTIVE
AFFILIATES GIVES NO EXPRESS WARRANTIES, GUARANTEES, OR CONDITIONS. YOU MAY
HAVE ADDITIONAL CONSUMER RIGHTS UNDER YOUR LOCAL LAWS WHICH THIS AGREEMENT
CANNOT CHANGE. TO THE EXTENT PERMITTED UNDER YOUR LOCAL LAWS, MICROSOFT AND
ITS RESPECTIVE AFFILIATES EXCLUDES ANY IMPLIED WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT.
14. LIMITATION ON AND EXCLUSION OF REMEDIES AND DAMAGES. YOU CAN RECOVER FROM
MICROSOFT, ITS RESPECTIVE AFFILIATES AND ITS SUPPLIERS ONLY DIRECT DAMAGES UP
TO US$5.00. YOU CANNOT RECOVER ANY OTHER DAMAGES, INCLUDING CONSEQUENTIAL,
LOST PROFITS, SPECIAL, INDIRECT OR INCIDENTAL DAMAGES.
This limitation applies to

o anything related to the Licensed Content, services, content (including code) on third party Internet
sites or third-party programs; and
o claims for breach of contract, breach of warranty, guarantee or condition, strict liability, negligence,
or other tort to the extent permitted by applicable law.
It also applies even if Microsoft knew or should have known about the possibility of the damages. The
above limitation or exclusion may not apply to you because your country may not allow the exclusion or
limitation of incidental, consequential or other damages.
Please note: As this Licensed Content is distributed in Quebec, Canada, some of the clauses in this
agreement are provided below in French.
Remarque : Ce le contenu sous licence étant distribué au Québec, Canada, certaines des clauses
dans ce contrat sont fournies ci-dessous en français.
EXONÉRATION DE GARANTIE. Le contenu sous licence visé par une licence est offert « tel quel ». Toute
utilisation de ce contenu sous licence est à votre seule risque et péril. Microsoft n’accorde aucune autre garantie
expresse. Vous pouvez bénéficier de droits additionnels en vertu du droit local sur la protection dues
consommateurs, que ce contrat ne peut modifier. La ou elles sont permises par le droit locale, les garanties
implicites de qualité marchande, d’adéquation à un usage particulier et d’absence de contrefaçon sont exclues.
LIMITATION DES DOMMAGES-INTÉRÊTS ET EXCLUSION DE RESPONSABILITÉ POUR LES

DOMMAGES. Vous pouvez obtenir de Microsoft et de ses fournisseurs une indemnisation en cas de dommages
directs uniquement à hauteur de 5,00 $ US. Vous ne pouvez prétendre à aucune indemnisation pour les autres
dommages, y compris les dommages spéciaux, indirects ou accessoires et pertes de bénéfices.
Cette limitation concerne:
• tout ce qui est relié au le contenu sous licence, aux services ou au contenu (y compris le code)
figurant sur des sites Internet tiers ou dans des programmes tiers; et.
• les réclamations au titre de violation de contrat ou de garantie, ou au titre de responsabilité
stricte, de négligence ou d’une autre faute dans la limite autorisée par la loi en vigueur.
Elle s’applique également, même si Microsoft connaissait ou devrait connaître l’éventualité d’un tel dommage. Si
votre pays n’autorise pas l’exclusion ou la limitation de responsabilité pour les dommages indirects, accessoires
ou de quelque nature que ce soit, il se peut que la limitation ou l’exclusion ci-dessus ne s’appliquera pas à votre
égard.
EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous pourriez avoir d’autres droits
prévus par les lois de votre pays. Le présent contrat ne modifie pas les droits que vous confèrent les lois de votre
pays si celles-ci ne le permettent pas.
Revised July 2013

Overview of the Windows 8.1 Platform and Windows Store Apps 1-1
Module 1
Overview of the Windows 8.1 Platform and Windows Store
Apps
Contents:
Lesson 1: Introduction to the Windows 8.1 Platform 2
Lesson 2: Windows 8 UI Principles 5
Lesson 3: WinRT and Language Projections 7
Module Review and Takeaways 10

1-2 Essentials of Developing Windows® Store Apps Using HTML5 and JavaScript
Lesson 1
Introduction to the Windows 8.1 Platform
Contents:
Demonstration: Using Windows 8 Features 3
Demonstration: Using Windows 8 Features

Demonstration Steps
1. If you are using a touch-enabled device, on the Start screen, flick left and right.
If you are using a mouse, on the Start screen, rotate the wheel button.
If you are using a keyboard, on the Start screen, press the Left Arrow key and the Right Arrow key.
2. If you are using a touch-enabled device, to zoom out, use the pinch gesture by touching the screen
with two fingers, and then moving your fingers closer together.
If you are using a mouse, to zoom out, press Ctrl, and then rotate the wheel button downward. You
can also click the minus button at the lower-right corner of the screen, next to the horizontal scroll
bar.
If you are using a touch-enabled device, to zoom in, use the stretch gesture by touching the screen
with two fingers, and then moving them apart.
If you are using a mouse, to zoom in, press Ctrl and rotate the wheel button upward. You can also
click anywhere on the empty space on the Start screen.
3. If you are using a touch-enabled device, swipe the Mail tile downward by tapping it with your finger
and moving it slightly down.
If you are using a mouse, right-click the tile. If you are using a keyboard, press the shortcut menu key.
When a tile is selected, it shows a check mark (√) in the upper-right corner of the tile. Notice that the
selected tile becomes dimmer, smaller, and looks different from the-other apps as the Start screen
enters the arrangement mode.
4. After selecting a tile, locate the app bar displayed at the bottom of the screen. On the app bar, click
Resize to open the context menu containing tile sizes, and then click Medium to change the size of
the Mail tile.
5. If you are using a touch-enabled device, while still in the screen-arrangement mode, tap and hold the
tile, and then move it down and release.
If you are using a mouse, drag the tile to the new location, and then release it.
6. If you are using a touch-enabled device, tap an empty area on the Start screen to exit the screen-
arrangement mode.
If you are using a mouse, click anywhere in the empty area on the Start screen.
If you are using a keyboard, press the Esc key.
7. If you are using a touch-enabled device, tap the tile.
If you are using a mouse, click the tile.

If you are using the keyboard, press Enter.
8. On the keyboard, press Ctrl+Shift+Esc.
9. Click More details.
10. Click the Processes tab.
11. Click the CPU column header.
12. Click the App history tab.

13. On the upper-right corner of Task Manager, click Close.
14. On the Start screen, locate the Internet Explorer tile.
15. To run Internet Explorer, click the Internet Explorer tile.

16. Move the pointer to the upper-right corner of the screen.
If you are using the keyboard, press Windows logo key+C.
17. Click the Search charm.
18. On the list of search providers, click Internet Explorer.
19. Type Microsoft.
20. Click Search on the right hand side.
21. In the search results pane on the left side of the screen, click Microsoft Home Page | Devices and
Services.
22. Open the charms.

23. Click the Share charm.
24. Click Mail.
25. If the Add your Microsoft account dialog box appears, enter the email address and password of
your Microsoft account, and then click Save.
26. In the To box, type your email address.
27. Click Send.
29. Click the Devices charm.
30. Locate, and then click printer, if it exists.
32. Click the Settings charm.
33. Click the volume control icon if it is enabled.
Note: Whether the volume control is enabled or not depends on the hardware
configuration of your system. Perform steps 31 through 33 only if your computer enables
changing the volume level.
Lesson 2
Windows 8 UI Principles
Contents:
Resources 6
Resources
Additional Reading: For additional reading, see

http://go.microsoft.com/fwlink/?LinkID=313459
Personality, Pattern, Principles, Platform
Additional Reading: For a thorough overview of the modern design principles, read the
following article:
http://go.microsoft.com/fwlink/?LinkId=331040
Side-by-side and Scale

Best Practices:
• Accommodate any screen size. Use fluid layouts.
• Pan vertically in the side-by-side view for ergonomics, avoiding conflict with the edge.
• Maintain state and continuity across the different modes, so that if a user switches from one mode to
another, the state and relative position is maintained. For example, if a user scrolls half-way down a
list, and then resizes to the side-by-side view, try to scroll the view to the same item that was in focus
earlier.
• Do not remove the work of the user when resizing or changing screen rotation.
• Rearrange the displayed information to accommodate the new layout.

Lesson 3
WinRT and Language Projections
Contents:
Demonstration: Overview of the Final ILoveNotes Solution 8
Demonstration: Overview of the Final ILoveNotes Solution

Demonstration Steps
1. On the Start screen, right-click the Visual Studio 2013 tile, and then click Run as administrator on
the app bar.
2. If the User Account Control dialog box appears, click Yes.
Note: If you are running Visual Studio for the first time, you will see a dialog box. Click OK
to continue.
3. On the File menu, click Open, and then click Project/Solution.
4. Go to D:\Allfiles\ILoveNotes - Windows 8.1 RTM Build.
5. In the Open Project dialog box, go to the D:\Allfiles\ILoveNotes - Windows 8.1 RTM Build folder,
and then double-click ILoveNotes.sln.
6. If a Developer License dialog box prompts you to renew your developer license:
a. In the Developer License dialog box, click I agree.
b. If a User Account Control dialog box appears, click Yes.
c. If a Security Alert dialog box appears, click Yes.
d. In the Developer License dialog box, click Sign up and follow the instructions to create an
account for yourself. When this is completed, use the newly created account credentials to obtain
the Developers License.
e. After the Developer License dialog box shows the new developer license expiration date, click
Close.
Note: When you create a new account, be sure to write down the credentials, and then use
them whenever an email account is required. You can also sign in by using your personal
developer account if you already have one.
7. On the Debug menu, click Start Without Debugging, or press Ctrl+F5.
8. On the main screen of the app, right-click to display the app bar.
9. Click Add.
10. In the displayed list, click Note.
11. Enter the title: My First Note.

12. In the top-left corner of the screen, click Back.
13. On the main screen of the app, in one of the notebooks, locate the note that you created, and then
click My First Note.
14. After the word “Note”, add an exclamation mark.
15. On the top-left corner of the screen, click Back.
16. To display the charms, move the pointer to either the top-right or bottom-right corners of the screen.
17. Click the Search charm.
18. Verify that ILoveNotes is selected as the search provider, if not, select ILoveNotes from the search list,
and then in the search box type My first.
19. Click the magnifying glass icon to perform the search.
20. In the search results screen, click My First Note!
21. To display the app bar, right-click anywhere on the screen.
22. On the left side of the app bar, click Pin Note.
23. Enter detail text, and then click Pin to Start.
24. Go back to the Start screen.
25. Scroll to find the tile representing your note.

26. Click the tile representing your note to navigate to the note.
27. In Hyper-V Manager, in the Virtual Machines section, click 20481C-SEA-DEV to highlight it.
28. In the Snapshots section, right-click the StartingImage snapshot, and then click Apply.
29. If an Apply Snapshot window appears, click Apply.

Module Review and Takeaways

Review Question(s)
Question: Why are charms and contracts fundamental to the Windows 8.1 user experience and
development process?
Answer: Users can use Windows 8.1 charms to share information between apps, to search for apps that
support it, to easily configure settings, and to interact with a variety of hardware devices. As a
developer, you should integrate contracts in your Windows Store app to make it searchable, to
support easy sharing from and to your app, and to make your user settings discoverable.
Question: What is the difference between Windows 8.1 live tiles and traditional icons?
Answer: Icons are static. You can only use an icon to launch the associated app. Tiles, on the other hand,
convey dynamic information about the app. If your app supports live tiles and secondary tiles,
users can pin interesting pages from your app to the Start screen and view relevant information
at a glance. A well-designed tile attracts user attention and helps users be more productive
without launching an app and waiting for the full content to load.
Single-Page Apps and the MVVM Design Pattern 2-1
Module 2
Single-Page Apps and the MVVM Design Pattern
Contents:
2-2 Essentials of Developing Windows Store Apps Using HTML5 and JavaScript

Question: What are the best practices for developing Windows Store apps?
Answer: It depends on the scenario, but usually you would combine SPA and MVVM. In most cases, SPA
and MVVM are appropriate for Windows Store apps. SPA ensures your app is fast and fluid, and
does not introduce unnecessary browser refreshes. MVVM brings ease of maintenance and
testability to the table.
Using WinJS 3-1
Module 3
Using WinJS
Contents:
Lesson 1: The WinJS Library 2
Lesson 2: WinJS APIs 5
Lab Review Questions and Answers 9

Lesson 1
The WinJS Library
Contents:
Demonstration: Namespaces, Classes, and Mixins 3
Using WinJS 3-3
Demonstration: Namespaces, Classes, and Mixins

Demonstration Steps
1. On the Start screen, click the Visual Studio 2013 tile.
Note: If the Choose Default Environment Settings dialog box appears, click OK.
2. On the File menu, point to Open, and then click Project/Solution.
3. In the Open Project dialog box, go to the D:\Allfiles\Mod03\Democode\Lesson

1\NamespaceAndClass folder, and then double-click NamespaceAndClass.sln.
Close.
5. In Solution Explorer, in the js folder, double-click data.js to open the file.
6. After the line,
"use strict";
show the following definition of a People namespace.
WinJS.Namespace.define("People", {
peopleArr: people
});
7. Explain that you have defined a namespace, and then exposed an array called peopleArr. The array
will be created later.
8. In the code, between the line
"use strict";
and the definition of the namespace, show the following class definition.
var Person = WinJS.Class.define(function (firstName, lastName) {

this.fname = firstName;
this.lname = lastName;
}, {
fname: "",
lname: ""
}, {});
9. Explain that you have defined a Person class, which exposes two instance properties: fname and
lname.
10. Show the array peopleArr that contains two instances of the Person class, which appears after the
class definition.
var people = [new Person("John", "Dow"), new Person("Jane", "Dow")];
11. To run the app, press F5.
Note: You can open the default.js file, located in the js folder, and show how to use the
namespace and the people array it exposes.
Using WinJS 3-5
Lesson 2
WinJS APIs
Contents:
Resources 6
Demonstration: WinJS.Application 6
Resources
WinJS.Promise
Additional Reading: You can download and review a WinJS Promise sample (Windows 8.1
at http://go.microsoft.com/fwlink/?LinkId=313234
Additional Reading: For more information on promise functions, see
WinJS.Utilities
Additional Reading: For more information about supported helper functions, see
Additional Reading: For additional reading about querySelector and querySelectorAll,
see
Demonstration: WinJS.Application
Demonstration Steps
1. Open the D:\Allfiles\Mod03\Democode\Lesson 2\WinJS.Application folder.
2. To open the solution, double-click the WinJS.Application.sln file.
3. In the js folder, double-click default.js.

4. Show the students the declaration of the app variable.
var app = WinJS.Application;
Note: It is a good practice to create the app variable and not use the WinJS.Application
object every time you have to use the namespace.
5. Show the wiring of the activated event listener.
app.addEventListener("activated", function (args) {

...
});
Note: The onactivated event is a very important event that handles the activation of the
app. This segment of the code is automatically generated by the Grid project template.
6. In the activated event listener, show the usage of the sessionState in these lines of code.
if (app.sessionState.history) {
nav.history = app.sessionState.history;
}
Using WinJS 3-7
Note: The previous lines of code check whether there is a navigation history of the previous
session. These history entries are added when the app is suspended. If there is a navigation
history in the session state, it is set to the nav.history property.
7. Show the oncheckpoint event handler and how to set the app.sessionState.history property.
app.oncheckpoint = function (args) {

app.sessionState.history = nav.history;
};
8. Show the call to the app start function at the end of the file.


Review Question(s)
Question: What is WinJS?
Answer: WinJS is a JavaScript library that matches design styles of Windows 8.1 and supplies controls for
common user experiences. The JavaScript library of WinJS offers lots of functionality to develop
Windows Store apps faster and better. It is designed for touch and also for traditional input, and
scales across device form factors.
Using WinJS 3-9
Lab Review Questions and Answers

Lab: Using WinJS
Question and Answers
Question: What is a promise?
Answer: Promises are one of the basic patterns used in WinJS. A promise or a deferred object is an object
that defers the execution of its callbacks to the moment they are needed at the end of some
process. The WinJS library includes a Promise object that you can use to create and run deferred
code. Many Windows Runtime (WinRT) APIs use the Promise object to provide asynchronous
code execution to Windows Store apps
Question: How do you define a namespace in WinJS?
Answer: WinJS includes the WinJS.Namespace object, which exposes two functions to define
namespaces: the define function and the defineWithParent function.
Implementing Layout Using Windows 8.1 Controls 4-1
Module 4
Implementing Layout Using Windows 8.1 Controls
Contents:
Lesson 1: Windows 8.1 Layout Controls 2
Lesson 2: Implementing WinJS Controls and Templates 4
Lesson 3: The AppBar Control 8

Lesson 1
Windows 8.1 Layout Controls
Contents:
Resources 3
Resources
Simple Layouts
Best Practice: Flexbox items should be HTML DOM elements that are immediate children
of the container element. If they are not, the container attributes may behave in unexpected
ways.
Best Practice: Even though the flexbox container can contain any HTML element, the best
practice is that your flexbox items are the div or section HTML elements. The decision of which
element to use depends on the kind of content displayed on the screen. Use the section element
when defining a section of a document such as chapters or posts. Use the div element as a
generic container of content. Using this practice, you can add additional content within each
nested flexbox item.
Best Practice: Use the grid layout when laying out rows and columns of controls or
elements; use the table HTML element when displaying tabular data such as reports or actual
tables with defined table header, body or footer.
Complex Layouts
Best Practice: FlipView is best suited to flip through several items one by one. From both
user experience and performance perspectives, it is better to use the ListView control for large
amounts of data.
Best Practice: For the purpose of this and following examples, the JavaScript code is
embedded in the HTML. It is better to use a separate file when declaring a JavaScript class.
Lesson 2
Implementing WinJS Controls and Templates
Contents:
Resources 5
Demonstration: Working with Common Controls 5
Resources
Control Templates
Best Practice: To prevent memory leaks when using control templates, set the
WinJS.Binding.optimizeBindingReferences property to true in the startup procedure for your
app. When set to true, the rendering engine automatically assigns an id to the generated
element, which helps the runtime manage the element and therefore helps avoid memory leaks.
Demonstration: Working with Common Controls

Demonstration Steps
Note: If the Choose Default Environment Settings dialog appears, click OK.

2\CommonControls folder, and then double-click CommonControls.sln.
Close.
5. In Solution Explorer, double-click default.html.
6. Uncomment the div element in the code below, whose data-win-control attribute is
WinJS.UI.DatePicker.
<div data-win-control="WinJS.UI.DatePicker" />
7. Then uncomment the div element in the code below, whose data-win-control attribute is
WinJS.UI.TimePicker.
<div data-win-control="WinJS.UI.TimePicker" />
9. Demonstrate how to use the DatePicker and TimePicker controls.

10. To stop the app, switch back to Visual Studio, and then press Shift+F5.
11. In default.html, uncomment the div element in the code below, whose data-win-control attribute
is WinJS.UI.Rating.
<div data-win-control="WinJS.UI.Rating" data-win-options="{ averageRating: 3.4,

userRating: 4 }" />
12. Point to the averageRating and userRating properties in the data-win-options attribute.
14. Show the Rating control, and then explain that the control displays the value of the userRating
property.
15. Click the control to change the value.
17. In default.html, uncomment the div element in the code below, whose data-win-control attribute
is WinJS.UI.ToggleSwitch.
<div data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{ title: 'WiFi' }" />
18. Show the title property in the data-win-options attribute.
20. Show the ToggleSwitch control, and explain that the ToggleSwitch control displays the value of the
title property above the control.
21. Click the ToggleSwitch control to change its value.
23. Save and close the default.html file.
24. In Solution Explorer, in the css folder, double-click default.css.
25. Locate the #layouts selector, and then change the value of the visibility property from hidden to
visible as shown below.
#layouts {
-ms-grid-column: 2;
-ms-grid-row: 1;
visibility: visible ;
}
26. Locate the #layouts #grid-layout selector in the code below. Show the value of the display property
is -ms-grid. Also explain that the number and sizes of the rows and columns are specified by the -
ms-grid-rows and -ms-grid-columns properties.
#layouts #grid-layout {
display: -ms-grid;
-ms-grid-rows: 50px 100px 150px;
-ms-grid-columns: 20% 1fr;
}
27. Locate the #layouts #grid-layout #A through #layouts #grid-layout #F selectors in the code
below, and then show that each CSS rule set specifies a row, column, and color.
#layouts #grid-layout #X {
-ms-grid-row: row;
-ms-grid-column: column;
background-color: color;
}
29. Show the grid layout applied to the elements on the right-side of the screen. Show the placement
and colors of the different controls.

Lesson 3
The AppBar Control
Contents:
Demonstration: Creating an AppBar Control 9
Demonstration: Creating an AppBar Control

Demonstration Steps
3. In the Open Project dialog box, go to the D:\Allfiles\Mod04\Democode\Lesson 3\AppBarControl

folder, and then double-click AppBarControl.sln.
Close.
5. Open the default.html file.
6. Locate the BottomAppBar div element.
7. Show the data-win-control attribute, and then explain that this creates the AppBar control as shown
below.
<div id="BottomAppBar" data-win-control="WinJS.UI.AppBar">

</div>
8. Explain that each button inside the AppBar control requires a data-win-control attribute to specify
that the button is an AppBarCommand object. This will inject the element with the proper
appearance.
9. Each AppBarCommand object has its own properties under the data-win-options attribute as
shown below.
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'btnDelete',
label:'Delete',section:'selection',tooltip:'Delete Selection', icon:'delete'}"
type="button">
</button>
10. Explain that the section: selection will place the button on the left side, and the section: global will
place the button on the right side.

12. Locate the TopAppBar div element.
13. In the code below, show that the TopAppBar div element is the same as the BottomAppBar control,
except for the data-win-options attribute, that specifics the AppBar control position.
<div id="TopAppBar" data-win-control="WinJS.UI.AppBar" aria-label="Navigation Bar"

data-win-options="{layout:'custom',placement:'top'}">
</div>
14. Open the default.js file located under the js folder.
15. Locate the activated event handler function.
16. Show the students the four lines at the end of the function that registers the button click events by
specifying the AppBarCommand ID.
document.getElementById("btnBack").addEventListener("click", function () {
displayAlert('Back'); }, false);
document.getElementById("btnDelete").addEventListener("click", function () {
displayAlert('Delete'); }, false);
document.getElementById("btnCamera").addEventListener("click", function () {
displayAlert('Camera'); }, false);
document.getElementById("btnHome").addEventListener("click", function () {
displayAlert('Home'); }, false);
17. Run the application by pressing F5, and then show the students the AppBar control.

Question: How do you decide which commands to place in the top or bottom app bar?
Answer: Navigation commands are placed in the top app bar, with Back on the left and Forward in the
global section. Commands relevant to the current page are places in the bottom app bar, with
dynamic commands in the global section and the rest in the selection section.
Presenting Data 5-1
Module 5
Presenting Data
Contents:
Lesson 1: Working with Data Presentation Controls 2
Lesson 2: The ListView Control 5

Lesson 1
Working with Data Presentation Controls
Contents:
Resources 3
Demonstration: Data Presentation Controls 3
Presenting Data 5-3
Resources
Data Presentation Controls
Best Practices: Here are some guidelines for using the data presentation controls:
• A ListView control with a Grid layout is suitable for displaying data horizontally. It is most commonly
used in apps for displaying data in grid layout.
• A ListView control with a List layout is suitable for displaying data horizontally. It is most commonly
used for displaying simple list of items or as a replacement for the GridView when your app is in
side-by-side view. In module 4, you learned about adjusting the app by using the side-by-side view.
• A FlipView control is useful for presenting a collection of items that the user views one at a time.
Because it presents items sequentially, it is useful for displaying a gallery of images or the pages of a
magazine.
Demonstration: Data Presentation Controls

Demonstration Steps
3. In the Open Project dialog box, go to the D:\Allfiles\Mod05\Democode\Lesson 1\DataControls

folder, and then double-click DataControls.sln.
Close.
6. Resize the app by moving the pointer to the top of the screen. When the pointer changes to the hand
icon, click the mouse button, and then drag the app to one of the edges of the screen.
7. After the app is docked to the side of the screen, minimize its size to the minimum by dragging the
divider line.
8. Drag the divider line to the side of the screen until the app disappears. Drag the divider line back
until the app reappears, and then release the mouse button.
Explain that the app replaces the ListView layout from GridLayout to ListLayout when displayed
side-by-side to adapt itself to the smaller resolution of the screen.
9. To close the app, switch to Visual Studio, and then, on the Debug menu, click Stop Debugging.
10. Open the groupedItems.js file, located in the pages/groupedItems folder.
11. Locate the ready: event handler and then show the following code, located at the end of the
function.
currentWindowWidth = document.documentElement.offsetWidth;
12. Explain to the students that the above code saves the initial width of the app window when in full
screen mode.
13. Locate the updateLayout: event handler, and then show the following code.
var listView = element.querySelector(".groupeditemslist").winControl;

var windowWidth = document.documentElement.offsetWidth;
if (currentWindowWidth !== windowWidth) {
this._toggleSideBySideLayout(windowWidth, listView);
currentWindowWidth = windowWidth;
}
14. Explain that the above code calls the _toggleSideBySideLayout function whenever the current width
of the app window changes, based on the value of the currentWindowWidth variable saved earlier.
15. Locate the _toggleSideBySideLayout function, and then show the following code.
if (windowWidth < 505){

listView.itemDataSource = Data.groups.dataSource;
listView.groupDataSource = null;
listView.layout = new ui.ListLayout();
}
else {
listView.itemDataSource = Data.items.dataSource;
listView.groupDataSource = Data.groups.dataSource;
listView.layout = new ui.GridLayout({ groupHeaderPosition: "top" });
}
16. Explain that the above code changes the listView layout between ListLayout and GridLayout based
on to the current view state of the app, side-by-side or full-screen, accordingly.
Presenting Data 5-5
Lesson 2
The ListView Control
Contents:
Resources 6
Demonstration: ListView Grouping and Sorting 6
Resources
Modifying a Control's Presentation Options
Best Practice: Use general CSS classes only if all the ListView controls in your app look the
same. If you have different ListView controls in your app, use CSS selectors to apply a specific
style to a specific ListView like in the last code example.
Demonstration: ListView Grouping and Sorting

Demonstration Steps
2. On the File menu, point to New, and then click Project.
3. On the left side of the New Project window, expand Templates, expand JavaScript, and then click
Windows Store. Click the template called Grid App, and then click OK.
5. After the Developer License dialog box shows the new developer license expiration date, click Close.
7. Open data.js file located in the js folder.

8. Locate the generateSampleData function.
9. Inside the function, you will find two arrays. The first array contains the groups and the second array
contains the items.
10. Groups
var sampleGroups = [
{ key: "group1", title: "Group Title: 1", subtitle: "Group Subtitle: 1",
backgroundImage: darkGray, description: groupDescription },
{ key: "group2", title: "Group Title: 2", subtitle: "Group Subtitle: 2",
backgroundImage: lightGray, description: groupDescription },
...]
11. Items
Presenting Data 5-7
var sampleItems = [
{ group: sampleGroups[0], title: "Item Title: 1", subtitle: "Item Subtitle: 1",
description: itemDescription, content: itemContent, backgroundImage: lightGray },
{ group: sampleGroups[0], title: "Item Title: 2", subtitle: "Item Subtitle: 2",
description: itemDescription, content: itemContent, backgroundImage: darkGray },
...]
12. Explain that each item contains a group value that represents the group to which the item belongs
to.
13. In the data.js file, locate the following line.
generateSampleData().forEach
14. Explain that this line invokes the generateSampleData function and adds each item to the
WinJS.Binding.List object called list.
15. Open the data.js file located in the js folder.
16. Locate the following line that defines the Data namespace.
WinJS.Namespace.define("Data", {
items: groupedItems,
17. Explain that calling the Data.items function returns the groupedItems object.
18. Explain that the grouped list is created by using the createGrouped function, which gets the group
key and the group data from each item in the list.
var groupedItems = list.createGrouped(

function groupKeySelector(item) { return item.group.key; },
function groupDataSelector(item) { return item.group; }
);
19. Open the data.js file located in the js folder.
20. Add the following line above the namespace definition.
function sortGroups(left, right) {

return right.charCodeAt(left.length - 1) - left.charCodeAt(left.length - 1);
}
21. Explain that the sortGroups function takes the last character from the group key value.
22. Explain that the createGrouped function receives a groupSorter function that will change the group
order based on -1, 0, 1 values. The groupSorter function returns the value -1 if the first argument is
less than the second argument. The function returns the value 0 if both the arguments are equal and
1 if the first argument is greater than the second one.
23. Locate the following code in the data.js file.
24. At the end of the function, add a call to the sortGroups function. The result should look like the
following.

function groupKeySelector(item) { return item.group.key; },
function groupDataSelector(item) { return item.group; },
sortGroups
);
25. Run the app by pressing F5.
26. Notice that the group order has changed and now starts from Group 6.

Presenting Data 5-9

Lab: Presenting Data
Question: What is needed to enable grouping inside a ListView control?
Answer: In order to enable grouping, you will need to:
• Create a WinJS.Binding.List object. You will have to supply to the list a data source that is a
JavaScript array.
• Use the WinJS.Binding.List object’s createGrouped function. The createGrouped function accepts
three functions:
o getGroupKey. Returns the group key that will be used later in the compareGroups functions to
create group order.
o getGroupData. Returns a title for the group.

o compareGroups. Sorts the groups.
Handling Files in Windows Store Apps 6-1
Module 6
Handling Files in Windows Store Apps
Contents:
Lesson 1: Handling Files and Streams in Windows Store Apps 2
Lesson 2: Working with File User Interface Components 5

Lesson 1
Handling Files and Streams in Windows Store Apps
Contents:
Resources 3
Demonstration: Working with Files 3
Resources
Local, Temporary, and Roaming Folders
Best Practice: The lifetime of the data files of the app is tied to the lifetime of the app
itself. When the user uninstalls the app, the data files will be lost as a consequence. This is why
you should not use app data storage to store user files (documents, pictures) or anything that
users might perceive as valuable and irreplaceable. Use Windows Libraries and SkyDrive to store
this kind of data, and use app data files to store app-specific user preferences, settings, and
favorites.
Storage Access Permissions
Reference Links: For more information about the manifest capability declarations that are
required for accessing each library type, go to http://go.microsoft.com/fwlink/?LinkId=273989
Demonstration: Working with Files

Demonstration Steps
3. In the Open Project dialog box, go to the D:\Allfiles\Mod06\Democode\Lesson 1\FileAccess

folder, and then double-click FileAccess.sln.
Close.
6. Show the students the button element called btnCreateFile.
7. Open the default.js file, located in the js folder. Locate the createFile function, and then explain the
code shown below.
Windows.Storage.KnownFolders.documentsLibrary.createFileAsync("sample.txt",
Windows.Storage.CreationCollisionOption.replaceExisting).done(
function (newFile) {
file = newFile;
var msg = new Windows.UI.Popups.MessageDialog("'" + newFile.name + "' was
created.");
msg.showAsync();
},
Note: Explain the different types of Windows.Storage.CreationCollisionOption enum.
8. Open the package.appxmanifest file.
9. Show the students that on the Declarations tab, a new File Type Associations declaration was
added to allow the creation of files in the Documents library.
10. To run the project, press F5. When the application loads, click Create File Under Documents
Library.
11. Click Close.
12. Switch back to Visual Studio, and then press Shift+F5 to stop the app.
13. Go to the Documents folder by using File Explorer, and then show the students the new file that was
created.
14. Open the default.js file.
15. Locate the writeText function, and then explain the code shown below.
Windows.Storage.FileIO.writeTextAsync(file,content).done(function () {
var msg = new Windows.UI.Popups.MessageDialog("The following text was written to
'" + file.name + "':\n\n" + content);
msg.showAsync();
},
17. Locate the readText function, and then explain the code shown below.
Windows.Storage.FileIO.readTextAsync(file).done(function (fileContent) {
var msg = new Windows.UI.Popups.MessageDialog("The following text was read from
'" + file.name + "':\n\n" + fileContent);
msg.showAsync();
},
19. Click Create File Under Documents Library, and then click Close.
20. Click Write Text To File, and then click Close.
21. Click Read Text From File
22. Show the students the dialog box that displays the value that was saved to the file.
Lesson 2
Working with File User Interface Components
Contents:
Resources 6
Demonstration: Using a File Picker 6
Resources
Using the File Picker to Open and Save Files
Best Practice: Set the suggestedStartLocation property to a file system location that is
appropriate for the type of file that is being picked. If the user is picking music, pictures, or
videos, set the start location to the Music, Pictures, or Videos library respectively. For all other
types of files, set the start location to the Documents library.
The suggestedStartLocation property is just a starting location. Users can navigate to other
locations while they are using the file picker. The suggestedStartLocation property is not always
used as the start location for the file picker. To give the user a sense of consistency, the file picker
remembers the last location that the user viewed and will generally start at that location if it is
available.
The Contacts Picker
Reference Links: For more information about contacts, and to read about the
Windows.ApplicationModel.Contacts namespace, see
Demonstration: Using a File Picker

Demonstration Steps
3. In the Open Project dialog box, go to the D:\Allfiles\Mod06\Democode\Lesson 2\FilePicker

folder, and then double-click FilePicker.sln.
Close.
5. Open the default.js file located in the js folder.

6. Locate the FileOpenPicker function, and then explain the code as shown below.
var openPicker = new Windows.Storage.Pickers.FileOpenPicker();

openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
openPicker.suggestedStartLocation =
Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
openPicker.fileTypeFilter.replaceAll([".png"]);
openPicker.pickSingleFileAsync().then(function (file) {
if (file) {
var msg = new Windows.UI.Popups.MessageDialog("File Name: " +
file.name + "\nPath: " + file.path);
msg.showAsync();
} else {
}
});
a. To run the app, press F5.
b. Click File Open Picker, and then use the This PC menu to locate the
D:\Allfiles\Mod06\Democode\Lesson 2\FilePicker\FilePicker\images folder.
c. Explain to the students that only the logo.png and the other .png files appear in File Open
Picker.
d. Return to Visual Studio by pressing Alt+Tab.

e. To stop the app, press Shift+F5.
f. Modify the fileTypeFilter property as shown below.
openPicker.fileTypeFilter.replaceAll(["*"]);
g. To run the app again, press F5, and then click File Open Picker.
h. Explain to the students that they can now not only see the logo.png file and the other .png files,
but also the logo.jpg file, and not just the specific types.
7. Return to Visual Studio by pressing Alt+Tab.
8. To stop the app, press Shift+F5.
10. Locate the FileSavePicker function, and then explain the following code.
var savePicker = new Windows.Storage.Pickers.FileSavePicker();

savePicker.suggestedStartLocation =
Windows.Storage.Pickers.PickerLocationId.documentsLibrary;
savePicker.fileTypeChoices.insert("Plain Text", [".txt"]);
savePicker.suggestedFileName = "New Document";
savePicker.pickSaveFileAsync().then(function (file) {
if (file) {
// Prevent updates to the remote version of the file until we finish
making changes and call CompleteUpdatesAsync.
Windows.Storage.CachedFileManager.deferUpdates(file);
Windows.Storage.FileIO.writeTextAsync(file, file.name).done(function
() {
Windows.Storage.CachedFileManager.completeUpdatesAsync(file).done(function
(updateStatus) {
if (updateStatus ===
Windows.Storage.Provider.FileUpdateStatus.complete) {
var msg = new Windows.UI.Popups.MessageDialog("File " +
file.name + " was saved.");
msg.showAsync();
} else {
var msg = new Windows.UI.Popups.MessageDialog("File " +

file.name + " couldn't be saved.");
msg.showAsync();
}
});
});
}
});
11. To run the app, press F5, and then click File Save Picker.
12. Explain to the students that you are now using File Save Picker.


Lab: Handling Files in Windows 8.1 Apps
Question: Name two best practices for working with the File API.
Answer: The following practices are recommended when working with the File API:
• Use the then and done keywords to prevent the UI from blocking.
• Wrap your code with the try and catch blocks and handle the exceptions.
Windows Store App Process Lifetime Management 7-1
Module 7
Windows Store App Process Lifetime Management
Contents:
Lesson 1: Process Lifetime Management 2
Lesson 2: Windows Store App Activation and Background Tasks 5
Lesson 3: Implementing a State Management Strategy 9

Lesson 1
Process Lifetime Management
Contents:
Demonstration: Working with Activation and Lifetime 3
Demonstration: Working with Activation and Lifetime

Demonstration Steps
3. In the Open Project dialog box, go to the D:\Allfiles\Mod07\Democode\Lesson 1\PLMDemo folder,

and then double-click PLMDemo.sln.
Close.
6. Locate the oncheckpoint function.
7. Explain that when the app is suspended, it saves the text input element value to the local app
settings.
app.oncheckpoint = function (args) {

localSettings.values["name"] = document.getElementById("name").value;
};
8. In the default.js file, locate the resumeAppSettings function.
9. Explain that you are taking the value from local settings, and then placing the value inside the text
input field.
function resumeAppSettings() {
document.getElementById("name").value = localSettings.values["name"];
}
10. Launch the app by pressing F5.
11. Enter your name in the text input field.
12. Switch back to Visual Studio by using the ALT+Tab keys.
13. Open the View menu, expand Toolbars, and then ensure that the Debug Location is checked.
14. Expand the Debug Location toolbar by clicking the arrow next to the Suspend button, and then
click Suspend and shutdown.
15. Launch the app again by pressing F5. Show that your name, the value entered in step 11 appears.
17. Locate the pinSecondaryTile function. Explain that this function will create a secondary tile for the
app.
18. Explain that you transfer user data to the secondary tile by using the activationArguments variable.
var activationArguments = currentTime;

var tile = new Windows.UI.StartScreen.SecondaryTile("SecondaryTileID",
"Secondary Tile With Arguments",
"Secondary Tile With Arguments",
activationArguments,
Windows.UI.StartScreen.TileOptions.showNameOnLogo,
uriLogo);
19. Locate the onactivated function. Show the ActivationKind property that represents the activation
type.
20. Locate the following condition.
if (args.detail.arguments != "") {
Explain that the code verifies if the arguments property is not empty, and then displays the argument
value.
21. Launch the app by pressing F5, and then click Create Secondary Tile With Arguments.
22. After the confirm dialog box appears, click Pin to Start.
23. In the Secondary tile was successfully pinned dialog box, click Close.
24. Close the app by pressing ALT+F4.
25. On the Start screen, click the new Secondary tile you have just created. Show the message after the
app finishes loading.
Lesson 2
Windows Store App Activation and Background Tasks
Contents:
Resources 6
Demonstration: Working with App Activation and Lock Screen 6
Resources
Launching vs. Activating
Additional Reading: For additional reading about contracts and extensions, see
Demonstration: Working with App Activation and Lock Screen

Demonstration Steps
3. In the Open Project dialog box, go to the D:\Allfiles\Mod07\Democode\Lesson 2\LockScreenDemo

folder, and then double-click LockScreenDemo.sln.
Close.
5. Open the package.appxmanifest file located in the project root folder.
6. Go to the Declarations tab, and then show the Background Tasks declaration.
7. Explain that to add the app to the lock screen, you must declare a background task, (even if it is an
empty one). Set the value of the Start page box to js/BackgroundTask.js.
8. Open the BackgroundTask.js file located in the js folder, and then explain the background task
registration.
(function () {
var backgroundTask = Windows.UI.WebUI.WebUIBackgroundTaskInstance.current;
close();
})();

10. Locate the getLockScreenStatus function, and then show the getAccessStatus function that returns
the current app access status.
12. Click Get Lock Screen Status.
13. Notice that the message box states: The user has not yet taken any action. This is the default setting
and the app is not on the lock screen.
14. Click Close.
15. To switch back to Visual Studio without closing the app, press Alt+Tab.
17. Locate the requestLockScreenPermissions function, and then show the requestAccessAsync
function that is used to grant the lock screen permission to the app.
18. To switch back to the running app, press Alt+Tab.

19. Add the app to the lock screen by clicking Request Lock Permissions.
20. In the opened dialog box, click Allow, and then in the next dialog box, click Close.
21. Click Get Lock Screen Status.
22. Explain that the message box states: This app is on the lock screen and has access to Active Real Time
Connectivity.
a. If the message box displays the message This app is not on the lock screen, open the Settings
charm, click Permissions, and then toggle the Lock screen toggle button on.
23. Click Close to go back to the app.
24. After you add the app to the lock screen, click Send Badge Notification.
25. To show the Windows lock screen, open the Start screen, click the Admin user button at the top of
the screen, and then click Lock.
26. Show the app badge logo, and the value 6 beside it.
27. Sign in to Windows with the user name Admin and the password Pa$$w0rd.
28. Return to Visual Studio, and then press Shift+F5 to stop the app.
29. Locate the sendBadge function. Explain the function and where the value 6 came from.
30. Change the badge value from 6 to 11.
31. Run the app again by pressing F5.
32. Add the app to the lock screen by clicking Request Lock Permissions.
33. If a message box appears stating that This app is not on the lock screen, perform the following
steps:
a. Open the Settings charm, click Permissions, and then toggle the Lock screen toggle
button on.
34. Click Close to go back to the app
35. After you add the app to the lock screen, click Send Badge Notification.
37. Show the students that the app badge logo now displays the value 11.
38. Sign in to Windows with the user name Admin and the password Pa$$w0rd.
39. Switch back to Visual Studio.
41. Locate the removeLockScreenAccess function, and. then explain how to remove lock screen
permissions.
42. Launch the app, and then click Clear Lock Screen Permissions.
43. Click Close.
45. Show that the app has no badge on the lock screen.

Lesson 3
Implementing a State Management Strategy
Contents:
Resources 10
Resources
What Is State Management?
Best Practice: Data related to the current session, which does not have to be persisted
across sessions, can be stored in an in-memory storage location or in temporary storage. On the
other hand, you should store data that should persist across app terminations in local storage,
which is not pruned automatically by the operating system. Finally, you should use roaming
storage when you expect users to use the app across different devices, and have data or settings
that should be automatically replicated across all of them. Bear in mind that roaming storage is
not designed for large data or for frequent synchronization: these require a server-side
component.
Additional Reading: For more information about the different types of storage locations
available to Windows Store apps, see Module 6, “Handling Files in Windows Store Apps” in
Course 20481C.
Using State Management to Save or Restore State
Reference Links: For more information about local storage, go to

Additional Reading:
For additional reading on roaming storage, go to http://go.microsoft.com/fwlink/?LinkId=273996

Review Question(s)
Question: Describe Windows Store app process lifetime management, what challenges we face, and what
are the ways to overcome those challenges?
Answer: Process Lifetime Management of an application is about handling the app while activated,
suspended, or terminated. You need to retain the application data, whenever you can, between
states. If needed, and permitted, you can even update the application’s tile when suspended by
using background tasks and furthermore, having our badge updates on the user’s lock screen
when permitted.
Whenever the Windows Store app is activated and suspended, a corresponding event is fired.
When handling the events, you can save or extract the saved data, and use it when resuming.
From a user experience point of view, the resumed app will seem as if it was always running in
the background.
To save application data between states, you can use different kinds of storage (sessionState,
temp storage, local storage, and roaming storage). Each of these is used for a different
purpose and has different lifetime scope.
Question: How is activation different from launching from your app’s perspective?
Answer: When the app is launched (the user clicks its tile on the Start screen), your app should display its
main page, without any extra context. When the app is activated (for example, through a
contract), it should display UI that is tailored for that scenario, such as Share or Search UI.
Question: What are the benefits of lock screen apps?
Answer: Lock screen apps can push information and updates to the lock screen, which the user can use to
obtain information at a glance. Real-time communication apps, such as email or instant
messaging, can benefit from being granted lock screen status because they can then use a
greater set of background task triggers, supporting real-time communication.
Designing and Implementing Navigation in a Windows Store App 8-1
Module 8
Designing and Implementing Navigation in a Windows Store
App
Contents:
Lesson 1: Handling Navigation in Windows Store Apps 2
Lesson 2: Semantic Zoom 7

Lesson 1
Handling Navigation in Windows Store Apps
Contents:
Resources 3
Demonstration: Basic Navigation 3
Demonstration: Passing Parameters Between the Pages and Handling
Navigation Events 4
Demonstration: Using the NavBar and BackButton Controls 5
Resources
Passing Parameters Between Pages
Reference Links: http://go.microsoft.com/fwlink/?LinkId=273998
Demonstration: Basic Navigation

Demonstration Steps
2. On the File menu, point to New, and then click Project.
3. Click JavaScript, and then click Navigation App.
4. In the Name box, type BasicPageNavigation, and then click OK.
Close.
6. In Solution Explorer, in the BasicPageNavigation project folder, right-click the pages folder.
7. Click Add, and then click New Folder.
8. Name the new folder page1.
9. Right-click the page1 folder.
10. Click Add, and then click New Item.

11. Select the Page Control template.
12. In the Name box, type page1, and then click Add.
13. Press Ctrl+F5, and then show that the default page opens first.
14. In Solution Explorer, in the pages\home folder, double-click the home.html file.
15. Replace the p element containing the Content goes here string, with a new p element containing a
button input element.
<p>
<input type="button" id="btnNavigate" name="btnNavigate" value="Go to page1" />
</p>
16. In Solution Explorer, in the pages\home folder, double-click the home.js file.
17. In the ready function, add the code to wire the navigation from the default page to the page1 page.
ready: function (element, options) {

document.getElementById("btnNavigate").addEventListener("click", function () {
WinJS.Navigation.navigate("/pages/page1/page1.html");
}, false);
}
18. To run the app, press Ctrl+F5.
19. When the app starts, click the Go to page1 button.
Demonstration: Passing Parameters Between the Pages and Handling

Navigation Events
Demonstration Steps
1. In the D:\Allfiles\Mod08\Democode\Lesson1\BasicPageNavigation folder, double-click
BasicPageNavigation.sln.
2. In Solution Explorer, in the pages\home folder, double-click the home.html file.
3. Add a text box with the id value of txtValue above the button.
<input type="text" id="txtValue" name="txtValue" />
4. In Solution Explorer, in the pages/home folder, double-click the home.js file.
5. In the ready function, update the navigate function to receive the value of the text box as its initial
state.
ready: function (element, options) {

document.getElementById("btnNavigate").addEventListener("click", function () {
WinJS.Navigation.navigate("/pages/page1/page1.html",
document.getElementById("txtValue").value);
}, false);
}
6. At the end of the immediate function, add an event listener to the navigated event.
WinJS.Navigation.addEventListener("navigated", function (evt) {

console.log("navigated to: " + evt.detail.location);
});
7. In Solution Explorer, in the pages\page1 folder, double-click the page1.html file.
8. Add a div element with an id of passedValue after the p element. This p element should have the
Content goes here string.
<div id="passedValue"></div>
9. In Solution Explorer, in the pages\page1 folder, double-click the page1.js file.

10. In the ready function, add the following line of code.
document.getElementById("passedValue").textContent = "The passed value: " +

WinJS.Navigation.state;
11. To run the app, press Ctrl+F5.
12. When the home page opens, enter your name inside the text box.
13. Click the Go to page1 button.
14. When the page1 opens, notice that the text entered earlier now appears in the div element.
15. Return to Visual Studio 2013, and then show the JavaScript console with the log message.
Demonstration: Using the NavBar and BackButton Controls

Demonstration Steps

1\NavBarAndBackButton folder, and then double-click NavBarAndBackButton.sln solution.
Close.
Note:
5. In Solution Explorer, in the pages/home folder, open the home.html file.
6. Locate the div element named myNavBar.
7. Show the contained div element with data-win-control attribute set to NavBarContainer. Explain
that it represents a navigation menu section.
8. Show the contained NavBarCommand div elements, and then explain that each of these elements
represent a navigation menu button.
9. Show the data-win-options attribute. Explain that the label and icon parameters control the
information that is to be displayed, and the location parameter defines the page that is to be
navigated.
10. In Solution Explorer, in the pages/Pages1 folder, open the page1.html file.
11. Locate the myNavBar div element.

12. Emphasize that the menu is different between pages, as the current page is not included in the
NavBar div element for that page.
13. Repeat the same for page2.html, located in the pages/Page2 folder.
14. Explain that the navigation bar should be located on every page to provide a consistent user
experience when navigating between pages.
15. In Solution Explorer, in the pages/home folder, open the home.html file. Locate the
WinJS.UI.BackButton control within the <header> definition.
16. Explain that this creates the back button for the current page.
<button data-win-control="WinJS.UI.BackButton">
</button>
17. Repeat the previous two steps for page1.html and page2.html.
18. Explain that the back button should be located on each page to provide a consistent user experience
when going back in the navigation stack.
20. Show the navigation page by right-clicking the mouse. If you are using a touch screen, swipe down
from the top edge of the screen.
21. Navigate between the pages, and then point that the navigation menu is different between pages, as
explained in previous steps.
22. After navigating between the pages using the navigation bar, show the back button located on the
top-left corner of the screen.
23. Click the back button to return to the previously navigated pages until the back button disappears.
24. Explain that the back button disappears automatically when the user navigates to the first page in the
navigation stack.
Lesson 2
Semantic Zoom
Contents:
Resources 8
Demonstration: Implementing Semantic Zoom 8
Resources
Best Practices for Using Semantic Zoom
Additional Reading: For more information about Semantic Zoom, see

Testing Semantic Zoom Scenarios Without a Touch-enabled Device
Reference Links: For more information about the Visual Studio 2013 simulator and its
capabilities, go to
Demonstration: Implementing Semantic Zoom

Demonstration Steps
1. Start Visual Studio by clicking the Visual Studio 2013 tile.
Note: If this is the first time you are running Visual Studio, you will see a dialog box. Click
OK in the dialog box to continue
3. Go to D:\Allfiles\Mod08\Democode\Lesson 2\SemanticZoomDemo.
4. Double-click the SemanticZoomDemo.sln file to open the solution.

Close.
6. In the pages\groupedItems folder, open the groupedItems.html file.
7. Locate the div element called semanticZoom.
8. Show that there are two ListView controls under the SemanticZoom control: zoomedIn and
zoomedOut.
9. Explain that the zoomedIn ListView control is using templates based on one specific template to
populate the items.
<div id="zoomedIn"
data-win-control="WinJS.UI.ListView"
data-win-options="{itemTemplate:select('#itemtemplate'), groupHeaderTemplate:
select('#headertemplate')}">
</div>
10. Explain that the zoomedOutListView control will display a different template for the zoomed out
view.
<div id="zoomedOut"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemTemplate: select('#zoomOutTemplate') }">
</div>
11. In the pages\groupedItems folder, open the groupedItems.js file.
12. Locate the _initializeLayout function.
13. Show the function, and then explain that you need to populate both the controls with a data source.
The zoomedOut control should only display the group’s data source and not the items themselves.
var zoomInList = document.querySelector("#zoomedIn").winControl;

var zoomOutlist = document.querySelector("#zoomedOut").winControl;
var isSideBySide = document.documentElement.offsetWidth <= 500 ||
document.documentElement.offsetWidth < document.documentElement.offsetHeight;
if (isSideBySide) {
zoomInList.itemDataSource = Data.groups.dataSource;
zoomInList.groupDataSource = null;
zoomInList.layout = new ui.ListLayout();
} else {
zoomInList.itemDataSource = Data.items.dataSource;
zoomInList.groupDataSource = Data.groups.dataSource;
zoomInList.layout = new ui.GridLayout({ groupHeaderPosition: "top" });
zoomOutlist.itemDataSource = Data.groups.dataSource;
}
14. To launch the app, press F5.
15. After the app is fully loaded, press Ctrl while rotating the wheel button down. Explain how
SemanticZoom can assist the user to navigate easily.
16. Show how to activate SemanticZoom using the zoom icon at the lower-right corner of the start
screen.


Review Question(s)
Question: What is Semantic Zoom?
Answer: Semantic Zoom is a touch-optimized technique for presenting and navigating data or content in
a single app view. Semantic Zoom helps to avoid panning, scrolling, or using tree view controls.
Implementing Windows 8.1 Contracts 9-1
Module 9
Implementing Windows 8.1 Contracts
Contents:
Lesson 2: The Search Contract 2
Lesson 3: The Share Contract 4
Lesson 4: Managing App Settings and Preferences 6

Lesson 2
The Search Contract
Contents:
Resources 3
Resources
The Search Contract
Additional Reading: For more information about the manifest, see Module 13: Planning
for Windows Store App Deployment in Course 20481C.
Reference Links: For detailed Microsoft guidelines for using search in Windows Store apps,
see http://go.microsoft.com/fwlink/?LinkId=274002
Lesson 3
The Share Contract
Contents:
Resources 5
Resources
The Share Source Contract
Reference Links: The following webpage contains the Microsoft guidelines for sharing
content.
Shared Data Types
Best Practice: You should always try to work with the built-in sharing data types. By using
a custom data format, you severely limit the number of apps that can receive shared data from
your app. Both the source app and the target app would have to be developed to specifically
support the custom data format.
Additional Reading: For more information on how to select data formats for sharing on
this page, see http://go.microsoft.com/fwlink/?LinkId=274006
Lesson 4
Managing App Settings and Preferences
Contents:
Resources 7
Demonstration: Working With Application Settings 7
Resources
Providing a Customized Settings Pane
Additional Reading: Here is a Microsoft example of a user control that can be used as a
Settings pane.
Additional Reading: For the full set of Microsoft guidelines for settings in this article, see
Demonstration: Working With Application Settings

Demonstration Steps

3\ApplicationSettingsDemo folder, and then double-click ApplicationSettingsDemo.sln.
Close.
5. Open the pages folder, and then show the available Settings flyout pages to the students.
6. Open the Help.html page located in the pages folder.
7. Explain that the Settings flyout is a WinRT control that is required for implementing settings in your
app.
8. Show the main div element that contains the SettingsFlyout control attribute and the options
attribute that defines the width and settingsCommandId properties of the Settings flyout.
<div data-win-control="WinJS.UI.SettingsFlyout" aria-label="Help settings flyout"

data-win-options="{settingsCommandId:'help',width:'narrow'}">
9. Explain that the students should implement the back button as shown below, to allow the users to
navigate back from a specific settings page, and then show them the button.
<button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-

backbutton"></button>
10. Open the Terms.html page, and then show that this page has the wide property defined.
11. Open the PrivacyStatement.html page, and then show how an iframe element is used to display a
remote web page instead of displaying static content.
13. Locate the populateAppSettings function.
14. Explain that to integrate the Settings flyout pages with the App Settings, you need to listen to the
onsettings event. This event returns the applicationcommands object, which allows you to add the
Settings Flyout pages as shown below.
function populateAppSettings() {
WinJS.Application.onsettings = function (e) {
...
};
15. Explain that to add the Settings Flyout pages, you need to assign a new object to the
applicationcommands property of the e.details object. Each command needs to contain the
command name, its title, and the href properties. The href property stores the location of the page
as shown below.
e.detail.applicationcommands = {
"help": { title: "Help", href: "/pages/help.html" },
"terms": { title: "Terms", href: "/pages/terms.html" },
"privacy": { title: "Privacy Statement", href: "/pages/privacystatement.html" }
};
16. Populate the new settings by calling the following function.
WinJS.UI.SettingsFlyout.populateSettings(e);
17. Given below is the complete code sample that shows how to add the populateAppSettings function.
function populateAppSettings() {
WinJS.Application.onsettings = function (e) {
e.detail.applicationcommands = {
"help": { title: "Help", href: "/pages/help.html" },
"terms": { title: "Terms", href: "/pages/terms.html" },
"privacy": { title: "Privacy Statement", href:
"/pages/privacystatement.html" }
};
WinJS.UI.SettingsFlyout.populateSettings(e);
};
}
19. Open the settings panel, and then show that there are no settings flyouts.
20. Click Add Settings, and then reopen the settings panel that was closed automatically.
21. Open Help and Terms flyouts, and then show the difference in the width between wide and narrow.
22. Open Privacy Statement, and then show the students that the content is a remote web site.
23. Click Show Settings, and then explain that you can call the settings panel by using the following
code (the showSettings function).
WinJS.UI.SettingsFlyout.show();
24. Click Show Terms Settings Flyout, and then explain that the students can open a specific settings
flyout page by using the following.


Review Question(s)
Question: Why might you decide not to provide search query suggestions as the user types a query?
Answer: If your app takes too long to query your data source for suggestions, the user may experience UI
responsiveness issues as they type inside the Search box.

Lab: Implementing Windows 8.1 Contracts
Question: What are the benefits of using the Share contract compared to integration between Windows
desktop apps in the past?
Answer: In the past, developers had to consider data sharing integration scenarios between every pair of
apps individually. This could have been a nightmare scenario, because each app could present a
different sharing interface that had to be implemented uniquely. As a result, you would have to
implement custom sharing for each app and verify that the integration works well on production
machines.
Implementing Tiles and User Notifications 10-1
Module 10
Implementing Tiles and User Notifications
Contents:
Lesson 1: Implementing Tiles, Live Tiles, Secondary Tiles, and Badge Notifications 2
Lesson 2: Implementing Toast Notifications 5

Lesson 1
Implementing Tiles, Live Tiles, Secondary Tiles, and
Badge Notifications
Contents:
Demonstration: Creating a Tile Notification with a Local Image 3
Demonstration: Creating a Tile Notification with a Local Image

Demonstration Steps

1\TileNotificationDemo folder, and then double-click TileNotificationDemo.sln.
Close.
5. Go to the js folder, and then open the default.js file.
6. Locate the sendTileNotification function, and show the tile string format to the students. Explain
that both images used in the notification xml are located in the application so you need to use ms-
appx prefix for the image path as shown below.
var tileXmlString = "<tile>"

+ "<visual version=’2’>"
+ "<binding template='TileWide310x150ImageAndText01'>"
+ "<text id='1'>This tile notification uses local image.</text>"
+ "<image id='1' src='ms-appx:///images/wide.png'/>"
+ "</binding>"
+ "<binding template='TileSquare150x150Image'>"
+ "<image id='1' src='ms-appx:///images/square.png'/>"
+ "</binding>"
+ "</visual>"
+ "</tile>";
7. Explain that the tile can be created with either a string or an XML document. Explain that below the
previous code, you need to add the following code to load the tile string into an XmlDocument
object.
var tileXml = new Windows.Data.Xml.Dom.XmlDocument();

tileXml.loadXml(tileXmlString);
8. Explain that from the XmlDocument object (that contains the tile schema), you must create a new
TileNotification object, and then call the createTileUpdaterForApplication function by passing the
new tile information as shown below.
var tile = new Windows.UI.Notifications.TileNotification(tileXml);

Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(t
ile);
10. Click the Create Tile button.
11. On the Start screen, scroll up to the Apps list, and locate the app tile.
12. Right click the app tile, click Pin button located on the app bar, and then show the pinned app tile.
13. Right-click the app tile, click the Resize button located on the app bar, and then choose Medium
from the displayed menu.
14. Switch to the app, and then click the Clear Tile button
15. On the Start screen, locate the app tile, and then show that the tile notification is no longer available
on the Start screen.
16. Switch to Visual Studio, and then open the default.js file located in the js folder.
17. Locate the clearTileNotification function, and show the function code used to clear tile notifications
from the app tile.
18. Stop debugging by pressing Shift-F5, and then close Visual Studio.
Lesson 2
Implementing Toast Notifications
Contents:
Demonstration: Creating Toast Notification with a Local Image 6
Demonstration: Creating Toast Notification with a Local Image

Demonstration Steps

2\ToastNotificationDemo folder, and then double-click ToastNotificationDemo.sln.
Close.
5. In the js folder, open the default.js file.
6. Locate the send function, and show the tile string format to the students. Explain that both images
used in the notification xml are located in the application folder, so you need to use ms-appx prefix
for the image path as shown below.
var toastXmlString = "<toast>"

+ "<visual version='1'>"
+ "<binding template='toastImageAndText03'>"
+ "<text id='1'>Tile Notification Demo - Toast Title (Two Lines)</text>"
+ "<text id='2'>" + text + "</text>"
+ "<image id='1' src='ms-appx:///images/logo.png' alt='Image ToolTip'/>"
+ "</binding>"
+ "</visual>"
+ "</toast>";
7. Explain that the toast notifications can be created with a string or an XML document.
Explain that below the previous code, you need to add the following code to load the toast string
into an XmlDocument object as shown below.
var toastDom = new Windows.Data.Xml.Dom.XmlDocument();

toastDom.loadXml(toastXmlString);
8. Explain that from the XmlDocument object (that contains the toast schema), you must create a new
ToastNotification object, and then call the createToastNotifier function, passing the new toast
object as parameter as shown below.
var toast = new Notifications.ToastNotification(toastDom);

notificationManager.createToastNotifier().show(toast);
9. Open the package.appxmanifest file.
10. In the Visual Assets section, click Badge Logo.
11. In the Application section, verify that the Toast capable box is set to Yes. Explain that unless this
box is set to Yes, your app cannot fire toast notifications.
13. In the Enter Message text box, enter some value.
14. Click the Send Toast button.
15. Explain that the tile can contain activation arguments that can allow the developer to perform a
specific action when the user clicks the toast notification.


Best Practices
• Use toast notifications for important and time-sensitive information.
• Do not flood the user with toast notifications from your app.
• Offer the ability to pin secondary tiles to the Start screen from relevant pages in your app.
• Update your app’s main and secondary tiles with up-to-date information and badges.
Review Question(s)
Question: Consider the main screen of a news app, which includes text and images. How can you let the
user see relevant news when your app is not running?
Answer: First, enable the user to pin news categories to the Start screen and update the latest news on
the pinned tile. Second, enable the user to define important news categories (such as extreme
weather conditions) and display toast notifications when updates arrive in these categories.

Lab: Implementing Tiles and User Notifications
Question: What are the steps necessary to create and update a secondary tile?
Answer: To create a secondary tile, perform the following steps:
• Create tile content by using the TileContentFactory.createTileTemplate functions according to the

desired tile template.
• Update the tile content text and image properties.
• Create a square version of the tile content to be used as a smaller version of the tile.
• Create a ScheduledTileNotification object and add it to the schedule queue of the

TileUpdateManager object.
Question: Which scenarios are not appropriate for using toast notifications?
Answer: When the information is not important or urgent, or when it is not actionable.
Designing and Implementing a Data Access Strategy 11-1
Module 11
Designing and Implementing a Data Access Strategy
Contents:

Best Practices
• Use local storage files for information that must be available when the app is offline.
• Use web and cloud services for information that is to be shared between apps and platforms.
• Use remote storage cloud centers when high availability and reliability is required.
• Use the asynchronous pattern in data access functions to enable UI responsiveness.
Review Question(s)
Question: Consider the main screen of an app that displays current news. It includes text and images. It
saves user preferred news sections between runs and between computers.
Which data access strategies apply and how?
Answer: Either web service or remote storage strategies are used for the updated news text and images.
Use web services or remote storage strategies to save user preferences, available for the user when
running supporting apps on any computer.
Use local files to cache the latest top news and enable the user to also browse them when offline.
Responding to Mouse and Touch 12-1
Module 12
Responding to Mouse and Touch
Contents:
Lesson 1: Working with Mouse Events 2
Lesson 2: Working with Gesture Events 5

Lesson 1
Working with Mouse Events
Contents:
Demonstration: Working with Pointer Events 3
Demonstration: Working with Pointer Events

Demonstration Steps
Note: If this is first time you are running Visual Studio 2013, you will see a dialog box. Click
OK to continue.
3. Go to the D:\Allfiles\Mod12\Democode\Lesson 1\PointerHandlingSample folder.
4. Double-click the PointerHandlingSample.sln file to open the solution.
Close.
6. In Solution Explorer, open the default.html file
7. Show the canvas element inside the body element. Explain that the canvas element is HTML 5
element.
9. Locate the registerTouchEvents function. Show the first two lines needed to get the canvas element
from the DOM, and then retrieve the context of the canvas. The context will allow you to draw and
use the special features of the canvas element.
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
10. Show the MS Pointer Events registration, and then explain each event.
canvas.addEventListener("MSPointerDown", touchHandler, false);

canvas.addEventListener("MSPointerMove", touchHandler, false);
canvas.addEventListener("MSPointerUp", touchHandler, false);
canvas.addEventListener("MSPointerOver", touchHandler, false);
canvas.addEventListener("MSPointerOut", touchHandler, false);
canvas.addEventListener("MSPointerCancel", touchHandler, false);

12. Locate the touchHandler function, and then explain the first two lines. The event arguments contain
many properties regarding the pointer event. In this demo, you need the pointer position on the
canvas. You can use the x and y coordinates.
var x = evt.currentPoint.position.x;
var y = evt.currentPoint.position.y;
13. Show how the actions of the pointer events are drawn. If the user performs a click operation, the
MSPointerDown event will be called. If the user performs a click operation and a move operation at
the same time, the second condition triggers. If the user only moves the pointer, the last condition
triggers.
if (evt.type === "MSPointerDown") {

context.strokeStyle = 'red';
context.lineWidth = 25;
}
else if (evt.buttons >= 1) {
//MSPointerMove + Mouse Right or Left is down.
context.strokeStyle = 'blue';
}
else {
//MSPointerMove
context.strokeStyle = 'green';
}
15. Show the different pointer events over the canvas, such as right or left-click of the pointer, and the
click and drag of the items.
Lesson 2
Working with Gesture Events
Contents:
Demonstration: Using the Visual Studio 2013 Simulator for
Windows Store Apps 6
Demonstration: Working With Gestures 6
Demonstration: Using the Visual Studio 2013 Simulator for Windows Store
Apps
Demonstration Steps
1. Open File Explorer, go to C:\Program Files (x86)\Common Files\Microsoft Shared\Windows
Simulator\12.0, and then double-click the
2. Explain that the arrow shaped pointer indicates that you are in the pointer mode.
3. To switch to the touch mode, click the Basic touch mode icon. It looks similar to a hand, and is
located on the right edge of the simulator screen.
4. Explain that the hand shaped pointer indicates that you are in the touch mode.
5. Click anywhere on the screen.
6. Demonstrate the way the pointer changes. This indicates that you are currently simulating the action
of touching the screen.
7. To switch to pinch or zoom touch mode, click the pinch/zoom touch mode icon.
8. Show the way the pointer appears now.
9. Click the pointer, and then rotate the wheel button back and forth.
10. Show the changes that occur to the pointer.
11. To switch to the Rotation touch mode, click the Rotation touch mode icon.
12. Show the way the pointer appears now.
13. Click the pointer, and then rotate the wheel button back and forth.
14. Show the changes that occur to the pointer.
Demonstration: Working With Gestures

Demonstration Steps
1. On the Start screen, click the Visual Studio tile.
Note: If this is first time you are running Visual Studio, you will see a dialog box. Click OK
to continue.
3. Go to D:\Allfiles\Mod12\Democode\Lesson 2\GesturesDemo.
4. Double-click the GesturesDemo.sln file to open the solution.
5. If you are prompted by a Developer License dialog box, click I Agree.
6. Type your email address and a password in the Windows Security dialog box, and then click Sign in.
8. Locate the registerEvents function and show the different events available for gestures.
var target = document.getElementById("gestureGround");

target.addEventListener("MSGestureStart", eventListener, false);
target.addEventListener("MSGestureEnd", eventListener, false);
target.addEventListener("MSGestureChange", eventListener, false);
target.addEventListener("MSInertiaStart", eventListener, false);
target.addEventListener("MSGestureTap", eventListener, false);
target.addEventListener("MSGestureHold", eventListener, false);

target.addEventListener("MSPointerDown", eventListener, false);
9. Explain how a new MSGesture object is created and how its target object is assigned to the DOM
target.
gestureListener = new MSGesture();

gestureGround = document.getElementById("gestureGround");
gestureListener.target = gestureGround;
10. Locate the printEvent function, and then explain that this function will allow you to read and see the
different gestures.
function printEvent(evt) {
var str = "Type: " + evt.type + " X: " + evt.screenX + " Y: " + evt.screenY;
var element = document.getElementById("logger");
messageCounter++;
element.innerHTML = "<div>" + str + "</div>" + element.innerHTML;
element = document.getElementById("eventCount");
element.innerHTML = messageCounter;
}
11. Run the app by pressing F5.
12. Click and hold the pointer on the green rectangle. You should see the gesture appear in the log, in
the black rectangle.
o Open the Windows 8.1 Start Screen, and then demonstrate some basic gestures.
o Swipe the finger from right to left to open the Charms bar
o Swipe the finger from bottom to top to open the app bar.
13. Explain the Grid View selection, and the built-in support for dragging in a WinRT control.
Note: To demonstrate touch-gestures, you should use a touch-enabled computer or run

the app from the Simulator by selecting the Simulator in the target selection combo box in Visual
Studio before running the app.


Review Question(s)
Question: Why should you use built-in gestures whenever possible?
Answer: Built-in gestures provide an experience that users expect from your app. In addition, by using
built-in gestures, you do not have to subscribe to pointer events and manually decode data to
understand common gestures, such as tap and hold.
Tools
Visual Studio 2013 simulator for Windows Store apps

Lab: Responding to Mouse Events and Touch Gestures
Question: To implement a slide gesture, which event should you subscribe to??
Answer: Subscribe to the onGestureChange event of the element you want the user to slide. This event
is raised when the pointer is moved, and enables you to accumulate the change.
Planning for Windows Store App Deployment 13-1
Module 13
Planning for Windows Store App Deployment
Contents:
Lesson 1: The Windows Store App Manifest 2
Lesson 2: Windows Store App Certification 6

13-2 Essentials of Developing Windows 8.1 Apps Using HTML5 and JavaScript
Lesson 1
The Windows Store App Manifest
Contents:
Resources 3
Demonstration: Exploring the ILoveNotes Application and updates to the
Visual Assets Manifest file 3
Demonstration: Exploring Capabilities for ILoveNotes 4
Demonstration: Exploring Declarations for ILoveNotes 4
Demonstration: Exploring Packaging for ILoveNotes 5
Resources
Application and Visual Assets
Additional Reading: For more information about choosing languages, see

Declarations Section
Additional Reading: Read more about contract and extension declarations0, see
Content URIs
Additional Reading: http://go.microsoft.com/fwlink/?LinkId=386504
Demonstration: Exploring the ILoveNotes Application and updates to the

Visual Assets Manifest file
Demonstration Steps
1. On the Application tab, change the display name of the app from ILoveNotes to MyNotes.
2. On the Visual Assets tab, change the short name of the app from ILoveNotes to MyNotes.
3. To deploy the app, on the Build menu, click Deploy Solution.
4. To open the Search pane, press Windows Key+Q or access it through the charms.
5. In the Search box, type My, and then the app named MyNotes will appear in the list of apps to the
left of the screen.
6. Return to Visual Studio, and then, in the package.appxmanifest file, click the Visual Assets tab.
7. Click the browse button that is marked with … in the Square 150x150 Logo section, next to the
150x150 pixels preview image to display the file picker.
8. In the Assets folder, located in the project base folder, double-click the wideLogo.png image.
9. If a warning dialog box appears that suggests the image is invalid, click Cancel, and then on the
Select Image dialog box, click Cancel again.
Note: If your image assets do not match the required dimensions for that category, a
rescaled version of the target image will be created. It is a good practice to use a visual asset with
the required dimension instead of a scaled image.
10. On the Visual Assets tab, under the Show Name section, check the Square 150x150 Logo and
Wide 310x150 Logo check boxes.
11. Deploy the solution by selecting Build/Deploy Solution from the menu.
12. Go to the Start screen. If the app is not pinned to the start screen, pin it by clicking the All apps
button. Locating the app in the app-list, right-click the app tile, and then click Pin to Start in the
app-bar.
13. Point out that the Short name of the app is now visible at the bottom of the app tile.
14. Click Dark in the foreground text box.
15. Deploy the solution.
16. Go to the Start screen.
17. Show that the text color has changed to Dark on the app tile.
18. Change the text in the Short name box.
19. Deploy the solution.
20. Go to the Start screen.
21. Show that the Short name displayed on the app tile has changed.
22. Return to the Manifest Designer.
23. Remove all the text from the short name box.
24. Deploy the solution
25. Show that the display name is now shown on the app tile.
26. Under the Splash Screen section, change the color in the background text box to any six-digit
hexadecimal number, such as: FF0000 for red.
27. Build, deploy, and then run the app.
28. Show that the background color of the splash screen has now changed.
Demonstration: Exploring Capabilities for ILoveNotes

Demonstration Steps
1. Go over the capabilities tab, and then describe them.
2. For a few of the capabilities listed, select the item, read the description, and then open the More
Information link.
3. To deploy the app, on the Build menu, click the Deploy Solution button.
4. Run the app by pressing Ctrl+F5.
5. On the charms, click the Settings charm.
6. Click Permissions.
7. Point out that the app permissions declared in the capabilities section appears here. Some
capabilities should also have toggle switches to turn them on or off.
Demonstration: Exploring Declarations for ILoveNotes

Demonstration Steps
1. In the Available Declarations list, select a declaration, and then click Add.
2. Click the Add button to add the AutoPlay Content declaration. Note that some declarations require
additional information before they can be added.
3. Show that the red X icon that appears next to the declaration and the red X icon that appears next to
the Launch Actions properties group box indicate missing information.
4. Point to the red X icons, and then read the hints that are displayed as tooltips.
5. Remove the AutoPlay Content declaration and all the other declarations with red X icons by clicking
the Remove button next to each declaration.
6. Remove the Search declaration by clicking the Remove button next to it.
7. Run the app.
8. A run time error should occur.
9. Select Break from the pop up, stop debugging by pressing Shift-F5, and then return to the manifest
file.
10. In the Available Declarations list, click Add to add the Search declaration back to the Available
Declarations list.
Demonstration: Exploring Packaging for ILoveNotes

Demonstration Steps
1. Change some of the numbers for the app version.
2. Show which values are valid from 0-65535.
3. In the Publisher display name box, replace Microsoft with Microsoft Corporation.
4. Build, deploy, and then run the app.
5. Open the Settings pane.
6. Verify that the publisher display name now reads as By Microsoft Corporation.

Lesson 2
Windows Store App Certification
Contents:
Resources 7
Resources
The Windows Store
Additional Reading: For more information on how to set up a Windows Store developer
account, see http://go.microsoft.com/fwlink/?LinkId=274018
The Publishing/Certification Process
Additional Reading: A summary of key information that you have to provide for your app
submission can be found here.
Additional Reading: For more information about how to use the Windows App
Certification Kit, go here.
Windows 8.1 Enterprise App Deployment
Additional Reading: For more information about how to sign app packages, see
Additional Reading: For more information about how to deploy enterprise apps, go to

Best Practices
• Update the manifest at the start of a project, and again before you submit the app.
• Remove any unnecessary capabilities from the manifest before you submit the app.
• Reserve your app name as soon as you start to work on it.
• Make sure that your app meets the latest app requirements that are listed on MSDN.
Review Question(s)
Question: Should you localize your app? Why or why not?
Answer: Yes, if you have the resources, localizing your app is a good idea. It expands the number of
potential customers. Even if you decide not to localize immediately, it is a good idea to prepare for future
localization. Windows 8.1 has been released in 109 languages and the Windows Store will be able to sell
apps in over 200 markets. The Multilingual App Toolkit helps developers localize apps.
To get the Multilingual App Toolkit, go to

Essentials of Developing Windows® Store Apps Using HTML5 and JavaScript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Essentials of Developing Windows® Store Apps Using HTML5 and JavaScript

Uploaded by

Copyright:

Available Formats

O F F I C I A L M I C R O S O F T L E A R N I N G P R O D U C T

© 2013 Microsoft Corporation. All rights reserved.

Microsoft and the trademarks listed at

Product Number: 20481C

a. If you are a Microsoft IT Academy Program Member:

b. If you are a Microsoft Learning Competency Member:

d. If you are an End User:

e. If you are a Trainer.

3. LICENSED CONTENT BASED ON PRE-RELEASE TECHNOLOGY. If the Licensed Content’s subject

11. APPLICABLE LAW.

This limitation applies to

LIMITATION DES DOMMAGES-INTÉRÊTS ET EXCLUSION DE RESPONSABILITÉ POUR LES

Revised July 2013

Lesson 2: Windows 8 UI Principles 5

Lesson 3: WinRT and Language Projections 7

Module Review and Takeaways 10

Demonstration: Using Windows 8 Features

7. If you are using a touch-enabled device, tap the tile.

If you are using a mouse, click the tile.

8. On the keyboard, press Ctrl+Shift+Esc.

9. Click More details.

10. Click the Processes tab.

11. Click the CPU column header.

12. Click the App history tab.

14. On the Start screen, locate the Internet Explorer tile.

15. To run Internet Explorer, click the Internet Explorer tile.

16. Move the pointer to the upper-right corner of the screen.

If you are using the keyboard, press Windows logo key+C.

17. Click the Search charm.

18. On the list of search providers, click Internet Explorer.

19. Type Microsoft.

20. Click Search on the right hand side.

22. Open the charms.

24. Click Mail.

26. In the To box, type your email address.

27. Click Send.

28. Open the charms.

29. Click the Devices charm.

30. Locate, and then click printer, if it exists.

31. Open the charms.

32. Click the Settings charm.

33. Click the volume control icon if it is enabled.

Additional Reading: For additional reading, see

Personality, Pattern, Principles, Platform

Side-by-side and Scale

• Accommodate any screen size. Use fluid layouts.

• Rearrange the displayed information to accommodate the new layout.

Demonstration: Overview of the Final ILoveNotes Solution

2. If the User Account Control dialog box appears, click Yes.

3. On the File menu, click Open, and then click Project/Solution.

4. Go to D:\Allfiles\ILoveNotes - Windows 8.1 RTM Build.

b. If a User Account Control dialog box appears, click Yes.

c. If a Security Alert dialog box appears, click Yes.

7. On the Debug menu, click Start Without Debugging, or press Ctrl+F5.

10. In the displayed list, click Note.

11. Enter the title: My First Note.

14. After the word “Note”, add an exclamation mark.

15. On the top-left corner of the screen, click Back.

19. Click the magnifying glass icon to perform the search.

20. In the search results screen, click My First Note!

21. To display the app bar, right-click anywhere on the screen.

23. Enter detail text, and then click Pin to Start.

24. Go back to the Start screen.

25. Scroll to find the tile representing your note.