Build Windows Phone 7 Application with Existing Web App 王森 moli.wang@gmail.com
手持商機無限 - 網站服務成功移轉行動裝置 王森 moli.wang@gmail.com
本場次 芒果限定
本講題重點 ( 請再次確定您沒有走錯場次 ) HTML WP7 Native API 如果你的網站架構像這樣, 你可以 Private Web Services Private Data Services Isolated Storage Public Web Services Public Data Services SQL CE
本講題專注於 以 HTML+CSS+JavaScript 為主結構的 Mobile Web Apps
今日重點快速提要 快速製作 Web App WebBrowser Contorl 與 資源 的基本知識 HTML 與 Native API 的互動 CodePlex 上的有趣專案 PhoneGap for WP7
如果是來自其他平台的朋友 各平台的 Mobile Web Apps UIWebView WebBrowser 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 : 螢幕旋轉的問題 PhoneApplicationPage 的 SupportedOrientations OrientationChanged event WebBrowser control 內部的處理
Demo 1 : 小結 & 注意事項 Source Property Navigate() method Navigate() 可以 POST 與客製化 HTTP Header
這樣就可以上架販售, 但
Demo 2 : 快速將本地端 Web Apps 轉換成 Windows Phone 7 Apps 三種 Build Action : Content / Resource / Embedded Resource Content 與 Resource 使用時機 Resource 與 Embedded Resource 的差異
為效能而做取捨 Creating High Performing Silverlight Applications for Windows Phone Content Resource
為相容性而做決定 Resource Embedded 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
相較於 Native API,HTML5 目前尚有不足之處 Mobile IE9 不是說好同一個 codebase 嗎?
Demo 4 : Native App Web App Silverlight(Native App) 1 InvokeScript( xxx", ooo) WebBrowser(Web App) IsScriptEnabled = true 2 function xxx(ooo) { }
Demo 5 : Web App Native App Silverlight(Native App) WebBrowser(Web App) IsScriptEnabled = true 1 window.external.notify() 2 ScriptNotify 3 EventHandler<NotifyEventArgs>
Native Apps 與 Web Apps(in WebBrowser control) 可以雙向傳遞資訊 Silverlight(Native App) 1 InvokeScript( xxx", ooo) WebBrowser(Web App) IsScriptEnabled = true 2 function xxx(ooo) { } 1 window.external.notify() 2 ScriptNotify 3 EventHandler<NotifyEventArgs>
Demo 6 : 雙向傳遞實務應用 利用 eval 注入 JavaScript
Demo 6 : 小結 & 注意事項 Silverlight(Native App) InvokeScript( eval, xxxxxxxxxxxxxxxxxx) 1 2 InvokeScript( initialize ) WebBrowser(Web App) IsScriptEnabled = true function Initialize() { } window.external.notify() 3 ScriptNotify 4 5 PhoneCallTask
整合應用 - 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-windowsphone-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