wp7手机开发-silverlight浏览器插件.doc

了解 Windows Phone 7 网页浏览器控件 Part 1了解 Windows Phone 7 网页浏览器控件 Part 1文 / 黃忠成The Web Browser (Ph) Application前些日子，有关注我 Blog 的朋友应该都已经注意到，我发表了 Web Browser (Ph) Application 上架 Marketplace 的相关信息，也分享了退件及通过审核的一些过程。现在让我将开发这个应用程序的经验与大家分享。除了个人懒惰没看清认证的一些规则导致退件的经验之外，Web Browser(Ph) 于开发中有两个问题是最重要的，第一个当然是中文输入法，此问题的解法其实很简单，就是必须要拥有相关的字及注音码，接着就只要做接口就好了，如果对此有兴趣及需要 ，我建议读者们参考 David 老师与光岩信息提供的控件(因为我的字库其实并不完整)。第二个问题就是，Web Browser (Ph) 是如何知道，使用者点选到了某个输入框？又是如何将输入的中文字放到输入框里？Web Browser 控件其实用法分为简易与深入两种，简易的将其拿来做为显示某个网页用，深度的用法则是在显示网页后，尝试将整个网页的控制权拿在手里，Web Browser (Ph) 即是深度的用法。OK，那么 Web Browser(Ph) 如何知道使用者点选到了某个输入框？很简单，Web Browser(Ph) 有个函式：InvokeScript，可以让开发者在 Web Browser 读入网页后，呼叫网页中的某个 JavaScript，原意是想让开发者在使用 NavigateToString、Navigate 浏览本机网页时能有个沟通的管道。Web Browser(Ph) 将此技术发挥到极致，经测试得知，InvokeScript 其实不仅只能在浏览本机网页，浏览一般网页时也可正常运作，这意味着 Web Browser(Ph) 可以在使用者浏览网页后，以 InvokeScript 来呼叫特定的 JavaScript 函式，那这有什么用呢？细想一下，有哪个 JavaScript 函式可以让你列举出网页上所有的 input type=text 控件？ document.getElementsByTagName !但此路不通，因为 InvokeScript 仅能呼叫函式，像 getElementsByTagName 这种挂在某个对象下的函式是无法透过 InvokeScript 呼叫的。所以我们得找另一条路，有哪个函式可以让 InvokeScript 正常呼叫，又能达到与 getElementsByTagName一样的效果？答案很明白，就是 eval 函式，这个函式可以让我们执行大多数的 JavaScript 程序代码，这便是 Web Browser (Ph) 所仰赖的关键技术。关于 Tel/Sms TagWeb Browser 控件很强，但是其有一点与内建的 IE 不同，那就是在内建的 IE 下是可以解析 Tag 的，透过这个机制，使用者可以在浏览到使用此 Tag 的网页时，点选该链接来拨出电话，但 Web Browser 控制项目前并不支持这个机制，这是已知的限制。这些 tel tag 最常出现在搜索引擎的网页，例如 Google Maps。图1于内建的 IE 上点选电话部份的链接，会启动拨号动作。图2但 Web Browser 控件并不支持这种应用，也就是其不认识 ，要解决这个问题，我们得自己来处理，前面所提到的 InvokeScript+Eval 的技巧，正巧可用上。首先，我们得想办法在 Web Browser 加载网页后，执行一段 JavaScript，搜索页中所有的 元素，紧接着解析其 href attribute，只要发现是以 tel: 开头，即将其改为 #，并挂上 onclick 事件来处理使用者按下连结的后续动作。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來偵測使用者是否有按下某個tel連結31. stringpara=(string)webBrowser1.InvokeScript(DetectActiveTel);32. if(!string.IsNullOrEmpty(para)33. 34. /使用者按下了tel連結,啟動撥號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前，設定IsScriptEntabled為true才能使用InvokeScript52. webBrowser1.IsScriptEnabled=true;53. webBrowser1.Navigate(54. newUri(.tw/?q=Taipei%20101,UriKind.Absolute);55. 56. 57. /此事件發生於網頁載入後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. /啟動偵測連結按下的Timer103. _timer.Start();104. 105. catch(Exception)106. 107. 108. 109. 110. 这段程序代码有几个地方需要特别解释，一是 WebBrowser 的 IsScriptEnabled 属性，这个属性值必须在呼叫 Navigate 来导向某个网页前设定，当此值设定为 true 时，InvokeScript 才能正常呼叫。此程序在呼叫 Navigate，Web Browser 加载网页后，以 InvokeScript+Eval 的技巧注入一段 JavaScript 程序至该网页中，其中的 Initialize 便是搜索页中所有的 a 元素，并且判别是否是 格式，如确认为此格式，便先将其 href 改为 #，阻止默认的链接导向行为，接着挂载 onclick 事件，于使用者点下该连结时，将原先 tel: 后面的电话号码放到 currentActiveTel 全局变量中。最后一个步骤就是以 DispatcherTime 每秒呼叫一次 DetectStatus 函式来侦测 currentActiveTel 的状态，当 currentActivceTel 有值时，便代表着使用者按下某个 tel 连结。图3图4类似的 sms:xxxx 格式也可以用同样的手法解决。了解 Windows Phone 7 网页浏览器控件 Part 2 了解 Windows Phone 7 网页浏览器控件 Part 2文 / 黃忠成Gadget Devloping (HTML Base Application)在多数的 Mobile 系统中，除了原生应用程序的开发平台外，都提供了另一种开发平台，那就是以 HTML 为主的 Mobile Page App 架构，在这种架构下，开发者可以用 HTML+JavaScript 的方式来开发 Mobile Application，像是以往的 Windows Mobile 6/6.5、iPhone 都支持这种开发方式。会提供这种开发方式的主要原因是，有些开发者对于原生的开发环境及语言并不是那么熟悉，OS 为了让这些开发者能以现有的知识来快速开发应用程序，所以才会在原生平台外另辟蹊径，当然，以 HTML+JavaScript 为基础的开发方式或许在能力上远不及原生程序，但若应用程序需求不高，只是要显示及导览功能，这样的开发方式其实效率相当的高。举个例来说，你发行了一个网络杂志，每周都能更新，此时在这种以 HTML 为基础的架构下，妳可以让美工将杂志内容编写为 HTML+JavaScript，然后将其封装到 XAP 檔中上架到 Marketplace 让使用者购买并下载。整个开发流程是相当简单的，美工编写 HTML+JavaScript，开发人员将 HTML+JavaScript 封装到 XAP 档中，上架贩卖。Using Gadget Template for Windows Phone 7Windows Phone 7 SDK 中并未提供类似于 Gadget 的开发方式，但这不代表我们无法这样做，因为有了 Web Browser 控件跟 InvokeScript 机制的帮忙，我们可以轻易的达到同样的效果，本文末后会提供一个 Gadget Application Tempate 的 Visual Studio 项目模板，读者们只要下载并照步骤安装 (后述)，即可以类似 Gadget，以 HTML 开发 Windows Phone 7 应用程序。首先请建立新项目，选择 WP7GadgetTemplate。图1完成后会看到图二的方案总管画面。图2WebContent 目录下的档案就是简单的 HTML+JavaScript，请开启 index.html，你会发现到其中已有一些预设的内容。index.html1. 2. 3. 4. 5. !-6. !-7. 8. 9. 10. 首頁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. 若要進一步了解ASP.NET，請造訪。33. 34. Call0999938443.35. 36. 37. WP7Global.Initialize();38. 39. 40. 看起来用法跟 HTML+JavaScript 完全相同是吧？接着按下 F5 执行应用程序。图3接着按下 Call 的连结，此时会启动拨号接口。图4接着修改 index.html 内容，加入 SMS 的 tag。index.html1. .2. 3. .4. Call0999938443.5. SMSto0999938443.6. 7. 8. WP7Global.Initialize();9. 10. 按下 F5 后重新执行。图5点选 SMS to .连结，此时会开出发送简讯窗口。图6那如果我要加入图形按钮呢？也就是在 HTML 中加入一个图形，让用户点选后拨出电话，要怎么做呢？很简单，就照传统的 HTML 写法，透过方案总管在 WebContent 文件夹下加入一个图形文件。图7完成后修改 index.html。index.html1. .2. 3. .按下 F5 执行。图8点选该图片可开启拨号接口。图9很简单对吧？那如果想要让使用者点选某个链接后导向另一个 HTML 页面，又该如何做呢？这更简单了，只要在 WebContent 文件夹下加入新项目，选择 WP7HTMLPage 模板。图10按下新增后，即可得到一个全新的 HTML 页面。接着修改 index.html 内容来添加对此 HTML 页面的连结。1. NavigateTo.按下 F5 后执行并点击链接。图11到目前为止，我想你应该已经抓到这个开发模式的重点了。Gadget Template for Windows Phone 7 安装安装 GadgetTemplate 的方式很简单，请下载 GadgetTemplate.zip，其内容如下图。图12将其解压至 UsersMy DocumentsVisual Studio 2010 目录下即可，完成后启动 Visual Studio 2010 就可看到以上提及的范本。更多的应用 让用户输入电话后启用拨号接口index.html1. 2. 3. functiondial()4. varobj=newWP7.Phone();5. obj.Dial(document.getElementById(tel1).value,Calling.);6. 7. 8. .9. EnterTel:图13图14更多的应用 让用户输入电话、简讯内容后启用发送简讯接口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更多的应用 让用户由联络人选取电话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 所依赖的有两大机制，一是 Web Browser 控件的控制，另外就是 JavaScript Framework for Windows Phone 7，在一启动时，Gadget Template 即会读入 index.html 并写到 Isolated Storage 中，因为只有在 Isolated Storage 中的档案，才能使用以下的程序代码来浏览。1. webBrowser1.Navigate(newUri(index.html,UriKind.Relative);当然，你也可以选用另一个函式 NavigateToString，但这样做还得处理 Encoding 的问题，而且对于 HTML 中连结其他档案的部分会完全无法处理。接着，Gadget Template 会使用另一个隐藏的 Web Browser 控件来加载 index.html，并分析里面的内容，一并将其中所连结的其它档案，例如 HTML、Image、JavaScript 一并载入 Isolated Storage 中。完成这些动作后，Gadget Template 开始真正载入 index.html，并进行初始化动作，这些动作包含了扫描 HTML 中的 tel/sms tag 部份及初始化一些共享变量。1. 2. WP7Global.Initialize();3. 当使用者按下 tel/sms 类的连结时，会触发 ReactiveTelTag 函式 (为什么？因为 Initialize 会修正这些 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. 这里其实只是设定几个变量而已，而 MainPage.xaml.cs 中有一个 Timer 每秒侦测这些变数的值。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 互通的机制，那就是 Notify。Notify 机制的运作过程是，Managed Code 呼叫 InvokeScript，此时被呼叫的函式中可以以 windows.external.notify 函式来发出一个事件，这个事件便是 WebBrowser.NotifyScript。简单的说，DetectStatus 呼叫