wp7手機(jī)開發(fā)-silverlight瀏覽器插件.doc

了解 Windows Phone 7 網(wǎng)頁(yè)瀏覽器控件 Part 1了解 Windows Phone 7 網(wǎng)頁(yè)瀏覽器控件 Part 1文 / 黃忠成The Web Browser (Ph) Application前些日子，有關(guān)注我 Blog 的朋友應(yīng)該都已經(jīng)注意到，我發(fā)表了 Web Browser (Ph) Application 上架 Marketplace 的相關(guān)信息，也分享了退件及通過(guò)審核的一些過(guò)程?，F(xiàn)在讓我將開發(fā)這個(gè)應(yīng)用程序的經(jīng)驗(yàn)與大家分享。除了個(gè)人懶惰沒看清認(rèn)證的一些規(guī)則導(dǎo)致退件的經(jīng)驗(yàn)之外，Web Browser(Ph) 于開發(fā)中有兩個(gè)問(wèn)題是最重要的，第一個(gè)當(dāng)然是中文輸入法，此問(wèn)題的解法其實(shí)很簡(jiǎn)單，就是必須要擁有相關(guān)的字及注音碼，接著就只要做接口就好了，如果對(duì)此有興趣及需要 ，我建議讀者們參考 David 老師與光巖信息提供的控件(因?yàn)槲业淖謳?kù)其實(shí)并不完整)。第二個(gè)問(wèn)題就是，Web Browser (Ph) 是如何知道，使用者點(diǎn)選到了某個(gè)輸入框？又是如何將輸入的中文字放到輸入框里？Web Browser 控件其實(shí)用法分為簡(jiǎn)易與深入兩種，簡(jiǎn)易的將其拿來(lái)做為顯示某個(gè)網(wǎng)頁(yè)用，深度的用法則是在顯示網(wǎng)頁(yè)后，嘗試將整個(gè)網(wǎng)頁(yè)的控制權(quán)拿在手里，Web Browser (Ph) 即是深度的用法。OK，那么 Web Browser(Ph) 如何知道使用者點(diǎn)選到了某個(gè)輸入框？很簡(jiǎn)單，Web Browser(Ph) 有個(gè)函式：InvokeScript，可以讓開發(fā)者在 Web Browser 讀入網(wǎng)頁(yè)后，呼叫網(wǎng)頁(yè)中的某個(gè) JavaScript，原意是想讓開發(fā)者在使用 NavigateToString、Navigate 瀏覽本機(jī)網(wǎng)頁(yè)時(shí)能有個(gè)溝通的管道。Web Browser(Ph) 將此技術(shù)發(fā)揮到極致，經(jīng)測(cè)試得知，InvokeScript 其實(shí)不僅只能在瀏覽本機(jī)網(wǎng)頁(yè)，瀏覽一般網(wǎng)頁(yè)時(shí)也可正常運(yùn)作，這意味著 Web Browser(Ph) 可以在使用者瀏覽網(wǎng)頁(yè)后，以 InvokeScript 來(lái)呼叫特定的 JavaScript 函式，那這有什么用呢？細(xì)想一下，有哪個(gè) JavaScript 函式可以讓你列舉出網(wǎng)頁(yè)上所有的 input type=text 控件？ document.getElementsByTagName !但此路不通，因?yàn)?InvokeScript 僅能呼叫函式，像 getElementsByTagName 這種掛在某個(gè)對(duì)象下的函式是無(wú)法透過(guò) InvokeScript 呼叫的。所以我們得找另一條路，有哪個(gè)函式可以讓 InvokeScript 正常呼叫，又能達(dá)到與 getElementsByTagName一樣的效果？答案很明白，就是 eval 函式，這個(gè)函式可以讓我們執(zhí)行大多數(shù)的 JavaScript 程序代碼，這便是 Web Browser (Ph) 所仰賴的關(guān)鍵技術(shù)。關(guān)于 Tel/Sms TagWeb Browser 控件很強(qiáng)，但是其有一點(diǎn)與內(nèi)建的 IE 不同，那就是在內(nèi)建的 IE 下是可以解析 Tag 的，透過(guò)這個(gè)機(jī)制，使用者可以在瀏覽到使用此 Tag 的網(wǎng)頁(yè)時(shí)，點(diǎn)選該鏈接來(lái)?yè)艹鲭娫?，?Web Browser 控制項(xiàng)目前并不支持這個(gè)機(jī)制，這是已知的限制。這些 tel tag 最常出現(xiàn)在搜索引擎的網(wǎng)頁(yè)，例如 Google Maps。圖1于內(nèi)建的 IE 上點(diǎn)選電話部份的鏈接，會(huì)啟動(dòng)撥號(hào)動(dòng)作。圖2但 Web Browser 控件并不支持這種應(yīng)用，也就是其不認(rèn)識(shí) ，要解決這個(gè)問(wèn)題，我們得自己來(lái)處理，前面所提到的 InvokeScript+Eval 的技巧，正巧可用上。首先，我們得想辦法在 Web Browser 加載網(wǎng)頁(yè)后，執(zhí)行一段 JavaScript，搜索頁(yè)中所有的 元素，緊接著解析其 href attribute，只要發(fā)現(xiàn)是以 tel: 開頭，即將其改為 #，并掛上 onclick 事件來(lái)處理使用者按下連結(jié)的后續(xù)動(dòng)作。MainPage.xaml MainPage.xaml.cs1. usingSystem;2. usingSystem.Collections.Generic;3. usingSystem.Linq;4. usingSystem.Net;5. usingSystem.Windows;6. usingSystem.Windows.Controls;7. usingSystem.Windows.Documents;8. usingSystem.Windows.Input;9. usingSystem.Windows.Media;10. usingSystem.Windows.Media.Animation;11. usingSystem.Windows.Shapes;12. usingMicrosoft.Phone.Controls;13. usingMicrosoft.Phone.Tasks;14. usingSystem.Windows.Threading;15. 16. namespaceDetectTelTag17. 18. publicpartialclassMainPage:PhoneApplicationPage19. 20. DispatcherTimer_timer=newDispatcherTimer();21. 22. /Constructor23. publicMainPage()24. 25. InitializeComponent();26. _timer.Tick+=(s,args)=27. 28. try29. 30. /呼叫DetectActiveTel來(lái)偵測(cè)使用者是否有按下某個(gè)tel連結(jié)31. stringpara=(string)webBrowser1.InvokeScript(DetectActiveTel);32. if(!string.IsNullOrEmpty(para)33. 34. /使用者按下了tel連結(jié),啟動(dòng)撥號(hào)35. stringparameters=para.Split(;);36. PhoneCallTasktask=newPhoneCallTask();37. task.PhoneNumber=parameters0;38. task.DisplayName=parameters1;39. task.Show();40. 41. 42. catch(Exception)43. 44. 45. ;46. _timer.Interval=TimeSpan.FromSeconds(1);47. 48. 49. privatevoidbutton1_Click(objectsender,RoutedEventArgse)50. 51. /必須在Navigate前，設(shè)定IsScriptEntabled為true才能使用InvokeScript52. webBrowser1.IsScriptEnabled=true;53. webBrowser1.Navigate(54. newUri(.tw/?q=Taipei%20101,UriKind.Absolute);55. 56. 57. /此事件發(fā)生於網(wǎng)頁(yè)載入後58. privatevoidwebBrowser1_LoadCompleted(objectsender,59. System.Windows.Navigation.NavigationEventArgse)60. 61. try62. 63. /ScriptInjection64. webBrowser1.InvokeScript(eval,65. window.currentActiveTel=;66. window.currentActiveName=;67. 68. window.DetectActiveTel=function()69. if(window.currentActiveTel!=)70. varresult=window.currentActiveTel+;+window.currentActiveName;71. window.currentActiveTel=;72. window.currentActiveName=;73. returnresult;74. 75. 76. 77. window.ReactiveTelTag=function()78. varelem=event.srcElement;79. if(elem.getAttribute(tel)!=null)80. currentActiveTel=elem.getAttribute(tel);81. currentActiveName=elem.innerHTML;82. 83. returnfalse;84. 85. 86. window.ScanTelTag=function(elem)87. if(elem.getAttribute(href)!=null&elem.getAttribute(href).indexOf(tel:)=0)88. vartel=elem.getAttribute(href).substring(4);89. elem.setAttribute(href,#);90. elem.setAttribute(tel,tel);91. elem.attachEvent(onclick,ReactiveTelTag);92. 93. 94. 95. window.Initialize=function()96. varelems=document.getElementsByTagName(a);97. for(vari=0;ielems.length;i+)98. ScanTelTag(elemsi);99. );100. /初始化101. webBrowser1.InvokeScript(Initialize);102. /啟動(dòng)偵測(cè)連結(jié)按下的Timer103. _timer.Start();104. 105. catch(Exception)106. 107. 108. 109. 110. 這段程序代碼有幾個(gè)地方需要特別解釋，一是 WebBrowser 的 IsScriptEnabled 屬性，這個(gè)屬性值必須在呼叫 Navigate 來(lái)導(dǎo)向某個(gè)網(wǎng)頁(yè)前設(shè)定，當(dāng)此值設(shè)定為 true 時(shí)，InvokeScript 才能正常呼叫。此程序在呼叫 Navigate，Web Browser 加載網(wǎng)頁(yè)后，以 InvokeScript+Eval 的技巧注入一段 JavaScript 程序至該網(wǎng)頁(yè)中，其中的 Initialize 便是搜索頁(yè)中所有的 a 元素，并且判別是否是 格式，如確認(rèn)為此格式，便先將其 href 改為 #，阻止默認(rèn)的鏈接導(dǎo)向行為，接著掛載 onclick 事件，于使用者點(diǎn)下該連結(jié)時(shí)，將原先 tel: 后面的電話號(hào)碼放到 currentActiveTel 全局變量中。最后一個(gè)步驟就是以 DispatcherTime 每秒呼叫一次 DetectStatus 函式來(lái)偵測(cè) currentActiveTel 的狀態(tài)，當(dāng) currentActivceTel 有值時(shí)，便代表著使用者按下某個(gè) tel 連結(jié)。圖3圖4類似的 sms:xxxx 格式也可以用同樣的手法解決。了解 Windows Phone 7 網(wǎng)頁(yè)瀏覽器控件 Part 2 了解 Windows Phone 7 網(wǎng)頁(yè)瀏覽器控件 Part 2文 / 黃忠成Gadget Devloping (HTML Base Application)在多數(shù)的 Mobile 系統(tǒng)中，除了原生應(yīng)用程序的開發(fā)平臺(tái)外，都提供了另一種開發(fā)平臺(tái)，那就是以 HTML 為主的 Mobile Page App 架構(gòu)，在這種架構(gòu)下，開發(fā)者可以用 HTML+JavaScript 的方式來(lái)開發(fā) Mobile Application，像是以往的 Windows Mobile 6/6.5、iPhone 都支持這種開發(fā)方式。會(huì)提供這種開發(fā)方式的主要原因是，有些開發(fā)者對(duì)于原生的開發(fā)環(huán)境及語(yǔ)言并不是那么熟悉，OS 為了讓這些開發(fā)者能以現(xiàn)有的知識(shí)來(lái)快速開發(fā)應(yīng)用程序，所以才會(huì)在原生平臺(tái)外另辟蹊徑，當(dāng)然，以 HTML+JavaScript 為基礎(chǔ)的開發(fā)方式或許在能力上遠(yuǎn)不及原生程序，但若應(yīng)用程序需求不高，只是要顯示及導(dǎo)覽功能，這樣的開發(fā)方式其實(shí)效率相當(dāng)?shù)母?。舉個(gè)例來(lái)說(shuō)，你發(fā)行了一個(gè)網(wǎng)絡(luò)雜志，每周都能更新，此時(shí)在這種以 HTML 為基礎(chǔ)的架構(gòu)下，妳可以讓美工將雜志內(nèi)容編寫為 HTML+JavaScript，然后將其封裝到 XAP 檔中上架到 Marketplace 讓使用者購(gòu)買并下載。整個(gè)開發(fā)流程是相當(dāng)簡(jiǎn)單的，美工編寫 HTML+JavaScript，開發(fā)人員將 HTML+JavaScript 封裝到 XAP 檔中，上架販賣。Using Gadget Template for Windows Phone 7Windows Phone 7 SDK 中并未提供類似于 Gadget 的開發(fā)方式，但這不代表我們無(wú)法這樣做，因?yàn)橛辛?Web Browser 控件跟 InvokeScript 機(jī)制的幫忙，我們可以輕易的達(dá)到同樣的效果，本文末后會(huì)提供一個(gè) Gadget Application Tempate 的 Visual Studio 項(xiàng)目模板，讀者們只要下載并照步驟安裝 (后述)，即可以類似 Gadget，以 HTML 開發(fā) Windows Phone 7 應(yīng)用程序。首先請(qǐng)建立新項(xiàng)目，選擇 WP7GadgetTemplate。圖1完成后會(huì)看到圖二的方案總管畫面。圖2WebContent 目錄下的檔案就是簡(jiǎn)單的 HTML+JavaScript，請(qǐng)開啟 index.html，你會(huì)發(fā)現(xiàn)到其中已有一些預(yù)設(shè)的內(nèi)容。index.html1. 2. 3. 4. 5. !-6. !-7. 8. 9. 10. 首頁(yè)11. 12. 13. !-14.15. functiondial()16. varobj=newWP7.Phone();17. obj.Dial(39398494,TEST333);18. 19.20. functionsms()21. varobj=newWP7.SMS();22. obj.SendSMS(39398494,TEST333BODY);23. 24. -25. 26. 27. 28. 29. 歡迎使用ASP.NET!30. 31. 32. 若要進(jìn)一步了解ASP.NET，請(qǐng)?jiān)煸L。33. 34. Call0999938443.35. 36. 37. WP7Global.Initialize();38. 39. 40. 看起來(lái)用法跟 HTML+JavaScript 完全相同是吧？接著按下 F5 執(zhí)行應(yīng)用程序。圖3接著按下 Call 的連結(jié)，此時(shí)會(huì)啟動(dòng)撥號(hào)接口。圖4接著修改 index.html 內(nèi)容，加入 SMS 的 tag。index.html1. .2. 3. .4. Call0999938443.5. SMSto0999938443.6. 7. 8. WP7Global.Initialize();9. 10. 按下 F5 后重新執(zhí)行。圖5點(diǎn)選 SMS to .連結(jié)，此時(shí)會(huì)開出發(fā)送簡(jiǎn)訊窗口。圖6那如果我要加入圖形按鈕呢？也就是在 HTML 中加入一個(gè)圖形，讓用戶點(diǎn)選后撥出電話，要怎么做呢？很簡(jiǎn)單，就照傳統(tǒng)的 HTML 寫法，透過(guò)方案總管在 WebContent 文件夾下加入一個(gè)圖形文件。圖7完成后修改 index.html。index.html1. .2. 3. .按下 F5 執(zhí)行。圖8點(diǎn)選該圖片可開啟撥號(hào)接口。圖9很簡(jiǎn)單對(duì)吧？那如果想要讓使用者點(diǎn)選某個(gè)鏈接后導(dǎo)向另一個(gè) HTML 頁(yè)面，又該如何做呢？這更簡(jiǎn)單了，只要在 WebContent 文件夾下加入新項(xiàng)目，選擇 WP7HTMLPage 模板。圖10按下新增后，即可得到一個(gè)全新的 HTML 頁(yè)面。接著修改 index.html 內(nèi)容來(lái)添加對(duì)此 HTML 頁(yè)面的連結(jié)。1. NavigateTo.按下 F5 后執(zhí)行并點(diǎn)擊鏈接。圖11到目前為止，我想你應(yīng)該已經(jīng)抓到這個(gè)開發(fā)模式的重點(diǎn)了。Gadget Template for Windows Phone 7 安裝安裝 GadgetTemplate 的方式很簡(jiǎn)單，請(qǐng)下載 GadgetTemplate.zip，其內(nèi)容如下圖。圖12將其解壓至 UsersMy DocumentsVisual Studio 2010 目錄下即可，完成后啟動(dòng) Visual Studio 2010 就可看到以上提及的范本。更多的應(yīng)用 讓用戶輸入電話后啟用撥號(hào)接口index.html1. 2. 3. functiondial()4. varobj=newWP7.Phone();5. obj.Dial(document.getElementById(tel1).value,Calling.);6. 7. 8. .9. EnterTel:圖13圖14更多的應(yīng)用 讓用戶輸入電話、簡(jiǎn)訊內(nèi)容后啟用發(fā)送簡(jiǎn)訊接口index.html1. .2. 3. functiondial()4. varobj=newWP7.Phone();5. obj.Dial(document.getElementById(tel1).value,Calling.);6. 7. 8. functionsendsms()9. varobj=newWP7.SMS();10. obj.SendSMS(document.getElementById(tel1).value,11. document.getElementById(smsbody).value);12. 13. 14. 15. 16. EnterTel:17. 18. EnterSMSBody:圖15圖16更多的應(yīng)用 讓用戶由聯(lián)絡(luò)人選取電話index.html1. 2. 3. functionchooseContactCallback(phoneNumber)4. 5. document.getElementById(tel1).value=phoneNumber;6. 7. 8. functionchooseContact()9. varobj=newWP7.Phone();10. obj.ChooseContact(chooseContactCallback);11. 12. 13. 14. EnterTel:15. 圖17圖18圖19Inside JavaScript Framework for Windows Phone 7Gadget Template for Windows Phone 7 所依賴的有兩大機(jī)制，一是 Web Browser 控件的控制，另外就是 JavaScript Framework for Windows Phone 7，在一啟動(dòng)時(shí)，Gadget Template 即會(huì)讀入 index.html 并寫到 Isolated Storage 中，因?yàn)橹挥性?Isolated Storage 中的檔案，才能使用以下的程序代碼來(lái)瀏覽。1. webBrowser1.Navigate(newUri(index.html,UriKind.Relative);當(dāng)然，你也可以選用另一個(gè)函式 NavigateToString，但這樣做還得處理 Encoding 的問(wèn)題，而且對(duì)于 HTML 中連結(jié)其他檔案的部分會(huì)完全無(wú)法處理。接著，Gadget Template 會(huì)使用另一個(gè)隱藏的 Web Browser 控件來(lái)加載 index.html，并分析里面的內(nèi)容，一并將其中所連結(jié)的其它檔案，例如 HTML、Image、JavaScript 一并載入 Isolated Storage 中。完成這些動(dòng)作后，Gadget Template 開始真正載入 index.html，并進(jìn)行初始化動(dòng)作，這些動(dòng)作包含了掃描 HTML 中的 tel/sms tag 部份及初始化一些共享變量。1. 2. WP7Global.Initialize();3. 當(dāng)使用者按下 tel/sms 類的連結(jié)時(shí)，會(huì)觸發(fā) ReactiveTelTag 函式 (為什么？因?yàn)?Initialize 會(huì)修正這些 Tag 并掛上事件)。1. this.ReactiveTelTag=function()2. varelem=event.srcElement;3. if(elem.getAttribute(tel)!=null)4. window.WP7Global.currentActiveTel=elem.getAttribute(tel);5. window.WP7Global.currentActiveName=elem.innerHTML;6. 7. elseif(elem.getAttribute(smsTel)!=null)8. window.WP7Global.currentSmsTels=elem.getAttribute(smsTel);9. window.WP7Global.currentSmsBody=elem.getAttribute(smsBody);10. 11. elseif(elem.parentNode!=null)12. if(elem.parentNode.getAttribute(tel)!=null)13. window.WP7Global.currentActiveTel=14. elem.parentNode.getAttribute(tel);15. window.WP7Global.currentActiveName=elem.innerHTML;16. 17. elseif(elem.parentNode.getAttribute(smsTel)!=null)18. window.WP7Global.currentSmsTels=19. elem.parentNode.getAttribute(smsTel);20. window.WP7Global.currentSmsBody=21. elem.parentNode.getAttribute(smsBody);22. 23. 24. returnfalse;25. 這里其實(shí)只是設(shè)定幾個(gè)變量而已，而 MainPage.xaml.cs 中有一個(gè) Timer 每秒偵測(cè)這些變數(shù)的值。1. _timer.Tick+=(s,args)=2. 3. try4. 5. webBrowser1.InvokeScript(DetectStatus);6. 7. catch(Exception)8. 9. 10. ;DetectStatus 則是判斷這些變量的值，并編碼后以 window.external.notify 函式回傳給 MainPage.xaml.cs。1. functionDetectStatus()2. if(window.WP7Global.currentActiveTel!=)3. varresult=tel+;+window.WP7Global.currentActiveTel+;+window.WP7Global.currentActiveName;4. window.WP7Global.currentActiveTel=;5. window.WP7Global.currentActiveName=;6. window.external.notify(result);7. 8. elseif(window.WP7Global.currentSmsTels!=)9. 10. varresult=sms+;+window.WP7Global.currentSmsTels+;+window.WP7Global.currentSmsBody;11. window.WP7Global.currentSmsTels=;12. window.WP7Global.currentSmsBody=;13. window.external.notify(result);14. 15. elseif(window.WP7Global.currentCameraActive!=)16. 17. varresult=camera+;+window.WP7Global.currentCameraActive;18. window.WP7Global.currentCameraActive=;19. window.external.notify(result);20. 21. elseif(window.WP7Global.currentAction!=)22. varresult=action;+window.WP7Global.currentAction+;+window.WP7Global.actionCallback;23. window.WP7Global.currentAction=;24. window.WP7Global.actionCallback=;25. window.external.notify(result);26. 27. 于此，我們碰觸到了 Web Browser 另一種讓 HTML 與 Managed Code 互通的機(jī)制，那就是 Notify。Notify 機(jī)制的運(yùn)作過(guò)程是，Managed Code 呼叫 InvokeScript，此時(shí)被呼叫的函式中可以以 windows.external.notify 函式來(lái)發(fā)出一個(gè)事件，這個(gè)事件便是 WebBrowser.NotifyScript。簡(jiǎn)單的說(shuō)，DetectStatus 呼叫