Windows 8.1 Apps with HTML5 and JavaScript Unleashed

Description

Take advantage of your existing JavaScript and HTML skills to build apps for Windows 8.1 and add them to the Windows Store. It’s a remarkable opportunity—and best-selling Microsoft web development author Stephen Walther will show you how to take full advantage of it.

Offering the same deep insight and practical code that has made his ASP.NET Unleashed the #1 ASP.NET book of all time, Walther covers everything you need to build outstanding Windows Store apps with JavaScript and HTML5.

He guides you through using Microsoft’s WinJS 2.0 library to develop apps for Windows 8.1—you learn how to use JavaScript templates, controls, and data binding. You’ll find in-depth coverage of everything from displaying data with a ListView control to supporting SkyDrive cloud storage, creating games to using IndexedDB and HTML5 forms.

Extensively updated for the release of Windows 8.1, this book covers all of the new features of the WinJS 2.0 library such as the Repeater, SearchBox, WebView, and NavBar controls and the new WinJS Scheduler. This book has been updated with a new sample app that demonstrates how to build a Windows Store app that interacts with Windows Azure Mobile Services.

If you’re a web developer, Windows 8 gives you millions of new potential customers to buy your apps—and you already have many of the skills you’ll need to reach them. Get this book, master the tools and techniques you don’t already know—and go after that huge new market!

Detailed information on how to…

• Get your app published in the Windows Store
• Use JavaScript controls such as the Tooltip, Rating, DatePicker, and FlipView controls
• Thoroughly master using the WinJS ListView control to display, sort, and filter data
• Use new controls introduced with Windows 8.1 such as the Repeater, WebView, NavBar, and SearchBox controls
• Implement Windows Search and Share contracts
• Use HTML5 Canvas to build arcade games
• Store data on the local file system, via Windows Azure Mobile Services or in IndexedDB databases
• Use Live Services to authenticate users, retrieve user profiles, and interact with SkyDrive
• Create custom WinJS controls with Page Controls
• Build apps that gracefully adapt to different screen resolutions and orientations
• Take pictures from your computer’s webcam and play sounds 8.1 Apps

Extras

Related Article

Top 10 Changes for Building Windows Store Apps with Windows 8.1

Sample Content

Online Sample Chapter

Building Windows Store Apps with with HTML5 and JavaScript

Sample Pages

Download the sample pages (includes Chapter 1 and Index)

Table of Contents

Introduction     1
Updated for Windows 8.1     2
Prerequisites for This Book     3
Source Code     3

1 Building Windows Store Apps     5
What Is a Windows Store App?     5
     Microsoft Design Style Principles     6
     Common Features of Windows Store Apps     7
Creating Your First Windows Store App     13
     Creating the Visual Studio Project     14
     Declaring App Capabilities     15
     Creating the HTML Page     17
     Creating the Style Sheet     18
     Creating the JavaScript File     18
     Running the App     21
Elements of a Windows Store App     21
     JavaScript     21
     HTML5     22
     Cascading Style Sheets 3     22
     Windows Runtime     23
     Windows Library for JavaScript     23
     What About jQuery?     24
Building Windows Store Apps with Visual Studio     26
     Windows Store App Project Templates     27
     Running a Windows Store App     31
Debugging a Windows Store App     33
     Using the Visual Studio JavaScript Console Window     33
     Setting Breakpoints     34
     Using the DOM Explorer     35
Publishing to the Windows Store     36
     Register as a Windows Developer     36
     Submitting Your App     37
     Passing App Certification     39
Migrating from Windows 8 to Windows 8.1     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()     59
     Creating Promises     60
     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
Using the Scheduler to Prioritize Jobs     75
     Setting Job Priorities     77
     Yielding to a Higher Priority Job     77
Summary     80

3 Observables, Bindings, and Templates     81
Understanding Observables     81
     Creating an Observable     82
     Creating Observable Listeners     83
     Coalescing Notifications     85
     Bypassing Notifications     87
     Working with the WinJS.Binding.List object     88
     Creating an Observable Collection of Observables     90
