.NEt专家博客!

一步一步学Silverlight 2系列(25):综合实例之Live Search

上一篇 / 下一篇  2008-04-11 21:13:45

概述

Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython,对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章将从Silverlight 2基础知识、数据与通信、自定义控件、动画、图形图像等几个方面带您快速进入Silverlight 2开发。

本节将综合前面几篇介绍与浏览器交互部分内容,做一个综合示例——Live Search

准备知识

在本示例中,我们将通过调用Live Search API,在Silverlight中动态创建DOM结构,将搜索的结果展现出来。在使用Live Search API之前,需要先去Live Search Developer Center申请一个应用程序ID。ITPUB个人空间B,Ci]y

8h+xhk*P w0

申请完成后应用程序ID大约在10分钟左右生效。关于Live Search API的有关详细信息,请大家参考这里

编写ASMX

直接调用API,返回的信息可能有很多,为了简单起见,我们对返回的结果做一些处理,编写一个SearchResultItem类:

public classSearchResultItemITPUB个人空间qno7J-?9j
{
[3d5m;k p8VWY0public stringTitle {get;set; }
-vl*f#N(u4KMV0ITPUB个人空间 F"@qd;h]kSl
public stringUrl {get;set; }
0C!O/eh'@2vP |x0
R4R_)BYu)v&h5]_0public stringDescription {get;set; }ITPUB个人空间fdwSt1QZgsP
}

添加对Live Search API的Service引用,地址为:http://soap.search.live.com/webservices.asmx?wsdl


*u ~u9d)Nr[0

在ASMX中对返回的结果进行一些处理,Silverlight程序最后将直接调用ASMX。在调用Live Search时需要指定应用程序ID以及本地化的信息等,查询的参数将在Silverlight程序中调用时传入。

[WebMethod]ITPUB个人空间GD&nS_G
publicSearchResultItem[] DoSearch(stringquery)ITPUB个人空间%V5A M9u:k)v~`
{ITPUB个人空间8kWA:i;j"x
MSNSearchPortTypeClients =newMSNSearchPortTypeClient();
L%}U(}+tyW"so0SearchRequestsearchRequest =newSearchRequest();ITPUB个人空间 O9l ODRP#?
intarraySize = 1;ITPUB个人空间*L!I`H0^L8G&p
SourceRequest[] sr =newSourceRequest[arraySize];ITPUB个人空间:l4bfD$c(~"`
ITPUB个人空间Du|6o j:O|
sr[0] =newSourceRequest();ITPUB个人空间fV"U7bDl
sr[0].Source =SourceType.Web;
Mpqu8W1jb0
fS]-B%zE0searchRequest.Query = query;
1UF#U$zci6k }0searchRequest.Requests = sr;ITPUB个人空间ega2T%Nt[
ITPUB个人空间vI1V_4E0UZ1|G
searchRequest.AppID ="C0680205851CCC0E38946DB8FF74156C1C826A86";
p8j:Bw0EGQ1|0searchRequest.CultureInfo ="zh-CN";
d Fw,D&c.Q0SearchResponsesearchResponse;
^o_Un |;Y"}0
5Q/H?6I+o*my0searchResponse = s.Search(searchRequest);
o)Ki#]Z2RYItA0ITPUB个人空间)KC+`"by VQ4v
List<SearchResultItem> lists =newList<SearchResultItem>();ITPUB个人空间k(Q1t&d%B*@K;t j7h
foreach(SourceResponsesourceResponseinsearchResponse.Responses)
R&H7^r1[ V%Z&Y0{
K ]AV^&E p0Result[] sourceResults = sourceResponse.Results;
gg7}2ITmE0foreach(ResultsourceResultinsourceResults)
v8B`O]u Q)I0{ITPUB个人空间2ou@*s _6QZm+t
SearchResultItemitem =newSearchResultItem();ITPUB个人空间g2y9dr-@ C%gw
if((sourceResult.Title !=null) && (sourceResult.Title !=String.Empty))
:P`4\.l-v#o,\{0item.Title = sourceResult.Title;ITPUB个人空间-wQz"h.r

7T,t.E3w3qC8n3U/X V0if((sourceResult.Description !=null) && (sourceResult.Description !=String.Empty))
U^*LOB"vCX0item.Description = sourceResult.Description;
K F'[7eh$x/d3\0
Zv,{:y}B1MH0if((sourceResult.Url !=null) && (sourceResult.Url !=String.Empty))ITPUB个人空间+]q|7ftV'k2m
item.Url = sourceResult.Url;
D-k\C,F1Wf!i}0
6o @f0o2T|m [Ek0lists.Add(item);
x ~-b,r|!v P0}
9t8S/Y8z qu7JsY0}ITPUB个人空间#A/Cu5a0J5j,N9`
returnlists.ToArray();
%Uxo8]%eC.sYK0}

