Building Windows 8 Metro Style Applications Using JavaScript and HTML5

Building Windows 8/
Metro-Style
Applications using

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

The Goal


The Goal
• Get started creating Metro style applications


The Goal
• Using Javascript, HTML5 and CSS3


The Goal
• Introduce the basic concepts


The Goal
• Investigate some of the Windows Runtime
Controls


The Goal
• Investigate some of the Windows Runtime
Controls
• Use Asynchronous APIs


Along the way…


Along the way…
• Learn to create a user interface using new Metro
style features


Along the way…
style features
• Handle navigation using Page Controls


Along the way…
style features
• Handle navigation using Page Controls
• Add simple data binding


Assumptions…


Assumptions…
• Basic knowledge of Web technologies:


Assumptions…
• HTML, JavaScript, CSS


Assumptions…
• Basic knowledge of .NET development/tools


Assumptions…
• Visual Studio, Blend


Assumptions…
• Basic knowledge of Metro style apps and
Windows 8


Assumptions…
• Basic knowledge of Metro style apps and
Windows 8
• See prior course, Exploring Windows 8 Metro Style
Applications


Platform and Tools


Platform and Tools
• Some things to note:


Platform and Tools
• Stack for Metro apps in green


Platform and Tools
• .NET/CLR apps in blue


Platform and Tools
• Silverlight available only as plug-in for IE, and desktop
mode available as well


Platform and Tools
• 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)


Basic CLR Facts


Basic CLR Facts
• Only one CLR—each app/app pool creates a
process and uses the CLR


Basic CLR Facts
• Desktop and Metro app using CLR use same CLR bits,
but separate instance


Basic CLR Facts
• VB and C# apps still require .NET Framework
4.5, even when creating Metro apps


Basic CLR Facts
• 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


access
• Protects user from malicious apps


access
• Subset of .NET Client Profile which limits exposure


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


access
• 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


• 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


the user interface
• XAML and VB/C#/C++ useful if:


the user interface
• Comfortable with traditional programming


the user interface
• Comfortable with traditional programming
• Want to create managed libraries


DEMO 1


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


Slightly More Complex App


• Work through old version of blog sample on
Microsoft’s site


Microsoft’s site
• New (more complex version) starts here:


Microsoft’s site
• http://msdn.microsoft.com/en-us/library/windows/
apps/br211385.aspx


Microsoft’s site
apps/br211385.aspx
• Discuss the steps


Microsoft’s site
apps/br211385.aspx
• Application downloads RSS feed content


Microsoft’s site
apps/br211385.aspx
• Application downloads RSS feed content
• Displays formatted


Modify the Markup


Modify the Markup
• Create simple layout


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


DEMO 2


DEMO 2
• Create markup


Modify Styles


Modify Styles
• Replace style information in default.css


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


DEMO 3


DEMO 3
• Add style information


Examine the Default Code


Main Function


Main Function
• Code in self-executing anonymous function


Main Function
• Recommended JavaScript practice


Main Function
• Recommended JavaScript practice
• Avoids polluting the global namespace


Han dle Events


Han dle Events
• Next code hooks handler for onactivated event


Han dle Events
• Runs after app and its resources (default.html) have
loaded


Han dle Events
loaded
• Good place for initialization


Han dle Events
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:


• 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!


Ready to Fire!
• Must indicate to the application that you’re ready
to receive events


Ready to Fire!
to receive events
• Can appear anywhere in the main function


Ready to Fire!
to receive events
• As long as it executes after initialization


Ready to Fire!
to receive events
• As long as it executes after initialization

(function() {
// Code removed here…

app.start();

}) ();


Downloading Data


Downloading Data
• Need some means of making an HTTP request


Downloading Data
• In WinJS, xhr function provides capability


Downloading Data
• xhr == XMLHttpRequest


Downloading Data
• xhr has a number of options


Downloading Data
• Which HTTP verb to use (GET is default)


Downloading Data
• Which HTTP headers to include (none by default)


Downloading Data
• Which HTTP headers to include (none by default)
• Which URL to use


Passing Information


Passing Information
• Supply a JSON object containing fields
corresponding to the parameters:


Passing Information
• type


Passing Information
• type
• url (required)


Passing Information
• type
• url (required)
• user


Passing Information
• type
• url (required)
• user
• password


Passing Information
• type
• url (required)
• user
• password
• headers


Passing Information
• 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


• Allows you to create more responsive applications

• Sample updates div element with progress


Return Value


Return Value
• Asynchronous function in WinJS return object
called a promise (called deferred in some APIs)


Return Value
• Promise must handle successful completion


