wp7手机开发silverlight浏览器插件.docx
- 文档编号:24640394
- 上传时间:2023-05-29
- 格式:DOCX
- 页数:41
- 大小:916.88KB
wp7手机开发silverlight浏览器插件.docx
《wp7手机开发silverlight浏览器插件.docx》由会员分享,可在线阅读,更多相关《wp7手机开发silverlight浏览器插件.docx(41页珍藏版)》请在冰豆网上搜索。
wp7手机开发silverlight浏览器插件
了解WindowsPhone7网页浏览器控件–Part1
了解WindowsPhone7网页浏览器控件–Part1
文/黃忠成
TheWebBrowser(Ph)Application
前些日子,有关注我Blog的朋友应该都已经注意到,我发表了WebBrowser(Ph)Application上架Marketplace的相关信息,也分享了退件及通过审核的一些过程。
现在让我将开发这个应用程序的经验与大家分享。
除了个人懒惰没看清认证的一些规则导致退件的经验之外,WebBrowser(Ph)于开发中有两个问题是最重要的,第一个当然是中文输入法,此问题的解法其实很简单,就是必须要拥有相关的字及注音码,接着就只要做接口就好了,如果对此有兴趣及需要,我建议读者们参考David老师与光岩信息提供的控件(因为我的字库其实并不完整)。
第二个问题就是,WebBrowser(Ph)是如何知道,使用者点选到了某个输入框?
又是如何将输入的中文字放到输入框里?
WebBrowser控件其实用法分为简易与深入两种,简易的将其拿来做为显示某个网页用,深度的用法则是在显示网页后,尝试将整个网页的控制权拿在手里,WebBrowser(Ph)即是深度的用法。
OK,那么WebBrowser(Ph)如何知道使用者点选到了某个输入框?
很简单,WebBrowser(Ph)有个函式:
InvokeScript,可以让开发者在WebBrowser读入网页后,呼叫网页中的某个JavaScript,原意是想让开发者在使用NavigateToString、Navigate浏览本机网页时能有个沟通的管道。
WebBrowser(Ph)将此技术发挥到极致,经测试得知,InvokeScript其实不仅只能在浏览本机网页,浏览一般网页时也可正常运作,这意味着WebBrowser(Ph)可以在使用者浏览网页后,以InvokeScript来呼叫特定的JavaScript函式,那这有什么用呢?
细想一下,有哪个JavaScript函式可以让你列举出网页上所有的inputtype=text控件?
document.getElementsByTagName!
!
但此路不通,因为InvokeScript仅能呼叫函式,像getElementsByTagName这种挂在某个对象下的函式是无法透过InvokeScript呼叫的。
所以我们得找另一条路,有哪个函式可以让InvokeScript正常呼叫,又能达到与getElementsByTagName一样的效果?
答案很明白,就是eval函式,这个函式可以让我们执行大多数的JavaScript程序代码,这便是WebBrowser(Ph)所仰赖的关键技术。
关于Tel/SmsTag
WebBrowser控件很强,但是其有一点与内建的IE不同,那就是在内建的IE下是可以解析 0984xxxxx”/>Tag的,透过这个机制,使用者可以在浏览到使用此Tag的网页时,点选该链接来拨出电话,但WebBrowser控制项目前并不支持这个机制,这是已知的限制。 这些teltag最常出现在搜索引擎的网页,例如GoogleMaps。 图1 于内建的IE上点选电话部份的链接,会启动拨号动作。 图2 但WebBrowser控件并不支持这种应用,也就是其不认识,要解决这个问题,我们得自己来处理,前面所提到的InvokeScript+Eval的技巧,正巧可用上。 首先,我们得想办法在WebBrowser加载网页后,执行一段JavaScript,搜索页中所有的元素,紧接着解析其hrefattribute,只要发现是以tel: 开头,即将其改为#,并挂上onclick事件来处理使用者按下连结的后续动作。 MainPage.xaml PhoneApplicationPage x: Class="DetectTelTag.MainPage" xmlns=" xmlns: x=" xmlns: phone="clr-namespace: Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns: shell="clr-namespace: Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns: d=" xmlns: mc="http: //schemas.openxmlformats.org/markup-compatibility/2006" mc: Ignorable="d"d: DesignWidth="480"d: DesignHeight="768" FontFamily="{StaticResourcePhoneFontFamilyNormal}" FontSize="{StaticResourcePhoneFontSizeNormal}" Foreground="{StaticResourcePhoneForegroundBrush}" SupportedOrientations="Portrait"Orientation="Portrait" shell: SystemTray.IsVisible="True"> --LayoutRootistherootgridwhereallpagecontentisplaced--> Name="LayoutRoot"Background="Transparent"> --TitlePanelcontainsthenameoftheapplicationandpagetitle--> Name="TitlePanel"Grid.Row="0"Margin="12,17,0,28"> Name="ApplicationTitle"Text="MYAPPLICATION"Style="{StaticResourcePhoneTextNormalStyle}"/> Name="PageTitle"Text="Maps"Margin="9,-7,0,0"Style="{StaticResourcePhoneTextTitle1Style}"/> --ContentPanel-placeadditionalcontenthere--> Name="ContentPanel"Grid.Row="1"Margin="12,0,12,0"> WebBrowserHorizontalAlignment="Left"Name="webBrowser1"VerticalAlignment="Top"Height="537"Width="456"Margin="0,64,0,0"LoadCompleted="webBrowser1_LoadCompleted"/> PhoneApplicationPage> MainPage.xaml.cs 1.using System; 2.using System.Collections.Generic; 3.using System.Linq; 4.using System.Net; 5.using System.Windows; 6.using System.Windows.Controls; 7.using System.Windows.Documents; 8.using System.Windows.Input; 9.using System.Windows.Media; 10.using System.Windows.Media.Animation; 11.using System.Windows.Shapes; 12.using Microsoft.Phone.Controls; 13.using Microsoft.Phone.Tasks; 14.using System.Windows.Threading; 15. 16.namespace DetectTelTag 17.{ 18. public partial class MainPage : PhoneApplicationPage 19. { 20. DispatcherTimer _timer = new DispatcherTimer(); 21. 22. // Constructor 23. public MainPage() 24. { 25. InitializeComponent(); 26. _timer.Tick += (s, args) => 27. { 28. try 29. { 30. //呼叫 DetectActiveTel 來偵測使用者是否有按下某個 tel 連結 31. string para = (string)webBrowser1.InvokeScript("DetectActiveTel"); 32. if (! string.IsNullOrEmpty(para)) 33. { 34. //使用者按下了 tel 連結,啟動撥號 35. string[] parameters = para.Split(';'); 36. PhoneCallTask task = new PhoneCallTask(); 37. task.PhoneNumber = parameters[0]; 38. task.DisplayName = parameters[1]; 39. task.Show(); 40. } 41. } 42. catch (Exception) 43. { 44. } 45. }; 46. _timer.Interval = TimeSpan.FromSeconds (1); 47. } 48. 49. private void button1_Click(object sender, RoutedEventArgs e) 50. { 51. //必須在 Navigate 前,設定 IsScriptEntabled 為 true 才能使用 InvokeScript 52. webBrowser1.IsScriptEnabled = true; 53. webBrowser1.Navigate( 54.new Uri(".tw/? q=Taipei%20101", UriKind.Absolute)); 55. } 56. 57. //此事件發生於網頁載入後 58. private void webBrowser1_LoadCompleted(object sender, 59.System.Windows.Navigation.NavigationEventArgs e) 60. { 61. try 62. { 63. //Script Injection 64. webBrowser1.InvokeScript("eval", 65.@"window.currentActiveTel = ''; 66.window.currentActiveName = ''; 67. 68.window.DetectActiveTel=function() { 69. if (window.currentActiveTel ! = '') { 70. var result = window.currentActiveTel + ';' + window.currentActiveName; 71. window.currentActiveTel = ''; 72. window.currentActiveName = ''; 73. return result; 74. } 75.} 76. 77.window.ReactiveTelTag=function() { 78. var elem = event.srcElement; 79. if (elem.getAttribute('tel') ! = null) { 80. currentActiveTel = elem.getAttribute('tel'); 81. currentActiveName = elem.innerHTML; 82. } 83. return false; 84.} 85. 86.window.ScanTelTag=function(elem) { 87. if (elem.getAttribute('href') ! = null && elem.getAttribute('href').indexOf('tel: ') == 0) { 88. var tel = 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. var elems = document.getElementsByTagName('a'); 97. for (var i = 0; i < elems.length; i++) 98. ScanTelTag(elems[i]); 99.}"); 100. //初始化 101. webBrowser1.InvokeScript("Initialize"); 102. //啟動偵測連結按下的 Timer 103. _timer.Start(); 104. } 105. catch (Exception) 106. { 107. } 108. } 109. } 110.} 这段程序代码有几个地方需要特别解释,一是WebBrowser的IsScriptEnabled属性,这个属性值必须在呼叫Navigate来导向某个网页前设定,当此值设定为true时,InvokeScript才能正常呼叫。 此程序在呼叫Navigate,WebBrowser加载网页后,以InvokeScript+Eval的技巧注入一段JavaScript程序至该网页中,其中的Initialize便是搜索页中所有的a元素,并且判别是否是 xxx”/>格式,如确认为此格式,便先将其href改为#,阻止默认的链接导向行为,接着挂载onclick事件,于使用者点下该连结时,将原先tel: 后面的电话号码放到currentActiveTel全局变量中。 最后一个步骤就是以DispatcherTime每秒呼叫一次DetectStatus函式来侦测currentActiveTel的状态,当currentActivceTel有值时,便代表着使用者按下某个tel连结。 图3 图4 类似的sms: xxxx格式也可以用同样的手法解决。 了解WindowsPhone7网页浏览器控件–Part2 了解WindowsPhone7网页浏览器控件–Part2 文/黃忠成 GadgetDevloping(HTMLBaseApplication) 在多数的Mobile系统中,除了原生应用程序的开发平台外,都提供了另一种开发平台,那就是以HTML为主的MobilePageApp架构,在这种架构下,开发者可以用HTML+JavaScript的方式来开发MobileApplication,像是以往的WindowsMobile6/6.5、iPhone都支持这种开发方式。 会提供这种开发方式的主要原因是,有些开发者对于原生的开发环境及语言并不是那么熟悉,OS为了让这些开发者能以现有的知识来快速开发应用程序,所以才会在原生平台外另辟蹊径,当然,以HTML+JavaScript为基础的开发方式或许在能力上远不及原生程序,但若应用程序需求不高,只是要显示及导览功能,这样的开发方式其实效率相当的高。 举个例来说,你发行了一个网络杂志,每周都能更新,此时在这种以HTML为基础的架构下,妳可以让美工将杂志内容编写为HTML+JavaScript,然后将其封装到XAP檔中上架到Marketplace让使用者购买并下载。 整个开发流程是相当简单的,美工编写HTML+JavaScript,开发人员将HTML+JavaScript封装到XAP档中,上架贩卖。 UsingGadgetTemplateforWindowsPhone7 WindowsPhone7SDK中并未提供类似于Gadget的开发方式,但这不代表我们无法这样做,因为有了WebBrowser控件跟InvokeScript机制的帮忙,我们可以轻易的达到同样的效果,本文末后会提供一个GadgetApplicationTempate的VisualStudio项目模板,读者们只要下载并照步骤安装(后述),即可以类似Gadget,以HTML开发WindowsPhone7应用程序。 首先请建立新项目,选择WP7GadgetTemplate。 图1 完成后会看到图二的方案总管画面。 图2 WebContent目录下的档案就是简单的HTML+JavaScript,请开启index.html,你会发现到其中已有一些预设的内容。 index.html 1. DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http: //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2. //www.w3.org/1999/xhtml" xml: lang="en"> 3. 4. 5. ----> 6. ----> 7. 8. 9. 10. 首頁 11. 12. 13. -- 14. 15. function dial() { 16. var obj = new WP7.Phone(); 17. obj.Dial
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- wp7 手机 开发 silverlight 浏览器 插件