Building Windows 8 Metro Style Applications Using JavaScript and HTML5

The Goal • Get started creating Metro style applications • Using Javascript, HTML5 and CSS3 • Introduce the basic concepts Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

The Goal • Get started creating Metro style applications • Using Javascript, HTML5 and CSS3 • Introduce the basic concepts • Investigate some of the Windows Runtime Controls Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

The Goal • Get started creating Metro style applications • Using Javascript, HTML5 and CSS3 • Introduce the basic concepts • Investigate some of the Windows Runtime Controls • Use Asynchronous APIs Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Along the way… • Learn to create a user interface using new Metro style features • Handle navigation using Page Controls Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Along the way… • Learn to create a user interface using new Metro style features • Handle navigation using Page Controls • Add simple data binding Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Assumptions… • Basic knowledge of Web technologies: • HTML, JavaScript, CSS • Basic knowledge of .NET development/tools Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Assumptions… • Basic knowledge of Web technologies: • HTML, JavaScript, CSS • Basic knowledge of .NET development/tools • Visual Studio, Blend Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Assumptions… • Basic knowledge of Web technologies: • HTML, JavaScript, CSS • Basic knowledge of .NET development/tools • Visual Studio, Blend • Basic knowledge of Metro style apps and Windows 8 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Assumptions… • Basic knowledge of Web technologies: • HTML, JavaScript, CSS • Basic knowledge of .NET development/tools • Visual Studio, Blend • Basic knowledge of Metro style apps and Windows 8 • See prior course, Exploring Windows 8 Metro Style Applications Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Platform and Tools • Some things to note: • Stack for Metro apps in green • .NET/CLR apps in blue • Silverlight available only as plug-in for IE, and desktop mode available as well Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Platform and Tools • Some things to note: • Stack for Metro apps in green • .NET/CLR apps in blue • Silverlight available only as plug-in for IE, and desktop mode available as well • .NET Framework and CLR appear on both sides (blue and green) Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Basic CLR Facts • Only one CLR—each app/app pool creates a process and uses the CLR • Desktop and Metro app using CLR use same CLR bits, but separate instance Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Basic CLR Facts • Only one CLR—each app/app pool creates a process and uses the CLR • Desktop and Metro app using CLR use same CLR bits, but separate instance • VB and C# apps still require .NET Framework 4.5, even when creating Metro apps Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Basic CLR Facts • Only one CLR—each app/app pool creates a process and uses the CLR • Desktop and Metro app using CLR use same CLR bits, but separate instance • VB and C# apps still require .NET Framework 4.5, even when creating Metro apps • Limited subset for Metro apps Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

.NET and Metro Style Apps • Metro apps run in an app container that limits access • Protects user from malicious apps Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

.NET and Metro Style Apps • Metro apps run in an app container that limits access • Protects user from malicious apps • Subset of .NET Client Profile which limits exposure Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

.NET and Metro Style Apps • Metro apps run in an app container that limits access • Protects user from malicious apps • Subset of .NET Client Profile which limits exposure • Many changes in APIs to support Metro style apps and asynchronous behavior Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

.NET and Metro Style Apps • Metro apps run in an app container that limits access • Protects user from malicious apps • Subset of .NET Client Profile which limits exposure • Many changes in APIs to support Metro style apps and asynchronous behavior • All Metro APIs are asynchronous Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

What are the Options? • Can build Metro style apps using: • C#, Visual Basic, or C++ and XAML • XAML provides both markup and style information Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

What are the Options? • Can build Metro style apps using: • C#, Visual Basic, or C++ and XAML • XAML provides both markup and style information • C#, Visual Basic, or C++ provide functionality Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

What are the Options? • Can build Metro style apps using: • C#, Visual Basic, or C++ and XAML • XAML provides both markup and style information • C#, Visual Basic, or C++ provide functionality • JavaScript, HTML5, and CSS3 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

