PowerPoint 簡報

Size: px

Start display at page:

Download "PowerPoint 簡報"

淳宫
5 years ago
Views:

1 Build Windows Phone 7 Application with Existing Web App 王森 moli.wang@gmail.com

2 手持商機無限 - 網站服務成功移轉行動裝置王森 moli.wang@gmail.com

3 本場次芒果限定

4 本講題重點 ( 請再次確定您沒有走錯場次 ) HTML WP7 Native API 如果你的網站架構像這樣, 你可以 Private Web Services Private Data Services Isolated Storage Public Web Services Public Data Services SQL CE

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

6 今日重點快速提要快速製作 Web App WebBrowser Contorl 與資源的基本知識 HTML 與 Native API 的互動 CodePlex 上的有趣專案 PhoneGap for WP7

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

8 從其他平台轉移至 Windows Phone 7

9 查詢 Android 對應 API

10 查詢 iphone 對應 API

11 第一次偽裝轉換就上手

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

13 Demo 1 : 螢幕旋轉的問題 PhoneApplicationPage 的 SupportedOrientations OrientationChanged event WebBrowser control 內部的處理

14 Demo 1 : 小結 & 注意事項 Source Property Navigate() method Navigate() 可以 POST 與客製化 HTTP Header

15 這樣就可以上架販售, 但

16 Demo 2 : 快速將本地端 Web Apps 轉換成 Windows Phone 7 Apps 三種 Build Action : Content / Resource / Embedded Resource Content 與 Resource 使用時機 Resource 與 Embedded Resource 的差異

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

18 為相容性而做決定 Resource Embedded Resource

19 Demo 2 : 小結 & 注意事項使用 NavigateToString() 時 HTML 的內容必須自己動態合成中文編碼問題 NavigateToString() 無法存取 Content / Resource/ Embedded Resource Navigate() 只能用在遠端和 Isolated Storage

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

21 可以將網頁整個移植, 但

22 Native Apps 與 Web Apps 的戰爭

23 Silverlight vs. HTML5

24 Silverlight vs. HTML 年 6 月佔有率數據

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

26 Web App 與 Native App 結合才能發揮最大能力 IE9

27 相較於 Native API,HTML5 目前尚有不足之處 Mobile IE9 不是說好同一個 codebase 嗎?

28 Demo 4 : Native App Web App Silverlight(Native App) 1 InvokeScript( xxx", ooo) WebBrowser(Web App) IsScriptEnabled = true 2 function xxx(ooo) { }

29 Demo 5 : Web App Native App Silverlight(Native App) WebBrowser(Web App) IsScriptEnabled = true 1 window.external.notify() 2 ScriptNotify 3 EventHandler<NotifyEventArgs>

30 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>

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

32 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

33 整合應用 - HTML App Host Framework For Phone 7

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

35 整合應用 Widget Library For Windows Phone 7

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

37 跨平台解決方案

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

39 PhoneGap 實務運用

40 PhoneGap for Windows Phone 7 (Matt Lacey 版本 )

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

42 其他線上參考資源

43 參考資源 ( 英文 ) Adventures with the Windows Phone 7 WebBrowser Control Silverlight WebBrowser Control and Windows Phone 7

44 參考資源 ( 中文 ) 邊做邊學 Understanding Web Browser Control of Windows Phone 7 Part 1 邊做邊學 Understanding Web Browser Control of Windows Phone 7 Part 2

關於本書 l 3 PhoneGap Appcelerator Titanium Sencha Touch (wrapper framework) Native App PhoneGap Build Native App Hybrid App Java Objective-C Android SDK

關於本書 l 3 PhoneGap Appcelerator Titanium Sencha Touch (wrapper framework) Native App PhoneGap Build Native App Hybrid App Java Objective-C Android SDK 2 l 跨裝置網頁設計 Android ios Windows 8 BlackBerry OS Android HTML 5 HTML 5 HTML 4.01 HTML 5 CSS 3 CSS 3 CSS 2.01 CSS 3 2D/3D PC JavaScript