1、wp7手机开发silverlight浏览器插件了解 Windows Phone 7 网页浏览器控件 Part 1了解 Windows Phone 7 网页浏览器控件 Part 1文 / 黃忠成The Web Browser (Ph) Application前些日子，有关注我 Blog 的朋友应该都已经注意到，我发表了 Web Browser (Ph) Application 上架 Marketplace 的相关信息，也分享了退件及通过审核的一些过程。现在让我将开发这个应用程序的经验与大家分享。除了个人懒惰没看清认证的一些规则导致退件的经验之外，Web Browser(Ph) 于开发中有两个问题
2、是最重要的，第一个当然是中文输入法，此问题的解法其实很简单，就是必须要拥有相关的字及注音码，接着就只要做接口就好了，如果对此有兴趣及需要 ，我建议读者们参考 David 老师与光岩信息提供的控件(因为我的字库其实并不完整)。第二个问题就是，Web Browser (Ph) 是如何知道，使用者点选到了某个输入框？又是如何将输入的中文字放到输入框里？Web Browser 控件其实用法分为简易与深入两种，简易的将其拿来做为显示某个网页用，深度的用法则是在显示网页后，尝试将整个网页的控制权拿在手里，Web Browser (Ph) 即是深度的用法。OK，那么 Web Browser(Ph) 如何知道
3、使用者点选到了某个输入框？很简单，Web Browser(Ph) 有个函式：InvokeScript，可以让开发者在 Web Browser 读入网页后，呼叫网页中的某个 JavaScript，原意是想让开发者在使用 NavigateToString、Navigate 浏览本机网页时能有个沟通的管道。Web Browser(Ph) 将此技术发挥到极致，经测试得知，InvokeScript 其实不仅只能在浏览本机网页，浏览一般网页时也可正常运作，这意味着 Web Browser(Ph) 可以在使用者浏览网页后，以 InvokeScript 来呼叫特定的 JavaScript 函式，那这有什么用呢
4、？细想一下，有哪个 JavaScript 函式可以让你列举出网页上所有的 input type=text 控件？ document.getElementsByTagName !但此路不通，因为 InvokeScript 仅能呼叫函式，像 getElementsByTagName 这种挂在某个对象下的函式是无法透过 InvokeScript 呼叫的。所以我们得找另一条路，有哪个函式可以让 InvokeScript 正常呼叫，又能达到与 getElementsByTagName一样的效果？答案很明白，就是 eval 函式，这个函式可以让我们执行大多数的 JavaScript 程序代码，这便是 We
5、b Browser (Ph) 所仰赖的关键技术。关于 Tel/Sms TagWeb Browser 控件很强，但是其有一点与内建的 IE 不同，那就是在内建的 IE 下是可以解析 Tag 的，透过这个机制，使用者可以在浏览到使用此 Tag 的网页时，点选该链接来拨出电话，但 Web Browser 控制项目前并不支持这个机制，这是已知的限制。这些 tel tag 最常出现在搜索引擎的网页，例如 Google Maps。图1 于内建的 IE 上点选电话部份的链接，会启动拨号动作。图2但 Web Browser 控件并不支持这种应用，也就是其不认识 ，要解决这个问题，我们得自己来处理，前面所提到的
6、 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.Window
7、s;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. 1
8、6. 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=(str
9、ing)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. 4
10、5. ;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. /
11、此事件發生於網頁載入後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.c
12、urrentActiveTel!=)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.ge
13、tAttribute(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,te
14、l);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.
15、catch(Exception)106. 107. 108. 109. 110. 这段程序代码有几个地方需要特别解释，一是 WebBrowser 的 IsScriptEnabled 属性，这个属性值必须在呼叫 Navigate 来导向某个网页前设定，当此值设定为 true 时，InvokeScript 才能正常呼叫。此程序在呼叫 Navigate，Web Browser 加载网页后，以 InvokeScript+Eval 的技巧注入一段 JavaScript 程序至该网页中，其中的 Initialize 便是搜索页中所有的 a 元素，并且判别是否是 格式，如确认为此格式，便先将其 href 改
16、为 #，阻止默认的链接导向行为，接着挂载 onclick 事件，于使用者点下该连结时，将原先 tel: 后面的电话号码放到 currentActiveTel 全局变量中。最后一个步骤就是以 DispatcherTime 每秒呼叫一次 DetectStatus 函式来侦测 currentActiveTel 的状态，当 currentActivceTel 有值时，便代表着使用者按下某个 tel 连结。图3图4类似的 sms:xxxx 格式也可以用同样的手法解决。了解 Windows Phone 7 网页浏览器控件 Part 2 了解 Windows Phone 7 网页浏览器控件 Part 2文
17、/ 黃忠成Gadget Devloping (HTML Base Application)在多数的 Mobile 系统中，除了原生应用程序的开发平台外，都提供了另一种开发平台，那就是以 HTML 为主的 Mobile Page App 架构，在这种架构下，开发者可以用 HTML+JavaScript 的方式来开发 Mobile Application，像是以往的 Windows Mobile 6/6.5、iPhone 都支持这种开发方式。会提供这种开发方式的主要原因是，有些开发者对于原生的开发环境及语言并不是那么熟悉，OS 为了让这些开发者能以现有的知识来快速开发应用程序，所以才会在原生平台外
18、另辟蹊径，当然，以 HTML+JavaScript 为基础的开发方式或许在能力上远不及原生程序，但若应用程序需求不高，只是要显示及导览功能，这样的开发方式其实效率相当的高。举个例来说，你发行了一个网络杂志，每周都能更新，此时在这种以 HTML 为基础的架构下，妳可以让美工将杂志内容编写为 HTML+JavaScript，然后将其封装到 XAP 檔中上架到 Marketplace 让使用者购买并下载。整个开发流程是相当简单的，美工编写 HTML+JavaScript，开发人员将 HTML+JavaScript 封装到 XAP 档中，上架贩卖。Using Gadget Template for W
19、indows 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
