LearnNowOnline

Learn your way! Get started

Windows 8 Using HTML5 and JS, Part 4: Controls

with expert Peter Thorsteinson

Watch trailer

Course at a glance

Included in these subscriptions:

  • Dev & IT Pro Video
  • Dev & IT Pro Power Pack
Release date 2/13/2014
Level Advanced
Runtime 2h 3m
Closed captioning Included
Transcript Included
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

In this course we will review a few of the many HTML5 elements that are available to us when we develop Windows 8 apps. We will also explore the WinJS controls that build on top of the elementary HTML5 markup traditionally used in web development. These WinJS controls are more powerful and flexible. Some of the WinJS controls we will explore include: AppBar, FlipView, Flyout, Repeater, SearchBox, TimePicker, and Tooltip. Finally we will look at the new WinJS 2.0 controls.

Prerequisites

This course assumes that students have some programming background and experience using Visual Studio 2010/2012 and Java Script, HTML5 and CSS3. In addition, the course assumes some basic knowledge of XAML markup and basic knowledge of Windows Store applications and Windows 8.

Learning Paths

This course is part of the following LearnNowOnline SuccessPaths™:
Building Windows Store Applications

Meet the expert

Peter Thorsteinson has been working for two decades in many areas of Microsoft-based software development technologies, including all the latest languages, frameworks, and tools. He has been involved in several large scale software development projects and has authored and co-authored several books and courses relating to ASP.NET, AJAX, JavaScript, WPF, WCF, WF, ADO.NET, and LINQ. Peter is currently focusing on ASP.NET MVC, jQuery, Task Parallel Library, Windows Azure, and SharePoint Development.

Course outline

Elements and WinJS Controls

HTML 5 Elements (15:32)
  • Introduction (00:18)
  • HTML5 Elements (01:27)
  • Local Context vs Web Context (01:31)
  • HTML5 Controls (00:25)
  • Demo: HTML5 (03:35)
  • Demo: Drawing (04:48)
  • Demo: UI (03:16)
  • Summary (00:08)
WinJS Control Data Binding (16:08)
  • Introduction (00:21)
  • WinJS Control Markup (04:37)
  • Comparison: Button Control (00:51)
  • WinJS Control Rendering (01:13)
  • WinJS Data Binding (06:00)
  • Demo: Data Binding (02:49)
  • Summary (00:14)
WinJS Controls (43:25)
  • Introduction (00:10)
  • WinJS Controls (00:18)
  • Demo: AppBar (04:42)
  • Demo: AppBar HTML (01:57)
  • WinJS Controls (00:10)
  • Demo: DatePicker (04:29)
  • WinJS Controls (00:08)
  • Demo: FlipView (04:19)
  • Demo: FlipView Template (04:56)
  • Demo: FlipView UI (00:53)
  • WinJS Controls (00:06)
  • Demo: Flyout (03:23)
  • Demo: Flyout UI (03:04)
  • Demo: Flyout JS (05:15)
  • Demo: Flyout Continued (00:55)
  • WinJS Controls (00:07)
  • Demo: HTML Control (01:51)
  • WinJS Controls (00:06)
  • Demo: Menu (03:28)
  • Demo: Menu Continued (02:53)
  • Summary (00:05)

WinJS Controls

WinJS Controls Continued (33:01)
  • Introduction (00:08)
  • WinJS Controls (cont) (00:08)
  • Demo: Rating (04:47)
  • Demo: Rating UI (02:11)
  • WinJS Controls (cont) (00:08)
  • Demo: Repeater (03:55)
  • WinJS Controls (cont) (00:35)
  • Demo: TimePicker (04:10)
  • Demo: TimePicker UI (01:23)
  • WinJS Controls (cont) (00:07)
  • Demo: ToggleSwitch (03:04)
  • Demo: ToggleSwitchUI (00:28)
  • WinJS Controls (cont) (00:05)
  • Demo: ToolTip (04:56)
  • WinJS Controls (cont) (00:38)
  • Demo: Custom Control (06:05)
  • Summary (00:05)
New WinJS 2.0 Controls (15:20)
  • Introduction (00:10)
  • New WinJS 2.0 Controls (00:26)
  • Demo: ItemContainer (03:25)
  • New WinJS 2.0 Controls (00:35)
  • Demo: Webview (04:24)
  • New WinJS 2.0 Controls (00:05)
  • Demo: Hub (03:31)
  • Demo: Hub Navigation (02:34)
  • Summary (00:06)