What are the Options? • Can build Metro style apps using: • C#, Visual Basic, or C++ and XAML • XAML provides both markup and style information • C#, Visual Basic, or C++ provide functionality • JavaScript, HTML5, and CSS3 • HTML provides markup Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

What are the Options? • Can build Metro style apps using: • C#, Visual Basic, or C++ and XAML • XAML provides both markup and style information • C#, Visual Basic, or C++ provide functionality • JavaScript, HTML5, and CSS3 • HTML provides markup • CSS provides style information Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

What are the Options? • Can build Metro style apps using: • C#, Visual Basic, or C++ and XAML • XAML provides both markup and style information • C#, Visual Basic, or C++ provide functionality • JavaScript, HTML5, and CSS3 • HTML provides markup • CSS provides style information • JavaScript provides functionality Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Is One Better Than the Other? • Use the language of your choice • HTML5/CSS3/JavaScript useful if: • Comfortable with Web technologies Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Is One Better Than the Other? • Use the language of your choice • HTML5/CSS3/JavaScript useful if: • Comfortable with Web technologies • Want to use the power of HTML5 and CSS3 to create the user interface Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Is One Better Than the Other? • Use the language of your choice • HTML5/CSS3/JavaScript useful if: • Comfortable with Web technologies • Want to use the power of HTML5 and CSS3 to create the user interface • XAML and VB/C#/C++ useful if: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Is One Better Than the Other? • Use the language of your choice • HTML5/CSS3/JavaScript useful if: • Comfortable with Web technologies • Want to use the power of HTML5 and CSS3 to create the user interface • XAML and VB/C#/C++ useful if: • Comfortable with traditional programming Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Is One Better Than the Other? • Use the language of your choice • HTML5/CSS3/JavaScript useful if: • Comfortable with Web technologies • Want to use the power of HTML5 and CSS3 to create the user interface • XAML and VB/C#/C++ useful if: • Comfortable with traditional programming • Want to create managed libraries Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Slightly More Complex App • Work through old version of blog sample on Microsoft’s site • New (more complex version) starts here: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Slightly More Complex App • Work through old version of blog sample on Microsoft’s site • New (more complex version) starts here: • http://msdn.microsoft.com/en-us/library/windows/ apps/br211385.aspx Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Slightly More Complex App • Work through old version of blog sample on Microsoft’s site • New (more complex version) starts here: • http://msdn.microsoft.com/en-us/library/windows/ apps/br211385.aspx • Discuss the steps Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Slightly More Complex App • Work through old version of blog sample on Microsoft’s site • New (more complex version) starts here: • http://msdn.microsoft.com/en-us/library/windows/ apps/br211385.aspx • Discuss the steps • Application downloads RSS feed content Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Slightly More Complex App • Work through old version of blog sample on Microsoft’s site • New (more complex version) starts here: • http://msdn.microsoft.com/en-us/library/windows/ apps/br211385.aspx • Discuss the steps • Application downloads RSS feed content • Displays formatted Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Main Function • Code in self-executing anonymous function • Recommended JavaScript practice • Avoids polluting the global namespace Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Han dle Events • Next code hooks handler for onactivated event • Runs after app and its resources (default.html) have loaded Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Han dle Events • Next code hooks handler for onactivated event • Runs after app and its resources (default.html) have loaded • Good place for initialization Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Han dle Events • Next code hooks handler for onactivated event • Runs after app and its resources (default.html) have loaded • Good place for initialization app.onactivated = function (eventObject) { } Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Check for Activation Kind • Just to make sure, check that this is a launch activation before running initialization code: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Check for Activation Kind • Just to make sure, check that this is a launch activation before running initialization code: WinJS.Application.onmainwindowactivated = function (e) { if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { // Initialization code goes here… } } Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Ready to Fire! • Must indicate to the application that you’re ready to receive events • Can appear anywhere in the main function Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Ready to Fire! • Must indicate to the application that you’re ready to receive events • Can appear anywhere in the main function • As long as it executes after initialization Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Ready to Fire! • Must indicate to the application that you’re ready to receive events • Can appear anywhere in the main function • As long as it executes after initialization (function() { // Code removed here… app.start(); }) (); Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Downloading Data • Need some means of making an HTTP request • In WinJS, xhr function provides capability Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Downloading Data • Need some means of making an HTTP request • In WinJS, xhr function provides capability • xhr == XMLHttpRequest Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Downloading Data • Need some means of making an HTTP request • In WinJS, xhr function provides capability • xhr == XMLHttpRequest • xhr has a number of options Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Downloading Data • Need some means of making an HTTP request • In WinJS, xhr function provides capability • xhr == XMLHttpRequest • xhr has a number of options • Which HTTP verb to use (GET is default) Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Downloading Data • Need some means of making an HTTP request • In WinJS, xhr function provides capability • xhr == XMLHttpRequest • xhr has a number of options • Which HTTP verb to use (GET is default) • Which HTTP headers to include (none by default) Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Downloading Data • Need some means of making an HTTP request • In WinJS, xhr function provides capability • xhr == XMLHttpRequest • xhr has a number of options • Which HTTP verb to use (GET is default) • Which HTTP headers to include (none by default) • Which URL to use Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Passing Information • Supply a JSON object containing fields corresponding to the parameters: • type • url (required) Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Passing Information • Supply a JSON object containing fields corresponding to the parameters: • type • url (required) • user Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Passing Information • Supply a JSON object containing fields corresponding to the parameters: • type • url (required) • user • password Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Passing Information • Supply a JSON object containing fields corresponding to the parameters: • type • url (required) • user • password • headers Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Passing Information • Supply a JSON object containing fields corresponding to the parameters: • type • url (required) • user • password • headers • data Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Synchronous or Asynchronous? • XMLHttpRequest object allows developer to select synchronous or asynchronous result Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Synchronous or Asynchronous? • XMLHttpRequest object allows developer to select synchronous or asynchronous result • xhr forces asynchronous Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Synchronous or Asynchronous? • XMLHttpRequest object allows developer to select synchronous or asynchronous result • xhr forces asynchronous • UI isn’t blocked while awaiting result Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Synchronous or Asynchronous? • XMLHttpRequest object allows developer to select synchronous or asynchronous result • xhr forces asynchronous • UI isn’t blocked while awaiting result • All Metro API calls are asynchronous Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Synchronous or Asynchronous? • XMLHttpRequest object allows developer to select synchronous or asynchronous result • xhr forces asynchronous • UI isn’t blocked while awaiting result • All Metro API calls are asynchronous • Allows you to create more responsive applications Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Synchronous or Asynchronous? • XMLHttpRequest object allows developer to select synchronous or asynchronous result • xhr forces asynchronous • UI isn’t blocked while awaiting result • All Metro API calls are asynchronous • Allows you to create more responsive applications • Sample updates div element with progress Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Return Value • Asynchronous function in WinJS return object called a promise (called deferred in some APIs) Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Return Value • Asynchronous function in WinJS return object called a promise (called deferred in some APIs) • Promise must handle successful completion Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Return Value • Asynchronous function in WinJS return object called a promise (called deferred in some APIs) • Promise must handle successful completion • And error conditions Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Return Value • Asynchronous function in WinJS return object called a promise (called deferred in some APIs) • Promise must handle successful completion • And error conditions • Provides then method, which specifies: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Return Value • Asynchronous function in WinJS return object called a promise (called deferred in some APIs) • Promise must handle successful completion • And error conditions • Provides then method, which specifies: • Work to do on fulfillment of the promised value Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Return Value • Asynchronous function in WinJS return object called a promise (called deferred in some APIs) • Promise must handle successful completion • And error conditions • Provides then method, which specifies: • Work to do on fulfillment of the promised value • Error handling to be performed if Promise fails Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Return Value • Asynchronous function in WinJS return object called a promise (called deferred in some APIs) • Promise must handle successful completion • And error conditions • Provides then method, which specifies: • Work to do on fulfillment of the promised value • Error handling to be performed if Promise fails • Handling of progress notifications Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Promise.then Method • Understand that the then method indicates functions to call on success and failure Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Promise.then Method • Understand that the then method indicates functions to call on success and failure • Call to xhr returns the Promise object immediately Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Promise.then Method • Understand that the then method indicates functions to call on success and failure • Call to xhr returns the Promise object immediately • Set the functions to call on success and failure Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Promise.then Method • Understand that the then method indicates functions to call on success and failure • Call to xhr returns the Promise object immediately • Set the functions to call on success and failure • This example ignores progress Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

