Metro Revealed: Building Windows 8 Apps with - mydigitalstructure

104 Pages·2012·2.69 MB·English

by  Adam Freeman

Metro Revealed

Building Windows 8 Apps with HTML5 and
JavaScript

This book is included in this form by Microsoft Corporation by arrangement and through permission
from Apress Media.
(cid:0)
(cid:0)
(cid:0)
(cid:0)
(cid:0)
(cid:0)
(cid:0)
Adam Freeman
Apress Media
Metro Revealed: Building Windows 8 apps with HTML5 and JavaScript
Copyright © 2012 by Adam Freeman
This work is subject to copyright. All rights are reserved by Apress Media, whether the whole or part of the material is
concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting,
reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval,
electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter
developed. Exempted from this legal reservation are brief excerpts in connection with reviews or scholarly analysis or
material supplied specifically for the purpose of being entered and executed on a computer system, for exclusive use
by the purchaser of the work. Duplication of this publication or parts thereof is permitted only under the provisions of
the Copyright Law of the Publisher's location, in its current version, and permission for use must always be obtained
from Springer. Permissions for use may be obtained through RightsLink at the Copyright Clearance Center. Violations
are liable to prosecution under the respective Copyright Law.
ISBN-13 (pbk): 978-1-4302-4488-2
ISBN-13 (electronic): 978-1-4302-4489-9
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every
occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion
and to the benefit of the trademark owner, with no intention of infringement of the trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not
identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary
rights.
While the advice and information in this book are believed to be true and accurate at the date of publication, neither
the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may
be made. The publisher makes no warranty, express or implied, with respect to the material contained herein.
President and Publisher of Apress: Paul Manning
Lead Editor: Ewan Buckingham
Technical Reviewer: Fabio Claudio Ferracchiati
Apress Editorial Board: Steve Anglin, Ewan Buckingham, Gary Cornell, Louise Corrigan, Morgan Ertel, Jonathan
Gennick, Jonathan Hassell, Robert Hutchinson, Michelle Lowman, James Markham, Matthew Moodie, Jeff
Olson, Jeffrey Pepper, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Gwenan Spearing, Matt
Wade, Tom Welsh
Coordinating Editor: Jennifer L. Blackwell
Copy Editor: Kim Wimpsett
Cover Designer: Anna Ishchenko
Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor,
New York, NY 10013. Phone 1-800-SPRINGER, fax [phone], e-mail [email protected], or visit
www.springeronline.com.
For information on translations, please e-mail [email protected], or visit www.apress.com.
Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. Ebook
versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales–eBook
Licensing web page at www.apress.com/bulk-sales.
Any source code or other supplementary materials referenced by the author in this text is available to readers at
www.apress.com. For detailed information about how to locate your book’s source code, go to www.apress.com/source-
code
Dedicated to my lovely wife, Jacqui Griffyth
–Adam Freeman
Contents at a Glance
Contents ................................................................................................... v
Related Titles From Apress ................................................................... viii
About the Author ...................................................................................... x
About the Technical Reviewer ................................................................. xi
Acknowledgments .................................................................................. xii
Chapter 1: Getting Started ........................................................................ 1
Chapter 2: Data and Bindings ................................................................. 17
Chapter 3: Application Controls ............................................................. 45
Chapter 4: Layouts and Tiles .................................................................. 81
Chapter 5: Life-Cycle Events ................................................................ 101

