Building Windows 8 Metro Style Applications With JavaScript and HTML5

Building Windows 8/MetroStyle 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

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

Basic CLR Facts

Only one CLReach 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 Microsofts site New (more complex version) starts here:
http://msdn.microsoft.com/en-
us/library/windows/apps/br211385.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

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 youre 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 isnt 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

Whats 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

Havent 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, thats 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
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
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
data-win-options attribute specifies parameters to pass to WinJS.UI.ListView constructor
Attribute value is JSON object Some parameters are JSON objects (layout)
<div id="posts" data-win-control="WinJS.UI.ListView" data-win-options="{itemTemplate: template, layout: {type: WinJS.UI.ListLayout}}"></div>

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

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
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, its true
Visual Studio 11 doesnt include a visual designer for
JavaScript/HTML Metro style applications
The Good News:

Microsoft Expression Blend does a great job Just doesnt handle code chores particularly well
For JavaScript, its 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

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 homeworkretool the Split application

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


Building Windows 8 Metro Style Applications With JavaScript and HTML5

Enviado por

Dados do documento

Título original

Direitos autorais

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Building Windows 8 Metro Style Applications With JavaScript and HTML5

Enviado por

Direitos autorais:

Building Windows 8/MetroStyle Applications using Javascript and HTML5

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Along the way

Learn More @ http://www.learnnowonline.com

See prior course, Exploring Windows 8 Metro Style

Learn More @ http://www.learnnowonline.com

Platform and Tools

Learn More @ http://www.learnnowonline.com

Platform and Tools

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

Learn More @ http://www.learnnowonline.com

Platform and Tools

Learn More @ http://www.learnnowonline.com

Basic CLR Facts

but separate instance

Learn More @ http://www.learnnowonline.com

.NET and Metro Style Apps

Learn More @ http://www.learnnowonline.com

What are the Options?

JavaScript, HTML5, and CSS3

CSS provides style information

Learn More @ http://www.learnnowonline.com

Is One Better Than the Other?

the user interface

XAML and VB/C#/C++ useful if:

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Slightly More Complex App

Discuss the steps Application downloads RSS feed content

Learn More @ http://www.learnnowonline.com

Modify the Markup

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Examine the Default Code

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Han dle Events

loaded Good place for initialization

app.onactivated = function (eventObject) { }

Learn More @ http://www.learnnowonline.com

Check for Activation Kind

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

All Metro API calls are asynchronous

Sample updates div element with progress

Learn More @ http://www.learnnowonline.com

Provides then method, which specifies:

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Code uses XPath expressions to select set of item nodes

Learn More @ http://www.learnnowonline.com

than hand-parsing XML from RSS feed

Use templates and binding

Use WinRT controls

Learn More @ http://www.learnnowonline.com

Using Windows Runtime

SyndicationClient class makes it all easier!

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Adding Data Binding