Building Metro style apps with HTML and JavaScriptPaul GusmorinoLead Program ManagerMicrosoft Corporation

DEV366

Agenda

What is Metro style UI?Platform for Metro style apps with HTML and JSDeeper dive on new HTML/CSS featuresDeeper dive on Windows Library for JavaScript

You’ll leave with examples of how to:Use HTML/CSS and Windows Library for JavaScript to implement common Metro style app user interface patterns.

What is Metro style UI?

A set of common user interface patternsgrounded in a set of design principles

and supported by the Windows 8 platform.

demo

Examples from apps on the Windows 8 Release Preview!

What is Metro style UI?

Platform for Metro style apps with HTML and JS

Platform for Metro style apps with HTML and JS

Metro style app

WinJS HTML/CSS (W3C)

Windows Runtime

Powerful engine for creating user interfacesReuse skills (and code!) from the standard webNew HTML/CSS features in Windows 8 give you the capabilities you need to make great Metro style UIs

HTML/CSS

Controls and other UI building blocks for Metro style appsStyle sheets with default Metro style designCommon infrastructure for responsive, reliable apps

WinJS

Seamlessly integrate with the Metro style shellConnect to other apps through contractsAccess storage, devices, and other capabilities of the PC

Windows Runtime

Platform for Metro style apps with HTML and JS

Metro style app

WinJS HTML/CSS Windows Runtime

Platform for Metro style apps with HTML and JS

Metro style app

WinJS HTML/CSS Windows Runtime

Deep dive into UI platform for Metro style appsWinJS

PagesAnimation LibraryStylesheetsPromises BindingListViewAppBar

New HTML/CSS FeaturesCSS LayoutsCSS Transforms and AnimationsHTML DOM Touch APIsCSS Scroll ViewsHTML Controls

CSS Layouts

CSS Layouts

Metro Style apps feature adaptive layouts that:Support multiple screen sizes and shapesHandle snapped and filled view statesHandle rotation

CSS Layouts give you:CSS Grid, CSS Flexbox, CSS Multicolumn, Media QueriesNative performanceEasy to use

demo

CSS Layouts

WinJS Pages

WinJS Pages

Metro Style apps feature in-line navigation without tearing down the whole screen.

WinJS Pages give you:Load and unload chunks of HTML + CSS + JS code directly inline into your user interfacePage content can be dynamic including other WinJS controls within it

demo

WinJS Pages

CSS Transforms and Animations

CSS Transforms and Animations

Metro Style apps use a common set of animations:Users can learn meaning of animations in the ‘language’Apps feel cohesive with the systemAnimations look and feel great

WinJS Animation Library gives you:Set of carefully crafted common animations you can apply in your own appBuilds upon CSS Animations for fast and fluid performance

demo

CSS Transforms and Animations

WinJS Animation Library

WinJS Animation Library

Metro style apps feature fast and fluid animations.

CSS Animations give you:CSS 2D Transforms, CSS 3D Transforms, CSS Transitions, CSS AnimationsSmooth, independent composition doesn’t block UI thread

demo

WinJS Animation Library

HTML Touch/Pointer APIs

HTML Touch/Pointer APIs

Metro Style apps feature <text>.

HTML Touch/Pointer APIs give you:PointsGestures

demo

HTML Touch/Pointer APIs

CSS Scroll Views

CSS Scroll Views

Metro Style apps feature direct manipulation panning and zooming of content as a predominant user interface paradigm.

CSS Scroll Views give you:Support touch, mouse, and keyboard“Stick to the finger” experience for panning and zoomingConsistent user experience with rails, inertia, and boundary feedbackSupport for snap points, nesting, and chaining

demo

CSS Scroll Views

HTML Controls

HTML Controls

Metro style apps feature <text>

HTML Controls give you:<text>

demo

HTML Controls

WinJS Stylesheets

WinJS Stylesheets

Metro style apps have <text>

WinJS Stylehsheets give you:Dark & LightDefault visuals that map to the Metro style design.Well-defined CSS Selectors you can use to over-ride and customize the visuals to map to your own apps branded look.

demo

WinJS Stylesheets

WinJS Promise

WinJS Promise

Metro style apps have user interfaces that are always responsive.

WinJS Promises give you:Handle asynchronous operations without blocking the UIConsistent programming model

demo

WinJS Promises

WinJS Binding

WinJS Binding

Metro Style apps are alive and connected to data (from the web or the PC itself) and let users view and consume it.

WinJS Binding give you:One way data bindingAsynchronous notificationsProgrammatic bindingDeclarative binding

demo

WinJS Binding

WinJS ListView

WinJS ListView

Metro Style apps <txt>

WinJS ListView gives you:<txt>

demo

WinJS ListView

WinJS AppBar

WinJS AppBar

Metro Style apps <txt>

WinJS AppBar give you:<txt>

demo

WinJS AppBar

Platform for Metro style apps with HTML and JS

Deep dive into UI platform for Metro style appsWinJS

PromisesPagesBindingStylesheetsListViewAppBar

New HTML/CSS FeaturesCSS LayoutsCSS Transforms and AnimationsDOM Touch APICSS Scroll viewsHTML Controls

Powerful engine for creating user interfacesReuse skills (and code!) from the standard webNew HTML/CSS features in Windows 8 give you the capabilities you need to make great Metro style UIs

HTML/CSS

Controls and other UI building blocks for Metro style appsStyle sheets with default Metro style designCommon infrastructure for responsive, reliable apps

WinJS

Platform for Metro style apps with HTML and JS

Metro style app

WinJS HTML/CSS Windows Runtime

Related Content

DEV354 Building Windows 8 Metro Style UIs

DEV350 Using Windows Runtime and SDK to Build Metro Style Apps

Find Me Later At… Ask the Experts

DEV352 What Web Developers Need to Know Building Metro style Apps

DEV Track Resources

Visual Studio Home Page :: http://www.microsoft.com/visualstudio/en-us

Jason Zander’s Blog :: http://blogs.msdn.com/b/jasonz/

Facebook :: http://www.facebook.com/visualstudio

Twitter :: http://twitter.com/#!/visualstudio

Somasegar’s Blog :: http://blogs.msdn.com/b/somasegar/

Resources

Connect. Share. Discuss.

http://europe.msteched.com

Learning

Microsoft Certification & Training Resources

www.microsoft.com/learning

TechNet

Resources for IT Professionals

http://microsoft.com/technet

Resources for Developers

http://microsoft.com/msdn

Evaluations

http://europe.msteched.com/sessions

Submit your evals online

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to

be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS

PRESENTATION.