99 1 www.it-ebooks.info 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 Microsoft Press books are available through booksellers and distributors worldwide. If you need support related to this book, email Microsoft Press Book Support at mspinput@microsoft.com . Please tell us what you think of this book at http://aka.ms/tellpress. 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 2 www.it-ebooks.info Table of Contents Introduction 19 Who This Book Is For 20 What You'll Need (Can You Say “Samples”?) 21 A Formatting Note 22 Acknowledgements 23 Errata & Book Support 24 We Want to Hear from You 25 Stay in Touch 25 Chapter 1: The Life Story of a Windows Store App: Platform Characteristics of Windows 8 26 Leaving Home: Onboarding to the Windows Store 27 Discovery, Acquisition, and Installation 30 Playing in Your Own Room: The App Container 34 Different Views of Life: View States and Resolution Scaling 37 Those Capabilities Again: Getting to Data and Devices 40 Taking a Break, Getting Some Rest: Process Lifecycle Management 43 Remembering Yourself: App State and Roaming 45 Coming Back Home: Updates and New Opportunities 48 And, Oh Yes, Then There’s Design 50 Chapter 2: Quickstart 52 A Really Quick Quickstart: The Blank App Template 52 Blank App Project Structure 55 QuickStart #1: Here My Am! and an Introduction to Blend for Visual Studio 59 Design Wireframes 59 Create the Markup 62 Styling in Blend 64 Adding the Code 68 Creating a Map with the Current Location 69 Oh Wait, the Manifest! 73 3 www.it-ebooks.info Capturing a Photo from the Camera 75 Sharing the Fun! 78 Extra Credit: Receiving Messages from the iframe 81 The Other Templates 82 Fixed Layout Template 82 Navigation Template 83 Grid Template 83 Split Template 83 What We’ve Just Learned 84 Chapter 3: App Anatomy and Page Navigation 85 Local and Web Contexts within the App Host 86 Referencing Content from App Data: ms-appdata 90 Here My Am! with ms-appdata 92 Sequential Async Operations: Chaining Promises 94 Error Handling Within Promises: then vs. done 96 Debug Output, Error Reports, and the Event Viewer 96 App Activation 99 Branding Your App 101: The Splash Screen and Other Visuals 99 Activation Event Sequence 101 Activation Code Paths 103 WinJS.Application Events 105 Extended Splash Screens 106 Activation Deferrals 108 App Lifecycle Transition Events and Session State 109 Suspend, Resume, and Terminate 109 Basic Session State in Here My Am! 114 Data from Services and WinJS.xhr 116 Handling Network Connectivity (in Brief) 119 Tips and Tricks for WinJS.xhr 120 Page Controls and Navigation 121 4 www.it-ebooks.info WinJS Tools for Pages and Page Navigation 121 The Navigation App Template, PageControl Structure, and PageControlNavigator 123 The Navigation Process and Navigation Styles 129 Optimizing Page Switching: Show-and-Hide 130 WinRT Events and removeEventListener 131 Completing the Promises Story 133 What We’ve Just Learned 135 Chapter 4: Controls, Control Styling, and Data Binding 136 The Control Model for HTML, CSS, and JavaScript 137 HTML Controls 138 WinJS stylesheets: ui-light.css, ui-dark.css, and win-* styles 141 Extensions to HTML Elements 142 WinJS Controls 142 WinJS Control Instantiation 144 Strict Processing and processAll Functions 145 Example: WinJS.UI.Rating Control 146 Example: WinJS.UI.Tooltip Control 147 Working with Controls in Blend 149 Control Styling 151 Styling Gallery: HTML Controls 153 Styling Gallery: WinJS Controls 155 Some Tips and Tricks 158 Custom Controls 159 Custom Control Examples 161 Custom Controls in Blend 164 Data Binding 167 Data Binding in WinJS 169 One-Time Binding 170 One-Way Binding 173 Implementing Two-Way Binding 175 5 www.it-ebooks.info Additional Binding Features 175 Binding Initializers 177 Binding Templates and Lists 178 What We’ve Just Learned 178 Chapter 5: Collections and Collection Controls 180 Collection Control Basics 181 Quickstart #1: The FlipView Control Sample 181 Quickstart #2a: The HTML ListView Essentials Sample 183 Quickstart #2b: The ListView Grouping Sample 186 ListView in the Grid App Project Template 191 The Semantic Zoom Control 195 FlipView Features and Styling 198 Data Sources 202 A FlipView Using the Pictures Library 202 Custom Data Sources 204 How Templates Really Work 205 Referring to Templates 206 Template Elements and Rendering 206 Template Functions (Part 1): The Basics 207 ListView Features and Styling 210 When Is ListView the Wrong Choice? 210 Options, Selections, and Item Methods 212 Styling 215 Backdrops 216 Layouts and Cell Spanning 216 Optimizing ListView Performance 223 Random Access 224 Incremental Loading 225 Template Functions (Part 2): Promises, Promises! 225 What We’ve Just Learned 232 6 www.it-ebooks.info Chapter 6: Layout 233 Principles of Windows Store App Layout 234 Quickstart: Pannable Sections and Snap Points 237 Laying Out the Hub 238 Laying Out the Sections 239 Snap Points 240 The Many Faces of Your Display 241 View States 242 Handling View States 245 Screen Size, Pixel Density, and Scaling 249 Graphics That Scale Well 252 Adaptive and Fixed Layouts for Display Size 253 Fixed Layouts and the ViewBox Control 254 Adaptive Layouts 256 Using the CSS Grid 258 Overflowing a Grid Cell 260 Centering Content Vertically 260 Scaling Font Size 261 Item Layout 262 CSS 2D and 3D Transforms 263 Flexbox 263 Nested and Inline Grids 264 Fonts and Text Overflow 266 Multicolumn Elements and Regions 267 What We’ve Just Learned 270 Chapter 7: Commanding UI 271 Where to Place Commands 272 The App Bar 276 App Bar Basics and Standard Commands 278 Command Events 281 7 www.it-ebooks.info App Bar Events and Methods 282 Showing, Hiding, Enabling, and Updating Commands 284 App Bar Styling 287 Custom Icons 288 Command Menus 290 Custom App Bars and Navigation Bars 291 Flyouts and Menus 293 WinJS.UI.Flyout Properties, Methods, and Events 294 Flyout Examples 295 Menus and Menu Commands 299 Context Menus 301 Message Dialogs 303 Improving Error Handling in Here My Am! 305 What We’ve Just Learned 309 Chapter 8: State, Settings, Files, and Documents 311 The Story of State 312 Settings and State 314 App Data Locations 315 AppData APIs (WinRT and WinJS) 317 Settings Containers 318 Versioning App State 320 Storage Folders and Storage Files 321 The FileIO, PathIO, and WinJS helper classes (plus FileReader) 325 Encryption and Compression 326 Using App Data APIs for State Management 327 Session State 327 Local and Temporary State 328 IndexedDB and Other Database Options 329 Roaming State 331 Settings Pane and UI 333 8 www.it-ebooks.info Design Guidelines for Settings 334 Populating Commands 336 Implementing Commands: Links and Settings Flyouts 338 Programmatically Invoking Settings Flyouts 341 User Data: Libraries, File Pickers, and File Queries 343 Using the File Picker 344 The File Picker UI 345 The File Picker API (and a Few Friends) 348 Media Libraries 352 Documents and Removable Storage 353 Rich Enumeration with File Queries 354 Here My Am! Update 360 What We’ve Just Learned 361 Chapter 9: Input and Sensors 363 Touch, Mouse, and Stylus Input 364 The Touch Language, Its Translations, and Mouse/Keyboard Equivalents 366 Edge Gestures 370 CSS Styles That Affect Input 371 What Input Capabilities Are Present? 372 Unified Pointer Events 374 Pointer Capture 377 Gesture Events 378 Multipoint Gestures 383 The Input Instantiable Gesture Sample 384 The Gesture Recognizer 386 Keyboard Input and the Soft Keyboard 388 Soft Keyboard Appearance and Configuration 389 Adjusting Layout for the Soft Keyboard 392 Standard Keystrokes 395 Inking 396 9 www.it-ebooks.info Geolocation 398 Sensors 401 What We’ve Just Learned 404 Chapter 10: Media 405 Creating Media Elements 406 Graphics Elements: Img, Svg, and Canvas (and a Little CSS) 408 Additional Characteristics of Graphics Elements 411 Some Tips and Tricks 412 Img Elements 412 Svg Elements 413 Canvas Elements 413 Video Playback and Deferred Loading 416 Disabling Screen Savers and the Lock Screen During Playback 418 Video Element Extension APIs 419 Applying a Video Effect 420 Browsing Media Servers 421 Audio Playback and Mixing 421 Audio Element Extension APIs 423 Playback Manager and Background Audio 424 The Media Control UI 428 Playing Sequential Audio 429 Playlists 431 Loading and Manipulating Media 433 Media File Metadata 434 Thumbnails 435 Common File Properties 435 Media-Specific Properties 436 Media Properties in the Samples 439 Image Manipulation and Encoding 442 Transcoding and Custom Image Formats 447 10 www.it-ebooks.info [...]... property, and event names The Windows team also made it possible to write native apps that employ a variety of presentation 26 www.it-ebooks.info technologies, including DirectX, XAML, and, in the case of apps written in JavaScript, HTML5 and CSS3 This means that Windows gives you—a developer already versed in HTML, CSS, and JavaScript standards—the ability to use what you know to write fully native Windows. .. elements, in short, allows you to build hybrid apps with both native and web content For full details on all these behaviors, see HTML and DOM API changes list and HTML, CSS, and JavaScript features and differences on the Windows Developer Center, http://dev .windows. com As with the app manifest, you should become good friends with the Developer Center Now all Store apps, whether hosted or not, run inside... that this ebook, along with the extensive resources on http://dev .windows. com, will help you to accomplish exactly that and to reimagine your own designs Who This Book Is For This book is about writing Windows Store apps using HTML5 , CSS3 , and JavaScript Our primary focus will be on applying these web technologies within the Windows 8 platform, where there are unique considerations, and not on exploring... Known: Marketing, Discoverability, and the Web .82 8 Connecting Your Website 82 9 Final Thoughts: Qualities of a Rock Star App .82 9 What We’ve Just Learned 83 1 About the Author 83 3 Survey Page 83 4 18 www.it-ebooks.info Introduction Welcome, my friends, to Windows 8! On behalf of the thousands of designers, program managers,... (wwahost.exe) that loads, renders, and executes HTML, CSS, and JavaScript, in much the same way that a browser runs a web application 4 “wwa” is an old acronym for Windows Store apps written in JavaScript; some things just stick… 34 www.it-ebooks.info The app host is more or less Internet Explorer 10 without the browser chrome—more in that your app runs on top of the same HTML/ CSS/ JavaScript engines as Internet... Toolkit 81 6 Testing with the Pseudo Language 82 1 Localization Wrap-Up 82 3 Releasing Your App to the World 82 4 Promotional Screenshots, Store Graphics, and Text Copy .82 4 Testing and Pre-Certification Tools 82 5 Onboarding and Working through Rejection 82 7 App Updates 82 7 17 www.it-ebooks.info... communication is blocked between Store apps (except in some debugging cases), between Store apps and desktop applications, and between Store apps and local services Apps can still communicate through the cloud (web services, sockets, etc.), and many common tasks that require cooperation between apps such as Search and Share—are handled through contracts in which those apps don’t need to know any details... bugs, along with conducting design, code, and performance reviews with members of the Windows engineering team As such, one of my goals with this book is to make that deep understanding available to many more developers, including you! What You'll Need (Can You Say “Samples”?) To work through this book, you should have Windows 8 installed on your development machine, along with the Windows SDK and tools... 797 User Language and Other Settings 7 98 Formatting Culture-Specific Data and Calendar Math .80 1 Sorting and Grouping 80 3 Fonts and Text Layout 80 3 Preparing for Localization 80 5 Part 1: Separating String Resources 80 5 Part 2: Structuring Resources for the Default Language 81 3 Creating Localized... interprocess communication and either blocks or brokers access to system resources The key characteristics of the app container are described as follows and illustrated in Figure 1-5: • All Store apps (other than some that are built into Windows) run within a dedicated environment that cannot interfere with or be interfered with other apps, nor can apps interfere with the system • Store apps, by default, get . Styling, and Data Binding 136 The Control Model for HTML, CSS, and JavaScript 137 HTML Controls 1 38 WinJS stylesheets: ui-light .css, ui-dark .css, and win-* styles 141 Extensions to HTML Elements. Commands 272 The App Bar 276 App Bar Basics and Standard Commands 2 78 Command Events 281 7 www.it-ebooks.info App Bar Events and Methods 282 Showing, Hiding, Enabling, and Updating Commands. and App Purchase 774 Listing and Purchasing In-App Products 776 Receipts 780 Accessibility 781 Screen Readers and Aria Attributes 784 The ARIA Sample 785 Handling Contrast Variations 788