Learn your way! Get started

Building Windows 8 Apps Using JS and HTML 5

with expert Ken Getz

Course at a glance

Included in these subscriptions:

Dev & IT Pro Video
Dev & IT Pro Power Pack

	Release date	4/12/2012
	Level	Beginner
	Runtime	6h 24m
	Closed captioning	N/A
	Transcript	N/A
	eBooks / courseware	N/A
	Hands-on labs	N/A
	Sample code	Included
	Exams	Included

Enterprise Solutions

Need reporting, custom learning tracks, or SCORM? Learn More

Course description

Microsoft has released the Consumer Preview of Windows 8, the next release of Windows, along with beta versions of Visual Studio 11 and Expression Blend 5. These new beta versions allow developers to get started today in creating applications hosted on this exciting new operating system. Although all Windows 7 applications should run fine, the new look and feel for Windows 8 requires developers to learn how to create Metro style applications, using the Metro application framework. This framework is available both for XAML developers using C#, VB, or C++; and HTML developers using JavaScript. Learning to create Metro style applications requires a bit of a learning curve, but it is not nearly as steep as the learning curve for the .NET Framework ten years ago. This course introduces the new platform from a developers perspective, and focuses on getting started building Metro style applications for Windows 8 using JavaScript and HTML.

Meet the expert

Ken Getz is a featured instructor for several of our Visual Studio courses. He is a Visual Basic and Visual C# expert and has been recognized multiple times as a Microsoft MVP. Ken is a seasoned instructor, successful consultant, and the author or co-author of several best-selling books. He is a frequent speaker at technical conferences like Tech-Ed, VSLive, and DevConnections and he has written for several of the industry's most-respected publications including Visual Studio Magazine, CoDe Magazine, and MSDN Magazine.

Course outline

Module 1

Introduction (34:11)

Introduction (01:57)
Assumption (01:09)
Platform and Tools (03:54)
Basic CLR Facts (00:49)
.NET and Metro Style Apps (00:45)
What are the Options? (01:09)
Is One Better Than the Other? (01:46)
Demo: Creating Simple App (01:07)
Demo: Solution Explorer (03:22)
Demo: Default.html (02:30)
Demo: Run Default.html (00:36)
Demo: Default.js (04:03)
Demo: Elements (01:56)
Demo: Helper Procedures (03:10)
Demo: Hooking Up Events (02:37)
Demo: Debugging (03:09)
Summary (00:06)

JavaScript/HTML5 App (23:35)

Introduction (00:15)
Slightly More Complex App (01:24)
Modify the Markup (00:15)
Tech Tip Guys (01:43)
Demo: Mark Ups (03:12)
Downloading Data (00:55)
Passing Information (00:25)
Synchronous or Asynchronous? (00:47)
Return Value (01:20)
Promise.then Method (00:54)
Demo: Promise.then Method (03:21)
Demo: Run the App (01:30)
Demo: Process Post (05:51)
Demo: Style Sheet (00:48)
What Happened? (00:41)
Summary (00:06)

Module 2

Windows Runtime Methods (27:54)

Introduction (00:18)
What"s Next? (00:18)
Using Window Runtime (00:56)
Demo:Adding Support (04:29)
Adding Data Binding (00:32)
References and Attributes (02:11)
Binding Data (00:58)
Demo: Data Binding (07:38)
Things to Note (02:10)
Current Status (00:47)
Adding a ListView (00:48)
Show Post Titles in ListView (00:23)
ListView Markup (01:29)
Demo: List View (04:44)
Summary (00:06)

JavaScript/HTML Templates (29:04)

Introduction (00:15)
What"s Next? (00:50)
Modify Layout (00:24)
Demo: Style Information (02:37)
Things to Note (00:45)
Modify Markup (00:12)
Things to Note (01:36)
Demo:Modify Markup (01:05)
Add Event Handler (00:29)
Demo: Add Event Handler (06:51)
Things to Note (00:27)
Look Ma, No Designer! (01:13)
Using Visual Studio with Blend (01:02)
Demo: Blend (03:35)
Application Templates (00:25)
HTML Templates (01:48)
Demo:Grid & Split application (04:06)
Summary (01:14)

Module 3

Windows 8 UI (31:14)

Introduction (00:51)
Investigating App Surfaces (00:53)
App Windos, or Canvas (00:54)
App Bar (01:34)
Charms Bar (01:54)
Context Menus (01:07)
Message Dialogs (00:47)
Flyouts (00:59)
Toasts (00:55)
Errors (00:33)
Inline Error Text (00:41)
Error or Warning Bar (00:51)
Message Dialogs (00:26)
Defining Layouts and Views (01:10)
CSS and User Interface (00:26)
CSS:Cascading Style Sheets (00:40)
Views (00:42)
Handling Views (00:19)
View States (00:39)
Screen orientation (00:19)
User Interaction Views (01:03)
Layouts (00:23)
Using CSS for Multiple Layouts (00:41)
Rules for Screen (00:42)
Using Media Features (01:03)
Demo: Media Features (05:36)
Demo: Different Modes (04:46)
Summary (00:06)

Introducing Page Controls (31:07)

Introduction (00:15)
Working with Controls (00:33)
Working with HTML Controls (01:25)
Demo:HTML Controls (03:17)
Events (00:31)
Creating Event Handlers (00:41)
Demo: Creating Event Handlers (05:51)
Why Not Declarative Events? (01:47)
Solving Namespace Problem (00:46)
Demo: Declarative Events? (02:49)
Working with WinJS Controls (00:40)
WinJS Controls (00:35)
AppBar Control (00:42)
DatePicker Control (00:35)
FlipView Control (00:41)
Flyout Control (00:23)
ListView Control (00:21)
Rating Control (00:19)
SemanticZoom Control (01:03)
SettingsPane Control (00:20)
TimePicker Control (00:19)
Toggle Control (00:24)
ToolTip Control (00:42)
ViewBox Control (00:35)
Add WinJS to Your Pages (00:39)
Adding Control in Markup (01:05)
Hooking Things Up (01:24)
Demo:Adding WinJS (02:04)
Summary (00:06)

