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

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.

12.  

13. 

--

14.

15.     function dial（） {

16.         var obj = new WP7.Phone（）;

17.         obj.Dial