Introduction to building Windows 8 Apps using HTML and JavaScript

Chris Anderson and Josh WilliamsSession 3-115

Familiar to web developers

Use jQuery, Dojo, Knockout, whatever JS toolkit you love today

Hardware accelerated web platform delivers fast and fluid apps

Full access to the Windows Runtime directly from JS

Deliver native Windows apps using what you already know today!

Migrating a web site to an app…

Differences from web environment

Styling changesWindows Runtime accessStatic HTMLLocal and Web contextIE10 DOCMODE onlyms-appx / ms-appx-web protocols

Mostly the same, but there you need to consider…

Windows Library for JavaScript (WinJS)

Style sheetsCore (promises, class, namespace, etc.)UtilitiesApp modelData model (binding, lists, etc.)Controls modelAnimationsPersonality controls

A collection of toolkits to make building Windows 8 apps fast and easy

WinJS Toolkits

Light StyleSheet

WinJS.Navigation Functions

local (storage)

roaming (storage)

WinJS.Application.sessionState

temp(storage)

Application Events

Namespace definition utilitiesWinJS.Namespace

Keyboard Key Enumeration

WinJS.UI.Animation

helpers

Coordinate Conversion

HTML/DOM UtilsWinJS Element

Attributes

Element Selection/Querying

Dark StyleSheet

Fragment loading and rendering

WinJS.UI.Fragments

WinJS.Promise

WinJS.PromiseStateMachine

Class definition and inheritance

WinJS.Class

Localized String Utilities

Support for WinJS declarative model (supportedForProc

essing)

Logging UtilsWinJS

WinJS.xhrWinJS.ErrorFro

mName

ValidationWinJS

Data-win-res processing

WinJS.UI.Pages.PageControl

WinJS.UI.Pages.IPageControlM

embers

Animation Library

WinJS.Binding.Template

Data Binding (as, bind) Mixins

WinJS.Binding.List

List Projections

Conversions

Support for declarative databinding

ListView

FlipView

Rating

Flyout SettingsFlyout

Semantic Zoom

Tooltip

AppBar

Menu GridLayout ListLayoutCustom Layout

Interface

TabContainer

HTMLControl

ToggleSwitchDatePickerTimePicker

ViewBox

IZoomableView

Animation System Management

Controls Utilities (

setOptions)

Menu Command

DataSourceStatus

IListBinding IListDataSourceIListDataAdapte

rIListNotification

Handler

StorageDataSource

VirtualizedDataSource

Support for declarative model

(processAll)

Error handling

Using WinJS…

Windows 8 Apps

PersonalityContractsStore

Building a great Windows 8 app experience means integrating …

Window 8 personality…

Using the search contract…

Using the trial mode api…

• 11/1 @ 12:00 – B33 BakerBuilding Awesome HTML apps in Blend for Windows 8

• 11/1 @ 10:15 – B33 KodiakDeep dive into WinJS

• 11/1 @ 2:30 – B33 KodiakDeep dive on WinJS ListView

• 11/1 @ 4:15 – B33 CascadeBuilding world-ready Windows Store apps with HTML/CSS/JavaScript

• 11/1 @ 4:15pm – B33 KodiakAnalytics for Windows Store apps

• 11/1 @ 4:15 – B92 Nexus/NormandyModern JavaScript

Related Sessions

• Develop: http://msdn.microsoft.com/en-US/windows/apps/br229512

• Design: http://design.windows.com/

• Samples: http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples

• Videos: http://channel9.msdn.com/Windows

Resources

Please submit session evals by using the Build Windows 8 appor at http://aka.ms/BuildSessions

Use HTML and JavaScript to create native Windows 8apps!

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