Build Windows Phone 7 Application with Existing...
45
Transcript of Build Windows Phone 7 Application with Existing...
本場次
芒果限定
本講題重點(請再次確定您沒有走錯場次)
如果你的網站架構像這樣， 你可以…
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