What Happened? • Once the xhr call completes • Code calls processPosts function • Passes request content as parameter Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

What Happened? • Once the xhr call completes • Code calls processPosts function • Passes request content as parameter • Contains requested RSS data Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

What Happened? • Once the xhr call completes • Code calls processPosts function • Passes request content as parameter • Contains requested RSS data • Code uses XPath expressions to select set of item nodes Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

What Happened? • Once the xhr call completes • Code calls processPosts function • Passes request content as parameter • Contains requested RSS data • Code uses XPath expressions to select set of item nodes • Retrieves individual child elements for display Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

What’s Next? • Modify application • Add support for Windows Runtime methods • Easier to use Windows.Web.Syndication namespace rather than hand-parsing XML from RSS feed Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

What’s Next? • Modify application • Add support for Windows Runtime methods • Easier to use Windows.Web.Syndication namespace rather than hand-parsing XML from RSS feed • Use templates and binding Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

What’s Next? • Modify application • Add support for Windows Runtime methods • Easier to use Windows.Web.Syndication namespace rather than hand-parsing XML from RSS feed • Use templates and binding • Rather than hand-copying data into the user interface Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

What’s Next? • Modify application • Add support for Windows Runtime methods • Easier to use Windows.Web.Syndication namespace rather than hand-parsing XML from RSS feed • Use templates and binding • Rather than hand-copying data into the user interface • Use WinRT controls Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

