Windows 8 Apps with HTML5 and JavaScript Unleashed

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