王森

moli.wang@gmail.com

Build Windows Phone 7

Application with Existing

Web App

王森

moli.wang@gmail.com

手持商機無限－

網站服務成功移轉行動裝置

本場次

芒果限定

本講題重點(請再次確定您沒有走錯場次)

如果你的網站架構像這樣， 你可以…

HTML

WP7 Native API

Private Web Services Public Web Services

Private Data Services Public Data Services

Isolated Storage SQL CE

本講題專注於 “以HTML+CSS+JavaScript 為主結構的Mobile Web Apps”

今日重點快速提要

快速製作Web App

WebBrowser Contorl 與”資源”的基本知識 HTML與Native API的互動 CodePlex上的有趣專案 PhoneGap for WP7

如果是來自其他平台的朋友 各平台的Mobile Web Apps

WebBrowser UIWebView WebView

從其他平台轉移至Windows Phone 7 http://windowsphone.interoperabilitybridges.com/

查詢Android對應API http://wp7mapping.interoperabilitybridges.com/Home/Library?source=Android

查詢iPhone對應API http://wp7mapping.interoperabilitybridges.com/Home/Library?source=iPhone

第一次偽裝 轉換就上手

Demo 1 : 快速將遠端Web Application 轉換成Windows Phone 7 Apps

Demo 1 : 螢幕旋轉的問題

WebBrowser control 內部的處理

PhoneApplicationPage

的SupportedOrientations

OrientationChanged event

Demo 1 : 小結 & 注意事項

Navigate() 可以POST與客製化HTTP Header

Source Property

Navigate() method

這樣就可以 上架販售，但…

Demo 2 : 快速將本地端 Web Apps 轉換成 Windows Phone 7 Apps

Resource 與 Embedded Resource的差異

Content 與 Resource使用時機

三種Build Action : Content / Resource / Embedded Resource

Content

Resource

為效能而做取捨 Creating High Performing Silverlight Applications for Windows Phone

Embedded Resource

Resource

為相容性而做決定

Demo 2 : 小結 & 注意事項

使用NavigateToString() 時 HTML的內容必須自己動態合成

中文編碼問題

NavigateToString() 無法存取 Content / Resource/ Embedded Resource

Navigate() 只能用在遠端和Isolated Storage

Demo 3 : 用Isolated Storage一次解決Navigate()與中文編碼問題

可以將網頁整個移植，但…

Native Apps與 Web Apps的戰爭

Silverlight vs. HTML5

Silverlight vs. HTML5 2011年6月佔有率數據

爭什麼爭，摻在一起做撒尿牛丸不就好了

Web App與Native App結合才能發揮最大能力 http://chrome.angrybirds.com

IE9

Mobile IE9

不是說好同一個codebase嗎?

相較於Native API，HTML5目前尚有不足之處

Silverlight(Native App)

WebBrowser(Web App)

IsScriptEnabled = true

InvokeScript(“xxx", ooo) 1

function xxx(ooo) { }

2

Demo 4 : Native App Web App

Silverlight(Native App)

WebBrowser(Web App)

IsScriptEnabled = true

ScriptNotify

window.external.Notify()

EventHandler<NotifyEventArgs>

1

2

3

Demo 5 : Web App Native App

Native Apps與Web Apps(in WebBrowser control) 可以雙向傳遞資訊

Silverlight(Native App)

WebBrowser(Web App)

IsScriptEnabled = true

ScriptNotify

window.external.Notify()

EventHandler<NotifyEventArgs>

1

2

3

InvokeScript(“xxx", ooo) 1

function xxx(ooo) { }

2

Demo 6 : 雙向傳遞實務應用 利用eval 注入JavaScript

Demo 6 : 小結 & 注意事項

Silverlight(Native App)

WebBrowser(Web App)

IsScriptEnabled = true

PhoneCallTask

InvokeScript(‘eval’, xxxxxxxxxxxxxxxxxx) 1

2

window.external.Notify() function Initialize() { }

InvokeScript(‘initialize’)

ScriptNotify

3

4

5

整合應用 - HTML App Host Framework For Phone 7 http://htmlappwp7.codeplex.com/

Demo 7 : 使用HTML App Host Framework For Phone 7

整合應用 – Widget Library For Windows Phone 7 http://widgetlibrary.codeplex.com/

Widget Library For Windows Phone 7 提供的原生功能

跨平台 解決方案

目前最常見的三個 PhoneGap vs. Titanium Mobile vs. Rhodes

PhoneGap 實務運用 http://www.phonegap.com/

PhoneGap for Windows Phone 7 (Matt Lacey版本)

Demo 8 : PhoneGap的加速度感應器API - Accelerometer

其他線上參考資源

參考資源(英文)

Adventures with the Windows Phone 7 WebBrowser Control http://blogs.msdn.com/b/dohollan/archive/2010/08/25/adventures-with-the-windows-phone-7-webbrowser-control.aspx Silverlight WebBrowser Control and Windows Phone 7 http://blog.markarteaga.com/SilverlightWebBrowserControlAndWindowsPhone7.aspx

參考資源(中文)

邊做邊學 Understanding Web Browser Control of Windows Phone 7 – Part 1 http://msdn.microsoft.com/zh-tw/windowsphone/gg462941 邊做邊學 Understanding Web Browser Control of Windows Phone 7 – Part 2 http://msdn.microsoft.com/zh-tw/windowsphone/gg462943