天天看点

Silverlight专题(12) - 基于Silverlight的Live Search网页搜索

前言:

最近几天微软Live Search公布了重新架构了的Live Search API(版本为2.0 Beta)

该API律属于微软的最新Live Search Service项目 – Silk Road(丝绸之路)

那么如何在Silverlight中调用Live Search Service呢来进行网页,图片,资讯等的搜索呢?

本篇以及后面几篇文章将带大家走进Silverlight+Live Search的美妙世界

准备工作:

请到http://search.live.com/developers申请一个AppID,这个AppID是你访问Live Search的验证信息

Silverlight专题(12) - 基于Silverlight的Live Search网页搜索

用你的hotmail或者msn账号登陆就可以申请了

(以前的Live Search API 1.1 的AppID申请也完成了他的使命,当然大家还可以继续使用以前的AppID来访问1.1版本的Live Search Service啦)

另外大家可以下载最新的SDK: Live Search SDK 2.0 Beta

该SDK包含了API以及示范例子的代码(包括VB和C#版本)

Live Search 2.0共有三种访问协议:

  • JSON
  • XML
  • SOAP

在Live Search的这一系列文章中,我将一直使用SOAP协议来访问,因为其使用C#访问非常便捷

大家可以根据自己的项目的需要使用合适的协议

下面让我们开始

  1. 创建一个Silverlight项目
  2. 添加一个Service Reference如下
Silverlight专题(12) - 基于Silverlight的Live Search网页搜索
Silverlight专题(12) - 基于Silverlight的Live Search网页搜索

其中Address中的地址格式如下:http://api.search.live.net/search.wsdl?AppID=你申请的AppID

点击Go,如果你输入的地址正确而且有网络连接,应该就能搜索到和上图一样的LiveSearchService

填写你希望的调用的Namespace并点击OK,等待数秒后会弹出如下窗口

Silverlight专题(12) - 基于Silverlight的Live Search网页搜索

不用管它,点OK就可以了

查看下这个Service提供的对象接口

这里面没有LiveSearchService这个对象,也就是你下载到的SDK中的访问LiveSearchService的方式以及不一样了

(两天前还有的,昨晚我再次尝试的时候就没有了,这样做的原因相必是为了与WCF兼容或者是已经采用WCF来提供Service接口了)

取而代之的是LiveSearchPortTypeClient,大家把它当成WebClient类似的东西就很容易领悟到它的调用方式了

也就是说最新的Document与最新提供的LiveSearchService的接口有些出入,不过我已经把这个问题解决

解决方案:

  • UI展示代码如下:

Code

1     <UserControl.Resources>

2         <ControlTemplate x:Key="DefaultBtnTemplate" TargetType="Button">

3             <Border CornerRadius="8" x:Name="border">

4                 <Border.Background>

5                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

6                         <GradientStop Color="#FFB2E09A"/>

7                         <GradientStop Color="#FF4E942F" Offset="0.7"/>

8                     </LinearGradientBrush>

9                 </Border.Background>

10                 <TextBlock Margin="{TemplateBinding Padding}" Foreground="White" Text="{TemplateBinding Content}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

11                 <vsm:VisualStateManager.VisualStateGroups>

12                     <vsm:VisualStateGroup x:Name="FocusStates">

13                         <vsm:VisualState x:Name="Focused"/>

14                         <vsm:VisualState x:Name="Unfocused"/>

15                     </vsm:VisualStateGroup>

16                     <vsm:VisualStateGroup x:Name="CommonStates">

17                         <vsm:VisualState x:Name="Normal"/>

18                         <vsm:VisualState x:Name="MouseOver">

19                         </vsm:VisualState>

20                         <vsm:VisualState x:Name="Pressed"/>

21                         <vsm:VisualState x:Name="Disabled"/>

22                     </vsm:VisualStateGroup>

23                 </vsm:VisualStateManager.VisualStateGroups>

24             </Border>

25         </ControlTemplate>

26     </UserControl.Resources>

27     <Grid x:Name="LayoutRoot" Background="#3c3c3c">

28         <Grid HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,10">

29             <Grid.RowDefinitions>

30                 <RowDefinition Height="Auto"/>

31                 <RowDefinition Height="Auto"/>

32                 <RowDefinition Height="Auto"/>

33             </Grid.RowDefinitions>

34             <Grid.ColumnDefinitions>

35                 <ColumnDefinition Width="Auto"/>

36                 <ColumnDefinition Width="Auto"/>

37             </Grid.ColumnDefinitions>

38             

39             <TextBox x:Name="KeywordsCtl" Width="400"/>

40             <Button x:Name="SearchBtnCtl" Content="Search" Padding="30,5" Margin="4,0,2,0" Template="{StaticResource DefaultBtnTemplate}" Grid.Column="1" Click="SearchBtnCtl_Click"/>

41             <TextBlock Foreground="White" Grid.Row="1" x:Name="WebNumCtl" Margin="2"/>

42             <ListBox x:Name="WebPanelCtl" Grid.Row="2" Grid.ColumnSpan="2" Margin="2,0" BorderThickness="0" Background="#3c3c3c" Height="500">

43                 <ListBox.ItemTemplate>

44                     <DataTemplate>

45                         <StackPanel Width="480">

46                             <HyperlinkButton Content="{Binding Title}" NavigateUri="{Binding OriginalUrl}" TargetName="_blank"/>

47                             <TextBlock TextWrapping="Wrap" Foreground="White" Text="{Binding Description}" Margin="0,2"/>

48                             <TextBlock Text="{Binding DisplayUrl}" Foreground="Green" FontSize="10"/>

49                         </StackPanel>

50                     </DataTemplate>

51                 </ListBox.ItemTemplate>

52             </ListBox>

53         </Grid>

54     </Grid>

KeywordsCtl用于搜索词的输入

SearchBtnCtl为搜索按钮

WebNumCtl用来展示共搜索到多少条新闻

WebPanelCtl用于展示得到的搜索结果

其中WebPanelCtl用到了DataBinding(数据绑定)

  • 底层代码:

Code

1 private void SearchBtnCtl_Click(object sender, RoutedEventArgs e)

2 {

3     LiveSearchPortTypeClient liveSearchClient = new LiveSearchPortTypeClient();

4     SearchRequest webRequest = new SearchRequest();

5     webRequest.AppId = "44980C5CFA65792B3CDFF33A5CBF2CFAD17E3349";

6     webRequest.Market = "zh-CN";

7     webRequest.Version = "2.0";

8     webRequest.Sources = new SourceType[] { SourceType.Web };

9     webRequest.Query = this.KeywordsCtl.Text.Trim();

10     webRequest.Options = new SearchOption[] { SearchOption.EnableHighlighting };

11     webRequest.Web= new LiveSearchServiceRef.WebRequest();

12     webRequest.Web.Count = 30;

13     webRequest.Web.CountSpecified = true;

14 

15     liveSearchClient.SearchAsync(webRequest);

16     liveSearchClient.SearchCompleted += new EventHandler<SearchCompletedEventArgs>(liveSearchClient_SearchCompleted);

17 }

18 

19 void liveSearchClient_SearchCompleted(object sender, SearchCompletedEventArgs e)

20 {

21     SearchResponse liveSearchResponse = e.Result;

22     LiveSearchServiceRef.WebResponse webResponse = liveSearchResponse.Web;

23     this.WebNumCtl.Text = String.Format("共{0}条搜索结果",webResponse.Total);

24     List<WebInfo> m_webInfoList = new List<WebInfo>();

25     if (webResponse.Results.Length > 0)

26     {

27         foreach (WebResult webResult in webResponse.Results)

28         {

29             WebInfo webInfo = new WebInfo();

30             webInfo.Title = webResult.Title;

31             webInfo.Description = webResult.Description;

32             webInfo.PublishDateTime = webResult.DateTime;

33             webInfo.OriginalUrl = webResult.Url;

34             webInfo.DisplayUrl = webResult.DisplayUrl;

35             m_webInfoList.Add(webInfo);

36         }

37 

38         this.WebPanelCtl.ItemsSource = m_webInfoList;

39     }

40 }

SearchRequest用来定义AppID以及搜索市场,使用的搜索版本等

Query用于提供给LiveSearchService搜索词

Sources用来定义搜索来源,目前共有

Image, InstantAnswer News PhoneBook RelatedSearch SpellCheck Web七种,美国市场还有AD

(注意:你在SearchRequest定义了哪几种搜索源,那么SearchResponse的Response类型也就只有那几种)

代码12,13行用于定义SearchResponse返回多少条结果

LiveSearchPortTypeClient通过异步的方式调用初始化的SearchRequest

LiveSearchPortTypeClient将通过SearchCompleted这个事件回传给客户端查询结果,也就是这里的SearchResponse

38行将获得的数据绑定给WebPanelCtl,这样我们就得到了查询的信息了

其中WebInfo对象是用来存储获取的网页信息,其定义如下

WebInfo

1 namespace LiveSearchWeb4Silverlight

2 {

3     public class WebInfo

4     {

5         public string Title { get; set; }

6         public string Description { get; set; }

7         public string PublishDateTime { get; set; }

8         public string OriginalUrl { get; set; }

9         public string DisplayUrl { get; set; }

10     }

11 }

效果展示:

你可以在搜索框中输入些搜索词来得到结果

我的一些搜索结果展示以及与Live Search的比较

Silverlight专题(12) - 基于Silverlight的Live Search网页搜索
Silverlight专题(12) - 基于Silverlight的Live Search网页搜索

源代码下载:

Silverlight专题(12) - 基于Silverlight的Live Search网页搜索