Understanding Declarative Data Binding     91
     Declarative Data Binding and Observables     94
     Capturing the Contents of an HTML Form     96
     Declarative Data Binding and WinJS Controls     99
     Declarative Data Binding and Binding Converters     101
Understanding Templates     105
     Creating an Imperative Template     105
     Creating a Declarative Template     108
     Applying a Template with a Query Selector     109
     Creating External Templates     111
Summary     112

4 Using WinJs Controls     113
Introduction to WinJS Controls     113
     Creating a WinJS Control Declaratively     115
     Creating Controls Imperatively     117
     Setting Control Options     118
     Retrieving Controls from an HTML Document     119
Using the Tooltip Control     120
     Using the contentElement Property     121
     Styling a Tooltip     121
Using the ToggleSwitch Control     122
     Determining the State of a ToggleSwitch     123
Using the Rating Control     124
     Customizing the Ratings     125
     Submitting a Rating     125
Using the DatePicker Control     127
     Formatting the Year, Month, and Date     128
     Displaying Only Years, Months, or Days     131
     Capturing the Selected Date     132
Using the TimePicker Control     133
     Getting and Setting the Current Time     134
     Formatting the Hour, Minute, and Period     136
Using the Hub Control     137
     Creating Hubs and Hub Sections     138
     Handling Hub Section Navigation     139
Using the WebView Control     139
     Hosting a Page from the Internet with the WebView Control     140
     Handling Navigation and Navigation Events     142
     Capturing WebView Screenshots     145
Summary     147

5 Creating Forms     149
Using HTML5 Form Validation     149
     Using the required Attribute      150
     Using the pattern Attribute     150
     Performing Custom Validation     151
     Customizing the Validation Error Style     152
     Resetting a Form     154
Using HTML5 Input Elements     155
     Labeling Form Fields     157
     Entering a Number     158
     Entering a Value from a Range of Values     159
Entering Email Addresses, URLs, Telephone Numbers, and Search Terms     160
     Entering a Value from a List of Values     162
     Selecting Files     162
Creating a Rich Text Editor     164
Displaying Progress     165
Summary     167

6 Menus and Flyouts     169
Using the Flyout Control     169
Using the Menu Control     172
Using the AppBar Control     176
     Creating a Simple App Bar     176
     Using App Bar Commands     178
     Showing Contextual Commands     181
Using the NavBar Control     184
     Creating a Simple Nav Bar     184
Configuring App Settings     186
     Creating About Page Settings     187
     Creating Personal Settings     189
Displaying Windows Dialogs     192
Summary     195

7 Using the ItemContainer, Repeater, and FlipView Controls     197
Using the ItemContainer Control     197
     Styling an ItemContainer     198
     Interacting with an ItemContainer     200
     Selecting an ItemContainer     202
     Creating Drag-and-Drop Items     204
Using the Repeater Control     208
     Using an External Template     210
     Using a Nested Template     211
     Using the Repeater with the ItemContainer     214
Using the FlipView Control     215
     Displaying Page Numbers     219
     Creating Custom FlipView Buttons     221
Summary     222

8 Using the ListView Control     223
Introduction to the ListView Control     224
Using Different ListView Layouts     228
     Using Grid Layout     229
     Using List Layout     231
     Using Cell Spanning Layout     231
Invoking Items in a ListView Control     236
Selecting Items in a ListView Control     238
Sorting Items in a ListView Control     241
Filtering Items in a ListView Control     242
Grouping Items in a ListView Control     245
Switching Views with Semantic Zoom     248
Switching a ListView Template Dynamically     253
Using Drag and Drop     256
     Reordering Items in a ListView      256
     Dragging Items from ListViews     258
Summary     262

9 Creating Data Sources     263
Creating Custom Data Sources     263
     Creating the Data Source Class     264
     Creating a Data Adapter     264
     Implementing the getCount() Method     265
     Implementing the itemsFromIndex() Method     265
     Implementing the insertAtEnd() Method     267
     Implementing the remove() Method     267
     Implementing the change() Method     268
     Handling Errors     268
     Implementing the setNotificationHandler() Method     269