What’s Next? • Modify application • Add support for Windows Runtime methods • Easier to use Windows.Web.Syndication namespace rather than hand-parsing XML from RSS feed • Use templates and binding • Rather than hand-copying data into the user interface • Use WinRT controls • Specifically, the ListView control Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Using Windows Runtime • Haven’t yet really used Windows • Instead, used Web technologies • In addition to WinJS, Metro style apps can access classes in Windows Runtime Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Using Windows Runtime • Haven’t yet really used Windows • Instead, used Web technologies • In addition to WinJS, Metro style apps can access classes in Windows Runtime • Windows.Web.Syndication namespace supports RSS feeds: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Using Windows Runtime • Haven’t yet really used Windows • Instead, used Web technologies • In addition to WinJS, Metro style apps can access classes in Windows Runtime • Windows.Web.Syndication namespace supports RSS feeds: • SyndicationClient class makes it all easier! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Adding Data Binding • Current code manually pushes data into <div> elements • Would be simpler to create a template that contains the <div> elements Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Adding Data Binding • Current code manually pushes data into <div> elements • Would be simpler to create a template that contains the <div> elements • And bind the data source, using template to manage the display of the data Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Adding Data Binding • Current code manually pushes data into <div> elements • Would be simpler to create a template that contains the <div> elements • And bind the data source, using template to manage the display of the data • Of course, that’s possible! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

References and Attributes • In order to use templates, must add more JavaScript content, in default.html Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

References and Attributes • In order to use templates, must add more JavaScript content, in default.html • Much like adding references Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

References and Attributes • In order to use templates, must add more JavaScript content, in default.html • Much like adding references • Provide styles and behavior for the data-wincontrol attribute (required for templates) Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

References and Attributes • In order to use templates, must add more JavaScript content, in default.html • Much like adding references • Provide styles and behavior for the data-wincontrol attribute (required for templates) • HTML5 defines set of data-* attributes for associating app-specific information with element Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

References and Attributes • In this case, set data-win-control attribute to WinJS.Binding.Template • Acts as constructor for class Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

