Free ebook: Programming Windows 8 Apps with HTML, CSS, and JavaScript

672611.indd Added April 10, 2014: The second edition of this ebook, updated for Visual Studio 2013 and Windows 8.1, is posted here!

 

Hello, Kraig Brockschmidt here. To help celebrate //build/, I’m delighted to announce the completion of Programming Windows 8 Apps with HTML, CSS, and JavaScript!

You can download the ebook in PDF format here: https://go.microsoft.com/FWLink/?Linkid=270056 (17.9 MB)

EPUB format is here: https://go.microsoft.com/FWLink/?Linkid=272592(37.3 MB)

MOBI format is here: https://go.microsoft.com/FWLink/?Linkid=272591(69.5 MB)

The ebook’s companion content is here: https://go.microsoft.com/FWLink/?Linkid=270057 (59.9 MB) (Note: An updated version of the companion content was made available on November 8, 2012, to fix a line of code.)

This free ebook provides comprehensive coverage of the platform for Windows Store apps. Since its second preview in August, we’ve added the remaining chapters on live tiles, notifications, background tasks, background transfers, networking, devices, printing, WinRT components, accessibility, localization, and the Windows Store itself. The final ebook contains 17 chapters. And of course all of the earlier chapters have also been reviewed and refined—over 800 pages in total, along with new and updated companion content!

It has been a wild ride these last few months to finish a book of this magnitude at the same time we were building up to the public release of Windows 8. At moments like these one would like to stop, let out a long “Whew!” and rest for a while. But truly, this is just the beginning! I primarily wrote this book for those developers who have yet to delve into Windows 8 but who will certainly be very interested in the platform as it gains momentum with consumers in the coming year especially. There’s going to be a great market out there for the wonderful apps you’ll be creating, and it is my delight to help serve as a guide to that territory.

As I wrote in an earlier post, I’ve endeavored in this ebook to coalesce the collective experience of app builders who have been working with this platform from the beginning, as well as the insights and understanding of the Windows engineering team itself. I’ve also made a focused effort to highlight the amazing resources that are available in the Windows SDK samples, because they contain thousands and thousands of lines of code that you won’t have to write yourself once you know where to look! I’m hoping that my efforts in doing that research will save you the trouble and help you write some great apps in a short amount of time.

I’ll also reiterate that while this book focused on writing apps with HTML, CSS, and JavaScript, many of the later chapters are really applicable to apps written in any language because they focus on the WinRT API rather than the details of the HTML/CSS presentation layer. Chapter 16, “WinRT Components,” in fact, focuses on using multiple languages within the same app, something that allows you to use the best language for any particular problem! Chapter 17, “Apps for Everyone: Localization, Accessibility, and the Windows Store,” also goes into detail on writing apps for global markets, employing tools like the Multilingual App Toolkit that isn’t specific to apps written in JavaScript.

In the end, then, there is much in this ebook that will be highly valuable to developers working on Windows 8 apps in whatever language. And again, the ebook is free, so there’s no excuse to not have it in your library.

Of course, there are many bits and details that have crossed my path since I had to hand off the text to Microsoft Press. In the months ahead, then, I will be sharing those on my blog, https://www.kraigbrockschmidt.com/luminarity, as well as in postings here with Microsoft Press. I look forward to the continued journey with you!

Below is the ebook’s Introduction, which gives you more details about the ebook. Enjoy, everybody!

Introduction

Welcome, my friends, to Windows 8! On behalf of the thousands of designers, program managers, developers, test engineers, and writers who have brought the product to life, I'm delighted to welcome you into a world of Windows Reimagined.

This theme is no mere sentimental marketing ploy, intended to bestow an aura of newness to something that is essentially unchanged, like those household products that make a big splash on the idea of "New and Improved Packaging!" No, Microsoft Windows truly has been reborn—after more than a quarter-century, something genuinely new has emerged.

I suspect—indeed expect—that you're already somewhat familiar with the reimagined user experience of Windows 8. You're probably reading this book, in fact, because you know that the ability of Windows 8 to reach across desktop, laptop, and tablet devices, along with the global reach of the Windows Store, will provide you with tremendous business opportunities, whether you're in business, as I like to say, for fame, fortune, fun, or philanthropy.

We'll certainly see many facets of this new user experience throughout the course of this book. Our primary focus, however, will be on the reimagined developer experience.

I don't say this lightly. When I first began giving presentations within Microsoft about building Windows Store apps, I liked to show a slide of what the world was like in the year 1985. It was the time of Ronald Reagan, Margaret Thatcher, and Cold War tensions. It was the time of VCRs and the discovery of AIDS. It was when Back to the Future was first released, Michael Jackson topped the charts with Thriller, and Steve Jobs was kicked out of Apple. And it was when software developers got their first taste of the original Windows API and the programming model for desktop applications.

