MIGRATE YOUR SKILLS: ASP.NET

TO METRO

Building Windows Metro Applications with JavaScriptUsing Visual Studio 2012 Express for Windows 8

Introductions John DeVight Senior Principal Software Engineer with

ManTech Telerik MVP http://www.aspnetwiki.com John.DeVight@gmail.com

House Keeping ItemsQuestions??? 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

Agenda1. Why Windows Metro?2. Windows Metro Northwind Application Demo3. Northwind WCF RESTFul Service4. Creating a new Metro Application5. Namespaces and CSS3 for grid layouts6. Start Page7. Asynchronous Programming and Query Selectors8. Customer List Page9. Edit Customer Details10. Display Customer Orders11. Telerik RadControls for Metro

Why do a presentation on Windows Metro?

Windows Metro is Awesome

Visual Studio 2012Is the best IDE Ever

Metro is the FutureWhy do anything else Microsoft RULES!

Should you hop on the bandwagon?

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 Application1. Microsoft Dev Center2. Project Types3. Project Structure4. Namespaces

5.1. Microsoft Dev Center Metro style appsStep 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

ASP.NET WebForms Windows Metro

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

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

6.4. Tile Layout

7. Start Page1. Create a Navigation App called NorthwindApp2. Create the Northwind.Data namespace3. Add references to default.html4. Update the home PageControl to display “tiles”5. Add images6. Get to know the DOM Explorer

8. Asynchronous Programming1. Promises2. WinJS.Promise3. WinJS.xhr4. 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:

completeerrorprogress

Formatpromise.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 Examplefunction 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:

“#contenthost div.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(“.grouplistView div.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

jQuery CSS methods QueryCollection methods

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 -

9.2. jQuery Comparison (cont.)

jQuery CSS methods QueryCollection methods

children find #id bind unbind each get - - -

children query id listen removeEventListener forEach get control include template

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 customerDetails PageControl Update customers PageControl

12 Customer Orders Update Northwind.Data namespace Create customerOrders folder Create customerOrders PageControl

Telerik RadControls for Metro