building beautiful and interactive metro apps with javascript, html5 & css3

twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

Who am I?

Developer Evangelist at Microsoft based in Silicon Valley, CA

Blog: http://blogs.msdn.com/b/dorischen/

Twitter @doristchen

Email: doris.chen@microsoft.com

Has over 15 years of experience in the software industry focusing on web technologies

Spoke and published widely at JavaOne, O'Reilly, Silicon Valley Code Camp, SD West, SD Forum and worldwide User Groups meetings

Doris received her Ph.D. from the University of California at Los Angeles (UCLA)

PAGE 2

As of March 2012, IDC

twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 9

twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 10

twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

App container

HTML host process

Internet Explorer

Web

platform

TAB

App code

Web platform

Windows

runtime

App code

PAGE 12

demo

Internet Explorer

for the desktop Internet Explorer

twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 17

twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 18

twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

/* Re-arrange and hide/show content */

Full screen

Snap

Fill

Portrait

PAGE 21

twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

1,1 2,1

2,2 1,2

demo

twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 26

demo

The development tools are FREE!

If you use a higher SKU, it just works!

twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 33

twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 34

twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 36

twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 38

twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 39

twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

http://msdn.microsoft.com/en-us/library/windows/apps/hh700404.aspx

http://msdn.microsoft.com/en-us/library/windows/apps/hh465380.aspx

http://msdn.microsoft.com/en-us/library/windows/apps/hh465373.aspx

twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

Feature Local context Web context

Windows Run-time Yes No

Windows Library for

Javascript

Yes Yes*

External script

references

No Yes

Cross-domain XHR

requests

Yes No

Automatic filtering for

script injection on

DOM

Yes No

There are ways to communicate across contexts, ways to give websites access to some web standards

features and ways to skip automatic filtering within a function.

demo

"Code for touch, get mouse and pen for free!"

API surface CSS Properties DOM Attributes DOM Events

Scrolling

overflow

-ms-scroll-rails

-ms-scroll-snap-x

-ms-scroll-snap-y

-ms-scroll-chaining

-ms-scroll-boundary

scrollLeft

scrollTop scroll

Zooming

-ms-content-zooming

-ms-content-zoom-

boundary

-ms-content-zoom-snap

msContentZoomFactor MSContentZoom

Both MSManipulationStateChanged

Snap-points -ms-scroll-snap-type

-ms-scroll-snap-point-x

<div id="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none"> <div class="smallListIconTextItem"> <img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" /> <div class="smallListIconTextItem-Detail"> </div> </div> </div> <!-- Call WinJS.UI.processAll() in your initialization code --> <div id="listView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: myData.dataSource, itemTemplate: smallListIconTextTemplate, selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none', layout: { type: WinJS.UI.GridLayout } }" ></div>

<!– Step1: declare control -->

<div id=“list” data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>

/* Step 2: Call WinJS.UI.processAll() */

/* Step 3: Use the control */

document.getElementById(‘list’).winControl.addEventListener (‘selectionchanged’, onSelChanged );

twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

SettingsFlyout

Flyout

Appbar

Semantic Zoom

Flipview

SemanticZoom

Listview

Menu

Rating

Slide does not include all WinJS controls (Tooltip, ViewBox, ToggleSwitch, HTMLControl, etc.)

DatePicker

<div id="appbar" data-win-control="WinJS.UI.AppBar"> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'brag', label:'Brag', icon:'emoji2', section:'selection', type:'flyout', flyout:'bragFlyout'}"></button>

</div>

<div id="bragFlyout" data-win-control="WinJS.UI.Menu">

<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'photo', label:'Photo'}"></button>

<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'video', label:'Video' }"></button>

</div>

Windows.Media.Capture

// Handle click events from the Photo command

capture.CameraCaptureUI()

// Capture a photo and display the share UI

Contracts

demo

twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

Windows 8 Cheat Sheet http://bit.ly/wins8cheatsheet

http://bit.ly/Win8GenApp

http:/dev.windows.com PAGE 80

Launch your Windows 8 App in 30 days

Generation App Online training and tips from insiders Tele-support with a Windows 8 architect Exclusive one-on-one Metro style design consultation Virtual Labs- 90 min labs http://aka.ms/vLabsWin8 Sign up at http://bit.ly/Win8GenApp

twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

http://ie.microsoft.com/testdrive/Views/SiteMap/

http://www.ietestdrive.com/Links/DevGuide9.html

http://www.ietestdrive.com/Links/DevGuide10.html

http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspxPAGE 82