Programming Windows 8 Apps with HTML, CSS, and JavaScript, second preview eBook

537 Pages·2012·13.5 MB·English

by  Kraig Brockschmidt

Programming
Windows 8 Apps
®
with HTML, CSS,
and JavaScript
SECOND
PREVIEW
Kraig Brockschmidt
PUBLISHED BY
Microsoft Press
A Division of Microsoft Corporation
One Microsoft Way
Redmond, Washington 98052-6399

Copyright © 2012 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.

ISBN: 978-0-7356-7261-1

This document supports a preliminary release of a software product that may be changed substantially prior to
final commercial release. 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.

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 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
Introduction ....................................................................................................... 11
Who This Book Is For ................................................................................................................................................................. 12
What You'll Need ........................................................................................................................................................................ 13
A Formatting Note...................................................................................................................................................................... 13
Acknowledgements .................................................................................................................................................................... 13
Errata & Book Support .............................................................................................................................................................. 14
We Want to Hear from You ..................................................................................................................................................... 15
Stay in Touch ................................................................................................................................................................................ 15
Chapter 1: The Life Story of a WinRT App:
Platform Characteristics of Windows 8 .......................................................... 16
Leaving Home: Onboarding to the Store ............................................................................................................................ 17
Discovery, Acquisition, and Installation ............................................................................................................................... 20
Playing in Your Own Room: The App Container .............................................................................................................. 23
Different Views of Life: View States and Resolution Scaling ......................................................................................... 27
Those Capabilities Again: Getting to Data and Devices ................................................................................................. 30
Taking a Break, Getting Some Rest: Process Lifecycle Management ......................................................................... 33
Remembering Yourself: App State and Roaming ............................................................................................................. 35
Coming Back Home: Updates and New Opportunities .................................................................................................. 39
And, Oh Yes, Then There’s Design ......................................................................................................................................... 40
Chapter 2: Quickstart ........................................................................................ 42
A Really Quick Quickstart: The Blank App Template ....................................................................................................... 42
Blank App Project Structure ................................................................................................................................................ 45
QuickStart #1: Here My Am! and an Introduction to Blend for Visual Studio ........................................................ 50
Design Wireframes ................................................................................................................................................................. 50
Create the Markup ................................................................................................................................................................. 53
Styling in Blend ....................................................................................................................................................................... 55
Adding the Code .................................................................................................................................................................... 59
Extra Credit: Receiving Messages from the iframe ...................................................................................................... 71
The Other Templates ................................................................................................................................................................. 73
Fixed Layout Template .......................................................................................................................................................... 73
Navigation Template ............................................................................................................................................................. 74
3
Grid Template .......................................................................................................................................................................... 74
Split Template .......................................................................................................................................................................... 74
What We’ve Just Learned ......................................................................................................................................................... 75
Chapter 3: App Anatomy and Page Navigation ........................................... 76
Local and Web Contexts within the App Host .................................................................................................................. 77
Referencing Content from App Data: ms-appdata ..................................................................................................... 81
Sequential Async Operations: Chaining Promises ............................................................................................................ 84
Debug Output, Error Reports, and the Event Viewer ................................................................................................. 87
App Activation ............................................................................................................................................................................. 89
Branding Your App 101: The Splash Screen and Other Visuals............................................................................... 89
Activation Event Sequence .................................................................................................................................................. 92
Activation Code Paths ........................................................................................................................................................... 93
WinJS.Application Events ..................................................................................................................................................... 95
Extended Splash Screens ...................................................................................................................................................... 97
App Lifecycle Transition Events and Session State ........................................................................................................... 99
Suspend, Resume, and Terminate ...................................................................................................................................100
Basic Session State in Here My Am! ...............................................................................................................................104
Data from Services and WinJS.xhr .......................................................................................................................................106
Handling Network Connectivity (in Brief).....................................................................................................................109
Tips and Tricks for WinJS.xhr ............................................................................................................................................109
Page Controls and Navigation ..............................................................................................................................................111
WinJS Tools for Pages and Page Navigation ...............................................................................................................111
The Navigation App Template, PageControl Structure, and PageControlNavigator ....................................112
The Navigation Process and Navigation Styles ..........................................................................................................118
Optimizing Page Switching: Show-and-Hide ..............................................................................................................120
Completing the Promises Story ............................................................................................................................................120
What We’ve Just Learned .......................................................................................................................................................122
Chapter 4: Controls, Control Styling, and Data Binding ........................... 124
The Control Model for HTML, CSS, and JavaScript ........................................................................................................125
HTML Controls ...........................................................................................................................................................................126
4
WinJS stylesheets: ui-light.css, ui-dark.css, and win-* styles ...................................................................................129
Extensions to HTML Elements ..........................................................................................................................................130
WinJS Controls ...........................................................................................................................................................................130
WinJS Control Instantiation ...............................................................................................................................................132
Strict Processing and processAll Functions ..................................................................................................................133
Example: WinJS.UI.Rating Control ...................................................................................................................................134
Example: WinJS.UI.Tooltip Control..................................................................................................................................135
Working with Controls in Blend ...........................................................................................................................................137
Control Styling ...........................................................................................................................................................................139
Styling Gallery: HTML Controls ........................................................................................................................................141
Styling Gallery: WinJS Controls ........................................................................................................................................143
Some Tips and Tricks ...........................................................................................................................................................146
Custom Controls ........................................................................................................................................................................147
Custom Control Examples .................................................................................................................................................149
Custom Controls in Blend ..................................................................................................................................................151
Data Binding ...............................................................................................................................................................................154
Data Binding in WinJS .........................................................................................................................................................157
Additional Binding Features..............................................................................................................................................162
What We’ve Just Learned .......................................................................................................................................................165
Chapter 5: Collections and Collection Controls .......................................... 167
Collection Control Basics ........................................................................................................................................................168
Quickstart #1: The HTML FlipView Control Sample ..................................................................................................168
Quickstart #2a: The HTML ListView Essentials Sample .............................................................................................170
Quickstart #2b: The ListView Grouping Sample .........................................................................................................172
ListView in the Grid App Project Template ..................................................................................................................177
The Semantic Zoom Control .................................................................................................................................................181
FlipView Features and Styling ...............................................................................................................................................184
Data Sources ...............................................................................................................................................................................187
A FlipView Using the Pictures Library ............................................................................................................................187
Custom Data Sources ..........................................................................................................................................................189
5
How Templates Really Work..................................................................................................................................................191
Referring to Templates .......................................................................................................................................................191
Template Elements and Rendering.................................................................................................................................192
Template Functions (Part 1): The Basics ........................................................................................................................193
ListView Features and Styling ................................................................................................................................................195
When Is ListView the Wrong Choice? ............................................................................................................................195
Options, Selections, and Item Methods ........................................................................................................................197
Styling .......................................................................................................................................................................................200
Backdrops ................................................................................................................................................................................201
Layouts and Cell Spanning ................................................................................................................................................202
Optimizing ListView Performance .......................................................................................................................................208
Random Access .....................................................................................................................................................................209
Incremental Loading ............................................................................................................................................................210
Template Functions (Part 2): Promises, Promises! .....................................................................................................210
What We’ve Just Learned .......................................................................................................................................................216
Chapter 6: Layout............................................................................................ 218
Principles of WinRT app Layout ...........................................................................................................................................219
Quickstart: Pannable Sections and Snap Points ..............................................................................................................223
Laying Out the Hub .............................................................................................................................................................223
Laying Out the Sections......................................................................................................................................................225
Snap Points .............................................................................................................................................................................225
The Many Faces of Your Display ..........................................................................................................................................226
View States ..............................................................................................................................................................................227
Screen Size, Pixel Density, and Scaling ..........................................................................................................................234
Adaptive and Fixed Layouts for Display Size ...................................................................................................................238
Fixed Layouts and the ViewBox Control .......................................................................................................................239
Adaptive Layouts ..................................................................................................................................................................241
Using the CSS Grid ....................................................................................................................................................................243
Overflowing a Grid Cell ......................................................................................................................................................244
Centering Content Vertically ............................................................................................................................................245
6
Scaling Font Size ...................................................................................................................................................................246
Item Layout .................................................................................................................................................................................247
CSS 2D and 3D Transforms................................................................................................................................................247
Flexbox .....................................................................................................................................................................................248
Nested and Inline Grids ......................................................................................................................................................249
Fonts and Text Overflow ....................................................................................................................................................250
Multicolumn Elements and Regions ...............................................................................................................................251
What We’ve Just Learned .......................................................................................................................................................254
Chapter 7: Commanding UI ........................................................................... 256
Where to Place Commands ...................................................................................................................................................257
The App Bar ................................................................................................................................................................................261
App Bar Basics and Standard Commands ....................................................................................................................263
App Bar Styling ......................................................................................................................................................................272
Command Menus .................................................................................................................................................................274
Custom App Bars and Navigation Bars .........................................................................................................................276
Flyouts and Menus....................................................................................................................................................................277
WinJS.UI.Flyout Properties, Methods, and Events ......................................................................................................279
Flyout Examples ....................................................................................................................................................................280
Menus and Menu Commands ..........................................................................................................................................283
Message Dialogs ........................................................................................................................................................................288
Improving Error Handling in Here My Am! ......................................................................................................................289
What We’ve Just Learned .......................................................................................................................................................294
Chapter 8: State, Settings, Files, and Documents ....................................... 295
The Story of State ......................................................................................................................................................................296
Settings and State .................................................................................................................................................................298
App Data Locations ..............................................................................................................................................................299
AppData APIs (WinRT and WinJS) ...................................................................................................................................301
Using App Data APIs for State Management ..............................................................................................................310
Settings Pane and UI ................................................................................................................................................................316
Design Guidelines for Settings .........................................................................................................................................317
7
Populating Commands .......................................................................................................................................................320
Implementing Commands: Links and Settings Flyouts ............................................................................................321
User Data: Libraries, File Pickers, and File Queries .........................................................................................................326
Using the File Picker ............................................................................................................................................................327
Media Libraries ......................................................................................................................................................................336
Documents and Removable Storage..............................................................................................................................337
Rich Enumeration with File Queries................................................................................................................................338
Here My Am! Update ...............................................................................................................................................................344
What We’ve Just Learned .......................................................................................................................................................344
Chapter 9: Input and Sensors ........................................................................ 346
Touch, Mouse, and Stylus Input ...........................................................................................................................................347
The Touch Language, Its Translations, and Mouse/Keyboard Equivalents .......................................................348
What Input Capabilities Are Present? ............................................................................................................................355
Unified Pointer Events .........................................................................................................................................................357
Gesture Events .......................................................................................................................................................................360
The Gesture Recognizer .....................................................................................................................................................369
Keyboard Input and the Soft Keyboard .............................................................................................................................371
Soft Keyboard Appearance and Configuration ..........................................................................................................371
Adjusting Layout for the Soft Keyboard .......................................................................................................................374
Standard Keystrokes ............................................................................................................................................................376
Inking ............................................................................................................................................................................................377
Geolocation .................................................................................................................................................................................380
Sensors ..........................................................................................................................................................................................383
What We’ve Just Learned .......................................................................................................................................................386
Chapter 10: Media .......................................................................................... 387
Creating Media Elements .......................................................................................................................................................388
Graphics Elements: Img, Svg, and Canvas (and a Little CSS) ......................................................................................390
Additional Characteristics of Graphics Elements ........................................................................................................393
Some Tips and Tricks ...........................................................................................................................................................394
Video Playback and Deferred Loading ..............................................................................................................................398
8
Disabling Screen Savers and the Lock Screen During Playback ............................................................................400
Video Element Extension APIs ..........................................................................................................................................401
Applying a Video Effect ......................................................................................................................................................402
Browsing Media Servers .....................................................................................................................................................403
Audio Playback and Mixing ...................................................................................................................................................403
Audio Element Extension APIs..........................................................................................................................................405
Playback Manager and Background Audio .................................................................................................................406
Playing Sequential Audio ...................................................................................................................................................410
Playlists .........................................................................................................................................................................................411
Loading and Manipulating Media .......................................................................................................................................414
Media File Metadata ............................................................................................................................................................414
Image Manipulation and Encoding ................................................................................................................................423
Manipulating Audio and Video .......................................................................................................................................429
Media Capture ...........................................................................................................................................................................433
Flexible Capture with the MediaCapture Object ........................................................................................................435
Selecting a Media Capture Device ..................................................................................................................................439
Streaming Media and PlayTo ................................................................................................................................................440
Streaming from a Server and Digital Rights Management (DRM) .......................................................................441
Streaming from App to Network ....................................................................................................................................442
PlayTo .......................................................................................................................................................................................443
What We Have Learned ..........................................................................................................................................................446
Chapter 11: Purposeful Animations ............................................................. 448
Systemwide Enabling and Disabling of Animations ......................................................................................................450
The WinJS Animations Library ..............................................................................................................................................451
Animations in Action ...........................................................................................................................................................454
CSS Animations and Transitions ...........................................................................................................................................458
The Independent Animations Sample ...........................................................................................................................463
Rolling Your Own: Tips and Tricks .......................................................................................................................................464
What We’ve Just Learned .......................................................................................................................................................469
Chapter 12: Contracts ..................................................................................... 470
9
Share ..............................................................................................................................................................................................472
Source Apps............................................................................................................................................................................474
Target Apps ............................................................................................................................................................................480
The Clipboard ........................................................................................................................................................................491
Search............................................................................................................................................................................................493
Search in the App Manifest and the Search Item Template ...................................................................................496
Basic Search and Search Activation ................................................................................................................................496
Providing Query Suggestions ...........................................................................................................................................499
Providing Result Suggestions ...........................................................................................................................................503
Type to Search .......................................................................................................................................................................504
Launching Apps: File Type and URI Scheme Associations ...........................................................................................504
File Activation ........................................................................................................................................................................506
Protocol Activation ..............................................................................................................................................................508
File Picker Providers .................................................................................................................................................................509
Manifest Declarations ..........................................................................................................................................................510
Activation of a File Picker Provider .................................................................................................................................511
Cached File Updater .................................................................................................................................................................518
Updating a Local File: UI ....................................................................................................................................................521
Updating a Remote File: UI ...............................................................................................................................................522
Update Events ........................................................................................................................................................................523
Contacts .......................................................................................................................................................................................527
Using the Contact Picker ....................................................................................................................................................529
Contact Picker Providers ....................................................................................................................................................531
What We’ve Just Learned .......................................................................................................................................................534
About the Author ........................................................................................... 536
Survey ............................................................................................................... 537

10