Windows 8 Apps with HTML5 and JavaScript Unleashed

Formerly a Senior Program Manager at Microsoft, Stephen Walther now runs his own consulting and training company, www.SuperexpertTraining.com. He flies to companies and provides hands-on training on building Windows Store apps. Stephen was completing his Ph.D. at MIT and teaching classes on metaphysics at MIT and Harvard when he abruptly realized that there is no money in metaphysics. He dropped out to help found two successful Internet startups. He created the Collegescape website, a website used by more than 200 colleges including Stanford, Harvard, and MIT for online college applications (sold to ETS). He also was a founder of CityAuction, which was one of the first and largest auction websites (sold to CitySearch).

Introduction   1

1 Building Windows Store Apps   5

What Is a Windows Store App?    5

Microsoft Design Style Principles   6

Common Features of Windows Store Apps   8

Creating Your First Windows Store App   13

Creating the Visual Studio Project  13

Declaring App Capabilities   15

Creating the HTML Page   16

Creating the Style Sheet   17

Creating the JavaScript File  

Running the App   20

Elements of a Windows Store App   21

JavaScript   21

HTML5   21

Cascading Style Sheets 3     22

Windows Runtime   22

Windows Library for JavaScript   23

What about jQuery?    23

Building Windows Store Apps with Visual Studio   26

Windows Store App Project Templates   26

Running a Windows Store App   34

Debugging a Windows Store App  35

Using the Visual Studio JavaScript Console Window   35

Setting Breakpoints   37

Using the DOM Explorer   37

Publishing to the Windows Store   38

Register as a Windows Developer   38

Submitting Your App   39

Passing App Certification   41

Summary   42

2 WinJS Fundamentals   45

Namespaces, Modules, and Classes   45

Using Namespaces   46

Using the Module Pattern   48

Using Classes   51

Asynchronous Programming with Promises   56

Using Promises   57

Using then() versus done()    58

Creating Promises  

Creating a Timeout Promise   61

Canceling Promises   62

Composing Promises   63

Retrieving DOM Elements with Query Selectors   63

Performing Queries with the WinJS.Utilities.query() Method   64

Retrieving a Single Element with the WinJS.Utilities.id() Method   66

Using the WinJS.Utilities.children() Method   67

Working with the QueryCollection Class   68

Performing Ajax Calls with the xhr Function   69

Specifying Different Response Types   72

Customizing the Properties of the XmlHttpRequest Object   73

Summary   75

3 Observables, Bindings, and Templates   77

Understanding Observables   77

Creating an Observable   78

Creating Observable Listeners   79

Coalescing Notifications   81

Bypassing Notifications   82

Working with the WinJS.Binding.List Object   83

Creating an Observable Collection of Observables   86

Understanding Declarative Data Binding   86

Declarative Data Binding and Observables   89

Capturing the Contents of an HTML Form   91

Declarative Data Binding and WinJS Controls   94

Declarative Data Binding and Binding Converters   96

Understanding Templates   100

Creating an Imperative Template   100

Creating a Declarative Template   103

Applying a Template with a Query Selector   104

Creating External Templates   106

Summary   108

4 Using WinJS Controls   109

Introduction to WinJS Controls   109

Creating a WinJS Control Declaratively   111

Creating Controls Imperatively   113

Setting Control Options   114

Retrieving Controls from an HTML Document   115

Using the Tooltip Control   116

Using the contentElement Property   117

Styling a Tooltip   117

Using the ToggleSwitch Control   118

Determining the State of a ToggleSwitch   118

Using the Rating Control   120

Customizing the Ratings   121

Submitting a Rating   121

Using the DatePicker Control   123

Formatting the Year, Month, and Date   124

Displaying Only Years, Months, or Days   126

Capturing the Selected Date   127

Using the TimePicker Control   128

Getting and Setting the Current Time   130

Formatting the Hour, Minute, and Period   131

Using the FlipView Control   132

Displaying Page Numbers   135

Creating Custom FlipView Buttons   137

Summary   139

5 Creating Forms   141

Using HTML5 Form Validation   141

