Building Windows 8 Metro Style Applications with JavaScript and HTML5 by LearnNowOnline

Building Windows 8/Metro-Style Applications using Javascript and HTML5

Learn More @ http://www.learnnowonline.com Copyright ÂŠ by Application Developers Training Company

The Goal • Get started creating Metro style applications • Using Javascript, HTML5 and CSS3

• Introduce the basic concepts • Investigate some of the Windows Runtime Controls • Use Asynchronous APIs

Along the way… • Learn to create a user interface using new Metro style features • Handle navigation using Page Controls • Add simple data binding

Assumptions… • Basic knowledge of Web technologies: • HTML, JavaScript, CSS

• Basic knowledge of .NET development/tools • Visual Studio, Blend • Basic knowledge of Metro style apps and

Windows 8

• See prior course, Exploring Windows 8 Metro Style

Applications

Platform and Tools

Learn More @ http://www.learnnowonline.com Copyright ÂŠ by Application Developers Training Company

Platform and Tools • Some things to note: • Stack for Metro apps in green • .NET/CLR apps in blue

• Silverlight available only as plug-in for IE, and desktop

mode available as well • .NET Framework and CLR appear on both sides (blue and green)

Platform and Tools

Learn More @ http://www.learnnowonline.com Copyright ÂŠ by Application Developers Training Company

Basic CLR Facts • Only one CLR—each app/app pool creates a process and uses the CLR • Desktop and Metro app using CLR use same CLR bits,

but separate instance

• VB and C# apps still require .NET Framework 4.5, even when creating Metro apps • Limited subset for Metro apps

.NET and Metro Style Apps • Metro apps run in an app container that limits access • Protects user from malicious apps • Subset of .NET Client Profile which limits exposure

• Many changes in APIs to support Metro style apps and asynchronous behavior • All Metro APIs are asynchronous

What are the Options? • Can build Metro style apps using: • C#, Visual Basic, or C++ and XAML • XAML provides both markup and style information • C#, Visual Basic, or C++ provide functionality

• JavaScript, HTML5, and CSS3 • HTML provides markup • CSS provides style information • JavaScript provides functionality

Is One Better Than the Other? • Use the language of your choice • HTML5/CSS3/JavaScript useful if: • Comfortable with Web technologies • Want to use the power of HTML5 and CSS3 to create

the user interface

• XAML and VB/C#/C++ useful if: • Comfortable with traditional programming • Want to create managed libraries

DEMO 1 • Hello, World using HTML5/CSS/JavaScript

Slightly More Complex App • Work through old version of blog sample on Microsoft’s site • New (more complex version) starts here:

• http://msdn.microsoft.com/en-us/library/windows/apps/b

aspx

• Discuss the steps • Application downloads RSS feed content • Displays formatted

Modify the Markup • Create simple layout • Use div elements with id attribute set

DEMO 2 • Create markup

Modify Styles • Replace style information in default.css • Note class and id-based styles

DEMO 3 • Add style information

Examine the Default Code

Learn More @ http://www.learnnowonline.com Copyright ÂŠ by Application Developers Training Company

Main Function • Code in self-executing anonymous function • Recommended JavaScript practice • Avoids polluting the global namespace

Han dle Events • Next code hooks handler for onactivated event • Runs after app and its resources (default.html) have

loaded • Good place for initialization

app.onactivated = function (eventObject) { }

