.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。
4jkR^r.V0ITPUB个人空间Oj+V6CX#|0[%`

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

编写ASMX

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

public classSearchResultItem
U OA+}X7p)rQ0
{
]E(f4~M/b4M;H@0public stringTitle {get;set; }
6_W&~3qZ xH{(AyI0
@"Jxe@]su0public stringUrl {get;set; }ITPUB个人空间Zt$j)o)Y0F#m
ITPUB个人空间#w3~0D'M7N(Q7@(B
public stringDescription {get;set; }ITPUB个人空间7}{ SK? D%cp L
}

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

ITPUB个人空间c6I?tn/y

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

[WebMethod]ITPUB个人空间]d pst
publicSearchResultItem[] DoSearch(stringquery)
*gN^7Yp^E0{ITPUB个人空间+^ Qi u!o0X
MSNSearchPortTypeClients =newMSNSearchPortTypeClient();ITPUB个人空间yI W1l3J$B_
SearchRequestsearchRequest =newSearchRequest();ITPUB个人空间[ `Hj-PU/?
intarraySize = 1;ITPUB个人空间p8yJ2t/Y;xp/G
SourceRequest[] sr =newSourceRequest[arraySize];
u:I,F$x {Mh)v&B0
*O ["f!C+qRX0sr[0] =newSourceRequest();ITPUB个人空间0ik6p {}YG1a'd;h
sr[0].Source =SourceType.Web;
bX|-?3q\C0
3A)t,Yf.{g7w N0searchRequest.Query = query;ITPUB个人空间3o&Tm Qd-Q
searchRequest.Requests = sr;ITPUB个人空间.` }^EEnbd+i
ITPUB个人空间`!G+{Q.VTIC
searchRequest.AppID ="C0680205851CCC0E38946DB8FF74156C1C826A86";ITPUB个人空间 T;K(@V?5x;|D&Q*Sj
searchRequest.CultureInfo ="zh-CN";
0|&qS C ?&{y0SearchResponsesearchResponse;ITPUB个人空间 f7ph |)W(zCv
ITPUB个人空间Hs z,z.N$x1r)C.Fs
searchResponse = s.Search(searchRequest);ITPUB个人空间8|k!jRX(| z0wmr+izk
ITPUB个人空间_g5J/fI
List<SearchResultItem> lists =newList<SearchResultItem>();
B{_/^Z^N/J R0foreach(SourceResponsesourceResponseinsearchResponse.Responses)
@v7J8gz`"l9Pz.r0{ITPUB个人空间,?0{}+BH-[ j&u
Result[] sourceResults = sourceResponse.Results;ITPUB个人空间f4e$D.QX1F
foreach(ResultsourceResultinsourceResults)ITPUB个人空间,u [1{&Y.{ `]O$C
{
Qj%z%[*m7U2Gj)n k0SearchResultItemitem =newSearchResultItem();
'C)q-W*e)W F(L0if((sourceResult.Title !=null) && (sourceResult.Title !=String.Empty))ITPUB个人空间\I2A/o c j/~\2^+[
item.Title = sourceResult.Title;
?!Jsv7y!I K1k0ITPUB个人空间+j2x:T+b(xf
if((sourceResult.Description !=null) && (sourceResult.Description !=String.Empty))
^o*](KQ6aX.X0item.Description = sourceResult.Description;ITPUB个人空间U?U4V1sBF

I8C.Dc7b1C3sA0if((sourceResult.Url !=null) && (sourceResult.Url !=String.Empty))ITPUB个人空间/td7QJX@j
item.Url = sourceResult.Url;
z|AbpE\0ITPUB个人空间Q/BSot@
lists.Add(item);ITPUB个人空间K L9nq?2Z(z{
}ITPUB个人空间"a Ys~^4p
}
V}1q SGf DC3oV0returnlists.ToArray();ITPUB个人空间2o3u/Lz aW9gE)Y
}

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

修改测试页

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

<divstyle="height:100%;">ITPUB个人空间v:V~]C9i+q6{@
<
asp:SilverlightID="Xaml1"runat="server"ITPUB个人空间 AZR1m oL\
Source="~/ClientBin/TerryLee.SilverlightGoogleSearch.xap"
*KTX9N,e^&b&_g3o0
Version="2.0"Width="857"Height="140" />
bs0f3I.uC0<
divid="result"></div>ITPUB个人空间0B.]OW\;v4C1U
</
div>

定义几个简单的样式:

<style.type="text/css">ITPUB个人空间	x@
sUkw5m"P
#resultITPUB个人空间 z4p[-u0C(I;J)~"O1Y
{ITPUB个人空间FLB XJ0p
margin-left:20px;
1N$cwCu_:IHu(}0}
{t5ne2K$j+B8s0.urlstyleITPUB个人空间h!U%a9P$^*N+C
{
.LQc D;M,r0color:#59990E;
9N_)w~\!f\R0}ITPUB个人空间LgKLLN9n
.itemstyle
VV Z9Sm5g ~0
{ITPUB个人空间w*W9F!}%g
border-bottom:dotted 1px #59990E;ITPUB个人空间qr6b|a*HfkV0z
margin-bottom:20px;ITPUB个人空间4U)T3m1O"o1ER J&P
}
:S k r1D(z g V(y0</style>

实现Silverlight程序

编写一个简单的Silverlight界面,使其看起来如图所示:ITPUB个人空间 r#[FFT$q

U4t5X1`v)sBy ny#?&CI0

XAML声明如下:

<Gridx:Name="LayoutRoot"Background="White">ITPUB个人空间KlT@d8e{p
<
Grid.RowDefinitions>
@4WS x+W8N3p3n1u~0<
RowDefinitionHeight="55"></RowDefinition>
5S1WV+O |] RS,y0<
RowDefinitionHeight="50"></RowDefinition>
,D#P%z ``(o#i0<
RowDefinitionHeight="35"></RowDefinition>ITPUB个人空间.v)yb.J6OC
</
Grid.RowDefinitions>ITPUB个人空间-Hbc7fU\
<
Grid.ColumnDefinitions>
iK.k.u"H0<
ColumnDefinitionWidth="*"></ColumnDefinition>
$\@FiZ1Yw?F0</
Grid.ColumnDefinitions>
!Hh7A3\*p;|^7V2{3F0
,z8diZ kg0<
ImageSource="LiveSearch.png"Grid.Column="0"></Image>ITPUB个人空间+m}'}4H+r;Mi
<
StackPanelGrid.Row="1"Orientation="Horizontal">
\;T \-|ds*O;h)mQ0<
TextBoxx:Name="txtQuery"Width="400"Height="35"ITPUB个人空间h,V.e:nV4K
Margin="50 0 0 0"BorderBrush="#3F7801"></TextBox>ITPUB个人空间s1LW;o:\3x
<
Buttonx:Name="btnSearch"Width="120"Height="35"ITPUB个人空间W'v)Z0F2pQ
Background="#62A21D"Margin="20 0 0 0"ITPUB个人空间Gqmj$u3y
Content="Search"FontSize="16"Click="btnSearch_Click"></Button>
sdm"\$o)GM2^"A D0</
StackPanel>ITPUB个人空间6osdo)\;@4~
<
TextBlockGrid.Row="2"Text="网页搜索结果"Foreground="#59990E"ITPUB个人空间'UrOjTOq
FontSize="16"Margin="20 0 0 0"></TextBlock>
fe"_6V+@ Du!x0</
Grid>

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

private voidbtnSearch_Click(objectsender,RoutedEventArgse)
/K;q;g.Mf%wb1}'?*`L0{
p0i8{$k+fl0LiveSearchWebServiceSoapClientclient =newLiveSearchWebServiceSoapClient();
N%?0k4} Q;K0
2~?V}(\0client.DoSearchCompleted +=newEventHandler<DoSearchCompletedEventArgs>(client_DoSearchCompleted);
+y%Ax6C*e{0client.DoSearchAsync(this.txtQuery.Text);ITPUB个人空间'R*K]+J1` N,x
}ITPUB个人空间T1x \s1IYq5s

9[C KjK{0p^0voidclient_DoSearchCompleted(objectsender,DoSearchCompletedEventArgse)
Ja/n$K m%~ ~*Zh0{ITPUB个人空间L Zp$[*F0h
if(e.Error ==null)ITPUB个人空间P!qvzgd7N$n,j
{ITPUB个人空间v2cqwu
SearchResultItem[] results = e.ResultasSearchResultItem[];ITPUB个人空间jbx-|(Xm @
ITPUB个人空间&?g;|]ARPds?p
HtmlElementresult =HtmlPage.Document.GetElementById("result");
E[x|&|6DmB.Ax,e0
K3gc%Q8MnwVYd0foreach(SearchResultItemiteminresults)ITPUB个人空间i*l#\cV/sY
{
4B8`~_;mLqXN&Q0HtmlElementitemElement =HtmlPage.Document.CreateElement("div");ITPUB个人空间7@nkco+u
itemElement.CssClass ="itemstyle";ITPUB个人空间%o&NAH [)gl

/_l3rDc^O0HtmlElementtitleElement =HtmlPage.Document.CreateElement("a");
/R*i u u&j,\m(p0titleElement.SetAttribute("href",item.Url);ITPUB个人空间8XZ SS4}"]e#j F_9Q
titleElement.SetAttribute("innerText",item.Title);ITPUB个人空间RD^vD\cIz6``
ITPUB个人空间7n!f4`'cv_
HtmlElementdescriptElement =HtmlPage.Document.CreateElement("div");ITPUB个人空间mVshc AVx'pw_
descriptElement.SetAttribute("innerText",item.Description);ITPUB个人空间b&gm:W#U8NOf BX

X:l^:r(`$E^$f;h0HtmlElementurlElement =HtmlPage.Document.CreateElement("span");ITPUB个人空间5C/L&j2\7L]$h
urlElement.SetAttribute("innerText",item.Url);ITPUB个人空间U"J];O3KcQ9A;r?'u
urlElement.CssClass ="urlstyle";
p4i9bet.f0ITPUB个人空间4Z+Z&Y\Q0y I4c
itemElement.AppendChild(titleElement);ITPUB个人空间hGTy(}D,uJjM p
itemElement.AppendChild(descriptElement);ITPUB个人空间nP4P:v}
itemElement.AppendChild(urlElement);
Z.b9o)ls.wpP0ITPUB个人空间4W$ECf7e9r:C
result.AppendChild(itemElement);
(aL7UiY2m)B'b0}ITPUB个人空间#y)d-EFJ4|$T*J/xQ
}ITPUB个人空间oe.lsE w t/ea
}

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

ITPUB个人空间C \|d.T)\:g

结束语

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

作者:TerryLee
$f&AWsen{ z0出处:http://terrylee.cnblogs.com

h%[9k-mCQ0

TAG:

 

评分:0

我来说两句

显示全部

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

Open Toolbar