Build Windows 8 Apps with HTML5 and JavaScript Dino Esposito Francesco Esposito Copyright © 2013 by Dino Esposito 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-7594-0 1 2 3 4 5 6 7 8 9 LSI 8 7 6 5 4 3 Printed and bound in the United States of America. Microsoft Press books are available through booksellers and distributors worldwide. If you need support related to this book, email Microsoft Press Book Support at [email protected]. Please tell us what you think of this book at http://www.microsoft.com/learning/booksurvey. 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. The example companies, organizations, products, domain names, email addresses, logos, people, places, and events depicted herein are fictitious. No association with any real company, organization, product, domain name, email address, logo, person, place, or event is intended or should be inferred. 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 and Developmental Editor: Russell Jones Production Editor: Christopher Hearse Editorial Production: S4Carlisle Publishing Services Technical Reviewer: Russ Mullen Indexer: Angela Howard Cover Design: Jake Rae Cover Composition: Karen Montgomery Illustrator: S4Carlisle Publishing Services To Michela and Silvia, who are stronger and smarter than they think. —DINO To Grandma Concetta, for providing free calories through amazing quantities of unbeatable homemade prosciutto. —FRANCESCO Contents at a glance Introduction xiii CHAPTER 1 Using Visual Studio 2012 Express edition for Windows 8 1 CHAPTER 2 Making sense of HTML5 23 CHAPTER 3 Making sense of CSS 47 CHAPTER 4 Making sense of JavaScript 73 CHAPTER 5 First steps with Windows 8 development 97 CHAPTER 6 The user interface of Windows Store applications 121 CHAPTER 7 Navigating through multimedia content 147 CHAPTER 8 States of a Windows 8 application 177 CHAPTER 9 Integrating with the Windows 8 environment 201 CHAPTER 10 Adding persistent data to applications 235 CHAPTER 11 Working with remote data 265 CHAPTER 12 Accessing devices and sensors 291 CHAPTER 13 Adding Live tiles 319 CHAPTER 14 Publishing an application 335 Index 351 Contents Introduction ....................................................xiii Chapter 1 Using Visual Studio 2012 Express edition for Windows 8 1 Getting ready for development .....................................2 The software you need. 2 Configuring Visual Studio 2012 ................................5 Start playing with Windows 8 apps ............................9 The “Hello Windows 8” application . 10 Adding a bit more action ....................................16 Summary. .21 Chapter 2 Making sense of HTML5 23 Elements of a webpage . 24 Building the page layout with HTML5 .........................24 Miscellany of other new elements. .32 Collecting data ..................................................34 Adjusting input fields .......................................35 Form submission ...........................................38 Multimedia elements .............................................41 The audio element. .41 The video element ..........................................42 Summary. .45 What do you think of this book? We want to hear from you! Microsoft is interested in hearing your feedback so we can continually improve our books and learning resources for you. To participate in a brief online survey, please visit: microsoft.com/learning/booksurvey vii Chapter 3 Making sense of CSS 47 Styling a webpage ...............................................47 Adding CSS information to pages .............................48 Selecting elements to style ..................................51 Basic style commands ............................................55 Setting colors ..............................................55 Controlling text. .58 HTML display modes ........................................60 Spacing and the boxing model ...............................63 Advanced CSS scenarios ..........................................66 CSS pseudo-classes .........................................66 Media Queries .............................................70 Summary. .71 Chapter 4 Making sense of JavaScript 73 Language basics .................................................74 The JavaScript type system. 74 Dealing with variables .......................................77 Dealing with objects ........................................79 Dealing with functions ......................................81 Organizing your own JavaScript code ...............................89 Linking JavaScript code to pages .............................89 Practices and habits .........................................92 Summary. .94 Chapter 5 First steps with Windows 8 development 97 The Windows 8 Runtime (WinRT) ..................................98 Windows Store apps and other apps ..........................98 An overview of the WinRT API ...............................100 The Windows Store app user interface ............................102 Aspects of the Windows 8 UI ................................102 Inspiring principles of the Windows 8 UI ......................104 viii Contents Components for the presentation layer. 107 Data binding ..............................................112 Understanding the application’s lifecycle ..........................116 States of a Windows Store application .......................116 Background tasks ..........................................119 Summary. .120 Chapter 6 The user interface of Windows Store applications 121 Foundation of Windows Store applications .........................121 Defining the layout of the application .......................122 Application attributes ......................................129 Getting serious with the TodoList application .......................132 Building an interactive form .................................133 Putting data into the form ..................................138 Summary. .146 Chapter 7 Navigating through multimedia content 147 Foundation of page navigation ...................................147 The navigation model of Windows Store applications ..........147 Inside the Navigation App template ..........................149 Building a gallery of pictures .....................................152 Introducing the FlipView component .........................152 Navigating to a detail page .................................156 Zooming the image in and out ..............................161 Building a video clip gallery ......................................165 Introducing the SemanticZoom component ...................165 Dealing with video. 172 Summary. .174 Chapter 8 States of a Windows 8 application 177 States of a Windows Store application .............................177 Full-screen view states. .178 Contents ix Snapping applications ......................................179 Making the application reactive .............................182 Towards an adaptive layout ......................................188 General principles of snapped and filled views ................188 Fluid layouts ..............................................189 Summary. .200 Chapter 9 Integrating with the Windows 8 environment 201 Contracts and common tasks .....................................202 Aspects of Windows 8 contracts .............................202 Contracts and extensions ...................................204 Consuming the File picker contract ................................206 Choosing a file to save data. 207 Choosing a file to load data .................................214 The Share contract ..............................................216 Publishing an application’s data .............................216 Adding share source capabilities to TodoList ..................217 Providing a Settings page ........................................224 Populating the Settings charm ..............................224 Creating a functional Settings page ..........................227 Summary. .233 Chapter 10 Adding persistent data to applications 235 Persisting application objects .....................................235 Making Task objects persistent ..............................236 Choosing a serialization format ..............................240 Creating Task objects from files .............................243 Using the application’s private storage. 247 Storage options in Windows 8 ..............................248 Creating tasks in the isolated storage ........................251 Summary. .264 x Contents Chapter 11 Working with remote data 265 Working with RSS data ...........................................265 Getting remote data .......................................266 Parsing and displaying downloaded data .....................272 Drilling down into data. 276 Working with JSON data .........................................278 Laying out a Flickr viewer ...................................279 Enhancing the application ..................................285 Summary. .290 Chapter