win8 html5 metro style app

8/2/2019 Win8 HTML5 Metro Style App

1/32

Click to edit Master subtitle style

www.buildwindows.c

Metro style apps using HTML5

Mustafa Adel ElnagarMicrosoft HTML5 chamion

@mustafa_elnagar


2/32

www.buildwindows.c

Agenda

HTML5 platform overview and fundamenta

Windows 8

HTML5 on Windows 8

Build your App

Youll leave with examples of how to

Get started building Metro style apps in HT


3/32

www.buildwindows.c

HTML5 will Rock


4/32


5/32


6/32www.buildwindows.c

Advanced graphics



Multimedia



WORA Write once. Ruanywhere


9/32


10/32

www.buildwindows.c

carbyn


11/32

www.buildwindows.c

Microsoft


12/32

www.buildwindows.c


13/32

CLICK TO EDIT MASTER SUBTITLE STYLE

Packaging andRuntime


14/32

www.buildwindows.c

App on disk to running

C:\Program Files\Applications\...

HTML

CSS

JavaScript

Resources

Manifest

App Container

HTML Host Process

App Code

Apppackage


15/32

Simplified Windows app platform


16/32

www.buildwindows.c

Simplified Windows app platformHTML5

Single HTML5 DOCTYPE

Standards web, plug-in free

Single window

+ Access to Windows Runtime


17/32

www.buildwindows.c

Windows Library for JavaScript (Wlibrary for building Metro style apps using Jav

Make your apps look and feel great Matches the Windows Metro design style

Controls for common user experiences

Designed for touch as well as traditional input

Scales across form factors

Build your apps fast and with high quality

Web technologies youre already familiar with

Modern patterns for responsive, reliable apps

Use interactive desi n tools


18/32


Process lifecycle


19/32

www.buildwindows.c

Process state transitions

Running Suspended

suspending

Low memory

Core runs No coderuns

resuming

App has 5s to

work aftersuspend message

App is notnotified whenterminated

App is notified

when resumed

Applaunch

Splashscreen

Code runs


20/32

www.buildwindows.c

Activation

DOMContentLoaded

Load App Data, Setup Event

Handlers, Initialize UI

Activated

Load SavedState, Handle

ActivationParameters

.onL

Finish Long RActi

Splash Screen Displayed


21/32


www.buildwindows.c

Discover the Metro App

Demo


22/32

www.buildwindows.c


23/32

www.buildwindows.c


24/32


www.buildwindows.c

Record Audio , Vedio

Demo

E l E t i i


25/32

Example: Event mixin

// Initialize the MediaCaptureInitialzationSefunction initCaptureSettings() { captureInitSettin

captureInitSettings = newWindows.Media.Capture.MediaCaptureInitializationSettings();captureInitSettings.audioDeviceId = ""; captureInitSettings.videoDevcaptureInitSettings.streamingCaptureMode =Windows.Media.Capture.StreamingCaptureMode.audioAndVideo;captureInitSettings.photoCaptureSource =Windows.Media.Capture.PhotoCaptureSource.videoPreview;captureInitSettings.realTimeModeEnabled = true; if (deviceList.leng

captureInitSettings.videoDeviceId = deviceList[0].id; }

Initiali e the MediaCapt re o


26/32

Initialize the MediaCapture o

// Create and initialze the MediaCapture obfunction initMediaCapture() {

oMediaCapture = null; oMediaCapture = nWindows.Media.Capture.MediaCapture();

oMediaCapture.initializeAsync(captureInitSthen (function

(result) { createProfile(); }, errorHandler)

Create an encoding profile


27/32

Create an encoding profile

// Create a profile. function createProfile() =Windows.Media.MediaProperties.MediaEncodingPateMp4( Windows.Media.MediaProperties.VideoEuality.qvga); }

Start Recording


28/32

Start Recording

// Start the video capture. functionstartMediaCaptureSession(){ Windows.Storage.KnownFolders.videosLiateFileAsync("cameraCapture.mp4",Windows.Storage.CreationCollisionOption.g

UniqueName).then(function (newFile) { sto= newFile;oMediaCapture.startRecordToStorageFileAsile, storageFile).then(function (result) { },errorHandler); } ); }


29/32

www.buildwindows.c

// Initialize the MediaCaptureInitialzationSettings. function initCaptureSettings{ captureInitSettings = null; captureInitSettings = new

Windows.Media.Capture.MediaCaptureInitializationSettings();captureInitSettings.audioDeviceId = ""; captureInitSettings.videoDeviceId = "captureInitSettings.streamingCaptureMode =Windows.Media.Capture.StreamingCaptureMode.audioAndVideo;captureInitSettings.photoCaptureSource =Windows.Media.Capture.PhotoCaptureSource.videoPreview;captureInitSettings.realTimeModeEnabled = true; if (deviceList.length > 0)captureInitSettings.videoDeviceId = deviceList[0].id; }


30/32


www.buildwindows.c

Thank you


31/32

2011 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/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 condcommitment 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

THIS PRESENTATION.


32/32


win8 html5 metro style app

Documents