Programming Windows Store Apps with HTML, CSS, and JavaScript, Second Edition

750 Pages·2013·16.45 MB·English

by  Kraig Brockschmidt

spine = 2.07”
Programming Windows
Sixth Edition
WWP Programming
r
i
Writing Windows 8 Apps with C# and XAML About the Sixth Edition ti r
n
o
• Completely rewritten for Windows 8 gi
Like Windows itself, this classic book has been reimagined for
n
a new world of programming and user experiences. Guided • Focuses on creating apps using C#, W Windows Store
XAML, and the Windows Runtime g
by developer legend Charles Petzold, Programming Windows, i
• Expertly teaches essential skills in Part 1: nd
Sixth Edition teaches how to use your existing C# skills with
d
Elementals
XAML and the Windows Runtime to create full-screen, touch o r
• Rounds out your Windows 8 education
apps for Windows 8. woa
in Part 2: Specialties
s Apps with HTML,
• Provides code samples in both C#
Master the elementals and C++ 8 wm
• Create and initialize objects with code or XAML A
p
• Handle user-input events such as taps
ps
• Manage and experiment with dynamic layout s m
• Visually redefine a control’s appearance w CSS, and JavaScript
• Create Windows Runtime libraries it
• Use MVVM for data binding and commanding h i

• Work with asynchronous methods; write your own About the Author C n
#
• Animate transitions and create 2D and 3D effects Charles Petzold has been writing
• Manage resolution, scaling, and navigation about Windows programming a g Second Edition
n
for 25 years. A Windows Pioneer d
Extend your skills and apps Award winner, Petzold is author
X
of the classic Programming Windows, the
• Handle pointer, manipulation, tap, and hold events A
widely acclaimed Code: The Hidden
• Manipulate bitmaps and rich text Language of Computer Hardware a nd M
• Work with GPS and orientation sensors Software, Programming Windows Phone 7, L
• Call Win32® and DirectX® functions and more than a dozen other bo oks. l
• Enable share, search, and print a SECOND
n

o
Get C# and C++ code samples
i PREVIEW
Ready to download at: edition s
http://go.microsoft.com/FWLink/?Linkid=277058 s
e

Petzold f
o
microsoft.com/mspress
r
P
ISBN: 978-0-7356-7176-8
U.S.A. $59.99
Canada $62.99
[Recommended]
Kraig Brockschmidt
Programming/Windows
SECOND PREVIEW
This excerpt provides early content from a book currently in
development and is still in preview format. (See additional
notices below.)

PUBLISHED BY
Microsoft Press
A Division of Microsoft Corporation
One Microsoft Way
Redmond, Washington 98052-6399

Copyright © 2013 Microsoft Corporation

All rights reserved. No part of the contents of this book may be reproduced or transmitted in any form or by any means
without the written permission of the publisher.

This document is provided for informational purposes only and Microsoft makes no warranties, either express or implied, in
this document. Information in this document, including URL and other Internet website references, is subject to change
without notice. The entire risk of the use or the results from the use of this document remains with the user.

Unless otherwise noted, the companies, organizations, products, domain names, e-mail addresses, logos, people, places, and
events depicted in examples herein are fictitious. No association with any real company, organization, product, domain name,
e-mail address, logo, person, place, or event is intended or should be inferred.

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 marks are property of their respective owners.

This book expresses the author’s views and opinions. The information contained in this book is provided without any express,
statutory, or implied warranties. Neither the authors, Microsoft Corporation, nor its resellers or distributors will be held liable
for any damages caused or alleged to be caused either directly or indirectly by this book.

