Building Windows 8 Applications with HTML5 and JS

spanflockInternet and Web Development

Jun 24, 2012 (5 years and 29 days ago)

537 views

Building Windows 8 Applications
with HTML5 and JS

Mihai
T
ătăran

General Manager,
Avaelgo

Microsoft MVP

mihai.tataran@hpc
-
consulting.ro


www.c
odecamp.ro

About


Owner, GM


Avaelgo

(ex H.P.C. Consulting)


Custom software development


Consulting / training


Microsoft MVP


.NET community:
www.codecamp.ro


http://itcamp.ro



Objectives


Download and play with Windows 8 and VS
2011 Previews and SDK



Understand what you need to add upon your
HTML 5 skills to build Windows 8 Metro apps


Migrating apps


New apps

Agenda


Basic Metro apps


WinJS
, Controls


Windows 8 platform

HTML 5 and
Javascript


HTML5


Indexed DB


App Cache


Web Workers


Canvas


SVG


FormData



CSS3 animations
& transitions


XHR


FileAPI


Web Sockets


Geolocation


PostMessage


Metro apps


Only the
HTML5 DOCT
Y
PE


Single window


All the device
’s screen


Access to Windows Runtime


Metro apps: runtime

App Container

HTML Host Process

App Code


Simple app from scratch


Anatomy of an HTML5 app


Packaging and execution
environment


Agenda


Basic Metro apps


WinJS
, Controls


Windows 8 platform

WinJS


The library for Metro style apps


Matches the Windows Metro design style


Designed
for touch as well as traditional input


Scales across form factors



UI Controls


Designed for
touch
, mouse, keyboard


Everyday widgets


Text editing


Scrolling content


Presenting data


Commanding surfaces




Everyday widgets
-

custom
s
tyled

Text editing
c
ontrols
-

b
ehaviors

Presenting data
c
ontrols

ListView

data
templating

(HTML)

<
div

data
-
win
-
control
="
WinJS.Binding.Template
"
id
="
myTemplate
"

>


<
div

style
=
"
width:

110px
;
margin
:

10px
"
>



<
img

data
-
win
-
bind
="
src
: picture"
style
="height: 60px; width: 60px"

/>



<
input
type
="button"

data
-
win
-
bind
="value:

buttonText
"

/>


</
div
>

</
div
>



<
div

height
="400"

data
-
win
-
control
="
WinJS.UI.ListView
"
id
="listview1"

data
-
win
-
options
="{
dataSource
:
myData
,
itemRenderer
:
myTemplate
}">

</
div
>


UI Animation Sample


ListView

interaction model sample

Agenda


Basic Metro apps


WinJS
, Controls


Windows 8 platform

Process states


Running

Suspended

suspending

Termina
ted

Low
memory

resuming

App

launch

Splash
screen

Suspended state


No
CPU, Disk or Network consumed


All threads are suspended


Apps remain in memory


Apps
instantly resumed from suspend when
brought to
foreground



Exception: Background tasks


Termination


System needs more memory


User switch occurs


System shutdown


Apps crash



Application is not notified

Saving state


sessionState

in
WinJS


Windows.Storage.ApplicationData

to save
application
state

Saving / restoring state

Scenario

You should….

User is using your App

Save user data incrementally

App switched away from
(Suspending)

Save where

the user is


what screen they are
on, for example

Not running

App launched
by user (Activated)

Bring the user back and restore their session

as
if they never left

Suspended App launched
by user (Resuming)

Do nothing

Charms


Some kind of Start Bar


Ideal manner to use device’s settings


Or any other app specific settings


Share contracts


Predefined contracts in Metro


App Bar (from SDK)


Windows 8 application states


Charms (Printing; Custom: Application Setting)


Share contracts (Share
Dest

app from SDK)


Web Workers(*)


UI Thread

Window Object

Objects Attached To The
Window

(
XMLHttpRequest
, Navigator,
Location

Indexed Database, Web
Sockets)

Document Object

(HTML Elements, CSS)

JavaScript Engine

Web Worker

JavaScript Engine

Worker Global Scope Object

Objects Attached To The Window

(
XMLHttpRequest
, Navigator,
Location

Indexed Database, Web Sockets)


Web Workers


Resources


Build Conference:
http://www.buildwindows.com
/


Metro Style applications resources:
http://msdn.microsoft.com/en
-
us/windows/apps
/


Windows 8 Developer Preview:
http://msdn.microsoft.com/en
-
us/windows/apps/br229516/

Objectives


Download and play with Windows 8 and VS
2011 Previews and SDK



Understand what you need to add upon your
HTML 5 skills to build Windows 8 Metro apps


Migrating apps


New apps

Questions?


Complete electronic evaluation forms
on the computers in the hall
and
enter to win
!


Telerik

Ultimate Collection


RedGate

.NET Reflector
VSPro


ComponentOne

Enterprise Studio Suite


Pluralsight

yearly subscriptions


CodeSmith

Tools Generator Pro
Personal


JetBrains

ReSharper


Semos

Education Training Voucher


and many more…