1 / 38

Migrate Your Skills: ASP.NET to Metro

Building Windows Metro Applications with JavaScript Using Visual Studio 2012 Express for Windows 8. Migrate Your Skills: ASP.NET to Metro. Introductions. John DeVight Senior Principal Software Engineer with ManTech Telerik MVP http://www.aspnetwiki.com John.DeVight@gmail.com.

garnet
Download Presentation

Migrate Your Skills: ASP.NET to Metro

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Building Windows Metro Applications with JavaScript Using Visual Studio 2012 Express for Windows 8 Migrate Your Skills: ASP.NET to Metro

  2. Introductions • John DeVight • Senior Principal Software Engineer with ManTech • Telerik MVP • http://www.aspnetwiki.com • John.DeVight@gmail.com

  3. House Keeping Items Questions??? • Hold all questions until the end. • I will be at the Telerik booth from 11:00 until 2:50 to answer any questions. Can’t Hear Me? • Raise your hand. Where can I find the presentation and source code? • http://www.aspnetwiki.com

  4. Agenda • Why Windows Metro? • Windows Metro Northwind Application Demo • Northwind WCF RESTFul Service • Creating a new Metro Application • Namespaces and CSS3 for grid layouts • Start Page • Asynchronous Programming and Query Selectors • Customer List Page • Edit Customer Details • Display Customer Orders • TelerikRadControls for Metro

  5. Why do a presentation on Windows Metro?

  6. Windows Metro is Awesome Visual Studio 2012 Is the best IDE Ever Metro is the Future Why do anything else Microsoft RULES!

  7. Should you hop on the bandwagon?

  8. 3. Demonstration • Windows Metro Application for Northwind

  9. 4. Northwind WCF RESTFul Service http://www.aspnetwiki.com/page:create-wcf-restful-service-for-northwind-database

  10. 5. Creating a new Metro Application • Microsoft Dev Center • Project Types • Project Structure • Namespaces

  11. 5.1. Microsoft Dev Center Metro style apps Step by Step Tutorials • Part 1: Create a “Hello World” app • Part 2: Manage app lifecycle and state • Part 3: Create a blog reader http://msdn.microsoft.com/en-us/library/windows/apps/br211385.aspx

  12. 5.2. Project Types • Blank App – no predefined controls or layout. • Grid App – multiple pages: groups, group details, item details. • Split App – 2 pages: groups, item list alongside details. • Fixed Layout App – scales a fixed aspect ratio layout. • Navigation App – has predefined controls for navigation.

  13. 5.3. Project Structure • Master page • ContentPlaceHolder • Web Form • .aspx • .aspx.cs or aspx.vb • Inline styles • Class file • Content folder • Styles folder • default.html • PageControlNavigator • PageControl • .html • .js • .css • JavaScript file • images folder • css folder ASP.NET WebForms Windows Metro

  14. 5.4. Windows Library for JavaScript • Core library for building Metro applications using JavaScript. • WinJS is the root namespace.

  15. 6. Namespaces • “The WinJS.Namespace.define function allows you to create your own namespace as a way of organizing your code.” • “When you create a type or other element inside a namespace, you reference it from outside the namespace by using its qualified name: Namespace.Type.” – Microsoft Dev Center http://msdn.microsoft.com/en-us/library/windows/apps/hh967793.aspx

  16. 6.1. WinJS.Namespace.define (function() { var _customers = [], add = function (customer) { _customers.push(customer); }, list = function () { return _customers; }; WinJS.Namespace.define(“dataSource.Customers", { add: add, list: list }); })(); dataSource.Customers.add({ firstName: "John", lastName: "DeVight" }); console.log(dataSource.Customers.list());

  17. 6.3. CSS3: -ms-grid-* • Define a grid layout: • -ms-grid • -ms-grid-columns • -ms-grid-rows • Define the style for a cell • -ms-grid-row • -ms-grid-column • Define a row span or column span • -ms-grid-row-span • -ms-grid-column-span

  18. 6.4. Tile Layout

  19. 7. Start Page • Create a Navigation App called NorthwindApp • Create the Northwind.Data namespace • Add references to default.html • Update the home PageControl to display “tiles” • Add images • Get to know the DOM Explorer

  20. 8. Asynchronous Programming • Promises • WinJS.Promise • WinJS.xhr • Example

  21. 8.1. Promises “Promises provide a well-defined interface for interacting with an object that represents the result of an action that is performed asynchronously, and may or may not be finished at any given point in time.” – CommonJS Spec Wiki http://wiki.commonjs.org/wiki/Promises

  22. 8.2. WinJS.Promise • Provides a standard pattern for specifying callbacks. • 3 callbacks can be specified in a promise: • complete • error • progress • Format • promise.then(onComplete, onError, onProgress);

  23. 8.3. WinJS.xhr • Wraps calls to XMLHttpRequest in a promise for cross-domain requests and intranet requests. • WinJS.xhr(options).then(handlers);

  24. 8.3.1. WinJS.xhr Options • type: GET, POST, HEAD • url: URL to send the request • data: data passed to the XMLHttpRequest • user: user name for authentication • password: password for authentication • headers: header names and values • customRequestInitializer: function that can be used for preprocessing on the XMLHttpRequest

  25. 8.3.2. WinJS.xhr Handlers • completed – handle completed request. • error – handle error conditions. • progress – report on progress.

  26. 8.4. WinJS.Promise Example function getData() { return new WinJS.Promise( function(complete, error, progress) { WinJS.xhr({ url: “Default.aspx/Data” }).then( function (result) { complete(result); }, function (result) { error(result); }, ); }); }

  27. 8.4. WinJS.Promise Example (cont.) getData().then( function(results) { console.log(“complete”, results); }, function(results) { console.log(“error”, results); } );

  28. 9. Query Selectors • W3C standard CSS selectors • Made famous by jQuery • Article called “Metro: Query Selectors” by Stephen Walther • Example: • “#contenthostdiv.homepage .groupslistView”

  29. 9.1. Query Selector Methods • object.querySelector • Retrieves the first Document Object Model (DOM) element node from descendants. • Example: document.querySelector(“#firstName”); • object.querySelectorAll • Retrieves all Document Object Model (DOM) element nodes from descendants. • Example: document.querySelectorAll(“input”);

  30. 9.1. Query Selectors Methods (cont.) • WinJS.Utilities.query • Returns a QueryCollection with elements matching the specified selector query. • Example: • WinJS.Utilities.query(“.grouplistViewdiv.win-item”) .query(“.groupTitle”); • WinJS.Utilities.id • Returns a QueryCollection with 0 or 1 elements matching the specified id. • Example: • WinJS.Utilities.id(“firstName”) .setStyle(“font-weight”, “bold”);

  31. 9.2. jQuery Comparison • addClass • removeClass • toggleClass • hasClass • css(property) • css(property, value) • css(property, “”) • attr(attribute) • attr(attibute, value) • removeAttr • addClass • removeClass • toggleClass • hasClass • - • setStyle • clearStyle • getAttribute • setAttribute • - jQuery CSS methods QueryCollection methods

  32. 9.2. jQuery Comparison (cont.) • children • find • #id • bind • unbind • each • get • - • - • - • children • query • id • listen • removeEventListener • forEach • get • control • include • template jQuery CSS methods QueryCollection methods

  33. 10. Customers List Page • Update Northwind.Data namespace • Create customers folder • Create customers PageControl • Update home PageControl

  34. 11. Edit Customer Details • Update Northwind.Data namespace • Create customerDetails folder • Create customerDetailsPageControl • Update customers PageControl

  35. 12 Customer Orders • Update Northwind.Data namespace • Create customerOrders folder • Create customerOrdersPageControl

  36. TelerikRadControls for Metro

More Related