380 likes | 543 Views
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.
E N D
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
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
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
Windows Metro is Awesome Visual Studio 2012 Is the best IDE Ever Metro is the Future Why do anything else Microsoft RULES!
3. Demonstration • Windows Metro Application for Northwind
4. Northwind WCF RESTFul Service http://www.aspnetwiki.com/page:create-wcf-restful-service-for-northwind-database
5. Creating a new Metro Application • Microsoft Dev Center • Project Types • Project Structure • Namespaces
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
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.
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
5.4. Windows Library for JavaScript • Core library for building Metro applications using JavaScript. • WinJS is the root namespace.
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
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());
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
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
8. Asynchronous Programming • Promises • WinJS.Promise • WinJS.xhr • Example
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
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);
8.3. WinJS.xhr • Wraps calls to XMLHttpRequest in a promise for cross-domain requests and intranet requests. • WinJS.xhr(options).then(handlers);
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
8.3.2. WinJS.xhr Handlers • completed – handle completed request. • error – handle error conditions. • progress – report on progress.
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); }, ); }); }
8.4. WinJS.Promise Example (cont.) getData().then( function(results) { console.log(“complete”, results); }, function(results) { console.log(“error”, results); } );
9. Query Selectors • W3C standard CSS selectors • Made famous by jQuery • Article called “Metro: Query Selectors” by Stephen Walther • Example: • “#contenthostdiv.homepage .groupslistView”
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”);
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”);
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
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
10. Customers List Page • Update Northwind.Data namespace • Create customers folder • Create customers PageControl • Update home PageControl
11. Edit Customer Details • Update Northwind.Data namespace • Create customerDetails folder • Create customerDetailsPageControl • Update customers PageControl
12 Customer Orders • Update Northwind.Data namespace • Create customerOrders folder • Create customerOrdersPageControl