Windows 8.1 Apps with HTML5 and JavaScript Unleashed
Published on 9. January 2014
Book
Paperback/Softback
480 pages
978-0-672-33711-6 (ISBN)
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
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
More details
Person
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).
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).
Content
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
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