References and Attributes • In this case, set data-win-control attribute to WinJS.Binding.Template • Acts as constructor for class • Attaches behavior to div and adds behavior Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

References and Attributes • In this case, set data-win-control attribute to WinJS.Binding.Template • Acts as constructor for class • Attaches behavior to div and adds behavior • Foundation for declarative WinJS controls Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

References and Attributes • In this case, set data-win-control attribute to WinJS.Binding.Template • Acts as constructor for class • Attaches behavior to div and adds behavior • Foundation for declarative WinJS controls • Do not forget: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

References and Attributes • In this case, set data-win-control attribute to WinJS.Binding.Template • Acts as constructor for class • Attaches behavior to div and adds behavior • Foundation for declarative WinJS controls • Do not forget: • In order to cause data-win-control attributes to take effect, must call WinJS.UI.ProcessAll Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Binding Data • WinJS.Binding.Template class connects properties of elements with data • Looks for data-win-bind attribute in elements Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Binding Data • WinJS.Binding.Template class connects properties of elements with data • Looks for data-win-bind attribute in elements • Format looks like this: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Binding Data • WinJS.Binding.Template class connects properties of elements with data • Looks for data-win-bind attribute in elements • Format looks like this: • data-win-bind="innerText: title" Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Binding Data • WinJS.Binding.Template class connects properties of elements with data • Looks for data-win-bind attribute in elements • Format looks like this: • data-win-bind="innerText: title" • Part before ":" indicates property of the element Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Binding Data • WinJS.Binding.Template class connects properties of elements with data • Looks for data-win-bind attribute in elements • Format looks like this: • data-win-bind="innerText: title" • Part before ":" indicates property of the element • Part after ":" indicates JavaScript property to bind Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Things to Note • Calling document.getElementById retrieves reference to HTML element • Provided property with same name as element Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Things to Note • Calling document.getElementById retrieves reference to HTML element • Provided property with same name as element • Works in IE only, but fine for Metro apps Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Things to Note • Calling document.getElementById retrieves reference to HTML element • Provided property with same name as element • Works in IE only, but fine for Metro apps • winControl property retrieves reference to associated WinRT control: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Things to Note • Calling document.getElementById retrieves reference to HTML element • Provided property with same name as element • Works in IE only, but fine for Metro apps • winControl property retrieves reference to associated WinRT control: var templateControl = document.getElementById("template").winControl; // or templateControl = template.winControl; Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Things to Note • For each item in the RSS feed, the code creates JSON object named post containing the information: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Things to Note • For each item in the RSS feed, the code creates JSON object named post containing the information: var item = feed.items[i]; var post = { title: item.title.text, date: item.publishedDate, content: item.summary.text, }; Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Things to Note • The template provides render method • Stamps out instance of the template for each item you supply Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Things to Note • The template provides render method • Stamps out instance of the template for each item you supply • Like createElement method call previously Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Things to Note • The template provides render method • Stamps out instance of the template for each item you supply • Like createElement method call previously • Supply data to be rendered Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Things to Note • The template provides render method • Stamps out instance of the template for each item you supply • Like createElement method call previously • Supply data to be rendered • Returns a promise Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Things to Note • The template provides render method • Stamps out instance of the template for each item you supply • Like createElement method call previously • Supply data to be rendered • Returns a promise • In the completion function, append new element to the parent posts element Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Things to Note • The template provides render method • Stamps out instance of the template for each item you supply • Like createElement method call previously • Supply data to be rendered • Returns a promise • In the completion function, append new element to the parent posts element • Note no extra code needed for reference to posts Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Current Status • Have used WinJS and Windows Runtime to make the code clearer • Have used templates and simple binding to make it easier to modify the layout Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Current Status • Have used WinJS and Windows Runtime to make the code clearer • Have used templates and simple binding to make it easier to modify the layout • Wouldn't it be nicer to view list of topics Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Current Status • Have used WinJS and Windows Runtime to make the code clearer • Have used templates and simple binding to make it easier to modify the layout • Wouldn't it be nicer to view list of topics • And then click on one to see its contents? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Current Status • Have used WinJS and Windows Runtime to make the code clearer • Have used templates and simple binding to make it easier to modify the layout • Wouldn't it be nicer to view list of topics • And then click on one to see its contents? • ListView control makes that easier Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Current Status • Have used WinJS and Windows Runtime to make the code clearer • Have used templates and simple binding to make it easier to modify the layout • Wouldn't it be nicer to view list of topics • And then click on one to see its contents? • ListView control makes that easier • Also handles repetitive binding Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Adding a ListView • In addition to template control and intrinsic HTML controls • WinJS provides several other built-in controls Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Adding a ListView • In addition to template control and intrinsic HTML controls • WinJS provides several other built-in controls • ListView control allows arrangement of data into list or grid Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Adding a ListView • In addition to template control and intrinsic HTML controls • WinJS provides several other built-in controls • ListView control allows arrangement of data into list or grid • Each item in ListView is expansion of template Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Adding a ListView • In addition to template control and intrinsic HTML controls • WinJS provides several other built-in controls • ListView control allows arrangement of data into list or grid • Each item in ListView is expansion of template • Want to create a list of posts? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Adding a ListView • In addition to template control and intrinsic HTML controls • WinJS provides several other built-in controls • ListView control allows arrangement of data into list or grid • Each item in ListView is expansion of template • Want to create a list of posts? • Good use for ListView control Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Show Post Titles in ListView • Modify existing template, removing content • Add ListView declaratively using data-win-control attribute Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Show Post Titles in ListView • Modify existing template, removing content • Add ListView declaratively using data-win-control attribute • Existing call to WinJS.UI.ProcessAll hooks it up Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