Creating a File Data Source     270
     Using the File Data Source     271
Creating a Web Service Data Source     276
     Creating the Data Source     276
     Creating the Web Service     278
     Using the Web Service Data Source     280
Creating an IndexedDB Data Source     281
     Overview of IndexedDB     282
     Using the IndexedDB Data Source     286
Summary     293

10 Using Windows Azure Mobile Services     295
Creating a Mobile Service     295
Creating a Database Table     297
Installing the Mobile Services for WinJS Library     298
Performing Inserts, Updates, and Deletes     299
     Connecting to the Remote Database Table     299
     Inserting Database Data     299
     Updating Database Data     300
     Deleting Database Data     301
Performing Database Queries     301
     Looking Up a Single Database Record     301
     Retrieving a Set of Database Records     302
Performing Validation     304
Performing Custom Actions     306
Debugging Script Errors     308
Summary     309

11 App Events and States     311
App Events     311
     Handling the Activated Event     312
     Handling the Error Event     313
     Deferring Events with Promises     314
     Creating Custom Events     315
Suspending, Terminating, and Resuming an App     315
     Detecting When an App Is Suspended and Terminated      316
     Detecting the Previous Execution State     316
     Testing Application State with Visual Studio     317
     Storing State with Session State     318
Designing for Different Window Sizes     320
     Setting the Minimum App Width     320
     Using CSS Media Queries     321
     Using the window resize Event     324
Scaling Content to Fit Different Screen Resolutions     326
     Defining a Viewport     326
     Using the ViewBox Control     329
Summary     332

12 Page Fragments and Navigation     333
Using the HtmlControl Control     333
Creating a Page Control     336
Creating Multi-Page Apps     340
     Creating a Navigation App     340
     Understanding the Navigation App default.html Page     341
     Adding New Page Controls to a Navigation App     343
     Navigating to Another Page     345
     Understanding the Navigation API     346
     Understanding the PageControlNavigator Control     347
     Understanding Navigation State     347
Summary     351

13 Creating Share and Search Contracts     353
Supporting Sharing     354
     Creating a Share Source     356
     Creating a Share Target     360
Using the Search Charm      368
     Declaring Your App as a Search Provider     369
     Providing Search Suggestions     370
     Handling Search Activation     372
     Adding a Search Results Page     373
Using the SearchBox Control     376
     Adding the SearchBox Control to a Page     377
     Providing Search Suggestions     378
     Displaying Search Results     379
Using the Windows Content Indexer     380
     Understanding the Windows Content Indexer API     381
     Creating an Indexer Helper     381
     Using the Indexer Helper     382
Summary     385

14 Using the Live Connect API     387
Installing the Live SDK     388
     Adding a Reference to the Live SDK     388
     Registering Your App     389
     Initializing the Live Connect SDK     391
     Specifying Different Scopes     391
Authenticating a User     394
     Logging a User into Live Connect     394
     Creating Account Settings     396
Authentication and Windows Azure Mobile Services     401
     Configuring Your Mobile Service     401
     Setting Permissions for Your Mobile Service     402
     Updating the Mobile Server Scripts     402
     Logging Into Azure Mobile Services     404
Retrieving Basic User Information     406
Uploading and Downloading Files from SkyDrive     408
     Listing SkyDrive Folders and Files     409
     Downloading Files from SkyDrive     411
     Uploading Files to SkyDrive     413
Summary     415

15 Graphics and Games     417
Overview of the Game     418
Creating the Game Tiles     419
Playing the Game Sounds     420
Creating the Game Canvas     421
Capturing User Interaction     424
Creating the Update Loop     425
Creating the Render Loop     427
Summary     429

16 Creating a Task List App     431
Overview of the App     432
Setting Up the App     433
Connecting to External Services     435
Optimistic Inserts, Updates, and Deletes     437
Adapting to Screen Changes     440
Creating a Custom Control     444
Using Text to Speech     446
Summary     448

Index     449

Updates

Submit Errata