1 / 36

Building Windows Metro Store Apps with javascript

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 John.DeVight@gmail.com. Thank You.

Download Presentation

Building Windows Metro Store Apps with javascript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Using Visual Studio 2012 Express for Windows 8 Building Windows Metro Store Apps with javascript

  2. Introductions • John DeVight • Herndon, Virginia • Senior Principal Software Engineer with ManTech • Telerik MVP • http://www.aspnetwiki.com • John.DeVight@gmail.com

  3. Thank You • Kevin Griffin and Steve Presley • Telerik

  4. Presentation and Source Code Where can I find the presentation and source code? • http://www.aspnetwiki.com

  5. Agenda • Why build Windows Store Apps with JavaScript? • Northwind Application Demo • Northwind WCF RESTFul Service • Creating a new App Store Application • Namespaces and CSS3 for grid layouts • Start Page • Asynchronous Programming and Query Selectors • Customer List Page • Edit Customer Details • Declarative Data Binding • jQuery and Windows Store Apps • Display Customer Orders • TelerikRadControls for Windows 8 Demo

  6. 1. Why build Windows Store Apps with JavaScript? • PhoneGap • Web Developers are comfortable with HTML5, CSS3 and JavaScript • Similar structure to ASP.NET WebForms

  7. 2. Demonstration • Windows Store Application for Northwind

  8. 3. Northwind WCF RESTFul Service http://www.aspnetwiki.com/page:create-wcf-restful-service-for-northwind-database

  9. 4. Creating a new Windows Store App • Microsoft Dev Center • Project Types • Project Structure • Namespaces

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

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

  12. 4.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 Store App

  13. 4.4. Windows Library for JavaScript • Core library for building Windows Store applications using JavaScript. • WinJS is the root namespace.

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

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

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

  17. 5.3. Tile Layout

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

  19. 7. Asynchronous Programming • Promises • WinJS.Promise • WinJS.xhr • Example

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

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

  22. 7.3. WinJS.xhr • Wraps calls to XMLHttpRequest in a promise for cross-domain requests and intranet requests. • WinJS.xhr(options).then(handlers);

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

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

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

  26. 7.4. WinJS.Promise Example (cont.) getData().then( function(results) { console.log(“complete”, results); }, function(results) { console.log(“error”, results); } );

  27. 8. Query Selectors • W3C standard CSS selectors • Made famous by jQuery • Article called “Metro: Query Selectors” by Stephen Walther • Example: • “#contenthostdiv.homepage .groupslistView”

  28. 8.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”);

  29. 8.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”);

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

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

  32. 9. Customers List Page • Update Northwind.Data namespace • Create customers folder • Create customers PageControl • Update home PageControl

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

  34. 11. Customer Orders • Update Northwind.Data namespace • Create customerOrders folder • Create customerOrdersPageControl

  35. 12. TelerikRadControls for Metro

More Related