www.it-ebooks.info
www.it-ebooks.info
Windows
®
8
Application
Development
with HTML5
FOR
DUMmIES
‰
www.it-ebooks.info
www.it-ebooks.info
by Bill Sempf
Windows
®
8
Application
Development
with HTML5
FOR
DUMmIES
‰
www.it-ebooks.info
Windows
®
8 Application Development with HTML5 For Dummies
®
Published by
AUTHOR SHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION
OR WEBSITE IS REFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE OF FUR-
THER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFOR-
MATION THE ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE.
FURTHER, READERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE
CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ.
For general information on our other products and services, please contact our Customer Care
Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002.
For technical support, please visit www.wiley.com/techsupport.
Wiley publishes in a variety of print and electronic formats and by print-on-demand. Some material
included with standard print versions of this book may not be included in e-books or in print-on-demand.
If this book refers to media such as a CD or DVD that is not included in the version you purchased, you
may download this material at . For more information about Wiley products,
visit www.wiley.com.
Library of Congress Control Number: 2012950492
ISBN 978-1-118-17335-0 (pbk); ISBN 978-1-118-23995-7 (ebk); ISBN 978-1-118-26466-9 (ebk);
ISBN 978-1-118-22704-6 (ebk)
Manufactured in the United States of America
10 9 8 7 6 5 4 3 2 1
www.it-ebooks.info
About the Author
Husband. Father. Author. Software composer. Brewer. Lockpicker.
Ninja. Insurrectionist. Honorary blue teamer. Lumberjack. All
words that have been used to describe Bill Sempf recently. I write
some software, and this isn’t my first book. Pleased to meet you.
www.it-ebooks.info
www.it-ebooks.info
Dedication
Thank you to my ever-patient family: my beautiful, brilliant wife,
Gabrielle, amazing son, Adam, and incredible daughter, Kaelan.
www.it-ebooks.info
Publisher’s Acknowledgments
We’re proud of this book; please send us your comments at .
For other comments, please contact our Customer Care Department within the U.S. at 877-762-2974,
outside the U.S. at 317-572-3993, or fax 317-572-4002.
Some of the people who helped bring this book to market include the following:
Acquisitions and Editorial
Project Editor: Linda Morris
Acquisitions Editor: Katie Feltman
Copy Editor: Linda Morris
Technical Editor: Mike Spivey
Editorial Manager: Jodi Jensen
Editorial Assistant: Leslie Saxman
Sr. Editorial Assistant: Cherie Case
Cover Photo: © Marjan Veljanoski /
iStockphoto
Cartoons: Rich Tennant (www.the5thwave.com)
Composition Services
Project Coordinator: Katie Crocker
Layout and Graphics: Jennifer Creasey,
Joyce Haughey, Corrie Niehaus
Proofreaders: Cara Buitron, John Greenough
Indexer: Potomac Indexing, LLC
Publishing and Editorial for Technology Dummies
Richard Swadley, Vice President and Executive Group Publisher
Andy Cummings, Vice President and Publisher
Mary Bednarek, Executive Acquisitions Director
Mary C. Corder, Editorial Director
Publishing for Consumer Dummies
Kathleen Nebenhaus, Vice President and Executive Publisher
www.it-ebooks.info
Table of Contents
Introduction 1
Who Should Read This Book 1
About This Book 2
Foolish Assumptions 3
How to Use This Book 3
How This Book Is Organized 3
Part I: Discovering Windows 8 4
Part II: Working with the Externals 4
Part III: Digging into the Internals 4
Part IV: Getting Ready to Publish 4
Part V: The Part of Tens 4
Icons Used in This Book 4
Conventions Used in This Book 5
Where to Go from Here 6
Part I: Discovering Windows 8 7
Chapter 1: Introducing Windows 8 9
Finding the Path 10
Figuring out where Microsoft is headed 10
Building a simple Hello World app 12
Comparing programs from yesterday 17
Treating Users Right 20
Setting some design principles 20
Using the Design Checklist 21
Convention over conguration 22
Embracing the Developer Experience 22
Using the best developer tools on the planet 23
Folding in WinRT 24
Chapter 2: Embracing Windows 8 Style 25
Provide what the user needs 51
Design for touch 51
Enable multitasking 53
Assume connectivity 54
Taking Advantage of the Development Environment 55
Sticking with Visual Studio 55
Picking a language 56
Touring Expression Blend 57
Making the Change from Windows Development 60
Learning the new SDKs 60
Driving user condence 60
Taking the next steps 61
Chapter 4: Setting Up a Windows 8 App 63
Getting Started in Visual Studio 63
Project types 64
Making a new project 65
Solution layout 67
Building Different Layouts 69
Grid layout 69
Split layout 70
Fixed layout 74
Getting Around 74
Navigation 75
Loading fragments 76
Adding fragments 77
www.it-ebooks.info
xiii
Table of Contents
Part II: Working with the Externals 81
Chapter 5: Using Everyday Controls 83
Setting single values using the DOM 138
Using the declarative binding in WinJS 139
Listing Data 142
Dealing with collections of objects 143
Using the ListView 144
FlipView 148
Grouping, Sorting, and Selecting 149
Group control 149
Single and multiselect 151
Built-in animations 152
Working with Groups Using Semantic Zoom 153
Using Semantic Zoom 154
Considering the technical details 156
www.it-ebooks.info
Windows 8 Application Development with HTML5 For Dummies
xiv
Chapter 8: Building Tiles and Using Notications 159
Using Basic Tiles 160
Core to the Windows 8 design language 161
Tile capabilities 161
Tile expectations 162
Building Live Tiles 163
Conguring a basic tile 163
Publishing with the templates 165
Rendering content in the app’s personality 167
Getting Notied 168
Making notications part of your tile 169
Getting a message on the queue 170
Creating Secondary Tiles 171
Getting the idea of a secondary tile 172
Building Different Layouts 209
The Grid Application template 210
List layout 212
Communicating with the Internet 214
The original XMLHttpRequest 215
XHR: Microsoft’s little secret 216
A promise kept 217
Handling Data 219
Setting the stage 219
Calling the feed 220
Formatting the results 222
Chapter 11: Managing the Process Lifecycle 227
Handling App Suspension 228
Switching tasks 228
Dealing with suspension and termination 231
Registering a resume event 233
Making Your App Look Alive 234
Dealing with application launch 235
Doing some things after suspension 236
Running background tasks 239
Using live tiles 242
Chapter 12: Keeping Local Storage 243
Putting Settings Where You Can Get Them 244
Organizing local settings 244
Shh! Roaming settings, too 246
Keeping more stuff with ApplicationDataContainer 246
Keeping settings in les 249
Giving the user access with the Settings charm 249
Filing Things Away for Later 252
Using the le system 252
Surviving testing 296
Managing Your App’s Existence 297
Chapter 15: Going to the Cloud 299
Touring Azure 300
Announcing Windows Azure Mobile Services 301
Getting what you need to get started 301
Creating a new mobile service 302
Constructing a database 303
Connecting your Windows Store app 304
Running your app with a service 306
Taking it to the next level 307
Pushing Data to the User 309
Getting Authenticated 310
Chapter 16: Making Money with Your App 311
Adding Ads 312
Designing for advertising 312
The Windows 8 Ads SDK 314
Using other ad networks 318
Handling In-App Purchasing 320
Planning for app expansion 321
Getting your app ready for purchasing content 322
Adding the purchase UI 324
Setting up the Store for your app 325
www.it-ebooks.info
xvii
Table of Contents
Part V: The Part of Tens 327
Chapter 17: Ten App Ideas 329
Publishing Social Content 329
Integrating Planning Tools 330
“Sure,” I said. “How different could it be from VB6, right?”
Well, those of you old enough to remember the .NET revolution will know
how ludicrous that statement is. VB.NET changed everything, and I spent
four weeks not sleeping as I learned not only a new language and framework,
but a new way of thinking about how XML web services are implemented in
the Microsoft world.
The book you are holding represents a similar revolution.
This time, the change is in the venerable Win32 stack. WinRT is a new core
Windows library, 15 years overdue. It gives the developer unprecedented
control over the hardware for which they are coding. It, however, comes at
something of a cost.
To code for WinRT and the new Windows 8 desktop apps, you need to think
about the user experience like never before. Microsoft has followed in the
footsteps of Google and Apple, defining how apps interact with the user, and
how a user interacts with apps.
Sure, you can still write the old Forms-style apps. In fact, you can still write
a VB6 app and expect it to run on Windows 8. But if you want the app to
appear in the Microsoft Store for instant access by a cool billion users, you
have to play by the rules.
Fortunately for you, the rules are all in this book.
Who Should Read This Book
Windows 8 is a reimagining of Windows. Specifically, it doesn’t have any
Windows. How about that?
www.it-ebooks.info
2
Windows 8 Application Development with HTML5 For Dummies
Clearly, the mobile revolution has hit home. Although there are still 10
Windows PCs sold for every iPad, there are still a lot of iPads out there, and
given a choice, most people would rather use a tablet than a PC.
Microsoft has been writing software for tablets since Windows XP. The pen
3
Introduction
Foolish Assumptions
In order to build software for Windows 8, I assume you have (at a minimum)
Visual Studio 2012 Express. This software is the basis for the whole book and
is used in all of the examples.
The good news is that it’s free. Yup. Microsoft gives away the tools you need
to write Windows Store apps. You can just go download it at msdn.microsoft.
com/vstudio/express.
The other thing you need to use this book is an understanding of HTML, CSS,
and JavaScript. I do not teach HTML5 in this book at all. If you need help with
it, I recommend HTML, XHTML, & CSS All-In-One For Dummies, 2nd Edition, by
Andy Harris (published by John Wiley and Sons, Inc.) for a guide to building
HTML websites. From there, I’ll take you the rest of the way to Windows 8.
Oh, one other thing. You’ll need a willingness to learn and a little patience. You
might be a web developer, or a mobile developer, or a .NET developer, or just
someone with a good idea for an app. It’s tough to write on a technical topic
with so many potential audiences, so sometimes you’ll have to bear with me.
How to Use This Book
This is my tenth For Dummies book, and the third I have written from scratch.
This time, I think I have made sure that you can turn to any chapter in the
book and start working. Try it.
The goal of the For Dummies series is to make you successful. Striving toward
that goal, this book was designed to make sure that you can use the index or
Table of Contents and just turn to the page that interests you. Then you can
start working.
That said, I recommend reading from start to finish. There is a lot to learn about
Windows 8. This book won’t teach you everything, but it will give you a really
good backlog of information. If you read it from front to back, you will have a
important information:
www.it-ebooks.info
5
Introduction
This scary-sounding icon flags technical information that you can skip on your
first pass through the book.
The Tip icon highlights a point that can save you a lot of time and effort.
Remember this information. It’s important.
Try to retain any Warning information you come across, too. This one can
sneak up on you when you least expect it and generate one of those extremely-
hard-to-find bugs. Or, it may lead you down the garden path to La-La Land.
Conventions Used in This Book
Throughout this book, I use several conventions to help you get your bear-
ings. Terms that aren’t “real words,” such as the names of program variables,
appear in this font to minimize confusion. Text you should type is in bold.
New terms are in italics. Program listings are offset from the text this way:
use System;
namespace MyNameSpace
{
public class MyClass
{
}
}
Each listing is followed by a clever, insightful explanation. Complete programs
are included on the website for your viewing pleasure; small code segments
are not.
When you see a command arrow, as in the instruction “Choose File➪Open
With➪Notepad,” you simply choose the File menu option. Then, from the
menu that appears, choose Open With. Finally, from the resulting submenu,