Building Windows Metro Store Apps with javascript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

36. 12. TelerikRadControls for Metro