build windows phone 7 application with existing...
TRANSCRIPT
本場次
芒果限定
本講題重點(請再次確定您沒有走錯場次)
如果你的網站架構像這樣, 你可以…
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