测试一下我们的服务是否正常:

修改测试页

在测试ASPX中,修改Silverlight插件的样式控制,并添加一个div用来显示搜索的结果:

<divstyle="height:100%;">ITPUB个人空间hnf1lKX9y
<
asp:SilverlightID="Xaml1"runat="server"
E'I_!xeH"ML0
Source="~/ClientBin/TerryLee.SilverlightGoogleSearch.xap"ITPUB个人空间z)H-c1c B
Version="2.0"Width="857"Height="140" />ITPUB个人空间Ct f.l f$h)H.B
<
divid="result"></div>
cU KX"[7r0</
div>

定义几个简单的样式:

<style.type="text/css">
N|(RyNH oM0
#resultITPUB个人空间 hq%W3c it:j2] vg sa
{ITPUB个人空间c&fP3sLk3M
margin-left:20px;ITPUB个人空间#PXoZ D
}
}#q6D(w@2]#uX3u%In0.urlstyle
J"l0F/A'Ya*AE#U6my0
{ITPUB个人空间sGNbjl-l
color:#59990E;
5W SR fa,q0}
;{ I.l6\]C0P0.itemstyle
k%J!w lQ+` n)}0
{
2s+Q7iV#^5?]3D0border-bottom:dotted 1px #59990E;ITPUB个人空间x`+d'r2gd&O`.P t-q
margin-bottom:20px;ITPUB个人空间,U/S0A&Jw
}ITPUB个人空间'a j B#r/{ul
</style>

实现Silverlight程序

