31
WP7Dev with HTML & JS

WP7Dev with HTML & JavaScript

Embed Size (px)

DESCRIPTION

Slides from presentation given at WPUG

Citation preview

Page 1: WP7Dev with HTML & JavaScript

WP7Devwith HTML & JS

Page 2: WP7Dev with HTML & JavaScript

Silverlight and the web have a history

Page 3: WP7Dev with HTML & JavaScript

but Silverlight doesn't work in the browser (IE Mobile)

on WP7

Page 4: WP7Dev with HTML & JavaScript

You can put the browser inside a Silverlight app

though

Page 5: WP7Dev with HTML & JavaScript

Microsoft.Phone.Controls.WebBrows

er

Page 6: WP7Dev with HTML & JavaScript

Simplest use:.NavigateToString(

)

Demo

Page 7: WP7Dev with HTML & JavaScript

A common request:

HTML Help

Page 8: WP7Dev with HTML & JavaScript

Loading files from IsolatedStorage

.Navigate()

Demo

Page 9: WP7Dev with HTML & JavaScript

WebBrowser doesn't include a back stackbut it's easy to create your

own

Demo

Page 10: WP7Dev with HTML & JavaScript

private readonly Stack<Uri> historyList = new Stack<Uri>();

protected override void OnBackKeyPress(CancelEventArgs e){ if (this.historyList.Count > 1) { this.historyList.Pop(); this.webBrowser1.Navigate(this.historyList.Peek()); e.Cancel = true; }

base.OnBackKeyPress(e);}

private void webBrowser1_Navigated(object sender, NavigationEventArgs e)

{ if ((this.historyList.Count == 0) || (e.Uri != this.historyList.Peek())) { this.historyList.Push(e.Uri); }}

Page 11: WP7Dev with HTML & JavaScript

Seriously consider

alternatives though

hint: Don't do it!

Page 12: WP7Dev with HTML & JavaScript

Where WebBrowser can be useful:

interacting with external websites

Page 13: WP7Dev with HTML & JavaScript

IsScriptEnabled

allows JS on page to call .net code

and .net code to call JS functions

Page 14: WP7Dev with HTML & JavaScript

Authorising with OAuthOr

taking in-app payments

Demo

Page 15: WP7Dev with HTML & JavaScript

80020006

Page 16: WP7Dev with HTML & JavaScript

80020101

Page 17: WP7Dev with HTML & JavaScript

Can we do more?

Page 18: WP7Dev with HTML & JavaScript

Why might we want to?

Page 19: WP7Dev with HTML & JavaScript

There are more mobile platforms than just Windows Phone 7

(Shhh!)

Page 20: WP7Dev with HTML & JavaScript

All the different platforms use different

programming languages

Page 21: WP7Dev with HTML & JavaScript

But everyone understands

HTML, JS & CSS

Page 22: WP7Dev with HTML & JavaScript

Introducing

Page 23: WP7Dev with HTML & JavaScript

build cross-platform mobile apps in HTML and JavaScript and still take advantage

of core, native, features

Page 24: WP7Dev with HTML & JavaScript

iPhoneAndroid

BlackberrySymbian

PalmWindows Phone

7!

Page 25: WP7Dev with HTML & JavaScript

Write the HTML, JS & CSS once*

and then recompile for each platform

*but you may want/need some variation

Page 26: WP7Dev with HTML & JavaScript

navigator.notification.vibrate()

navigator.geolocation.getCurrentPosition(

)

navigator.orientation.getCurrentOrientati

on()

navigator.network.isReachable()

navigator.sms.send()

navigator.telephony.call()

navigator.camera.getPicture()

Page 27: WP7Dev with HTML & JavaScript

Demo

Page 28: WP7Dev with HTML & JavaScript

That sounds amazing!

What are the cons?

Page 29: WP7Dev with HTML & JavaScript

- Not all platforms support/expose the same

functionality- Metro harder to mimic

- Debugging harder- WP7 support not finished, yet!

Page 30: WP7Dev with HTML & JavaScript

Consider it if you want to go cross-platform

Page 31: WP7Dev with HTML & JavaScript

It's OSS & contributions welcome