what web developers need to know to develop windows 8 apps

twitter #wins8camp http://bit.ly/wins8cheatsheet 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

Office Hours http://ohours.org/dorischen

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

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

As of March 2012, IDC

http://bit.ly/win8cards

twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen PAGE 8

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

demo

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

13

twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen PAGE 14

twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen PAGE 15

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

/* */

/* …*/

/* …*/

Full screen

Snap

Fill

Portrait

PAGE 18

demo

twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen PAGE 22

twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen PAGE 23

The development tools are FREE!

If you use a higher SKU, it just works!

demo

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

28

demo

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.

Feature Local context Web context

Windows Runtime Yes No

Windows Library for JavaScript Yes Partial

JavaScript

URIs(attribute="javascript:code") No Yes

Data URIs ("data:" ) for fonts No Yes

External script references

(<script src="http://*" /> ) No Yes

window.close Yes No

Cross-domain XHR requests Yes No

http://blogs.msdn.com/b/dorischen/archive/2012/10/02/transform-your-html-css-javascript-apps-into-windows-8-application.aspx

http://github.com/appendto/jquery-win8

http://channel9.msdn.com/Events/Build/2012/3-130

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

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

xhr//access a web service, cloud service, local resource

http://www.example.org/somedata.json

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

36

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

function onLoad() {

...

var workSpaces = document.getElementsByClassName("workspace");

for (i = 0; i < workSpaces.length; i++) {

workSpaces[i].addEventListener("MSPointerDown", pointerDownHandler, false);

workSpaces[i].addEventListener("MSPointerMove", pointerMoveHandler, false);

workSpaces[i].addEventListener("MSPointerUp", pointerUpHandler, false);

workSpaces[i].addEventListener("MSManipulationStateChanged",

resetInteractions, false);

}

...

}

this.MSPointerDown = function(evt)

{

context.beginPath();

context.moveTo(evt.offsetX, evt.offsetY);

x = evt.offsetX;

y = evt.offsetY;

brush.started = true;

};

this.MSPointerUp = function(evt)

{

if (brush.started)

{

brush.MSPointerMove(evt);

context.closePath();

brush.started = false;

}

};

demo

// Application manifest capabilities required to access camera and microphone <Capabilities> <DeviceCapability Name="webcam" /> <DeviceCapability Name="microphone" /> </Capabilities>

id="message"

id="imagedisplay"

type="text/javascript">

// Step 1: Invoke the camera capture UI for snapping a photo

var captureUI = new Windows.Media.Capture.CameraCaptureUI();

captureUI.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).

then(function (capturedItem) {

if (capturedItem) {

// Step 2: Display the photo

document.getElementById("imagedisplay").src = URL.createObjectURL(capturedItem);

} else {

document.getElementById("message").innerHTML = "User didn’t capture a photo";

}

});

id="message"

id="videoplayback"

type="text/javascript">

// Step 1: Invoke the camera capture UI for record a video

var dialog = new Windows.Media.Capture.CameraCaptureUI();

dialog.videoSettings.format = Windows.Media.Capture.CameraCaptureUIVideoFormat.mp4;

dialog.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.video).done(function (file) {

if (file) {

var videoBlobUrl = URL.createObjectURL(file, {oneTimeOnly: true});

document.getElementById("capturedVideo").src = videoBlobUrl;

}

});

demo

document.getElementById("pin").addEventListener("click", function (e) {

var uri = new Windows.Foundation.Uri("ms-appx:///" + item.tileImage);

var tile = new start.SecondaryTile(

item.key, // Tile ID

item.shortTitle, // Tile short name

item.title, // Tile display name

JSON.stringify(Data.getItemReference(item)), // Activation argument

start.TileOptions.showNameOnLogo, // Tile options

uri // Tile logo URI

);

})

return nav.navigate("/pages/itemDetail/itemDetail.html", { item: JSON.parse(args.detail.arguments) });

default.js:

// Register for push notifications var profile = net.NetworkInformation.getInternetConnectionProfile();

if (profile.getNetworkConnectivityLevel() === net.NetworkConnectivityLevel.internetAccess) { push.PushNotificationChannelManager.createPushNotificationChannelForApplicationAsync().then(function (channel) {

var buffer = wsc.CryptographicBuffer.convertStringToBinary(channel.uri, wsc.BinaryStringEncoding.utf8);

var uri = wsc.CryptographicBuffer.encodeToBase64String(buffer);

WinJS.xhr({ url: "http://ContosoRecipes8.cloudapp.net?uri=" + uri + "&type=tile" }).then(function (xhr) {

… }…

// Handle click events from the Reminder command

document.getElementById("remind").addEventListener("click", function (e) {

// Create a toast notifier

var notifier = notify.ToastNotificationManager.createToastNotifier();

// Make sure notifications are enabled

if (notifier.setting != notify.NotificationSetting.enabled) {…}

// Get a toast template and insert a text node containing a message

var template = notify.ToastNotificationManager.getTemplateContent(notify.ToastTemplateType.toastText01);

var element = template.getElementsByTagName("text")[0];element.appendChild(template.createTextNode("Reminder!"));

// Schedule the toast to appear 10 seconds from now

var date = new Date(new Date().getTime() + 10000);

var stn = notify.ScheduledToastNotification(template, date);

notifier.addToSchedule(stn); });

• Free open source cross platform framework for apps on mobile devices

• Renders UI using HTML5 and CSS; Web browser encased in a native app for each platform

• Build for Windows Phone and Port to Windows 8

HTML5/JS developers

HTML5/JS developers (Game): Construct 2 (Game)

Construct2 - cross platform game development for beginners

HTML5/JS developers (Game) GameMaker - family of products that caters to entry-level developers and seasoned game development professionals to create cross platform games

HTML5/JS developers (Game) GameSalad – create cross platform games rapidly with no code

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

http://bit.ly/2000Cash

Publish your app to the Windows Store and/or Windows Phone Store March 8, 2013 through June 30, 2013

Submit up to 10 published apps per Store and get a $100 Virtual Visa®

More: http://bit.ly/2000Cash

YOUR IDEA.

YOUR APP.

30 DAYS.

You can develop a Windows 8 app in 30 days—

and we’re here to help.

Week 1 App design

Week 2 Coding your app

Week 3 Making your app shine

Week 4 Get published

• Insider tips and tricks on Windows 8 application development.

• Personal on-the-phone access to a Windows 8 architect*.

• An exclusive one-on-one Metro style design consultation*.

• An opportunity to get expert help from a Microsoft Services Engineer at an App Excellence Lab.

Sign Up http://bit.ly/Win8GenApp

http://bit.ly/HTML5Wins8Camp

http://bit.ly/CampInBox

http://bit.ly/Wins8Download

http://Aka.ms/brockschmidtbook

http:/dev.windows.com PAGE

80

PAGE

81

• Responsive Web Design and CSS3

• http://bit.ly/CSS3Intro

• HTML5, CSS3 Free 1 Day Training

• http://bit.ly/HTML5DevCampDownload

• Using Blend to Design HTML5 Windows 8 Application (Part II): Style,

Layout and Grid

• http://bit.ly/HTML5onBlend2

• Using Blend to Design HTML5 Windows 8 Application (Part III): Style

Game Board, Cards, Support Different Device, View States

• http://bit.ly/HTML5onBlend3

• Feature-specific demos • http://ie.microsoft.com/testdrive/

• Real-world demos • http://www.beautyoftheweb.com/