Using the required Attribute   142

Using the pattern Attribute   142

Performing Custom Validation   143

Customizing the Validation Error Style   144

Resetting a Form   146

Using HTML5 Input Elements  

Labeling Form Fields   148

Entering a Number   149

Entering a Value from a Range of Values   151

Entering Email Addresses, URLs, Telephone Numbers, and Search Terms   151

Entering a Value from a List of Values   153

Selecting Files   154

Creating a Rich Text Editor   155

Displaying Progress   156

Summary   158

6 Menus and Flyouts   161

Using the Flyout Control   161

Using the Menu Control   163

Using the AppBar Control   167

Creating a Simple App Bar   168

Using App Bar Commands   170

Showing Contextual Commands   173

Configuring App Settings   175

Creating About Page Settings.    176

Creating Personal Settings   178

Displaying Windows Dialogs   182

Summary   184

7 Using the ListView Control   185

Introduction to the ListView Control   185

Using List Layout versus Grid Layout   190

Preventing Overlapping ListView Items   193

Selecting Items in a ListView Control   197

Creating a Master/Detail View   198

Selecting Multiple Items   202

Sorting Items in a ListView Control   204

Filtering Items in a ListView Control   206

Grouping Items in a ListView Control   208

Switching Views with Semantic Zoom   211

Switching a ListView Template Dynamically   216

Loading ListView Items Incrementally   219

Summary   221

8 Creating Data Sources   223

Creating Custom Data Sources   223

Creating the Data Source Class   224

Creating a Data Adapter   224

Implementing the getCount() Method   225

Implementing the itemsFromIndex() Method   225

Implementing the insertAtEnd() Method   227

Implementing the remove() Method   227

Implementing the change() Method   228

Handling Errors   228

Implementing the setNotificationHandler() Method   229

Creating a File Data Source   230

Using the File Data Source   231

Creating a Web Service Data Source   236

Creating the Data Source   236

Creating the Web Service   237

Using the Web Service Data Source   240

Creating an IndexedDB Data Source   241

Overview of IndexedDB   241

Using the IndexedDB Data Source   245

Summary   252

9 App Events and States   253

App Events   253

Handling the Activated Event   254

Handling the Error Event   255

Deferring Events with Promises   256

Creating Custom Events   257

Suspending, Terminating, and Resuming an App   257

Detecting When an App Is Suspended and Terminated   258

Detecting the Previous Execution State   258

Testing Application State with Visual Studio   259

Storing State with Session State  260

Application View States   61

Snapped, Filled, Portrait, and Landscape   261

Using Media Queries   264

Using the JavaScript mediaMatch Method   266

Defining a Viewport   267

Summary   270

10 Page Fragments and Navigation   273

Using the HtmlControl Control   273

Creating a Page Control   276

Creating Multipage Apps   280

Creating a Navigation App   280

Understanding the Navigation App default.html Page   281

Adding New Page Controls to a Navigation App   283

Navigating to Another Page   285

Understanding the Navigation API   286

Understanding the PageControlNavigator Control   287

Understanding Navigation State   287

Summary   291

11 Using the Live Connect API   293

Installing the Live SDK   294

Adding a Reference to the Live SDK   294

Registering Your App   294

Initializing the Live Connect SDK   296

Specifying Different Scopes   296

Authenticating a User   299

Using WL.login()    299

Using the SignIn Control   300

Authentication Events   302

Passing an Authentication Token to a Web Service   303

Sending the Authentication Token from a Windows Store App   303

Verifying the Authentication Token in a Web Service   306

Retrieving the User ID   308

Retrieving Basic User Information   309

Uploading and Downloading Files from SkyDrive   311

Listing SkyDrive Folders and Files   312

Downloading Files from SkyDrive   314

Uploading Files to SkyDrive   316

Summary   318

12 Graphics and Games   319

Overview of the Game   320

Creating the Game Tiles   321

Playing the Game Sounds   322

Creating the Game Canvas   323

Capturing User Interaction   325

Creating the Update Loop   327

Creating the Render Loop   329

Summary   331

Index   333