The longevity of that programming model has been impressive. It's been in place for over a quarter-century now and has grown to become the heart of the largest business ecosystem on the planet. The API itself, known today as Win32, has also grown to become the largest on the planet! What started out on the order of about 300 callable methods has expanded three orders of magnitude, well beyond the point that any one individual could even hope to understand a fraction of it. I'd certainly given up such futile efforts myself.

So when I bumped into my old friend Kyle Marsh in the fall of 2009 just after Windows 7 had been released and heard from him that Microsoft was planning to reinvigorate native app development for Windows 8, my ears were keen to listen. In the months that followed I learned that Microsoft was introducing a completely new API called the Windows Runtime (or WinRT). This wasn't meant to replace Win32, mind you; desktop applications would still be supported. No, this was a programming model built from the ground up for a new breed of touch-centric, immersive apps that could compete with those emerging on various mobile platforms. It would be designed from the app developer's point of view, rather than the system's, so that key features would take only a few lines of code to implement rather than hundreds or thousands. It would also enable direct native app development in multiple programming languages. This meant that new operating system capabilities would surface to those developers without having to wait for an update to some intermediate framework. It also meant that developers who had experience in any one of those language choices would find a natural home when writing apps for Windows 8.

This was very exciting news to me because the last time that Microsoft did anything significant to the Windows programming model was in the early 1990s with a technology called the Component Object Model (COM), which is exactly what allowed the Win32 API to explode as it did. Ironically, it was my role at that time to introduce COM to the developer community, which I did through two editions of Inside OLE (Microsoft Press, 1993 and 1995) and seemingly endless travel to speak at conferences and visit partner companies. History, indeed, does tend to repeat itself, for here I am again!

In December 2010, I was part of the small team who set out to write the very first Windows Store apps using what parts of the new WinRT API had become available. Notepad was the text editor of choice, we built and ran apps on the command line by using abstruse Powershell scripts that required us to manually type out ungodly hash strings, we had no documentation other than oft-incomplete functional specifications, and we basically had no debugger to speak of other than the tried and true window.alert and document.writeln. Indeed, we generally worked out as much HTML, CSS, and JavaScript as we could inside a browser with F12 debugging tools, only adding WinRT-specific code at the end because browsers couldn't resolve those APIs. You can imagine how we celebrated when we got anything to work at all!

Fortunately, it wasn't long before tools like Visual Studio Express and Blend for Visual Studio became available. By the spring of 2011, when I was giving many training sessions to people inside Microsoft on building apps for Windows 8, the process was becoming far more enjoyable and exceedingly more productive. Indeed, while it took us some weeks in late 2010 to get even Hello World to show up on the screen, by the fall of 2011 we were working with partner companies who pulled together complete Store-ready apps in roughly the same amount of time.

As we've seen—thankfully fulfilling our expectations—it's possible to build a great app in a matter of weeks. I'm hoping that this ebook, along with the extensive resources on https://dev.windows.com, will help you to accomplish exactly that and to reimagine your own designs.

Who This Book Is For

This 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 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 of the more salient areas like the CSS grid, which is central to app layout, but otherwise I trust that you're capable of finding appropriate references for most everything else.

I'm also assuming that your interest in Windows 8 has at least two basic motivations. One, you probably want to come up to speed as quickly as you can, perhaps to carve out a foothold in the Windows Store sooner rather than later. Toward that end, I've front-loaded the early chapters with the most important aspects of app development along with "Quickstart" sections to give you immediate experience with the tools, the API, and some core platform features. On the other hand, you probably also want to make the best app you can, one that performs really well and that takes advantage of the full extent of the platform. Toward this end, I've also endeavored to make this book comprehensive, helping you at least be aware of what's possible and where optimizations can be made. (Note, though, that the Store itself is discussed in Chapter 17.)

Many insights have come from working directly with real-world developers on their real-world apps. As part of the Windows Ecosystem team, myself and my teammates have been on the front lines bringing those first apps to the Windows Store. This has involved writing bits of code for those apps and investigating bugs, along with conducting design, code, and performance reviews with members of the Windows engineering team. As such, one of my goals with this book is to make that deep understanding available to many more developers, including you!

What You'll Need (Can You Say “Samples”?)

To work through this book, you should have Windows 8 installed on your development machine, along with the Windows SDK and tools. All the tools, along with a number of other resources, are listed on Developer Downloads for programming Windows Store Apps. You’ll specifically need Microsoft Visual Studio Express 2012 for Windows 8. We’ll also acquire other tools along the way as we need them in this ebook. (Note that for all the screenshots in this book, I switched Visual Studio from its default “dark” color theme to the “light” theme, as the latter works better against a white page.)