Acquisitions, Developmental, and Project Editor: Devon Musgrave
Cover: Twist Creative • Seattle and Joel Panchot
Contents
Introduction .................................................................................................................................................. 12
Who This Book Is For .................................................................................................................................................................... 14
What You'll Need (Can You Say “Samples”?) ...................................................................................................................... 15
Some Formatting Notes .............................................................................................................................................................. 16
We Want to Hear from You ....................................................................................................................................................... 17
Stay in Touch .................................................................................................................................................................................... 17
Chapter 1 The Life Story of a Windows Store App: Characteristics of the Windows Platform .... 18
Leaving Home: Onboarding to the Windows Store ......................................................................................................... 20
Discovery, Acquisition, and Installation ................................................................................................................................. 22
Playing in Your Own Room: The App Container ............................................................................................................... 26
Different Views of Life: Views and Resolution Scaling ..................................................................................................... 30
Those Capabilities Again: Getting to Data and Devices ................................................................................................. 33
Taking a Break, Getting Some Rest: Process Lifecycle Management ........................................................................ 36
Remembering Yourself: App State and Roaming .............................................................................................................. 38
Coming Back Home: Updates and New Opportunities .................................................................................................. 42
And, Oh Yes, Then There’s Design ........................................................................................................................................... 43
Chapter 2 Quickstart.................................................................................................................................. 45
A Really Quick Quickstart: The Blank App Template ....................................................................................................... 45
Blank App Project Structure .................................................................................................................................................. 48
QuickStart #1: Here My Am! and an Introduction to Blend for Visual Studio ...................................................... 52
Design Wireframes .................................................................................................................................................................... 53
Create the Markup .................................................................................................................................................................... 56
Styling in Blend ........................................................................................................................................................................... 58
Adding the Code ........................................................................................................................................................................ 63
Extra Credit: Improving the App .............................................................................................................................................. 77
Receiving Messages from the iframe ................................................................................................................................. 78
Improving the Placeholder Image with a Canvas Element ....................................................................................... 79
Handling Variable Image Sizes ............................................................................................................................................. 80
Moving the Captured Image to AppData (or the Pictures Library) ....................................................................... 83
1
Using a Thumbnail Instead of the Full Image ................................................................................................................ 85
The Other Templates: Projects and Items ............................................................................................................................. 86
Navigation App Template ...................................................................................................................................................... 86
Grid App Template .................................................................................................................................................................... 87
Hub App Template .................................................................................................................................................................... 87
Split Template ............................................................................................................................................................................. 87
Item Templates ........................................................................................................................................................................... 88
What We’ve Just Learned ............................................................................................................................................................ 88
Chapter 3 App Anatomy and Performance Fundamentals .................................................................. 90
App Activation ................................................................................................................................................................................. 91
Branding Your App 101: The Splash Screen and Other Visuals .............................................................................. 92
Activation Event Sequence .................................................................................................................................................... 96
Activation Code Paths .............................................................................................................................................................. 98
WinJS.Application Events ..................................................................................................................................................... 100
Optimizing Startup Time ..................................................................................................................................................... 103
WinRT Events and removeEventListener ............................................................................................................................ 105
App Lifecycle Transition Events and Session State ......................................................................................................... 107
Suspend, Resume, and Terminate .................................................................................................................................... 108
Basic Session State in Here My Am! ................................................................................................................................ 112
Page Controls and Navigation ............................................................................................................................................... 115
WinJS Tools for Pages and Page Navigation ............................................................................................................... 115
The Navigation App Template, PageControl Structure, and PageControlNavigator ................................. 118
The Navigation Process and Navigation Styles .......................................................................................................... 125
Optimizing Page Switching: Show-and-Hide .............................................................................................................. 127
Page-Specific Styling ............................................................................................................................................................. 128
Async Operations: Be True to Your Promises ................................................................................................................... 130
Using Promises ......................................................................................................................................................................... 130
Joining Parallel Promises ..................................................................................................................................................... 132
Sequential Promises: Nesting and Chaining ................................................................................................................ 133
Managing the UI Thread with the WinJS Scheduler ..................................................................................................... 135
2
Scheduler Priorities ................................................................................................................................................................ 136
Scheduling and Managing Tasks ...................................................................................................................................... 137
Setting Priority in Promise Chains .................................................................................................................................... 139
Inside a Task .............................................................................................................................................................................. 141
Debugging and Profiling .......................................................................................................................................................... 143
Debug Output and Logging............................................................................................................................................... 143
Error Reports and the Event Viewer ................................................................................................................................ 144
Async Debugging ................................................................................................................................................................... 146
Performance and Memory Analysis ................................................................................................................................ 148
The Windows App Certification Toolkit ......................................................................................................................... 153
What We’ve Just Learned ......................................................................................................................................................... 154
Chapter 4 Web Content and Services .................................................................................................... 155
Network Information and Connectivity.............................................................................................................................. 157
Network Types in the Manifest ......................................................................................................................................... 158
Network Information (the Network Object Roster) .................................................................................................. 159
The ConnectionProfile Object ........................................................................................................................................... 161
Connectivity Events ................................................................................................................................................................ 162
Cost Awareness ........................................................................................................................................................................ 163
Running Offline ....................................................................................................................................................................... 167
Hosting Content: the WebView and iframe Elements .................................................................................................. 169
Local and Web Contexts (and iframe Elements) ........................................................................................................ 170
Dynamic Content .................................................................................................................................................................... 173
App Content URIs ................................................................................................................................................................... 175
The <x-ms-webview> Element ......................................................................................................................................... 177
HTTP Requests .............................................................................................................................................................................. 187
Using WinJS.xhr ....................................................................................................................................................................... 188
Using Windows.Web.Http.HttpClient ............................................................................................................................. 189
Suspend and Resume with Online Content ................................................................................................................. 194
Prefetching Content .............................................................................................................................................................. 196
Background Transfer .................................................................................................................................................................. 198
3
Basic Downloads ..................................................................................................................................................................... 199
Basic Uploads ........................................................................................................................................................................... 203
Completion and Error Notifications ................................................................................................................................ 204
Providing Headers and Credentials ................................................................................................................................. 205
Setting Cost Policy .................................................................................................................................................................. 205
Grouping Transfers ................................................................................................................................................................. 206
Suspend, Resume, and Restart with Background Transfers ................................................................................... 207
Authentication, the Microsoft Account, and the User Profile ................................................................................... 208
The Credential Locker ........................................................................................................................................................... 209
The Web Authentication Broker ....................................................................................................................................... 211
Single Sign-On ......................................................................................................................................................................... 215
Using the Microsoft Account ............................................................................................................................................. 216
The User Profile (and the Lock Screen Image) ............................................................................................................ 222
What We’ve Just Learned ......................................................................................................................................................... 224
Chapter 5 Controls and Control Styling ................................................................................................ 226
The Control Model for HTML, CSS, and JavaScript ........................................................................................................ 227
HTML Controls .............................................................................................................................................................................. 229
Extensions to HTML Elements............................................................................................................................................ 232
WinJS Controls .............................................................................................................................................................................. 234
Syntax for data-win-options ............................................................................................................................................... 237
WinJS Control Instantiation ................................................................................................................................................ 239
Strict Processing and processAll Functions .................................................................................................................. 240
Example: WinJS.UI.HtmlControl ........................................................................................................................................ 241
Example: WinJS.UI.Rating (and Other Simple Controls) .......................................................................................... 242
Example: WinJS.UI.Tooltip ................................................................................................................................................... 243
Example: WinJS.UI.ItemContainer .................................................................................................................................... 244
Working with Controls in Blend ............................................................................................................................................ 247
Control Styling .............................................................................................................................................................................. 250
Styling Gallery: HTML Controls ......................................................................................................................................... 252
Styling Gallery: WinJS Controls ......................................................................................................................................... 254
4
Some Tips and Tricks ............................................................................................................................................................. 262
Custom Controls .......................................................................................................................................................................... 263
Implementing the Dispose Pattern.................................................................................................................................. 266
Custom Control Examples ................................................................................................................................................... 267
Custom Controls in Blend.................................................................................................................................................... 271
What We’ve Just Learned ......................................................................................................................................................... 275
Chapter 6 Data Binding, Templates, and Collections ......................................................................... 277
Data Binseding ............................................................................................................................................................................. 278
Data Binding Basics ................................................................................................................................................................ 278
Data Binding in WinJS .......................................................................................................................................................... 280
Under the Covers: Binding mixins .................................................................................................................................... 290
Programmatic Binding and WinJS.Binding.bind ........................................................................................................ 292
Binding Initializers .................................................................................................................................................................. 294
Binding Templates ...................................................................................................................................................................... 298
Template Options, Properties, and Compilation........................................................................................................ 301
Collection Data Types ................................................................................................................................................................ 304
Windows.Foundation.Collection Types .......................................................................................................................... 304
WinJS Binding Lists ................................................................................................................................................................. 310
What We’ve Just Learned ......................................................................................................................................................... 321
Chapter 7 Collection Controls ................................................................................................................ 323
Collection Control Basics .......................................................................................................................................................... 324
Quickstart #1: The WinJS Repeater Control with HTML controls ........................................................................ 324
Quickstart #2: The FlipView Control Sample ............................................................................................................... 328
Quickstart #3: The ListView Essentials Sample ............................................................................................................ 330
Quickstart #4: The ListView Grouping Sample ........................................................................................................... 332
ListView in the Grid App Project Template .................................................................................................................. 336
The Semantic Zoom Control ................................................................................................................................................... 340
How Templates Work with Collection Controls .............................................................................................................. 343
Referring to Templates ......................................................................................................................................................... 343
Template Functions (Part 1): The Basics ........................................................................................................................ 344
5
Creating Templates from Data Sources in Blend ....................................................................................................... 347
Repeater Features and Styling ............................................................................................................................................... 351
FlipView Features and Styling................................................................................................................................................. 356
Collection Control Data Sources ........................................................................................................................................... 359
The Structure of Data Sources (Interfaces Aplenty!)................................................................................................. 360
A FlipView Using the Pictures Library ............................................................................................................................. 364
Custom Data Sources and WinJS.UI.VirtualizedDataSource .................................................................................. 366
ListView Features and Styling ................................................................................................................................................. 372
When Is ListView the Right Choice? ................................................................................................................................ 373
Options, Selections, and Item Methods ......................................................................................................................... 375
Styling .......................................................................................................................................................................................... 378
Loading State Transitions .................................................................................................................................................... 380
Drag and Drop ......................................................................................................................................................................... 382
Layouts ........................................................................................................................................................................................ 385
Template Functions (Part 2): Optimizing Item Rendering .......................................................................................... 394
What We’ve Just Learned ......................................................................................................................................................... 399
Chapter 8 Layout and Views ................................................................................................................... 401
Principles of Page Layout ......................................................................................................................................................... 403
Sizing, Scaling, and Views: The Many Faces of Your App ........................................................................................... 406
Variable View Sizing and Orientations ........................................................................................................................... 406
Screen Resolution, Pixel Density, and Scaling ............................................................................................................. 417
Multiple Views .......................................................................................................................................................................... 422
Pannable Sections and Styles ................................................................................................................................................. 426
Laying Out the Hub ............................................................................................................................................................... 427
Laying Out the Sections ....................................................................................................................................................... 428
Panning Styles and Railing .................................................................................................................................................. 429
Panning Snap Points and Limits ....................................................................................................................................... 431
Zooming Snap Points and Limits...................................................................................................................................... 432
The Hub Control and Hub App Template ......................................................................................................................... 433
Hub Control Styling ............................................................................................................................................................... 440
6
Using the CSS Grid ...................................................................................................................................................................... 441
Overflowing a Grid Cell ........................................................................................................................................................ 443
Centering Content Vertically .............................................................................................................................................. 443
Scaling Font Size ..................................................................................................................................................................... 445
Item Layout .................................................................................................................................................................................... 445
CSS 2D and 3D Transforms ................................................................................................................................................. 446
Flexbox ........................................................................................................................................................................................ 446
Nested and Inline Grids ........................................................................................................................................................ 447
Fonts and Text Overflow ...................................................................................................................................................... 449
Multicolumn Elements and Regions ............................................................................................................................... 450
What We’ve Just Learned ......................................................................................................................................................... 453
Chapter 9 Commanding UI ..................................................................................................................... 454
Where to Place Commands ..................................................................................................................................................... 455
The App Bar and Nav Bar ......................................................................................................................................................... 460
App Bar Basics and Standard Commands ..................................................................................................................... 461
App Bar Styling ........................................................................................................................................................................ 470
Command Menus ................................................................................................................................................................... 474
Custom App Bars .................................................................................................................................................................... 476
Nav Bar Features ..................................................................................................................................................................... 477
Nav Bar Styling ........................................................................................................................................................................ 486
Flyouts and Menus ...................................................................................................................................................................... 488
WinJS.UI.Flyout Properties, Methods, and Events ..................................................................................................... 490
Flyout Examples ....................................................................................................................................................................... 491
Menus and Menu Commands ........................................................................................................................................... 494
Message Dialogs .......................................................................................................................................................................... 499
Improving Error Handling in Here My Am! ...................................................................................................................... 500
What We’ve Just Learned ......................................................................................................................................................... 506
Chapter 10 The Story of State, Part 1: App Data and Settings .......................................................... 508
The Story of State ........................................................................................................................................................................ 510
App Data Locations ................................................................................................................................................................ 513
7
App Data APIs (WinRT and WinJS) ....................................................................................................................................... 514
Settings Containers ................................................................................................................................................................ 515
State Versioning ...................................................................................................................................................................... 517
Folders, Files, and Streams ....................................................................................................................................................... 518
FileIO, PathIO, and WinJS Helpers (plus FileReader) ................................................................................................ 524
Encryption and Compression ............................................................................................................................................. 525
Q&A on Files, Streams, Buffers, and Blobs .................................................................................................................... 525
Using App Data APIs for State Management ................................................................................................................... 533
Transient Session State ......................................................................................................................................................... 533
Local and Temporary State ................................................................................................................................................. 534
IndexedDB, SQLite, and Other Database Options ..................................................................................................... 536
Roaming State .......................................................................................................................................................................... 538
Settings Pane and UI .................................................................................................................................................................. 540
Design Guidelines for Settings .......................................................................................................................................... 543
Populating Commands ......................................................................................................................................................... 545
Implementing Commands: Links and Settings Flyouts............................................................................................ 547
Programmatically Invoking Settings Flyouts ............................................................................................................... 549
Here My Am! Update ................................................................................................................................................................. 551
What We’ve Just Learned ......................................................................................................................................................... 552
Chapter 11 The Story of State, Part 2: User Data, Files, and SkyDrive ............................................. 554
The Big Picture of User Data ................................................................................................................................................... 555
Using the File Picker and Access Cache ............................................................................................................................. 560
The File Picker UI..................................................................................................................................................................... 561
The File Picker API .................................................................................................................................................................. 566
Access Cache ............................................................................................................................................................................ 570
StorageFile Properties and Metadata .................................................................................................................................. 573
Availability ................................................................................................................................................................................. 574
Thumbnails ................................................................................................................................................................................ 575
File Properties ........................................................................................................................................................................... 579
Media-Specific Properties ................................................................................................................................................... 582
8