ListView Markup • data-win-options attribute specifies parameters to pass to WinJS.UI.ListView constructor • Attribute value is JSON object • Some parameters are JSON objects (layout) Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

ListView Markup <div id="posts" data-win-control="WinJS.UI.ListView" data-win-options="{itemTemplate: template, layout: {type: WinJS.UI.ListLayout}}"></div> • data-win-options attribute specifies parameters to pass to WinJS.UI.ListView constructor • Attribute value is JSON object • Some parameters are JSON objects (layout) Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

DEMO 7 • Modify markup • Look at documentation for WinJS.UI.ListView • Modify processPosts() • Note dataSource property of ListView Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

What's Next? • Current demo implementation shows only blog entry titles • Need user interface to display content of selected Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

What's Next? • Current demo implementation shows only blog entry titles • Need user interface to display content of selected • Add a second control to display content Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

What's Next? • Current demo implementation shows only blog entry titles • Need user interface to display content of selected • Add a second control to display content • Perhaps a grid of Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

What's Next? • Current demo implementation shows only blog entry titles • Need user interface to display content of selected • Add a second control to display content • Perhaps a grid of • Two rows (one for title and one for data) Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

What's Next? • Current demo implementation shows only blog entry titles • Need user interface to display content of selected • Add a second control to display content • Perhaps a grid of • Two rows (one for title and one for data) • Two columns—ListView on the left and content on the right Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Modify Layout • Layout is defined in CSS • Start by modifying body, #posts, and #content elements • So layout is appropriate for two-column display Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Things to Note • body: display set to –ms-grid • Part of Microsoft extension to CSS for grid • -ms-grid-rows: first column set to auto-size, second takes up the rest (fr like * in XAML) • -ms-grid-columns: 1fr 1fr • Two columns, each taking half the space Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Things to Note display: -ms-grid; -ms-grid-rows: auto 1fr; -ms-grid-columns: 1fr 1fr; • body: display set to –ms-grid • Part of Microsoft extension to CSS for grid • -ms-grid-rows: first column set to auto-size, second takes up the rest (fr like * in XAML) • -ms-grid-columns: 1fr 1fr • Two columns, each taking half the space Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Things to Note • #posts and #content element descriptions indicate row and column locations (1-based): #posts { width: 99%; height: 100%; overflow: auto; -ms-grid-row: 2; -ms-grid-column: 1; } #content { width: 95%; height: 100%; overflow-y: auto; margin-right: 64px; -ms-grid-row: 2; -ms-grid-column: 2; } Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Things to Note • Modified markup for ListView <div id="posts" data-win-control="WinJS.UI.ListView" data-win-options="{itemTemplate: template, layout: {type: WinJS.UI.ListLayout}, selectionMode: 'single', onselectionchanged: selectionChanged}"> </div> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Things to Note • Modified markup for ListView <div id="posts" data-win-control="WinJS.UI.ListView" data-win-options="{itemTemplate: template, layout: {type: WinJS.UI.ListLayout}, selectionMode: 'single', onselectionchanged: selectionChanged}"> </div> • selectionMode: allow single selection only Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Things to Note • Modified markup for ListView <div id="posts" data-win-control="WinJS.UI.ListView" data-win-options="{itemTemplate: template, layout: {type: WinJS.UI.ListLayout}, selectionMode: 'single', onselectionchanged: selectionChanged}"> </div> • selectionMode: allow single selection only • onselectionchanged: provide event handler declaratively Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Things to Note • Markup for content template: <div id="contentTemplate" data-win-control="WinJS.Binding.Template"> <div data-win-bind="innerText: title" class="postTitle"></div> <div data-win-bind="innerText: date" class="postDate"></div> <div data-win-bind="innerHTML: content" class="postContent"></div> </div> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Things to Note • Markup for content template: <div id="contentTemplate" data-win-control="WinJS.Binding.Template"> <div data-win-bind="innerText: title" class="postTitle"></div> <div data-win-bind="innerText: date" class="postDate"></div> <div data-win-bind="innerHTML: content" class="postContent"></div> </div> • CSS classes all still exist in default.css Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Things to Note • Markup for content template: <div id="contentTemplate" data-win-control="WinJS.Binding.Template"> <div data-win-bind="innerText: title" class="postTitle"></div> <div data-win-bind="innerText: date" class="postDate"></div> <div data-win-bind="innerHTML: content" class="postContent"></div> </div> • CSS classes all still exist in default.css • Three <div> elements for title, date, content • Bound to innerText/HTML properties of element Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Add Event Handler • To finish, must add event handler for ListView control's onselectionchanged event • Gather information about first selected item in ListView Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Add Event Handler • To finish, must add event handler for ListView control's onselectionchanged event • Gather information about first selected item in ListView • May be overkill because selectionMode is set to single! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Add Event Handler • To finish, must add event handler for ListView control's onselectionchanged event • Gather information about first selected item in ListView • May be overkill because selectionMode is set to single! • Get reference to the contentTemplate Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Add Event Handler • To finish, must add event handler for ListView control's onselectionchanged event • Gather information about first selected item in ListView • May be overkill because selectionMode is set to single! • Get reference to the contentTemplate • Render the data Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Things to Note • Can define namespace and specify public names for members: WinJS.Namespace.define('rssReader', { selectionChanged: selectionChanged }); Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Things to Note • Can define namespace and specify public names for members: WinJS.Namespace.define('rssReader', { selectionChanged: selectionChanged }); • Name before colon (:) specifies public name for member • Change that here, also change in markup Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Look Ma, No Designer! • Yes, it’s true • Visual Studio 11 doesn’t include a visual designer for JavaScript/HTML Metro style applications Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Look Ma, No Designer! • Yes, it’s true • Visual Studio 11 doesn’t include a visual designer for JavaScript/HTML Metro style applications • The Good News: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Look Ma, No Designer! • Yes, it’s true • Visual Studio 11 doesn’t include a visual designer for JavaScript/HTML Metro style applications • The Good News: • Microsoft Expression Blend does a great job Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Look Ma, No Designer! • Yes, it’s true • Visual Studio 11 doesn’t include a visual designer for JavaScript/HTML Metro style applications • The Good News: • Microsoft Expression Blend does a great job • Just doesn’t handle code chores particularly well Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Look Ma, No Designer! • Yes, it’s true • Visual Studio 11 doesn’t include a visual designer for JavaScript/HTML Metro style applications • The Good News: • Microsoft Expression Blend does a great job • Just doesn’t handle code chores particularly well • For JavaScript, it’s acceptable Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Look Ma, No Designer! • Yes, it’s true • Visual Studio 11 doesn’t include a visual designer for JavaScript/HTML Metro style applications • The Good News: • Microsoft Expression Blend does a great job • Just doesn’t handle code chores particularly well • For JavaScript, it’s acceptable • Minimal code editor Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Using Visual Studio with Blend • Easy to open a Visual Studio project in Expression Blend • Can modify design and code there Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Using Visual Studio with Blend • Easy to open a Visual Studio project in Expression Blend • Can modify design and code there • Can execute application in current device, or in simulator Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Using Visual Studio with Blend • Easy to open a Visual Studio project in Expression Blend • Can modify design and code there • Can execute application in current device, or in simulator • Can select to edit in Visual Studio Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Using Visual Studio with Blend • Easy to open a Visual Studio project in Expression Blend • Can modify design and code there • Can execute application in current device, or in simulator • Can select to edit in Visual Studio • Can debug from there Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Visual Studio Application Templates • Visual Studio 11 Express for Windows ships with a set of Metro style application templates Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Visual Studio Application Templates • Visual Studio 11 Express for Windows ships with a set of Metro style application templates • Slightly different set of templates for HTML apps vs. XAML apps Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