iv
Contents
Contents at a Glance ............................................................................... iv
Contents ................................................................................................... v
Related Titles From Apress ................................................................... viii
About the Author ...................................................................................... x
About the Technical Reviewer ................................................................. xi
Acknowledgments .................................................................................. xii
About This Book ..................................................................................................... xiii
What Do You Need to Know Before You Read This Book? ............................................... xiii
Do You Need to Know About HTML5? ............................................................................. xiii
What Software Do You Need for This Book? ................................................................... xiv
What Is the Structure of This Book? ............................................................................... xiv
Chapter 1: Getting Started ........................................................................ 1
Is There a Lot of Code in This Book? ................................................................................ 2
Getting Up and Running ........................................................................................... 2
Creating the Project ......................................................................................................... 3
Exploring the default.html File .......................................................................................... 5
Exploring the default.css File ........................................................................................... 7
Exploring the default.js File ............................................................................................ 11
Starting and Debugging a JavaScript Metro App .................................................. 13
Reloading the Metro Application ..................................................................................... 14
Debugging Metro Apps................................................................................................... 16
v
(cid:74) CONTENTS
Summary ............................................................................................................... 16
Chapter 2: Data and Bindings ................................................................. 17
Creating the JavaScript File .................................................................................. 18
Using Code Completion .................................................................................................. 20
Reducing Global Namespace Pollution ........................................................................... 20
Returning to the View Model .......................................................................................... 22
Using Data Binding ................................................................................................ 23
Using Basic Declarative Bindings ................................................................................... 24
Creating Dynamic Bindings ............................................................................................ 27
Updating an Observable Data Item ................................................................................. 30
Creating Observable Arrays ................................................................................... 32
Using Templates .................................................................................................... 36
Using the Template ........................................................................................................ 37
Responding to List Changes ........................................................................................... 39
Tracking the Selected Item ............................................................................................ 40
Applying the Template to the App ................................................................................... 41
Summary ............................................................................................................... 44
Chapter 3: Application Controls ............................................................. 45
Adding an AppBar .................................................................................................. 47
Implementing App Bar Buttons ....................................................................................... 51
Adding Flyouts ....................................................................................................... 52
Managing the Controls in a Flyout .................................................................................. 55
Using Pages ........................................................................................................... 57
Defining the HTML ......................................................................................................... 57
Creating the JavaScript Callback .................................................................................... 58
Loading and Displaying the HTML .................................................................................. 59
Loading a Complete HTML Document .................................................................... 60
vi
(cid:74)(cid:0)CONTENTS
Switching Between Pages .............................................................................................. 63
Displaying External Content .................................................................................. 65
Adding the Callback ....................................................................................................... 65
Showing the Page .......................................................................................................... 67
Checking Manifest Permissions ..................................................................................... 68
Summary ............................................................................................................... 69
Chapter 4: Layouts and Tiles .................................................................. 81
Dealing with Metro Layouts ................................................................................... 82
Snapping and Filling with CSS ........................................................................................ 82
Snapping and Filling with JavaScript .............................................................................. 84
Using Tiles and Badges .......................................................................................... 86
Improving Static Tiles..................................................................................................... 87
Updating Tiles ................................................................................................................ 88
Updating Wide Tiles ....................................................................................................... 93
Applying Badges .................................................................................................... 96
Summary ............................................................................................................... 99
Chapter 5: Life-Cycle Events ................................................................ 101
Dealing with the Metro Application Life Cycle ..................................................... 102
Correcting the Visual Studio Event Code ....................................................................... 102
Testing the Life-Cycle Events ....................................................................................... 104
Adding a Background Activity ....................................................................................... 105
Implementing the Search Contract ...................................................................... 112
Declaring Support for the Contract ............................................................................... 113
Handling the Search ..................................................................................................... 113
Implementing the Activated Event Handler ................................................................... 114
Testing the Search Contract ......................................................................................... 117
Summary ............................................................................................................ 11 8
vii
Related Titles from Apress
Apress titles are available in print and electronic form at computer booksellers and electronic
bookstores around the world. Many of the titles listed here are available or will be available soon on
Apress.com on the Apress Alpha book program. Therein you can purchase a book, get chapters as they
are developed and in the end you will get the final ebook – all for the price of a normal Apress ebook. It’s
a great way to get started as our authors create the books. Simply go to the book’s page and click the
yellow Buy Alpha Book button. Thereafter, you can go in at any time and download the latest additions
to your ebook. Apress will notify you upon publication when the final ebook is available.

Upcoming publications include:

Available in May.

Metro Revealed: Building Windows 8 apps Pro HTML5 Performance
with XAML and C# 978-1-4302-4524-7

Available in June. Beginning HTML5 and CSS3

Pro C# and the .NET 4.5 Framework 6th Foundation HTML5 with CSS3
Edition
Pro JavaScript for Web Apps
Available this spring.
Beginning ASP.NET 4.5 in C#
WinRT Revealed
Beginning ASP.NET 4.5 in VB
Pro WinRT using C# and XAML
978-1-4302-4515-5 Ultra-Fast ASP.NET 4.5 2nd Edition

Beginning Silverlight 5 in C# 4 Edition Beginning ASP.NET 4.5 Databases 3rd

Beginning C# 2012 Databases 2nd Edition
Available this summer.
Metro Style Application Recipes for Illustrated C# 2012 4 Edition
Windows 8 in C#
Introducing .NET 4.5 2nd Edition
Pro Windows 8 Development with XAML
and C# Pro WF 4.5
978-1-4302-4047-1
The Windows 8 Power Users Guide
Pro Application Lifecycle Management
with Visual Studio 2nd Edition Pro SQL Azure 2nd Edition

viii
(cid:74)(cid:0)RELATED TITLES FROM APRESS
Available this fall. Related published publications include:
Beginning Metro Application Development
in Windows 8 –XAML Edition Windows Azure Platform 2nd Edition
978-1-4302-4566-7
The Definitive Guide to HTML5
Pro Visual Studio 11
HTML5 Mastery
Beginning Windows 8 App Development
978-1-4302-4563-6 CSS Mastery 2nd Edition

Pro HTML5 with Visual Studio 2012 DOM Scripting 2nd Edition
978-1-4302-4638-1
Pro Business Metro Style Apps in XAML Pro .NET Best Practices

Pro HTML5 Application Development Pro Business Applications with Silverlight 5
2nd Edition
Pro ASP.NET MVC 4 4 Edition.
Pro Silverlight 5 in C# 4 Edition
Pro ASP.NET 4.5 in C# 5th Edition
Pro Silverlight 5 in VB 4 Edition
Pro ASP.NET 4.5 in VB 5th Edition
Beginning Kinect Programming with the
JavaScript Programmer’s Reference Microsoft Kinect SDK
978-1-4302-4629-9
Meet the Kinect
Pro WPF in C# 2012 4 Edition
Hacking the Kinect
Pro Windows 8 Development with HTML5
and JavaScript Pro Visual Studio LightSwitch 2011
Development
Pro .Net Performance
978-1-4302-4458-5 Pro NuGet

Beginning Windows Phone App
Development

Pro ASP.NET MVC 3 Framework 3rd
Edition

Pro LINQ

Pro .NET 4 Parallel Programming in C#

ix