Return Value
• And error conditions


Return Value
• Provides then method, which specifies:


Return Value
• Work to do on fulfillment of the promised value


Return Value
• Error handling to be performed if Promise fails


Return Value
• Error handling to be performed if Promise fails
• Handling of progress notifications


Promise.then Method


Promise.then Method
• Understand that the then method indicates
functions to call on success and failure


Promise.then Method
• Call to xhr returns the Promise object
immediately


Promise.then Method
immediately
• Set the functions to call on success and failure


Promise.then Method
immediately
• Set the functions to call on success and failure
• This example ignores progress


DEMO 4


DEMO 4
• Add code to set up downloads


DEMO 4
• Add code to set up downloads
• Discuss


What Happened?


What Happened?
• Once the xhr call completes


What Happened?
• Code calls processPosts function


What Happened?
• Passes request content as parameter


What Happened?
• Contains requested RSS data


What Happened?

• Code uses XPath expressions to select set of
item nodes


What Happened?

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


What’s Next?


What’s Next?
• Modify application


What’s Next?
• Add support for Windows Runtime methods


What’s Next?
• Easier to use Windows.Web.Syndication namespace rather
than hand-parsing XML from RSS feed


What’s Next?
• Use templates and binding


What’s Next?
• Rather than hand-copying data into the user interface


What’s Next?
• Use WinRT controls


What’s Next?
• 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:


• Windows.Web.Syndication namespace supports RSS
feeds:
• SyndicationClient class makes it all easier!


DEMO 5


DEMO 5
• Replace code, using SyndicationClient


Adding Data Binding


Adding Data Binding
• Current code manually pushes data into <div>
elements


Adding Data Binding
elements
• Would be simpler to create a template that
contains the <div> elements


Adding Data Binding
elements
• And bind the data source, using template to manage
the display of the data


Adding Data Binding
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-win-
control attribute (required for templates)


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


• 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:


• Do not forget:
• In order to cause data-win-control attributes to take
effect, must call WinJS.UI.ProcessAll


Binding Data


Binding Data
• WinJS.Binding.Template class connects
properties of elements with data


Binding Data
• Looks for data-win-bind attribute in elements


Binding Data
• Format looks like this:


Binding Data
• data-win-bind="innerText: title"


Binding Data
• Part before ":" indicates property of the element


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


DEMO 6


DEMO 6
• Add references


DEMO 6
• Add references
• Add template


DEMO 6
• Add references
• Add template
• Modify code


DEMO 6
• Add references
• Add template
• Modify code
• Run


Things to Note


Things to Note
• Calling document.getElementById retrieves
reference to HTML element


Things to Note
• Provided property with same name as element


Things to Note
• Works in IE only, but fine for Metro apps


Things to Note
• winControl property retrieves reference to associated
WinRT control:


Things to Note
• winControl property retrieves reference to associated
WinRT control:

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


Things to Note
• For each item in the RSS feed, the code creates
JSON object named post containing the
information:


Things to Note
• 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,
};


Things to Note
• The template provides render method


Things to Note
• Stamps out instance of the template for each item you
supply


Things to Note
supply
• Like createElement method call previously


Things to Note
supply
• Supply data to be rendered


Things to Note
supply
• Returns a promise


Things to Note
supply
• In the completion function, append new element to the
parent posts element


Things to Note
supply
• In the completion function, append new element to the
parent posts element
• Note no extra code needed for reference to posts


Current Status


Current Status
• Have used WinJS and Windows Runtime to make
the code clearer


Current Status
the code clearer
• Have used templates and simple binding to make
it easier to modify the layout


Current Status
the code clearer
• Wouldn't it be nicer to view list of topics


Current Status
the code clearer
• And then click on one to see its contents?


Current Status
the code clearer
• ListView control makes that easier


Current Status
the code clearer
• ListView control makes that easier
• Also handles repetitive binding


Adding a ListView


Adding a ListView
• In addition to template control and intrinsic
HTML controls


Adding a ListView
HTML controls
• WinJS provides several other built-in controls


Adding a ListView
HTML controls
• ListView control allows arrangement of data into list
or grid


Adding a ListView
HTML controls
or grid
• Each item in ListView is expansion of template


Adding a ListView
HTML controls
or grid
• Want to create a list of posts?


Adding a ListView
HTML controls
or grid
• 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


• Add ListView declaratively using data-win-control
attribute
• Existing call to WinJS.UI.ProcessAll hooks it up


ListView Markup

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


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


DEMO 7
• Modify markup


DEMO 7
• Modify markup
• Look at documentation for WinJS.UI.ListView