Check for Activation Kind • Just to make sure, check that this is a launch activation before running initialization code: WinJS.Application.onmainwindowactivated = function (e) { if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { // Initialization code goes here… } }

Ready to Fire! • Must indicate to the application that you’re ready to receive events • Can appear anywhere in the main function • As long as it executes after initialization (function() { // Code removed here… app.start(); }) ();

Downloading Data • Need some means of making an HTTP request • In WinJS, xhr function provides capability • xhr == XMLHttpRequest • xhr has a number of options • Which HTTP verb to use (GET is default) • Which HTTP headers to include (none by default) • Which URL to use

Passing Information • Supply a JSON object containing fields corresponding to the parameters: • type • url (required) • user • password • headers • data

Synchronous or Asynchronous? • XMLHttpRequest object allows developer to select synchronous or asynchronous result • xhr forces asynchronous • UI isn’t blocked while awaiting result

• All Metro API calls are asynchronous • Allows you to create more responsive applications

• Sample updates div element with progress

Return Value • Asynchronous function in WinJS return object called a promise (called deferred in some APIs) • Promise must handle successful completion • And error conditions

• Provides then method, which specifies: • Work to do on fulfillment of the promised value • Error handling to be performed if Promise fails • Handling of progress notifications

Promise.then Method • Understand that the then method indicates functions to call on success and failure • Call to xhr returns the Promise object immediately • Set the functions to call on success and failure • This example ignores progress

DEMO 4 • Add code to set up downloads • Discuss

What Happened? • Once the xhr call completes • Code calls processPosts function • Passes request content as parameter • Contains requested RSS data

• Code uses XPath expressions to select set of item nodes • Retrieves individual child elements for display

What’s Next? • Modify application • Add support for Windows Runtime methods • Easier to use Windows.Web.Syndication namespace rather

than hand-parsing XML from RSS feed

• Use templates and binding • Rather than hand-copying data into the user interface

• Use WinRT controls • Specifically, the ListView control

Using Windows Runtime • Haven’t yet really used Windows • Instead, used Web technologies

• In addition to WinJS, Metro style apps can access classes in Windows Runtime • Windows.Web.Syndication namespace supports RSS

feeds:

• SyndicationClient class makes it all easier!

DEMO 5 • Replace code, using SyndicationClient

Adding Data Binding • Current code manually pushes data into <div> elements • Would be simpler to create a template that contains the <div> elements • And bind the data source, using template to manage

the display of the data

• Of course, that’s possible!

References and Attributes • In order to use templates, must add more JavaScript content, in default.html • Much like adding references

• Provide styles and behavior for the data-wincontrol attribute (required for templates) • HTML5 defines set of data-* attributes for associating app-specific information with element

References and Attributes • In this case, set data-win-control attribute to WinJS.Binding.Template • Acts as constructor for class • Attaches behavior to div and adds behavior • Foundation for declarative WinJS controls

• Do not forget: • In order to cause data-win-control attributes to take

effect, must call WinJS.UI.ProcessAll

Binding Data • WinJS.Binding.Template class connects properties of elements with data • Looks for data-win-bind attribute in elements • Format looks like this: • data-win-bind="innerText: title"

• Part before ":" indicates property of the element • Part after ":" indicates JavaScript property to bind

DEMO 6 • • • •

Add references Add template Modify code Run

Things to Note • Calling document.getElementById retrieves reference to HTML element • Provided property with same name as element • Works in IE only, but fine for Metro apps

• winControl property retrieves reference to associated

WinRT control:

var templateControl = document.getElementById("template").winControl; // or templateControl = template.winControl;

Things to Note â&#x20AC;˘ For each item in the RSS feed, the code creates JSON object named post containing the information: var item = feed.items[i]; var post = { title: item.title.text, date: item.publishedDate, content: item.summary.text, };

Learn More @ http://www.learnnowonline.com Copyright ÂŠ by Application Developers Training Company

Things to Note • The template provides render method • Stamps out instance of the template for each item you

supply

• Like createElement method call previously

• Supply data to be rendered • Returns a promise • In the completion function, append new element to the parent

posts element • Note no extra code needed for reference to posts

Current Status • Have used WinJS and Windows Runtime to make the code clearer • Have used templates and simple binding to make it easier to modify the layout • Wouldn't it be nicer to view list of topics • And then click on one to see its contents? • ListView control makes that easier • Also handles repetitive binding

Adding a ListView • In addition to template control and intrinsic HTML controls • WinJS provides several other built-in controls • ListView control allows arrangement of data into list or

grid

• Each item in ListView is expansion of template • Want to create a list of posts? • Good use for ListView control

Show Post Titles in ListView • Modify existing template, removing content • Add ListView declaratively using data-win-control attribute • Existing call to WinJS.UI.ProcessAll hooks it up

ListView Markup <div id="posts" data-win-control="WinJS.UI.ListView" data-win-options="{itemTemplate: template, layout: {type: WinJS.UI.ListLayout}}"></div>

• data-win-options attribute specifies parameters to pass to WinJS.UI.ListView constructor • Attribute value is JSON object • Some parameters are JSON objects (layout)

DEMO 7 • • • •

Modify markup Look at documentation for WinJS.UI.ListView Modify processPosts() Note dataSource property of ListView

What's Next? • Current demo implementation shows only blog entry titles • Need user interface to display content of selected

• Add a second control to display content • Perhaps a grid of • Two rows (one for title and one for data) • Two columns—ListView on the left and content on the

right

Modify Layout • Layout is defined in CSS • Start by modifying body, #posts, and #content elements • So layout is appropriate for two-column display

DEMO 8 • Modify CSS

Things to Note display: -ms-grid; -ms-grid-rows: auto 1fr; -ms-grid-columns: 1fr 1fr;

• body: display set to –ms-grid • Part of Microsoft extension to CSS for grid • -ms-grid-rows: first column set to auto-size, second

takes up the rest (fr like * in XAML) • -ms-grid-columns: 1fr 1fr

Things to Note â&#x20AC;˘ #posts and #content element descriptions indicate row and column locations (1-based): #posts { width: 99%; height: 100%; overflow: auto; -ms-grid-row: 2; -ms-grid-column: 1; } #content { width: 95%; height: 100%; overflow-y: auto; margin-right: 64px; -ms-grid-row: 2; -ms-grid-column: 2; }

Learn More @ http://www.learnnowonline.com Copyright ÂŠ by Application Developers Training Company

Modify Markup • Once CSS completed • Modify markup • Re-adding template for content

Things to Note • Modified markup for ListView <div id="posts" data-win-control="WinJS.UI.ListView" data-win-options="{itemTemplate: template, layout: {type: WinJS.UI.ListLayout}, selectionMode: 'single', onselectionchanged: selectionChanged}"> </div>

• selectionMode: allow single selection only • onselectionchanged: provide event handler declaratively

Things to Note • Markup for content template: <div id="contentTemplate" data-win-control="WinJS.Binding.Template"> <div data-win-bind="innerText: title" class="postTitle"></div> <div data-win-bind="innerText: date" class="postDate"></div> <div data-win-bind="innerHTML: content" class="postContent"></div> </div>

• CSS classes all still exist in default.css • Three <div> elements for title, date, content • Bound to innerText/HTML properties of element

DEMO 9 • Add new markup

Add Event Handler • To finish, must add event handler for ListView control's onselectionchanged event • Gather information about first selected item in ListView • May be overkill because selectionMode is set to single! • Get reference to the contentTemplate • Render the data

DEMO 10 • • • •

Add event handler Run Fix namespace Run

Things to Note • Can define namespace and specify public names for members: WinJS.Namespace.define('rssReader', { selectionChanged: selectionChanged });

• Name before colon (:) specifies public name for member • Change that here, also change in markup

Look Ma, No Designer! • Yes, it’s true • Visual Studio 11 doesn’t include a visual designer for

JavaScript/HTML Metro style applications

• The Good News: • Microsoft Expression Blend does a great job • Just doesn’t handle code chores particularly well • For JavaScript, it’s acceptable • Minimal code editor

Using Visual Studio with Blend • Easy to open a Visual Studio project in Expression Blend • Can modify design and code there • Can execute application in current device, or in simulator • Can select to edit in Visual Studio • Can debug from there

DEMO • Edit project in Expression Blend

Visual Studio Application Templates • Visual Studio 11 Express for Windows ships with a set of Metro style application templates • Slightly different set of templates for HTML apps vs. XAML apps

HTML Templates

Learn More @ http://www.learnnowonline.com Copyright ÂŠ by Application Developers Training Company

HTML Templates • Blank Application • Minimal application using Metro style frameworks

• Fixed Layout Application • Minimal support for developing a Windows Metro style

application using a fixed layout

• Grid Application • Multi-page project navigating multiple layers of

content with item details on a dedicated page

HTML Templates • Navigation Application • Minimal application using Windows Metro style

frameworks and includes navigation support

• Split Application • A more complex project supporting navigation in a

master list of items while viewing their details on the same page

DEMO • HTML Templates

Closing Head Shot • JavaScript/HTML/CSS a great set of mature tools for building Metro style applications • WinJS makes it easy to interact with WinRT controls and other Windows-specific features • Sample application (thanks to Chris Sells at Microsoft) shows off lots of important features • For homework—retool the Split application

Learn More! â&#x20AC;˘ This is an excerpt from a larger course. Visit www.learnnowonline.com for the full details!

Learn More @ http://www.learnnowonline.com Copyright ÂŠ by Application Developers Training Company