Migrate Your Skills: ASP.NET to Metro

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!

8. Should you hop on the bandwagon?

9. 3. Demonstration • Windows Metro Application for Northwind

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

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

12. 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

13. 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.

14. 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

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

16. 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

17. 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());

18. 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

19. 6.4. Tile Layout

20. 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

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

22. 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

24. 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);

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

26. 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

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

28. 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); }, ); }); }

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

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

31. 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”);

32. 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”);

33. 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

34. 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

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

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

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

38. TelerikRadControls for Metro