DEMO 7
• Modify markup
• Modify processPosts()


DEMO 7
• Modify markup
• Modify processPosts()
• Note dataSource property of ListView


What's Next?


What's Next?
• Current demo implementation shows only blog
entry titles


What's Next?
entry titles
• Need user interface to display content of selected


What's Next?
entry titles
• Add a second control to display content


What's Next?
entry titles
• Perhaps a grid of


What's Next?
entry titles
• Two rows (one for title and one for data)


What's Next?
entry titles
• Two rows (one for title and one for data)
• Two columns—ListView on the left and content on the
right


Modify Layout


Modify Layout
• Layout is defined in CSS


Modify Layout
• Start by modifying body, #posts, and #content
elements


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


DEMO 8


DEMO 8
• Modify CSS


Things to Note

• 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
• Two columns, each taking half the space


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
• Two columns, each taking half the space


Things to Note
• #posts and #content element descriptions
indicate row and column locations (1-based):


Things to Note
• #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;
}


Modify Markup


Modify Markup
• Once CSS completed


Modify Markup
• Modify markup


Modify Markup
• Modify markup
• Re-adding template for content


Things to Note
• Modified markup for ListView


Things to Note
layout: {type: WinJS.UI.ListLayout},
selectionMode: 'single', onselectionchanged: selectionChanged}">
</div>


Things to Note
</div>
• selectionMode: allow single selection only


Things to Note
</div>
• selectionMode: allow single selection only
• onselectionchanged: provide event handler
declaratively


Things to Note
• Markup for content template:


Things to Note
<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>


Things to Note
</div>
• CSS classes all still exist in default.css


Things to Note
</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


DEMO 9
• Add new markup


Add Event Handler


Add Event Handler
• To finish, must add event handler for ListView
control's onselectionchanged event


Add Event Handler
• Gather information about first selected item in
ListView


Add Event Handler
ListView
• May be overkill because selectionMode is set to single!


Add Event Handler
ListView
• Get reference to the contentTemplate


Add Event Handler
ListView
• Get reference to the contentTemplate
• Render the data


DEMO 10


DEMO 10
• Add event handler


DEMO 10
• Run


DEMO 10
• Run
• Fix namespace


DEMO 10
• Run
• Fix namespace
• Run


Things to Note
• Can define namespace and specify public names
for members:


Things to Note
for members:

WinJS.Namespace.define('rssReader', {
selectionChanged: selectionChanged
});


Things to Note
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:


• The Good News:
• Microsoft Expression Blend does a great job


• The Good News:
• Just doesn’t handle code chores particularly well


• The Good News:
• For JavaScript, it’s acceptable


• The Good News:
• For JavaScript, it’s acceptable
• Minimal code editor


Using Visual Studio with Blend


• Easy to open a Visual Studio project in
Expression Blend


Expression Blend
• Can modify design and code there


Expression Blend
• Can execute application in current device, or in
simulator


Expression Blend
simulator
• Can select to edit in Visual Studio


Expression Blend
simulator
• Can select to edit in Visual Studio
• Can debug from there


DEMO


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


• 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


HTML Templates
• Blank Application


HTML Templates
• Minimal application using Metro style frameworks


HTML Templates
• Fixed Layout Application


HTML Templates
• Minimal support for developing a Windows Metro style
application using a fixed layout


HTML Templates
• Grid Application


HTML Templates
• Grid Application
• Multi-page project navigating multiple layers of
content with item details on a dedicated page


HTML Templates
• Navigation Application


HTML Templates
• Minimal application using Windows Metro style
frameworks and includes navigation support


HTML Templates
• Split Application


HTML Templates
• 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


Closing Head Shot
• JavaScript/HTML/CSS a great set of mature tools
for building Metro style applications


Closing Head Shot
• WinJS makes it easy to interact with WinRT
controls and other Windows-specific features


Closing Head Shot
• Sample application (thanks to Chris Sells at
Microsoft) shows off lots of important features


Closing Head Shot
• Sample application (thanks to Chris Sells at
Microsoft) shows off lots of important features
• For homework—retool the Split application


Learn More!


Learn More!
• This is an excerpt from a larger course. Visit
www.learnnowonline.com for the full details!


Building Windows 8 Metro Style Applications Using JavaScript and HTML5

Recommended

More Related Content

What's hot (16)

Similar to Building Windows 8 Metro Style Applications Using JavaScript and HTML5 (20)

More from LearnNowOnline (20)

Recently uploaded (20)

Building Windows 8 Metro Style Applications Using JavaScript and HTML5

Editor's Notes