ebook img

Programming Windows 8 Apps with HTML, CSS, and JavaScript PDF

537 Pages·2012·13.5 MB·English
Save to my drive
Quick download
Download
Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.

Preview Programming Windows 8 Apps with HTML, CSS, and JavaScript

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

See more

The list of books you might like

Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.