HTML Templates • Blank Application • Minimal application using Metro style frameworks • Fixed Layout Application Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

HTML Templates • Blank Application • Minimal application using Metro style frameworks • Fixed Layout Application • Minimal support for developing a Windows Metro style application using a fixed layout Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

HTML Templates • Blank Application • Minimal application using Metro style frameworks • Fixed Layout Application • Minimal support for developing a Windows Metro style application using a fixed layout • Grid Application Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

HTML Templates • Blank Application • Minimal application using Metro style frameworks • Fixed Layout Application • Minimal support for developing a Windows Metro style application using a fixed layout • Grid Application • Multi-page project navigating multiple layers of content with item details on a dedicated page Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

HTML Templates • Navigation Application • Minimal application using Windows Metro style frameworks and includes navigation support Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

HTML Templates • Navigation Application • Minimal application using Windows Metro style frameworks and includes navigation support • Split Application Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

HTML Templates • Navigation Application • Minimal application using Windows Metro style frameworks and includes navigation support • Split Application • A more complex project supporting navigation in a master list of items while viewing their details on the same page Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Closing Head Shot • JavaScript/HTML/CSS a great set of mature tools for building Metro style applications Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Closing Head Shot • JavaScript/HTML/CSS a great set of mature tools for building Metro style applications • WinJS makes it easy to interact with WinRT controls and other Windows-specific features Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Closing Head Shot • JavaScript/HTML/CSS a great set of mature tools for building Metro style applications • WinJS makes it easy to interact with WinRT controls and other Windows-specific features • Sample application (thanks to Chris Sells at Microsoft) shows off lots of important features Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Closing Head Shot • JavaScript/HTML/CSS a great set of mature tools for building Metro style applications • WinJS makes it easy to interact with WinRT controls and other Windows-specific features • Sample application (thanks to Chris Sells at Microsoft) shows off lots of important features • For homework—retool the Split application Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Learn More! • This is an excerpt from a larger course. Visit www.learnnowonline.com for the full details! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Building Windows 8 Metro Style Applications Using JavaScript and HTML5

More Related Content

What's hot

Similar to Building Windows 8 Metro Style Applications Using JavaScript and HTML5

More from LearnNowOnline

Recently uploaded

Building Windows 8 Metro Style Applications Using JavaScript and HTML5

Editor's Notes