编写一个简单的Silverlight界面,使其看起来如图所示:ITPUB个人空间 O){9oStr^/~7g

rk+{li'h2y-?:O{ `i0

XAML声明如下:

<Gridx:Name="LayoutRoot"Background="White">
\&|/R.Ui0<
Grid.RowDefinitions>
1?M!{z?'eb0<
RowDefinitionHeight="55"></RowDefinition>ITPUB个人空间l+s*~4T$Q!nK/X"}-|e
<
RowDefinitionHeight="50"></RowDefinition>ITPUB个人空间"R%o@J$a|
<
RowDefinitionHeight="35"></RowDefinition>ITPUB个人空间'Qph4@o,M^
</
Grid.RowDefinitions>
J"o @F gea0<
Grid.ColumnDefinitions>
:uj!R;U6dd0<
ColumnDefinitionWidth="*"></ColumnDefinition>ITPUB个人空间 oS*tSL^ {S&r
</
Grid.ColumnDefinitions>ITPUB个人空间H w5]K](pJ$F7C Z
ITPUB个人空间.P&H W@&AL
<
ImageSource="LiveSearch.png"Grid.Column="0"></Image>ITPUB个人空间&_.n7qs9dr"d
<
StackPanelGrid.Row="1"Orientation="Horizontal">ITPUB个人空间L }E1[ Gn5h
<
TextBoxx:Name="txtQuery"Width="400"Height="35"ITPUB个人空间@Sm6|g,e8CW#wo
Margin="50 0 0 0"BorderBrush="#3F7801"></TextBox>ITPUB个人空间6I)F;X/NDCV7[
<
Buttonx:Name="btnSearch"Width="120"Height="35"
Z {2n:k6N gU0
Background="#62A21D"Margin="20 0 0 0"ITPUB个人空间-y0_$l `3i(dmq R~
Content="Search"FontSize="16"Click="btnSearch_Click"></Button>
-e(~,jd1O7B/hR(y0</
StackPanel>ITPUB个人空间(NrUr/V-fk]
<
TextBlockGrid.Row="2"Text="网页搜索结果"Foreground="#59990E"ITPUB个人空间exO(h [
FontSize="16"Margin="20 0 0 0"></TextBlock>ITPUB个人空间/Ee9T*XwE.k"tqx*N
</
Grid>

在Silverlight项目中添加对于ASMX的引用,并编写“Search”按钮的实现,对于如何调用ASMX,可以参考一步一步学Silverlight 2系列(15):数据与通信之ASMX。动态创建DOM结构,并将结果显示出来:

private voidbtnSearch_Click(objectsender,RoutedEventArgse)
,T1m H)j3f9a0{
*b\e$U1S N_0LiveSearchWebServiceSoapClientclient =newLiveSearchWebServiceSoapClient();
5EQ$a!{Ltl0ITPUB个人空间w1{p;a'Q5{f ^ w
client.DoSearchCompleted +=newEventHandler<DoSearchCompletedEventArgs>(client_DoSearchCompleted);
"fR?$@ W$X9R:\[%p8d0client.DoSearchAsync(this.txtQuery.Text);
l(m\K$A_"H1b0}ITPUB个人空间j|;E!N7n/[?U`

5ToiE#jp*z[*f9E'm0voidclient_DoSearchCompleted(objectsender,DoSearchCompletedEventArgse)
m'l$U+{\@ Q b0{ITPUB个人空间:]fQ,^9VV
if(e.Error ==null)
!zcx9B x8N0{ITPUB个人空间Mm/Z8z'A
SearchResultItem[] results = e.ResultasSearchResultItem[];
3qlj+}+^0ITPUB个人空间*tO hRc8ZGlD$h
HtmlElementresult =HtmlPage.Document.GetElementById("result");ITPUB个人空间wDk,r1D)Q'ae4b

u#u.NB~} @ bE0foreach(SearchResultItemiteminresults)
7W-H~iV&Z0{ITPUB个人空间*l/\ ru m
HtmlElementitemElement =HtmlPage.Document.CreateElement("div");
}e2ksN)N @IDT0itemElement.CssClass ="itemstyle";
"@.VCE.hn2k-x0ITPUB个人空间4XTK0eow:c`
HtmlElementtitleElement =HtmlPage.Document.CreateElement("a");ITPUB个人空间 xW/y1i^!X*lT f
titleElement.SetAttribute("href",item.Url);
!D J#Zc4O*Q%q IE0titleElement.SetAttribute("innerText",item.Title);
1|-ZKr?_h0
J!Xj%KP]\)N|0HtmlElementdescriptElement =HtmlPage.Document.CreateElement("div");
Xp(Un:ZDo5z$^:\-t0descriptElement.SetAttribute("innerText",item.Description);ITPUB个人空间!m9tC'HiEZ

-` Az0D;`^NN8_!Ti5?0HtmlElementurlElement =HtmlPage.Document.CreateElement("span");
o.Gl3_*E#hj0urlElement.SetAttribute("innerText",item.Url);
`KK$A)e~C6_o*zI0urlElement.CssClass ="urlstyle";
M5x }v+^L-D8omO-C0
pF w)ErXS-AV0itemElement.AppendChild(titleElement);ITPUB个人空间,[K:?dMuG
itemElement.AppendChild(descriptElement);
K+zDX!uX0itemElement.AppendChild(urlElement);ITPUB个人空间,yomVj s[wZ)T

'Q0` F.KZQq0result.AppendChild(itemElement);ITPUB个人空间Tz+Anq)Jl
}ITPUB个人空间 [ a5?4Sp Z^Z
}ITPUB个人空间NC } t3Ow
}

运行看一下效果,查询博客园:


'D:D u5D Z3o T e3S0

结束语

本文综合了前面关于浏览器集成以及数据与通信部分的内容,开发了一个综合的示例——Live Search。你可以从这里下载本文示例代码。

作者:TerryLee
_0}TQ3Ye0出处:http://terrylee.cnblogs.com
ITPUB个人空间P@2OGZ&H

TAG:

引用 删除 Guest   /   2009-12-22 10:42:02
-5
 

评分:0

我来说两句

显示全部

:loveliness: :handshake :victory: :funk: :time: :kiss: :call: :hug: :lol :'( :Q :L ;P :$ :P :o :@ :D :( :)

日历

« 2012-02-10  
   1234
567891011
12131415161718
19202122232425
26272829   

数据统计

  • 访问量: 665817
  • 日志数: 3733
  • 影音数: 7
  • 文件数: 1
  • 建立时间: 2008-01-04
  • 更新时间: 2010-12-31

RSS订阅

Open Toolbar