Building Windows Metro Store Apps with javascript

BUILDING WINDOWS METRO STORE APPS WITH

JAVASCRIPT

Using Visual Studio 2012 Express for Windows 8

Introductions

John DeVight Herndon, Virginia Senior Principal Software Engineer with

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

Thank You

Kevin Griffin and Steve Presley Telerik

Presentation and Source Code

Where can I find the presentation and source code?

http://www.aspnetwiki.com

Agenda

1. Why build Windows Store Apps with JavaScript?

2. Northwind Application Demo

3. Northwind WCF RESTFul Service

4. Creating a new App Store Application

5. Namespaces and CSS3 for grid layouts

6. Start Page

7. Asynchronous Programming and Query Selectors

8. Customer List Page

9. Edit Customer Details

10. Declarative Data Binding

11. jQuery and Windows Store Apps

12. Display Customer Orders

13. Telerik RadControls for Windows 8 Demo

1. Why build Windows Store Apps with JavaScript?

PhoneGap Web Developers are comfortable with

HTML5, CSS3 and JavaScript Similar structure to ASP.NET WebForms

2. Demonstration

Windows Store Application for Northwind

3. Northwind WCF RESTFul Service

http://www.aspnetwiki.com/page:create-wcf-restful-service-for-northwind-database

4. Creating a new Windows Store App

1. Microsoft Dev Center

2. Project Types

3. Project Structure

4. Namespaces

4.1. Microsoft Dev Center Windows Store 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

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

4.3. Project Structure

ASP.NET WebForms Windows Store App

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

4.4. Windows Library for JavaScript

Core library for building Windows Store applications using JavaScript.

WinJS is the root namespace.

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

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

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

5.3. Tile Layout

6. Start Page1. Create a Navigation App called NorthwindApp

2. Create the Northwind.Data namespace

3. Add references to default.html

4. Update the home PageControl to display “tiles”

5. Add images

6. Get to know the DOM Explorer

7. Asynchronous Programming

1. Promises

2. WinJS.Promise

3. WinJS.xhr

4. Example

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

7.2. WinJS.Promise

Provides a standard pattern for specifying callbacks.

3 callbacks can be specified in a promise:completeerrorprogress

Formatpromise.then(onComplete, onError, onProgress);

7.3. WinJS.xhr

Wraps calls to XMLHttpRequest in a promise for cross-domain requests and intranet requests.

WinJS.xhr(options).then(handlers);

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

7.3.2. WinJS.xhr Handlers completed – handle completed request. error – handle error conditions. progress – report on progress.

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

);

});

}

7.4. WinJS.Promise Example (cont.)

getData().then(

function(results) {

console.log(“complete”, results);

},

function(results) {

console.log(“error”, results);

}

);

8. Query Selectors

W3C standard CSS selectors Made famous by jQuery Article called “Metro: Query Selectors” by

Stephen Walther Example:

“#contenthost div.homepage .groupslistView”

8.1. Query Selector Methods

object.querySelectorRetrieves the first Document Object Model (DOM)

element node from descendants.Example: document.querySelector(“#firstName”);

object.querySelectorAllRetrieves all Document Object Model (DOM)

element nodes from descendants.Example: document.querySelectorAll(“input”);

8.1. Query Selectors Methods (cont.)

WinJS.Utilities.queryReturns a QueryCollection with elements matching

the specified selector query.Example:

○ WinJS.Utilities.query(“.grouplistView div.win-item”)

.query(“.groupTitle”);

WinJS.Utilities.idReturns a QueryCollection with 0 or 1 elements

matching the specified id.Example:

○ WinJS.Utilities.id(“firstName”)

.setStyle(“font-weight”, “bold”);

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

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

9. Customers List Page

Update Northwind.Data namespace Create customers folder Create customers PageControl Update home PageControl

10. Edit Customer Details Update Northwind.Data namespace Create customerDetails folder Create customerDetails PageControl Update customers PageControl

11. Customer Orders

Update Northwind.Data namespace Create customerOrders folder Create customerOrders PageControl

12. Telerik RadControls for Metro