It’s been a huge year for both the book and the platform that it supports. With the general availability of Windows 8.1 earlier this month (October 2013), the capabilities of the Windows platform have grown dramatically, which is clearly in evidence by the expanded size of this second edition Even in this preview (12 chapters and three appendices), the book is not far from the length of the first edition, and there are still eight chapters (and one appendix) to go. Nevertheless, it’s my pleasure to provide you with a comprehensive volume on Microsoft’s latest operating system. This second preview takes us through nearly all of the Windows Library for JavaScript, which includes new controls like the Hub and Nav Bar. It also delves quite a bit into core WinRT APIs, such as those for working with HTTP requests, app state, and files. The bulk of WinRT coverage is yet to come in the final edition, as the remaining chapters include media, animations, contracts, live tiles, notifications, background tasks, device access, WinRT components, accessibility, localization, and the Windows Store. Fortunately, much is still the same as it was in Windows 8, and you can refer to the first edition of this book as a basis.
Programming/Windows ISBN: 978-0-7356-7176-8 About the Author Charles Petzold has been writing about Windows programming for 25 years. A Windows Pioneer Award winner, Petzold is author of the classic Programming Windows, the widely acclaimed Code: The Hidden Language of Computer Hardware and Software, Programming Windows Phone 7, and more than a dozen other books. Writing Windows 8 Apps with C# and XAML Like Windows itself, this classic book has been reimagined for a new world of programming and user experiences. Guided by developer legend Charles Petzold, Programming Windows, Sixth Edition teaches how to use your existing C# skills with XAML and the Windows Runtime to create full-screen, touch apps for Windows 8. Master the elementals • Create and initialize objects with code or XAML • Handle user-input events such as taps • Manage and experiment with dynamic layout • Visually redene a control’s appearance • Create Windows Runtime libraries • Use MVVM for data binding and commanding • Work with asynchronous methods; write your own • Animate transitions and create 2D and 3D effects • Manage resolution, scaling, and navigation Extend your skills and apps • Handle pointer, manipulation, tap, and hold events • Manipulate bitmaps and rich text • Work with GPS and orientation sensors • Call Win32 ® and DirectX ® functions • Enable share, search, and print microsoft.com/mspress U.S.A. $59.99 Canada $62.99 [Recommended] Get C# and C++ code samples Ready to download at: http://go.microsoft.com/FWLink/?Linkid=277058 About the Sixth Edition • Completely rewritten for Windows 8 • Focuses on creating apps using C#, XAML, and the Windows Runtime • Expertly teaches essential skills in Part 1: Elementals • Rounds out your Windows 8 education in Part 2: Specialties • Provides code samples in both C# and C++ edition Petzold Programming Windows Writing Windows 8 Apps with C# and XAML Sixth Edition Programming Windows Kraig Brockschmidt Programming Windows Store Apps with HTML, CSS, and JavaScript Second Edition Professional SECOND PREVIEW spine = 2.07” 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 1 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 2 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 3 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 4 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 5 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 6 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 7 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 8 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 [...]... property, and event names 18 The Windows team also made it possible to write native apps that employ a variety of presentation 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 Store apps using... application with HTML, CSS, and JavaScript, you typically end up with a number of different HTML pages and navigate between them using tags or by setting document.location 32 This is all well and good and works in a Windows Store app, but it has several drawbacks One is that navigation between pages means reloading script, parsing a new HTML document, and parsing and applying CSS again Besides... details about each other 28 FIGURE 1-5 Process isolation for Windows Store apps Sidebar: Mixed Language Apps Windows Store apps written in JavaScript can access only WinRT APIs directly Apps or libraries written in C#, Visual Basic, and C++ also have access to a subset of Win32 and NET APIs, as documented on Win32 and COM for Windows Store apps Unfair? Not entirely, because you can write a WinRT component... 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 need not know any details about... not allowing web pages to drive the app 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 All Store apps, whether hosted or not, run inside an environment called the app container This... Windows Store app Leaving Home: Onboarding to the Windows Store For Windows Store apps, there’s really one port of entry into the world: customers always acquire, install, and update apps through the Windows Store Developers and enterprise users can side-load apps, but for the vast majority of the people you care about, they go to the Windows Store and nowhere else This obviously means that an app—the... what you know of standards-based web technologies HTML, CSS, and JavaScript to build great Windows Store apps for Windows 8.1 In the next chapter we’ll focus on the basics of a working app and the tools used to build it Then we’ll look at fundamentals like the fuller anatomy of an app, incorporating web content, using controls and collections, layout, commanding, state management, and input (including... offer you this second preview of Programming Windows Store Apps in HTML, CSS, and JavaScript (Second Edition) It’s been a huge year for both the book and the platform that it supports With the general availability of Windows 8.1 earlier this month (October 2013), the capabilities of the Windows platform have grown dramatically, which is clearly in evidence by the expanded size of this second edition!... I’m sure!) In a hotel, on the other hand, guests have access only to a very small part of the whole structure, and even if they trash their room, the hotel can clean it out and reset everything as if the guest was never there Sidebar: What Is the Windows Library for JavaScript? The HTML, CSS, and JavaScript code in a Windows Store app is only parsed, compiled, and rendered at run time (See the “Playing... 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.1 platform, where there are unique considerations, and not on exploring the details of those web technologies themselves For the most part, then, I'm assuming that you're already at least somewhat conversant with these standards We will cover some . your Windows 8 education in Part 2: Specialties • Provides code samples in both C# and C++ edition Petzold Programming Windows Writing Windows 8 Apps with C# and XAML Sixth Edition Programming. Edition Programming Windows Kraig Brockschmidt Programming Windows Store Apps with HTML, CSS, and JavaScript Second Edition Professional SECOND PREVIEW spine = 2.07” SECOND PREVIEW This. anniversary of this book’s first edition, I’m delighted to offer you this second preview of Programming Windows Store Apps in HTML, CSS, and JavaScript (Second Edition) . It’s been a huge year