Your SlideShare is downloading. ×
Building Windows 8 Metro Style Applications Using JavaScript and HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Building Windows 8 Metro Style Applications Using JavaScript and HTML5

1,355
views

Published on

Get started creating Metro style applications …

Get started creating Metro style applications
Using Javascript, HTML5 and CSS3.

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,355
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • DEMO: rest of section\n
  • Transcript

    • 1. Building Windows 8/Metro-StyleApplications using Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 2. The Goal Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 3. The Goal• Get started creating Metro style applications Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 4. The Goal• Get started creating Metro style applications • Using Javascript, HTML5 and CSS3 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 5. 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
    • 6. 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
    • 7. 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
    • 8. Along the way… Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 9. Along the way…• Learn to create a user interface using new Metro style features Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 10. 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
    • 11. 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
    • 12. Assumptions… Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 13. Assumptions…• Basic knowledge of Web technologies: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 14. Assumptions…• Basic knowledge of Web technologies: • HTML, JavaScript, CSS Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 15. 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
    • 16. 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
    • 17. 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
    • 18. 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
    • 19. Platform and Tools Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 20. Platform and Tools Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 21. Platform and Tools Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 22. Platform and Tools Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 23. Platform and Tools• Some things to note: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 24. Platform and Tools• Some things to note: • Stack for Metro apps in green Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 25. Platform and Tools• Some things to note: • Stack for Metro apps in green • .NET/CLR apps in blue Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 26. 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
    • 27. 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
    • 28. Platform and Tools Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 29. Platform and Tools Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 30. Platform and Tools Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 31. Basic CLR Facts Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 32. Basic CLR Facts• Only one CLR—each app/app pool creates a process and uses the CLR Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 33. 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
    • 34. 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
    • 35. 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
    • 36. .NET and Metro Style Apps Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 37. .NET and Metro Style Apps• Metro apps run in an app container that limits access Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 38. .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
    • 39. .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
    • 40. .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
    • 41. .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
    • 42. What are the Options? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 43. What are the Options?• Can build Metro style apps using: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 44. What are the Options?• Can build Metro style apps using: • C#, Visual Basic, or C++ and XAML Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 45. 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
    • 46. 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
    • 47. 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
    • 48. 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
    • 49. 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
    • 50. 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
    • 51. Is One Better Than the Other? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 52. Is One Better Than the Other?• Use the language of your choice Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 53. Is One Better Than the Other?• Use the language of your choice• HTML5/CSS3/JavaScript useful if: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 54. 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
    • 55. 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
    • 56. 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
    • 57. 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
    • 58. 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
    • 59. DEMO 1 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 60. DEMO 1• Hello, World using HTML5/CSS/JavaScript Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 61. Slightly More Complex App Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 62. Slightly More Complex App• Work through old version of blog sample on Microsoft’s site Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 63. 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
    • 64. 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
    • 65. 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
    • 66. 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
    • 67. 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
    • 68. Modify the Markup Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 69. Modify the Markup• Create simple layout Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 70. Modify the Markup• Create simple layout• Use div elements with id attribute set Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 71. DEMO 2 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 72. DEMO 2• Create markup Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 73. Modify Styles Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 74. Modify Styles• Replace style information in default.css Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 75. Modify Styles• Replace style information in default.css• Note class and id-based styles Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 76. DEMO 3 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 77. DEMO 3• Add style information Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 78. Examine the Default Code Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 79. Examine the Default Code Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 80. Main Function Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 81. Main Function• Code in self-executing anonymous function Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 82. Main Function• Code in self-executing anonymous function • Recommended JavaScript practice Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 83. 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
    • 84. Han dle Events Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 85. Han dle Events• Next code hooks handler for onactivated event Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 86. 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
    • 87. 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
    • 88. 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
    • 89. Check for Activation Kind Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 90. 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
    • 91. 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
    • 92. Ready to Fire! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 93. Ready to Fire!• Must indicate to the application that you’re ready to receive events Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 94. 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
    • 95. 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
    • 96. 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
    • 97. Downloading Data Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 98. Downloading Data• Need some means of making an HTTP request Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 99. 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
    • 100. 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
    • 101. 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
    • 102. 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
    • 103. 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
    • 104. 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
    • 105. Passing Information Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 106. Passing Information• Supply a JSON object containing fields corresponding to the parameters: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 107. Passing Information• Supply a JSON object containing fields corresponding to the parameters: • type Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 108. 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
    • 109. 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
    • 110. 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
    • 111. 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
    • 112. 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
    • 113. Synchronous or Asynchronous? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 114. 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
    • 115. 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
    • 116. 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
    • 117. 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
    • 118. 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
    • 119. 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
    • 120. Return Value Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 121. 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
    • 122. 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
    • 123. 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
    • 124. 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
    • 125. 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
    • 126. 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
    • 127. 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
    • 128. Promise.then Method Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 129. 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
    • 130. 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
    • 131. 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
    • 132. 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
    • 133. DEMO 4 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 134. DEMO 4• Add code to set up downloads Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 135. DEMO 4• Add code to set up downloads• Discuss Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 136. What Happened? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 137. What Happened?• Once the xhr call completes Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 138. What Happened?• Once the xhr call completes • Code calls processPosts function Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 139. 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
    • 140. 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
    • 141. 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
    • 142. 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
    • 143. What’s Next? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 144. What’s Next?• Modify application Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 145. What’s Next?• Modify application • Add support for Windows Runtime methods Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 146. 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
    • 147. 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
    • 148. 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
    • 149. 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
    • 150. 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
    • 151. Using Windows Runtime Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 152. Using Windows Runtime• Haven’t yet really used Windows Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 153. Using Windows Runtime• Haven’t yet really used Windows • Instead, used Web technologies Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 154. 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
    • 155. 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
    • 156. 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
    • 157. DEMO 5 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 158. DEMO 5• Replace code, using SyndicationClient Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 159. Adding Data Binding Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 160. Adding Data Binding• Current code manually pushes data into <div> elements Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 161. 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
    • 162. 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
    • 163. 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
    • 164. References and Attributes Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 165. 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
    • 166. 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
    • 167. 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-win- control attribute (required for templates) Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 168. 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-win- control 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
    • 169. References and Attributes Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 170. References and Attributes• In this case, set data-win-control attribute to WinJS.Binding.Template Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 171. 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
    • 172. 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
    • 173. 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
    • 174. 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
    • 175. 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
    • 176. Binding Data Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 177. Binding Data• WinJS.Binding.Template class connects properties of elements with data Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 178. 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
    • 179. 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
    • 180. 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
    • 181. 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
    • 182. 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
    • 183. DEMO 6 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 184. DEMO 6• Add references Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 185. DEMO 6• Add references• Add template Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 186. DEMO 6• Add references• Add template• Modify code Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 187. DEMO 6• Add references• Add template• Modify code• Run Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 188. Things to Note Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 189. Things to Note• Calling document.getElementById retrieves reference to HTML element Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 190. 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
    • 191. 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
    • 192. 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
    • 193. 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
    • 194. Things to Note Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 195. 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
    • 196. 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
    • 197. Things to Note Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 198. Things to Note• The template provides render method Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 199. 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
    • 200. 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
    • 201. 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
    • 202. 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
    • 203. 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
    • 204. 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
    • 205. Current Status Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 206. Current Status• Have used WinJS and Windows Runtime to make the code clearer Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 207. 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
    • 208. 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• Wouldnt it be nicer to view list of topics Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 209. 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• Wouldnt 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
    • 210. 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• Wouldnt 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
    • 211. 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• Wouldnt 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
    • 212. Adding a ListView Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 213. Adding a ListView• In addition to template control and intrinsic HTML controls Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 214. 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
    • 215. 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
    • 216. 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
    • 217. 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
    • 218. 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
    • 219. Show Post Titles in ListView Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 220. Show Post Titles in ListView• Modify existing template, removing content Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 221. 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
    • 222. 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
    • 223. 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
    • 224. 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
    • 225. 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
    • 226. DEMO 7 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 227. DEMO 7• Modify markup Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 228. DEMO 7• Modify markup• Look at documentation for WinJS.UI.ListView Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 229. DEMO 7• Modify markup• Look at documentation for WinJS.UI.ListView• Modify processPosts() Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 230. 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
    • 231. Whats Next? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 232. Whats Next?• Current demo implementation shows only blog entry titles Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 233. Whats 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
    • 234. Whats 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
    • 235. Whats 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
    • 236. Whats 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
    • 237. Whats 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
    • 238. Modify Layout Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 239. Modify Layout• Layout is defined in CSS Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 240. Modify Layout• Layout is defined in CSS• Start by modifying body, #posts, and #content elements Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 241. 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
    • 242. DEMO 8 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 243. DEMO 8• Modify CSS Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 244. Things to Note Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 245. 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
    • 246. 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
    • 247. Things to Note Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 248. Things to Note• #posts and #content element descriptions indicate row and column locations (1-based): Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 249. 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
    • 250. Modify Markup Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 251. Modify Markup• Once CSS completed Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 252. Modify Markup• Once CSS completed • Modify markup Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 253. Modify Markup• Once CSS completed • Modify markup • Re-adding template for content Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 254. Things to Note Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 255. Things to Note• Modified markup for ListView Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 256. 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
    • 257. 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
    • 258. 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
    • 259. 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
    • 260. 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
    • 261. 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
    • 262. Things to Note Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 263. Things to Note• Markup for content template: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 264. 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
    • 265. 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
    • 266. 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
    • 267. 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
    • 268. 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
    • 269. 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
    • 270. DEMO 9 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 271. DEMO 9• Add new markup Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 272. Add Event Handler Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 273. Add Event Handler• To finish, must add event handler for ListView controls onselectionchanged event Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 274. Add Event Handler• To finish, must add event handler for ListView controls onselectionchanged event• Gather information about first selected item in ListView Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 275. Add Event Handler• To finish, must add event handler for ListView controls 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
    • 276. Add Event Handler• To finish, must add event handler for ListView controls 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
    • 277. Add Event Handler• To finish, must add event handler for ListView controls 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
    • 278. DEMO 10 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 279. DEMO 10• Add event handler Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 280. DEMO 10• Add event handler• Run Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 281. DEMO 10• Add event handler• Run• Fix namespace Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 282. DEMO 10• Add event handler• Run• Fix namespace• Run Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 283. Things to Note Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 284. Things to Note• Can define namespace and specify public names for members: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 285. 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
    • 286. 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
    • 287. 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
    • 288. 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
    • 289. Look Ma, No Designer! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 290. Look Ma, No Designer!• Yes, it’s true Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 291. 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
    • 292. 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
    • 293. 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
    • 294. 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
    • 295. 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
    • 296. 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
    • 297. Using Visual Studio with Blend Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 298. Using Visual Studio with Blend• Easy to open a Visual Studio project in Expression Blend Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 299. 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
    • 300. 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
    • 301. 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
    • 302. 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
    • 303. DEMO Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 304. DEMO• Edit project in Expression Blend Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 305. Visual Studio Application Templates Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 306. 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
    • 307. 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
    • 308. HTML Templates Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 309. HTML Templates Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 310. HTML Templates Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 311. HTML Templates Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 312. HTML Templates• Blank Application Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 313. HTML Templates• Blank Application • Minimal application using Metro style frameworks Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 314. 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
    • 315. 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
    • 316. 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
    • 317. 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
    • 318. HTML Templates Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 319. HTML Templates• Navigation Application Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 320. 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
    • 321. 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
    • 322. 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
    • 323. DEMO Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 324. DEMO• HTML Templates Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 325. Closing Head Shot Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 326. 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
    • 327. 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
    • 328. 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
    • 329. 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
    • 330. Learn More! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 331. 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