Programming Windows® 8 Apps with HTML, CSS, and JavaScript FIRST 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 ....................................................................................................... 6 Who This Book Is For .......................................................................................................................................................................... 7 What You'll Need ................................................................................................................................................................................. 8 Acknowledgements ............................................................................................................................................................................. 8 Errata & Book Support ....................................................................................................................................................................... 9 We Want to Hear from You ............................................................................................................................................................. 9 Stay in Touch.......................................................................................................................................................................................... 9 Chapter 1: The Life Story of a Metro Style App: Platform Characteristics of Windows 8 ......................................................... 10 Leaving Home: Onboarding to the Store ................................................................................................................................. 11 Discovery, Acquisition, and Installation ..................................................................................................................................... 14 Playing in the Sandbox: The App Container ........................................................................................................................... 17 Different Views of Life: View States and Resolution Scaling ............................................................................................. 21 Those Capabilities Again: Getting to Data and Devices ..................................................................................................... 24 Taking a Break, Getting Some Rest: Process Lifecycle Management ............................................................................ 26 Remembering Yourself: App State and Roaming ................................................................................................................. 28 Coming Back Home: Updates and New Opportunities ...................................................................................................... 32 And, Oh Yes, Then There’s Design .............................................................................................................................................. 34 Chapter 2: Quickstart ...................................................................................... 35 A Really Quick Quickstart: The Blank App Template ........................................................................................................... 35 Blank App Project Structure ...................................................................................................................................................... 38 QuickStart #1: Here My Am! and an Introduction to Blend for Visual Studio .......................................................... 42 Design Wireframes ........................................................................................................................................................................ 43 Create the Markup ........................................................................................................................................................................ 45 Styling in Blend............................................................................................................................................................................... 47 Adding the Code ........................................................................................................................................................................... 53 Extra Credit: Receiving Messages from the iframe .......................................................................................................... 65 The Other Templates ........................................................................................................................................................................ 66 Fixed Layout Template ................................................................................................................................................................ 67 Navigation Template ................................................................................................................................................................... 67 Grid Template ................................................................................................................................................................................. 68 3 Split Template .................................................................................................................................................................................68 What We’ve Just Learned ................................................................................................................................................................69 Chapter 3: App Anatomy and Page Navigation ........................................... 70 Local and Web Contexts within the App Host ........................................................................................................................71 Referencing Content from App Data: ms-appdata ..........................................................................................................75 Sequential Async Operations: Chaining Promises .................................................................................................................78 Debug Output, Error Reports, and the Event Viewer ......................................................................................................81 App Activation .....................................................................................................................................................................................83 Branding Your App 101: The Splash Screen and Other Visuals ..................................................................................83 Activation Event Sequence.........................................................................................................................................................86 Activation Code Paths ..................................................................................................................................................................87 WinJS.Application Events ............................................................................................................................................................90 Extended Splash Screens .............................................................................................................................................................91