Also be sure to download the “Sample app pack” listed on this page, or visit Windows 8 app samples and specifically download the SDK’s JavaScript samples. We'll be drawing from many—if not most—of these samples in the chapters ahead, pulling in bits of their source code to illustrate how many different tasks are accomplished.

One of my secondary goals in this book, in fact, is to help you understand where and when to use the tremendous resources in what is clearly the best set of samples I’ve ever seen for any release of Windows. You’ll often be able to find a piece of code in one of the samples that does exactly what you need in your app or that is easily modified to suit your purpose. For this reason I’ve made it a point to personally look through every one of the JavaScript samples, understand what they demonstrate, and then refer to them in their proper context. This, I hope, will save you the trouble of having to do that level of research yourself and thus make you more productive in your development efforts.

In some cases I’ve taken one of the SDK samples and made certain modifications, typically to demonstrate an additional feature but sometimes to fix certain bugs or demonstrate a better understanding that came about after the sample had to be finalized. I’ve included these modifications in
the companion content for this book, which you can download at https://go.microsoft.com/FWLink/?Linkid=270057.

That companion content also contains a few additional examples of my own, which I always refer to as “examples” to make it clear that they aren’t official SDK content. (I’ve also rebranded the modified samples to make it clear that they’re part of this book.) I’ve written these to fill gaps that the SDK samples don’t address, or to provide a simpler demonstration of a feature that a related sample shows in a more complex manner. You’ll also find many revisions of an app I call “Here My Am!” that we’ll start building in Chapter 2 and refine throughout the course of this book. This includes localizing it into a number of different languages by the time we reach the end.

Beyond all this, you’ll find that the Windows 8 samples gallery as well as the Visual Studio sample gallery also lets you search and browse additional projects that have been contributed by other developers—perhaps also you! (On the Visual Studio site, by the way, be sure to filter on Windows Store apps as the gallery covers all Microsoft platforms.) And of course, there will be many more developers who share projects on their own.

In this book I occasionally refer to posts on the Windows 8 App Developer blog, which is a good resource to follow. I also recommend following the Windows Store for Developers blog for any announcements related to what is effectively your place of business. And if you’re interested in the Windows 8 backstory—that is, how Microsoft approached this whole process of reimagining the operating system—check out the Building Windows 8 blog.

A Formatting Note

Throughout this book, identifiers that appear in code, such as variable names, property names, and API functions and namespaces, are formatted with a color and a fixed-point font. Here’s an example: Windows.Storage.ApplicationData.current. At times these fully qualified names—those that that include the entire namespace—can become quite long, so it’s necessary to occasionally hyphenate then across line breaks, as in Windows.Security.Cryptography.CryptographicBuffer.- ­convertString­ToBinary. (Imagine this breaking across lines in the ebook.) Generally speaking, I’ve tried to hyphenate after a dot or between whole words but not within a word. In any case, these hyphens are never part of the identifier except in CSS where hyphens are allowed (as in -ms-high-contrast-adjust) and with HTML attributes like aria-label or data-win-options.

Occasionally, you’ll also see identifiers that have a different color, as in datarequested. These specifically point out events that originate from Windows Runtime objects, for which there are a few special considerations for adding and removing event listeners in JavaScript, as discussed toward the end of Chapter 3. I make a few reminders about this point throughout the chapters, but the purpose of this special color is to give you a quick reminder that doesn’t break the flow of the discussion otherwise.

Acknowledgements

In many ways, this isn't my book—that is, it's not an account of my own experiences and opinions about writing apps for Windows 8. I'm serving more as a storyteller, where the story itself has been written by the thousands of people in the Windows team whose passion and dedication have been a constant source of inspiration. Writing a book like this wouldn't be possible without all the work that's gone into customer research; writing specs; implementing, testing, and documenting all the details; managing daily builds and public releases; and writing again the best set of samples I've ever seen for a platform. Indeed, the words in some sections come directly from conversations I've had with the people who designed and developed a particular feature. I'm grateful for their time, and I’m delighted to give them a voice through which they can share their passion for excellence with you.

A number of individuals deserve special mention for their long-standing support of this project. First to Chris Sells, with whom I co-authored the earliest versions of this book and who is now leading development efforts at Telerik. To Mahesh Prakriya, Ian LeGrow, Anantha Kancherla, Keith Boyd and their respective teams, with whom I've worked closely, and to Keith Rowe, Dennis Flanagan, and Ulf Schoo, under whom I've had the pleasure of serving.

