Building Windows 8/Metro-StyleApplications using      Learn More @ http://www.learnnowonline.com         Copyright © by Ap...
The Goal       Learn More @ http://www.learnnowonline.com           Copyright © by Application Developers Training Company
The Goal• Get started creating Metro style applications           Learn More @ http://www.learnnowonline.com              ...
The Goal• Get started creating Metro style applications  • Using Javascript, HTML5 and CSS3           Learn More @ http://...
The Goal• Get started creating Metro style applications  • Using Javascript, HTML5 and CSS3• Introduce the basic concepts ...
The Goal• Get started creating Metro style applications  • Using Javascript, HTML5 and CSS3• Introduce the basic concepts•...
The Goal• Get started creating Metro style applications  • Using Javascript, HTML5 and CSS3• Introduce the basic concepts•...
Along the way…       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Co...
Along the way…• Learn to create a user interface using new Metro  style features          Learn More @ http://www.learnnow...
Along the way…• Learn to create a user interface using new Metro  style features• Handle navigation using Page Controls   ...
Along the way…• Learn to create a user interface using new Metro  style features• Handle navigation using Page Controls• A...
Assumptions…      Learn More @ http://www.learnnowonline.com         Copyright © by Application Developers Training Company
Assumptions…• Basic knowledge of Web technologies:          Learn More @ http://www.learnnowonline.com             Copyrig...
Assumptions…• Basic knowledge of Web technologies:  • HTML, JavaScript, CSS          Learn More @ http://www.learnnowonlin...
Assumptions…• Basic knowledge of Web technologies:  • HTML, JavaScript, CSS• Basic knowledge of .NET development/tools    ...
Assumptions…• Basic knowledge of Web technologies:  • HTML, JavaScript, CSS• Basic knowledge of .NET development/tools   •...
Assumptions…• Basic knowledge of Web technologies:  • HTML, JavaScript, CSS• Basic knowledge of .NET development/tools   •...
Assumptions…• Basic knowledge of Web technologies:  • HTML, JavaScript, CSS• Basic knowledge of .NET development/tools   •...
Platform and Tools       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Trainin...
Platform and Tools       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Trainin...
Platform and Tools       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Trainin...
Platform and Tools      Learn More @ http://www.learnnowonline.com         Copyright © by Application Developers Training ...
Platform and Tools• Some things to note:          Learn More @ http://www.learnnowonline.com             Copyright © by Ap...
Platform and Tools• Some things to note:  • Stack for Metro apps in green           Learn More @ http://www.learnnowonline...
Platform and Tools• Some things to note:  • Stack for Metro apps in green     • .NET/CLR apps in blue           Learn More...
Platform and Tools• Some things to note:  • Stack for Metro apps in green     • .NET/CLR apps in blue  • Silverlight avail...
Platform and Tools• Some things to note:  • Stack for Metro apps in green     • .NET/CLR apps in blue  • Silverlight avail...
Platform and Tools       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Trainin...
Platform and Tools       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Trainin...
Platform and Tools       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Trainin...
Basic CLR Facts       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training C...
Basic CLR Facts• Only one CLR—each app/app pool creates a  process and uses the CLR         Learn More @ http://www.learnn...
Basic CLR Facts• Only one CLR—each app/app pool creates a  process and uses the CLR  • Desktop and Metro app using CLR use...
Basic CLR Facts• Only one CLR—each app/app pool creates a  process and uses the CLR  • Desktop and Metro app using CLR use...
Basic CLR Facts• Only one CLR—each app/app pool creates a  process and uses the CLR  • Desktop and Metro app using CLR use...
.NET and Metro Style Apps       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers ...
.NET and Metro Style Apps• Metro apps run in an app container that limits  access          Learn More @ http://www.learnno...
.NET and Metro Style Apps• Metro apps run in an app container that limits  access  • Protects user from malicious apps    ...
.NET and Metro Style Apps• Metro apps run in an app container that limits  access  • Protects user from malicious apps  • ...
.NET and Metro Style Apps• Metro apps run in an app container that limits  access  • Protects user from malicious apps  • ...
.NET and Metro Style Apps• Metro apps run in an app container that limits  access  • Protects user from malicious apps  • ...
What are the Options?       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Trai...
What are the Options?• Can build Metro style apps using:          Learn More @ http://www.learnnowonline.com             C...
What are the Options?• Can build Metro style apps using:  • C#, Visual Basic, or C++ and XAML          Learn More @ http:/...
What are the Options?• Can build Metro style apps using:  • C#, Visual Basic, or C++ and XAML     • XAML provides both mar...
What are the Options?• Can build Metro style apps using:  • C#, Visual Basic, or C++ and XAML     • XAML provides both mar...
What are the Options?• Can build Metro style apps using:  • C#, Visual Basic, or C++ and XAML     • XAML provides both mar...
What are the Options?• Can build Metro style apps using:  • C#, Visual Basic, or C++ and XAML     • XAML provides both mar...
What are the Options?• Can build Metro style apps using:  • C#, Visual Basic, or C++ and XAML     • XAML provides both mar...
What are the Options?• Can build Metro style apps using:  • C#, Visual Basic, or C++ and XAML     • XAML provides both mar...
Is One Better Than the Other?       Learn More @ http://www.learnnowonline.com          Copyright © by Application Develop...
Is One Better Than the Other?• Use the language of your choice          Learn More @ http://www.learnnowonline.com        ...
Is One Better Than the Other?• Use the language of your choice• HTML5/CSS3/JavaScript useful if:          Learn More @ htt...
Is One Better Than the Other?• Use the language of your choice• HTML5/CSS3/JavaScript useful if:  • Comfortable with Web t...
Is One Better Than the Other?• Use the language of your choice• HTML5/CSS3/JavaScript useful if:  • Comfortable with Web t...
Is One Better Than the Other?• Use the language of your choice• HTML5/CSS3/JavaScript useful if:  • Comfortable with Web t...
Is One Better Than the Other?• Use the language of your choice• HTML5/CSS3/JavaScript useful if:  • Comfortable with Web t...
Is One Better Than the Other?• Use the language of your choice• HTML5/CSS3/JavaScript useful if:  • Comfortable with Web t...
DEMO 1         Learn More @ http://www.learnnowonline.com            Copyright © by Application Developers Training Company
DEMO 1• Hello, World using HTML5/CSS/JavaScript          Learn More @ http://www.learnnowonline.com             Copyright ...
Slightly More Complex App       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers ...
Slightly More Complex App• Work through old version of blog sample on  Microsoft’s site          Learn More @ http://www.l...
Slightly More Complex App• Work through old version of blog sample on  Microsoft’s site• New (more complex version) starts...
Slightly More Complex App• Work through old version of blog sample on  Microsoft’s site• New (more complex version) starts...
Slightly More Complex App• Work through old version of blog sample on  Microsoft’s site• New (more complex version) starts...
Slightly More Complex App• Work through old version of blog sample on  Microsoft’s site• New (more complex version) starts...
Slightly More Complex App• Work through old version of blog sample on  Microsoft’s site• New (more complex version) starts...
Modify the Markup       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training...
Modify the Markup• Create simple layout          Learn More @ http://www.learnnowonline.com             Copyright © by App...
Modify the Markup• Create simple layout• Use div elements with id attribute set           Learn More @ http://www.learnnow...
DEMO 2         Learn More @ http://www.learnnowonline.com            Copyright © by Application Developers Training Company
DEMO 2• Create markup         Learn More @ http://www.learnnowonline.com            Copyright © by Application Developers ...
Modify Styles        Learn More @ http://www.learnnowonline.com           Copyright © by Application Developers Training C...
Modify Styles• Replace style information in default.css           Learn More @ http://www.learnnowonline.com              ...
Modify Styles• Replace style information in default.css• Note class and id-based styles           Learn More @ http://www....
DEMO 3         Learn More @ http://www.learnnowonline.com            Copyright © by Application Developers Training Company
DEMO 3• Add style information          Learn More @ http://www.learnnowonline.com             Copyright © by Application D...
Examine the Default Code       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers T...
Examine the Default Code       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers T...
Main Function       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Com...
Main Function• Code in self-executing anonymous function          Learn More @ http://www.learnnowonline.com             C...
Main Function• Code in self-executing anonymous function  • Recommended JavaScript practice          Learn More @ http://w...
Main Function• Code in self-executing anonymous function  • Recommended JavaScript practice  • Avoids polluting the global...
Han dle Events       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Co...
Han dle Events• Next code hooks handler for onactivated event           Learn More @ http://www.learnnowonline.com        ...
Han dle Events• Next code hooks handler for onactivated event  • Runs after app and its resources (default.html) have    l...
Han dle Events• Next code hooks handler for onactivated event  • Runs after app and its resources (default.html) have    l...
Han dle Events• Next code hooks handler for onactivated event  • Runs after app and its resources (default.html) have    l...
Check for Activation Kind        Learn More @ http://www.learnnowonline.com           Copyright © by Application Developer...
Check for Activation Kind• Just to make sure, check that this is a launch  activation before running initialization code: ...
Check for Activation Kind   • Just to make sure, check that this is a launch     activation before running initialization ...
Ready to Fire!        Learn More @ http://www.learnnowonline.com           Copyright © by Application Developers Training ...
Ready to Fire!• Must indicate to the application that you’re ready  to receive events           Learn More @ http://www.le...
Ready to Fire!• Must indicate to the application that you’re ready  to receive events• Can appear anywhere in the main fun...
Ready to Fire!• Must indicate to the application that you’re ready  to receive events• Can appear anywhere in the main fun...
Ready to Fire!• Must indicate to the application that you’re ready  to receive events• Can appear anywhere in the main fun...
Downloading Data       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training ...
Downloading Data• Need some means of making an HTTP request         Learn More @ http://www.learnnowonline.com            ...
Downloading Data• Need some means of making an HTTP request• In WinJS, xhr function provides capability         Learn More...
Downloading Data• Need some means of making an HTTP request• In WinJS, xhr function provides capability  • xhr == XMLHttpR...
Downloading Data• Need some means of making an HTTP request• In WinJS, xhr function provides capability  • xhr == XMLHttpR...
Downloading Data• Need some means of making an HTTP request• In WinJS, xhr function provides capability  • xhr == XMLHttpR...
Downloading Data• Need some means of making an HTTP request• In WinJS, xhr function provides capability  • xhr == XMLHttpR...
Downloading Data• Need some means of making an HTTP request• In WinJS, xhr function provides capability  • xhr == XMLHttpR...
Passing Information       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Traini...
Passing Information• Supply a JSON object containing fields  corresponding to the parameters:          Learn More @ http:/...
Passing Information• Supply a JSON object containing fields  corresponding to the parameters:  • type           Learn More...
Passing Information• Supply a JSON object containing fields  corresponding to the parameters:  • type  • url (required)   ...
Passing Information• Supply a JSON object containing fields  corresponding to the parameters:  • type  • url (required)  •...
Passing Information• Supply a JSON object containing fields  corresponding to the parameters:  • type  • url (required)  •...
Passing Information• Supply a JSON object containing fields  corresponding to the parameters:  • type  • url (required)  •...
Passing Information• Supply a JSON object containing fields  corresponding to the parameters:  • type  • url (required)  •...
Synchronous or Asynchronous?       Learn More @ http://www.learnnowonline.com          Copyright © by Application Develope...
Synchronous or Asynchronous?• XMLHttpRequest object allows developer to  select synchronous or asynchronous result        ...
Synchronous or Asynchronous?• XMLHttpRequest object allows developer to  select synchronous or asynchronous result  • xhr ...
Synchronous or Asynchronous?• XMLHttpRequest object allows developer to  select synchronous or asynchronous result  • xhr ...
Synchronous or Asynchronous?• XMLHttpRequest object allows developer to  select synchronous or asynchronous result  • xhr ...
Synchronous or Asynchronous?• XMLHttpRequest object allows developer to  select synchronous or asynchronous result  • xhr ...
Synchronous or Asynchronous?• XMLHttpRequest object allows developer to  select synchronous or asynchronous result  • xhr ...
Return Value       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Comp...
Return Value• Asynchronous function in WinJS return object  called a promise (called deferred in some APIs)            Lea...
Return Value• Asynchronous function in WinJS return object  called a promise (called deferred in some APIs)• Promise must ...
Return Value• Asynchronous function in WinJS return object  called a promise (called deferred in some APIs)• Promise must ...
Return Value• Asynchronous function in WinJS return object  called a promise (called deferred in some APIs)• Promise must ...
Return Value• Asynchronous function in WinJS return object  called a promise (called deferred in some APIs)• Promise must ...
Return Value• Asynchronous function in WinJS return object  called a promise (called deferred in some APIs)• Promise must ...
Return Value• Asynchronous function in WinJS return object  called a promise (called deferred in some APIs)• Promise must ...
Promise.then Method       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Traini...
Promise.then Method• Understand that the then method indicates  functions to call on success and failure          Learn Mo...
Promise.then Method• Understand that the then method indicates  functions to call on success and failure• Call to xhr retu...
Promise.then Method• Understand that the then method indicates  functions to call on success and failure• Call to xhr retu...
Promise.then Method• Understand that the then method indicates  functions to call on success and failure• Call to xhr retu...
DEMO 4         Learn More @ http://www.learnnowonline.com            Copyright © by Application Developers Training Company
DEMO 4• Add code to set up downloads          Learn More @ http://www.learnnowonline.com             Copyright © by Applic...
DEMO 4• Add code to set up downloads• Discuss          Learn More @ http://www.learnnowonline.com             Copyright © ...
What Happened?      Learn More @ http://www.learnnowonline.com         Copyright © by Application Developers Training Comp...
What Happened?• Once the xhr call completes          Learn More @ http://www.learnnowonline.com             Copyright © by...
What Happened?• Once the xhr call completes  • Code calls processPosts function           Learn More @ http://www.learnnow...
What Happened?• Once the xhr call completes  • Code calls processPosts function  • Passes request content as parameter    ...
What Happened?• Once the xhr call completes  • Code calls processPosts function  • Passes request content as parameter    ...
What Happened?• Once the xhr call completes  • Code calls processPosts function  • Passes request content as parameter    ...
What Happened?• Once the xhr call completes  • Code calls processPosts function  • Passes request content as parameter    ...
What’s Next?       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Comp...
What’s Next?• Modify application          Learn More @ http://www.learnnowonline.com             Copyright © by Applicatio...
What’s Next?• Modify application  • Add support for Windows Runtime methods          Learn More @ http://www.learnnowonlin...
What’s Next?• Modify application  • Add support for Windows Runtime methods     • Easier to use Windows.Web.Syndication na...
What’s Next?• Modify application  • Add support for Windows Runtime methods     • Easier to use Windows.Web.Syndication na...
What’s Next?• Modify application  • Add support for Windows Runtime methods     • Easier to use Windows.Web.Syndication na...
What’s Next?• Modify application  • Add support for Windows Runtime methods     • Easier to use Windows.Web.Syndication na...
What’s Next?• Modify application  • Add support for Windows Runtime methods     • Easier to use Windows.Web.Syndication na...
Using Windows Runtime       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Trai...
Using Windows Runtime• Haven’t yet really used Windows          Learn More @ http://www.learnnowonline.com             Cop...
Using Windows Runtime• Haven’t yet really used Windows  • Instead, used Web technologies          Learn More @ http://www....
Using Windows Runtime• Haven’t yet really used Windows  • Instead, used Web technologies• In addition to WinJS, Metro styl...
Using Windows Runtime• Haven’t yet really used Windows  • Instead, used Web technologies• In addition to WinJS, Metro styl...
Using Windows Runtime• Haven’t yet really used Windows  • Instead, used Web technologies• In addition to WinJS, Metro styl...
DEMO 5         Learn More @ http://www.learnnowonline.com            Copyright © by Application Developers Training Company
DEMO 5• Replace code, using SyndicationClient          Learn More @ http://www.learnnowonline.com             Copyright © ...
Adding Data Binding       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Traini...
Adding Data Binding• Current code manually pushes data into <div>  elements          Learn More @ http://www.learnnowonlin...
Adding Data Binding• Current code manually pushes data into <div>  elements• Would be simpler to create a template that  c...
Adding Data Binding• Current code manually pushes data into <div>  elements• Would be simpler to create a template that  c...
Adding Data Binding• Current code manually pushes data into <div>  elements• Would be simpler to create a template that  c...
References and Attributes       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers ...
References and Attributes• In order to use templates, must add more  JavaScript content, in default.html          Learn Mo...
References and Attributes• In order to use templates, must add more  JavaScript content, in default.html  • Much like addi...
References and Attributes• In order to use templates, must add more  JavaScript content, in default.html  • Much like addi...
References and Attributes• In order to use templates, must add more  JavaScript content, in default.html  • Much like addi...
References and Attributes       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers ...
References and Attributes• In this case, set data-win-control attribute to  WinJS.Binding.Template          Learn More @ h...
References and Attributes• In this case, set data-win-control attribute to  WinJS.Binding.Template  • Acts as constructor ...
References and Attributes• In this case, set data-win-control attribute to  WinJS.Binding.Template  • Acts as constructor ...
References and Attributes• In this case, set data-win-control attribute to  WinJS.Binding.Template  • Acts as constructor ...
References and Attributes• In this case, set data-win-control attribute to  WinJS.Binding.Template  • Acts as constructor ...
References and Attributes• In this case, set data-win-control attribute to  WinJS.Binding.Template  • Acts as constructor ...
Binding Data       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Comp...
Binding Data• WinJS.Binding.Template class connects  properties of elements with data          Learn More @ http://www.lea...
Binding Data• WinJS.Binding.Template class connects  properties of elements with data• Looks for data-win-bind attribute i...
Binding Data• WinJS.Binding.Template class connects  properties of elements with data• Looks for data-win-bind attribute i...
Binding Data• WinJS.Binding.Template class connects  properties of elements with data• Looks for data-win-bind attribute i...
Binding Data• WinJS.Binding.Template class connects  properties of elements with data• Looks for data-win-bind attribute i...
Binding Data• WinJS.Binding.Template class connects  properties of elements with data• Looks for data-win-bind attribute i...
DEMO 6         Learn More @ http://www.learnnowonline.com            Copyright © by Application Developers Training Company
DEMO 6• Add references          Learn More @ http://www.learnnowonline.com             Copyright © by Application Develope...
DEMO 6• Add references• Add template          Learn More @ http://www.learnnowonline.com             Copyright © by Applic...
DEMO 6• Add references• Add template• Modify code          Learn More @ http://www.learnnowonline.com             Copyrigh...
DEMO 6• Add references• Add template• Modify code• Run          Learn More @ http://www.learnnowonline.com             Cop...
Things to Note       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Co...
Things to Note• Calling document.getElementById retrieves  reference to HTML element          Learn More @ http://www.lear...
Things to Note• Calling document.getElementById retrieves  reference to HTML element  • Provided property with same name a...
Things to Note• Calling document.getElementById retrieves  reference to HTML element  • Provided property with same name a...
Things to Note• Calling document.getElementById retrieves  reference to HTML element  • Provided property with same name a...
Things to Note• Calling document.getElementById retrieves  reference to HTML element   • Provided property with same name ...
Things to Note       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Co...
Things to Note• For each item in the RSS feed, the code creates  JSON object named post containing the  information:      ...
Things to Note• For each item in the RSS feed, the code creates  JSON object named post containing the  information:      ...
Things to Note       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Co...
Things to Note• The template provides render method           Learn More @ http://www.learnnowonline.com              Copy...
Things to Note• The template provides render method  • Stamps out instance of the template for each item you    supply    ...
Things to Note• The template provides render method  • Stamps out instance of the template for each item you    supply    ...
Things to Note• The template provides render method  • Stamps out instance of the template for each item you    supply    ...
Things to Note• The template provides render method  • Stamps out instance of the template for each item you    supply    ...
Things to Note• The template provides render method  • Stamps out instance of the template for each item you    supply    ...
Things to Note• The template provides render method  • Stamps out instance of the template for each item you    supply    ...
Current Status       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Co...
Current Status• Have used WinJS and Windows Runtime to make  the code clearer         Learn More @ http://www.learnnowonli...
Current Status• Have used WinJS and Windows Runtime to make  the code clearer• Have used templates and simple binding to m...
Current Status• Have used WinJS and Windows Runtime to make  the code clearer• Have used templates and simple binding to m...
Current Status• Have used WinJS and Windows Runtime to make  the code clearer• Have used templates and simple binding to m...
Current Status• Have used WinJS and Windows Runtime to make  the code clearer• Have used templates and simple binding to m...
Current Status• Have used WinJS and Windows Runtime to make  the code clearer• Have used templates and simple binding to m...
Adding a ListView       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training...
Adding a ListView• In addition to template control and intrinsic  HTML controls           Learn More @ http://www.learnnow...
Adding a ListView• In addition to template control and intrinsic  HTML controls   • WinJS provides several other built-in ...
Adding a ListView• In addition to template control and intrinsic  HTML controls   • WinJS provides several other built-in ...
Adding a ListView• In addition to template control and intrinsic  HTML controls   • WinJS provides several other built-in ...
Adding a ListView• In addition to template control and intrinsic  HTML controls   • WinJS provides several other built-in ...
Adding a ListView• In addition to template control and intrinsic  HTML controls   • WinJS provides several other built-in ...
Show Post Titles in ListView        Learn More @ http://www.learnnowonline.com           Copyright © by Application Develo...
Show Post Titles in ListView• Modify existing template, removing content          Learn More @ http://www.learnnowonline.c...
Show Post Titles in ListView• Modify existing template, removing content• Add ListView declaratively using data-win-contro...
Show Post Titles in ListView• Modify existing template, removing content• Add ListView declaratively using data-win-contro...
ListView Markup• data-win-options attribute specifies parameters  to pass to WinJS.UI.ListView constructor  • Attribute va...
ListView Markup   <div id="posts" data-win-control="WinJS.UI.ListView"         data-win-options="{itemTemplate: template, ...
ListView Markup   <div id="posts" data-win-control="WinJS.UI.ListView"         data-win-options="{itemTemplate: template, ...
DEMO 7         Learn More @ http://www.learnnowonline.com            Copyright © by Application Developers Training Company
DEMO 7• Modify markup         Learn More @ http://www.learnnowonline.com            Copyright © by Application Developers ...
DEMO 7• Modify markup• Look at documentation for WinJS.UI.ListView          Learn More @ http://www.learnnowonline.com    ...
DEMO 7• Modify markup• Look at documentation for WinJS.UI.ListView• Modify processPosts()          Learn More @ http://www...
DEMO 7• Modify markup• Look at documentation for WinJS.UI.ListView• Modify processPosts()• Note dataSource property of Lis...
Whats Next?       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Company
Whats Next?• Current demo implementation shows only blog  entry titles          Learn More @ http://www.learnnowonline.com...
Whats Next?• Current demo implementation shows only blog  entry titles  • Need user interface to display content of select...
Whats Next?• Current demo implementation shows only blog  entry titles  • Need user interface to display content of select...
Whats Next?• Current demo implementation shows only blog  entry titles  • Need user interface to display content of select...
Whats Next?• Current demo implementation shows only blog  entry titles  • Need user interface to display content of select...
Whats Next?• Current demo implementation shows only blog  entry titles  • Need user interface to display content of select...
Modify Layout       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Com...
Modify Layout• Layout is defined in CSS          Learn More @ http://www.learnnowonline.com             Copyright © by App...
Modify Layout• Layout is defined in CSS• Start by modifying body, #posts, and #content  elements          Learn More @ htt...
Modify Layout• Layout is defined in CSS• Start by modifying body, #posts, and #content  elements  • So layout is appropria...
DEMO 8         Learn More @ http://www.learnnowonline.com            Copyright © by Application Developers Training Company
DEMO 8• Modify CSS         Learn More @ http://www.learnnowonline.com            Copyright © by Application Developers Tra...
Things to Note       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Co...
Things to Note• body: display set to –ms-grid  • Part of Microsoft extension to CSS for grid  • -ms-grid-rows: first colum...
Things to Note                                                             display: -ms-grid;                             ...
Things to Note       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Co...
Things to Note• #posts and #content element descriptions  indicate row and column locations (1-based):          Learn More...
Things to Note• #posts and #content element descriptions  indicate row and column locations (1-based): #posts {   width: 9...
Modify Markup       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Com...
Modify Markup• Once CSS completed         Learn More @ http://www.learnnowonline.com            Copyright © by Application...
Modify Markup• Once CSS completed  • Modify markup          Learn More @ http://www.learnnowonline.com             Copyrig...
Modify Markup• Once CSS completed  • Modify markup  • Re-adding template for content          Learn More @ http://www.lear...
Things to Note       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Co...
Things to Note• Modified markup for ListView          Learn More @ http://www.learnnowonline.com             Copyright © b...
Things to Note• Modified markup for ListView <div id="posts" data-win-control="WinJS.UI.ListView"      data-win-options="{...
Things to Note• Modified markup for ListView <div id="posts" data-win-control="WinJS.UI.ListView"      data-win-options="{...
Things to Note• Modified markup for ListView <div id="posts" data-win-control="WinJS.UI.ListView"      data-win-options="{...
Things to Note• Modified markup for ListView <div id="posts" data-win-control="WinJS.UI.ListView"      data-win-options="{...
Things to Note• Modified markup for ListView <div id="posts" data-win-control="WinJS.UI.ListView"      data-win-options="{...
Things to Note• Modified markup for ListView <div id="posts" data-win-control="WinJS.UI.ListView"      data-win-options="{...
Things to Note       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Co...
Things to Note• Markup for content template:          Learn More @ http://www.learnnowonline.com             Copyright © b...
Things to Note• Markup for content template:<div id="contentTemplate" data-win-control="WinJS.Binding.Template">  <div dat...
Things to Note• Markup for content template:<div id="contentTemplate" data-win-control="WinJS.Binding.Template">  <div dat...
Things to Note• Markup for content template:<div id="contentTemplate" data-win-control="WinJS.Binding.Template">  <div dat...
Things to Note• Markup for content template:<div id="contentTemplate" data-win-control="WinJS.Binding.Template">  <div dat...
Things to Note• Markup for content template:<div id="contentTemplate" data-win-control="WinJS.Binding.Template">  <div dat...
Things to Note• Markup for content template:<div id="contentTemplate" data-win-control="WinJS.Binding.Template">  <div dat...
DEMO 9         Learn More @ http://www.learnnowonline.com            Copyright © by Application Developers Training Company
DEMO 9• Add new markup         Learn More @ http://www.learnnowonline.com            Copyright © by Application Developers...
Add Event Handler       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training...
Add Event Handler• To finish, must add event handler for ListView  controls onselectionchanged event          Learn More @...
Add Event Handler• To finish, must add event handler for ListView  controls onselectionchanged event• Gather information a...
Add Event Handler• To finish, must add event handler for ListView  controls onselectionchanged event• Gather information a...
Add Event Handler• To finish, must add event handler for ListView  controls onselectionchanged event• Gather information a...
Add Event Handler• To finish, must add event handler for ListView  controls onselectionchanged event• Gather information a...
DEMO 10      Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Company
DEMO 10• Add event handler          Learn More @ http://www.learnnowonline.com             Copyright © by Application Deve...
DEMO 10• Add event handler• Run          Learn More @ http://www.learnnowonline.com             Copyright © by Application...
DEMO 10• Add event handler• Run• Fix namespace          Learn More @ http://www.learnnowonline.com             Copyright ©...
DEMO 10• Add event handler• Run• Fix namespace• Run          Learn More @ http://www.learnnowonline.com             Copyri...
Things to Note       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Co...
Things to Note• Can define namespace and specify public names  for members:          Learn More @ http://www.learnnowonlin...
Things to Note• Can define namespace and specify public names  for members:         WinJS.Namespace.define(rssReader, {   ...
Things to Note• Can define namespace and specify public names  for members:         WinJS.Namespace.define(rssReader, {   ...
Things to Note• Can define namespace and specify public names  for members:         WinJS.Namespace.define(rssReader, {   ...
Things to Note• Can define namespace and specify public names  for members:         WinJS.Namespace.define(rssReader, {   ...
Look Ma, No Designer!       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Trai...
Look Ma, No Designer!• Yes, it’s true            Learn More @ http://www.learnnowonline.com               Copyright © by A...
Look Ma, No Designer!• Yes, it’s true   • Visual Studio 11 doesn’t include a visual designer for     JavaScript/HTML Metro...
Look Ma, No Designer!• Yes, it’s true   • Visual Studio 11 doesn’t include a visual designer for     JavaScript/HTML Metro...
Look Ma, No Designer!• Yes, it’s true   • Visual Studio 11 doesn’t include a visual designer for     JavaScript/HTML Metro...
Look Ma, No Designer!• Yes, it’s true   • Visual Studio 11 doesn’t include a visual designer for     JavaScript/HTML Metro...
Look Ma, No Designer!• Yes, it’s true   • Visual Studio 11 doesn’t include a visual designer for     JavaScript/HTML Metro...
Look Ma, No Designer!• Yes, it’s true   • Visual Studio 11 doesn’t include a visual designer for     JavaScript/HTML Metro...
Using Visual Studio with Blend        Learn More @ http://www.learnnowonline.com           Copyright © by Application Deve...
Using Visual Studio with Blend• Easy to open a Visual Studio project in  Expression Blend          Learn More @ http://www...
Using Visual Studio with Blend• Easy to open a Visual Studio project in  Expression Blend• Can modify design and code ther...
Using Visual Studio with Blend• Easy to open a Visual Studio project in  Expression Blend• Can modify design and code ther...
Using Visual Studio with Blend• Easy to open a Visual Studio project in  Expression Blend• Can modify design and code ther...
Using Visual Studio with Blend• Easy to open a Visual Studio project in  Expression Blend• Can modify design and code ther...
DEMO       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Company
DEMO• Edit project in Expression Blend          Learn More @ http://www.learnnowonline.com             Copyright © by Appl...
Visual Studio Application Templates        Learn More @ http://www.learnnowonline.com           Copyright © by Application...
Visual Studio Application Templates• Visual Studio 11 Express for Windows ships with  a set of Metro style application tem...
Visual Studio Application Templates• Visual Studio 11 Express for Windows ships with  a set of Metro style application tem...
HTML Templates      Learn More @ http://www.learnnowonline.com         Copyright © by Application Developers Training Comp...
HTML Templates      Learn More @ http://www.learnnowonline.com         Copyright © by Application Developers Training Comp...
HTML Templates      Learn More @ http://www.learnnowonline.com         Copyright © by Application Developers Training Comp...
HTML Templates      Learn More @ http://www.learnnowonline.com         Copyright © by Application Developers Training Comp...
HTML Templates• Blank Application          Learn More @ http://www.learnnowonline.com             Copyright © by Applicati...
HTML Templates• Blank Application  • Minimal application using Metro style frameworks           Learn More @ http://www.le...
HTML Templates• Blank Application  • Minimal application using Metro style frameworks• Fixed Layout Application           ...
HTML Templates• Blank Application  • Minimal application using Metro style frameworks• Fixed Layout Application  • Minimal...
HTML Templates• Blank Application  • Minimal application using Metro style frameworks• Fixed Layout Application  • Minimal...
Building Windows 8 Metro Style Applications Using JavaScript and HTML5
Building Windows 8 Metro Style Applications Using JavaScript and HTML5
Building Windows 8 Metro Style Applications Using JavaScript and HTML5
Building Windows 8 Metro Style Applications Using JavaScript and HTML5
Building Windows 8 Metro Style Applications Using JavaScript and HTML5
Building Windows 8 Metro Style Applications Using JavaScript and HTML5
Building Windows 8 Metro Style Applications Using JavaScript and HTML5
Building Windows 8 Metro Style Applications Using JavaScript and HTML5
Building Windows 8 Metro Style Applications Using JavaScript and HTML5
Building Windows 8 Metro Style Applications Using JavaScript and HTML5
Building Windows 8 Metro Style Applications Using JavaScript and HTML5
Building Windows 8 Metro Style Applications Using JavaScript and HTML5
Building Windows 8 Metro Style Applications Using JavaScript and HTML5
Building Windows 8 Metro Style Applications Using JavaScript and HTML5
Building Windows 8 Metro Style Applications Using JavaScript and HTML5
Upcoming SlideShare
Loading in...5
×

Building Windows 8 Metro Style Applications Using JavaScript and HTML5

1,509

Published on

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,509
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

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 of "Building Windows 8 Metro Style Applications Using JavaScript and HTML5"

    1. 1. Building Windows 8/Metro-StyleApplications using Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    2. 2. The Goal Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    3. 3. The Goal• Get started creating Metro style applications Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    4. 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. 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. 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. 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. 8. Along the way… Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    9. 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. 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. 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. 12. Assumptions… Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    13. 13. Assumptions…• Basic knowledge of Web technologies: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    14. 14. Assumptions…• Basic knowledge of Web technologies: • HTML, JavaScript, CSS Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    15. 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. 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. 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. 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. 19. Platform and Tools Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    20. 20. Platform and Tools Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    21. 21. Platform and Tools Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    22. 22. Platform and Tools Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    23. 23. Platform and Tools• Some things to note: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    24. 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. 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. 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. 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. 28. Platform and Tools Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    29. 29. Platform and Tools Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    30. 30. Platform and Tools Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    31. 31. Basic CLR Facts Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    32. 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. 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. 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. 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. 36. .NET and Metro Style Apps Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    37. 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. 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. 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. 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. 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. 42. What are the Options? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    43. 43. What are the Options?• Can build Metro style apps using: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    44. 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. 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. 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. 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. 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. 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. 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. 51. Is One Better Than the Other? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    52. 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. 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. 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. 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. 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. 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. 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. 59. DEMO 1 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    60. 60. DEMO 1• Hello, World using HTML5/CSS/JavaScript Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    61. 61. Slightly More Complex App Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    62. 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. 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. 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. 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. 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. 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. 68. Modify the Markup Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    69. 69. Modify the Markup• Create simple layout Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    70. 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. 71. DEMO 2 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    72. 72. DEMO 2• Create markup Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    73. 73. Modify Styles Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    74. 74. Modify Styles• Replace style information in default.css Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    75. 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. 76. DEMO 3 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    77. 77. DEMO 3• Add style information Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    78. 78. Examine the Default Code Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    79. 79. Examine the Default Code Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    80. 80. Main Function Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    81. 81. Main Function• Code in self-executing anonymous function Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    82. 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. 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. 84. Han dle Events Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    85. 85. Han dle Events• Next code hooks handler for onactivated event Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    86. 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. 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. 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. 89. Check for Activation Kind Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    90. 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. 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. 92. Ready to Fire! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    93. 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. 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. 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. 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. 97. Downloading Data Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    98. 98. Downloading Data• Need some means of making an HTTP request Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    99. 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. 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. 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. 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. 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. 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. 105. Passing Information Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    106. 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. 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. 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. 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. 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. 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. 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. 113. Synchronous or Asynchronous? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    114. 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. 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. 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. 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. 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. 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. 120. Return Value Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    121. 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. 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. 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. 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. 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. 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. 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. 128. Promise.then Method Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    129. 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. 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. 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. 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. 133. DEMO 4 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    134. 134. DEMO 4• Add code to set up downloads Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    135. 135. DEMO 4• Add code to set up downloads• Discuss Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    136. 136. What Happened? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    137. 137. What Happened?• Once the xhr call completes Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    138. 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. 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. 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. 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. 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. 143. What’s Next? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    144. 144. What’s Next?• Modify application Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    145. 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. 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. 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. 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. 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. 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. 151. Using Windows Runtime Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    152. 152. Using Windows Runtime• Haven’t yet really used Windows Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    153. 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. 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. 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. 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. 157. DEMO 5 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    158. 158. DEMO 5• Replace code, using SyndicationClient Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    159. 159. Adding Data Binding Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    160. 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. 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. 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. 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. 164. References and Attributes Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    165. 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. 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. 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. 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. 169. References and Attributes Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    170. 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. 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. 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. 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. 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. 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. 176. Binding Data Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    177. 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. 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. 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. 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. 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. 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. 183. DEMO 6 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    184. 184. DEMO 6• Add references Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    185. 185. DEMO 6• Add references• Add template Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    186. 186. DEMO 6• Add references• Add template• Modify code Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    187. 187. DEMO 6• Add references• Add template• Modify code• Run Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    188. 188. Things to Note Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    189. 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. 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. 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. 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. 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. 194. Things to Note Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    195. 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. 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. 197. Things to Note Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    198. 198. Things to Note• The template provides render method Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    199. 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. 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. 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. 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. 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. 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. 205. Current Status Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    206. 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. 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. 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. 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. 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. 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. 212. Adding a ListView Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    213. 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. 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. 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. 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. 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. 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. 219. Show Post Titles in ListView Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    220. 220. Show Post Titles in ListView• Modify existing template, removing content Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    221. 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. 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. 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. 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. 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. 226. DEMO 7 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    227. 227. DEMO 7• Modify markup Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    228. 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. 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. 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. 231. Whats Next? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    232. 232. Whats Next?• Current demo implementation shows only blog entry titles Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    233. 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. 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. 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. 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. 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. 238. Modify Layout Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    239. 239. Modify Layout• Layout is defined in CSS Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    240. 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. 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. 242. DEMO 8 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    243. 243. DEMO 8• Modify CSS Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    244. 244. Things to Note Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    245. 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. 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. 247. Things to Note Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    248. 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. 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. 250. Modify Markup Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    251. 251. Modify Markup• Once CSS completed Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    252. 252. Modify Markup• Once CSS completed • Modify markup Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    253. 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. 254. Things to Note Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    255. 255. Things to Note• Modified markup for ListView Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    256. 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. 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. 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. 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. 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. 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. 262. Things to Note Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    263. 263. Things to Note• Markup for content template: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    264. 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. 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. 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. 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. 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. 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. 270. DEMO 9 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    271. 271. DEMO 9• Add new markup Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    272. 272. Add Event Handler Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    273. 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. 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. 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. 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. 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. 278. DEMO 10 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    279. 279. DEMO 10• Add event handler Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    280. 280. DEMO 10• Add event handler• Run Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    281. 281. DEMO 10• Add event handler• Run• Fix namespace Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    282. 282. DEMO 10• Add event handler• Run• Fix namespace• Run Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    283. 283. Things to Note Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    284. 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. 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. 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. 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. 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. 289. Look Ma, No Designer! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    290. 290. Look Ma, No Designer!• Yes, it’s true Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    291. 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. 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. 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. 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. 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. 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. 297. Using Visual Studio with Blend Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    298. 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. 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. 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. 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. 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. 303. DEMO Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    304. 304. DEMO• Edit project in Expression Blend Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    305. 305. Visual Studio Application Templates Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    306. 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. 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. 308. HTML Templates Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    309. 309. HTML Templates Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    310. 310. HTML Templates Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    311. 311. HTML Templates Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    312. 312. HTML Templates• Blank Application Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    313. 313. HTML Templates• Blank Application • Minimal application using Metro style frameworks Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    314. 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. 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. 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

    ×