Module 4

More Page Controls (25:45)

Introduction (00:15)
Setting WinJS Properties (01:19)
Demo:Setting Properties (02:32)
Setting Properties in Code (00:42)
Shortcut (00:37)
Asynchronous Behavior (00:41)
Demo:Retrieving Reference (03:53)
Handling Events for WinJS (00:46)
Demo:Hooking up eventhandler (03:31)
Styling HTML Controls (00:31)
Control Components (00:15)
CSS Pseudo-Elements (00:36)
Available Parts (00:17)
Using Pseudo-Elements (00:32)
Modify Reveal Button (00:24)
Demo:Modify Reveal Button (01:58)
Styling Intrinsic HTML (00:54)
Styling WinJS Controls (01:01)
Demo:Modify datePicker (02:58)
Using Typography Classes (00:36)
Demo:Built-in style sheets (01:12)
Summary (00:06)

App Bar (23:51)

Introduction (00:15)
Adding App Bars (00:42)
Demo:Creating App Bar (02:06)
App Bar Properties (01:02)
Adding Buttons (01:16)
Demo:Adding Buttons (04:23)
Add a Flyout (00:22)
Flyout for Collecting Info (00:20)
Flyout forWarning/Confirmation (00:11)
Flyout for Drop-down Menus (00:10)
Flyouts for More Info (00:13)
Flyout Guidelines (00:36)
Demo: Flyout (03:40)
Demo: Dismiss Flyout (02:29)
Demo: Context Menu (02:15)
Demo: Dismiss Menu (02:38)
Summary (01:07)

Simple Navigation (26:05)

Introduction (01:28)
Simple Navigation (00:40)
Linking to an Internal Page (00:37)
Being Complete (01:06)
Don"t Navigate from Main Page (00:41)
External vs Internal Content (00:33)
Demo:Adding Pages (04:13)
Navigation Models (00:33)
Single-Page Navigation (01:04)
Introducing Page Controls (01:54)
Working with Page Controls (00:46)
Page Controls (00:34)
Navigation Project Template (00:41)
Demo:Using Page Control (03:23)
Demo: Run Page Control (01:51)
Demo: Another Page Control (04:26)
Demo: Run Project (01:22)
Summary (00:06)

Module 5

Navigation Controls (26:12)

Introduction (00:15)
Things to Note (01:42)
Replacing Content Instead (00:18)
Adding Code to Page Control (00:34)
Demo:Adding Rating Control (02:10)
Navigation Functions (01:00)
Handling navigation (00:47)
Adding Navigation (00:34)
Demo:Hooking up Navigation (03:47)
Using navigation Functions (00:32)
Example (02:07)
Demo:Multiple Page Controls (02:01)
Demo: Override Anchor Tags (04:46)
Navigation History (00:37)
Demo:Adding Support (03:56)
Demo: Navigation History (00:54)
Summary (00:06)

Managing Button State (17:04)

Introduction (00:15)
Managing Button State (00:16)
Handling Navigation (00:32)
Demo:Enabling & Disabling (02:47)
Handling Navigation Errors (00:26)
In Case of Fire... (00:38)
Error Messages (01:04)
Demo:Error Handling (04:02)
Demo: Adding JS Code (03:41)
Demo: Running the Code (01:54)
Summary (01:24)

Introducing FlipView (27:45)

Introduction (01:09)
Introducing FlipView (00:38)
Data Sources (00:40)
Creating FlipView (01:06)
Bind to JSON Object (00:23)
Create the Data Source (00:25)
Set the Data Source (00:42)
Side Note about JavaScript (00:40)
Demo:Simple FlipView (02:19)
Demo: Array (02:18)
Demo: Hookup Data Source (02:50)
No Template? No Display! (00:45)
Creating the Template (00:59)
Set up Binding (02:16)
Use the Template (00:57)
Demo:Adding Template (04:51)
Setting Data Source in Code (01:08)
Demo:Modify Data Source (03:23)
Summary (00:06)

Module 6

Grouping Data in the ListView (35:50)

Introduction (00:15)
Introducing ListView (01:01)
Demo:Basic Sample (01:33)
Displaying Data in a ListView (00:25)
Demo:Adding ListView (01:52)
Why the Mess? (00:30)
Demo:Template for ListView (02:22)
Demo: Finish the Template (01:26)
Styling Item Template (00:34)
Demo: Template Styles (03:22)
Styling the ListView (00:57)
Demo:Modifying ListView (04:21)
List View vs. Grid View (00:55)
Demo:Modifying Dimensions (01:54)
Demo: List Layout (01:13)
Changing the Selection Mode (00:20)
Handling Selection Changed (01:20)
Demo:Modifying Selection Mode (01:21)
Demo: List Selected Items (07:30)
Demo: Debugging (02:22)
Summary (00:06)

Grouping Items in ListView (24:55)

Introduction (00:15)
Grouping Items in ListView (01:21)
Creating Grouped Data (01:40)
Demo:Grouping (03:38)
Demo: Modify ItemDataSource (05:21)
Using SemanticZoom Control (00:52)
Interacting with Semantic Zoom (00:27)
Using SemanticZoom Control (00:52)
Sample (01:27)
Watch the Magic! (00:40)
Demo:Semantic Zoom (03:14)
Demo: Modify Styles (03:33)
Summary (01:29)