building windows metro store apps with javascript

36
BUILDING WINDOWS METRO STORE APPS WITH JAVASCRIPT Using Visual Studio 2012 Express for Windows 8

Upload: ariel-meyers

Post on 31-Dec-2015

41 views

Category:

Documents


0 download

DESCRIPTION

Using Visual Studio 2012 Express for Windows 8. Building Windows Metro Store Apps with javascript. Introductions. John DeVight Herndon , Virginia Senior Principal Software Engineer with ManTech Telerik MVP http://www.aspnetwiki.com [email protected]. Thank You. - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Building Windows  Metro  Store  Apps with  javascript

BUILDING WINDOWS METRO STORE APPS WITH

JAVASCRIPT

Using Visual Studio 2012 Express for Windows 8

Page 2: Building Windows  Metro  Store  Apps with  javascript

Introductions

John DeVight Herndon, Virginia Senior Principal Software Engineer with

ManTech Telerik MVP http://www.aspnetwiki.com [email protected]

Page 3: Building Windows  Metro  Store  Apps with  javascript

Thank You

Kevin Griffin and Steve Presley Telerik

Page 4: Building Windows  Metro  Store  Apps with  javascript

Presentation and Source Code

Where can I find the presentation and source code?

http://www.aspnetwiki.com

Page 5: Building Windows  Metro  Store  Apps with  javascript

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

Page 6: Building Windows  Metro  Store  Apps with  javascript

1. Why build Windows Store Apps with JavaScript?

PhoneGap Web Developers are comfortable with

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

Page 7: Building Windows  Metro  Store  Apps with  javascript

2. Demonstration

Windows Store Application for Northwind

Page 9: Building Windows  Metro  Store  Apps with  javascript

4. Creating a new Windows Store App

1. Microsoft Dev Center

2. Project Types

3. Project Structure

4. Namespaces

Page 10: Building Windows  Metro  Store  Apps with  javascript

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

Page 11: Building Windows  Metro  Store  Apps with  javascript

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.

Page 12: Building Windows  Metro  Store  Apps with  javascript

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

Page 13: Building Windows  Metro  Store  Apps with  javascript

4.4. Windows Library for JavaScript

Core library for building Windows Store applications using JavaScript.

WinJS is the root namespace.

Page 14: Building Windows  Metro  Store  Apps with  javascript

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

Page 15: Building Windows  Metro  Store  Apps with  javascript

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

Page 16: Building Windows  Metro  Store  Apps with  javascript

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

Page 17: Building Windows  Metro  Store  Apps with  javascript

5.3. Tile Layout

Page 18: Building Windows  Metro  Store  Apps with  javascript

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

Page 19: Building Windows  Metro  Store  Apps with  javascript

7. Asynchronous Programming

1. Promises

2. WinJS.Promise

3. WinJS.xhr

4. Example

Page 20: Building Windows  Metro  Store  Apps with  javascript

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

Page 21: Building Windows  Metro  Store  Apps with  javascript
Page 22: Building Windows  Metro  Store  Apps with  javascript

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

Page 23: Building Windows  Metro  Store  Apps with  javascript

7.3. WinJS.xhr

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

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

Page 24: Building Windows  Metro  Store  Apps with  javascript

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

Page 25: Building Windows  Metro  Store  Apps with  javascript

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

Page 26: Building Windows  Metro  Store  Apps with  javascript

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

);

});

}

Page 27: Building Windows  Metro  Store  Apps with  javascript

7.4. WinJS.Promise Example (cont.)

getData().then(

function(results) {

console.log(“complete”, results);

},

function(results) {

console.log(“error”, results);

}

);

Page 28: Building Windows  Metro  Store  Apps with  javascript

8. Query Selectors

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

Stephen Walther Example:

“#contenthost div.homepage .groupslistView”

Page 29: Building Windows  Metro  Store  Apps with  javascript

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

Page 30: Building Windows  Metro  Store  Apps with  javascript

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

Page 31: Building Windows  Metro  Store  Apps with  javascript

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 -

Page 32: Building Windows  Metro  Store  Apps with  javascript

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

Page 33: Building Windows  Metro  Store  Apps with  javascript

9. Customers List Page

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

Page 34: Building Windows  Metro  Store  Apps with  javascript

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

Page 35: Building Windows  Metro  Store  Apps with  javascript

11. Customer Orders

Update Northwind.Data namespace Create customerOrders folder Create customerOrders PageControl

Page 36: Building Windows  Metro  Store  Apps with  javascript

12. Telerik RadControls for Metro