building windows metro store apps with javascript
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 PresentationTRANSCRIPT
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 [email protected]
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