Más contenido relacionado La actualidad más candente (16) Similar a Building Windows 8 Metro Style Applications Using JavaScript and HTML5 (20) Más de LearnNowOnline (16) Building Windows 8 Metro Style Applications Using JavaScript and HTML52. 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
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
• Wouldn't 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
• 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
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
• 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
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
• 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
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. What's Next?
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
232. What's Next?
• Current demo implementation shows only blog
entry titles
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
233. 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
234. 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
235. 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
236. 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
237. 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
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
control's 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
control's 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
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
276. 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
277. 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
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