Thanks also to Devon Musgrave at Microsoft Press, who put in many long hours editing my many long chapters, many times over. My direct teammates, Kyle Marsh, Todd Landstad, Shai Hinitz, Patrick Dengler, Lora Heiny, Leon Braginski, and Joseph Ngari have also been invaluable in sharing what they've learned in working with real-world partners. A special thanks goes to Kenichiro Tanaka of Microsoft Japan, for always being the first one to return a reviewed chapter to me and for joyfully researching different areas of the platform whenever I asked. Many bows to you, my friend! Nods also to others in our international Windows Ecosystem teams who helped with localizing the Here My Am! app for Chapter 17: Gilles Peingné, Sam Chang, Celia Pipó Garcia, Juergen Schwertl, Maarten Van De Bospoort, and Li-Qun Jia (plus Shai Hinitz on Hebrew).

The following individuals all contributed to this book as well, with chapter reviews, answers to my questions, deep discussions of the details, and much more. I’m grateful to all of you for your time and support:

Shakil Ahmed

Scott Dickens

Kishore Kotteri

Daniel Oliver

Sam Spencer

Chris Anderson

Tyler Donahue

Victoria Kruse

Jason Olson

Ben Srour

Erik Anderson

Brendan Elliott

Nathan Kuchta

Elliot H Omiya

Adam Stritzel

Axel Andrejs

Matt Esquivel

Elmar Langholz

Larry Osterman

Shijun Sun

Tarek Ayna

David Fields

Bonny Lau

Rohit Pagariya

Sou Suzuki

Art Baker

Erik Fortune

Travis Leithead

Ankur Patel

Simon Tao

Adam Barrus

Jim Galasyn

Chantal Leonard

Harry Pierson

Henry Tappen

Megan Bates

Gavin Gear

Cameron Lerum*

Steve Proteau

Chris Tavares

Tyler Beam

Derek Gephard

Brian LeVee

Hari Pulapaka

David Tepper

Ben Betz

Marcelo Garcia Gonzalez

Jianfeng Lin

Arun Rabinar

Sara Thomas

Johnny Bregar

Sunil Gottumukkala

Tian Luo

Matt Rakow

Ryan Thompson

John Brezak

Scott Graham

Sean Lyndersay

Ramu Ramanathan

Bill Ticehurst

John Bronskill

Ben Grover

David Machaj

Ravi Rao

Stephen Toub

Jed Brown

Paul Gusmorino

Mike Mastrangelo

Brent Rector

Tonu Vanatalu

Vincent Celie

Rylan Hawkins

Jordan Matthiesen

Ruben Rios

Jeremy Viegas

Raymond Chen

John Hazen

Ian McBurnie

Dale Rogerson

Nick Waggoner

Rian Chung

Jerome Holman

Jesse McGatha

Nick Rotondo

David Washington

Arik Cohen

Scott Hoogerwerf

Matt Merry

David Rousset

Sarah Waskom

Justin Cooperman

Stephen Hufnagel

Markus Mielke

George Roussos

Marc Wautier

Michael Crider

Sean Hume

Pavel Minaev

Jake Sabulsky

Josh Williams

Priya Dandawate

Mathias Jourdain

John Morrow

Perumaal Shanmugam

Lucian Wischik

Darren Davis

Damian Kedzierski

Feras Moussa

Edgar Ruiz Silva

Kevin Michael Woley

Jack Davis

Suhail Khalid

John Mullaly

Karanbir Singh

Charing Wong

Ryan Demopoulos

Daniel Kitchener

Jan Nelson*

Peter Smith

Michael Ziller

* For Jan and Cameron, a special acknowledgement for riding down from Redmond, Washington, to visit me in Portland, Oregon (where I was living at the time), and sharing an appropriately international Thai lunch while we discussed localization and multilingual apps.

I would also like to bid adieu to the extra pounds that have accompanied my body while I’ve been sitting at a computer far more than I should! I’m sure you’re looking forward to a resumption in our more usual fitness routines as I am.

Finally, special hugs to my wife Kristi and our young son Liam (now six), who have lovingly been there the whole time and who don't mind my traipsing through the house to my office either late at night or early in the morning.

Errata & Book Support

If you need support, email Microsoft Press Book Support at mspinput@microsoft.com.

Please note that product support for Microsoft software is not offered through the address above. Support for developers, however, can be found on the Windows Developer Center’s support section, especially in the Building Windows Store apps with HTML5/JavaScript forum. There is also an active community on Stack Overflow for the windows8 and winrt tags.

We Want to Hear from You

At Microsoft Press, your satisfaction is our top priority, and your feedback our most valuable asset. Please tell us what you think of this book at

https://aka.ms/tellpress

We read every one of your comments and ideas. Thanks in advance for your input!

Stay in Touch

Let’s keep the conversation going! We’re on Twitter: https://twitter.com/MicrosoftPress. And you can keep up with Kraig here: https://www.kraigbrockschmidt.com.