翻譯|其它|編輯:郝浩|2008-01-22 09:59:57.000|閱讀 1760 次
概述:
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
Silverlight 將支持開發人員在創建豐富的web應用程序,我們即將看到web應用的一個在視覺是很有吸引力的浪潮的到來,網頁將能夠利用靈活的媒體播放,動畫和矢量圖形繪制。這將有利于擴展web應用。本文描述的是一個股票跑馬燈的例子。
本例選擇一個代碼為3209的應用股票作為樣本,它可以嵌入到現有的代碼,并且提供一個比"html<marquee>"標簽更好查看的ticker。為了能夠讓用戶得到最多的價值,需要有效地通過互聯網從服務器獲得信息進行交易。 將討論通過整合silverlight和asp.net AjAx來創造一個豐富的b/s應用。同樣通過其他途徑也能創造出類似的視覺效果,主要焦點是如何整合這兩項技術。通過ajax不斷獲取新的股票信息拋給silverlight來展現。這個解決方案的關鍵點如下:
1,采用XAML和Silverlight
2.采用Asp.net AJAX實現無刷新顯示。
客戶端安裝:
Silverlight 1.1Alpha,和任意瀏覽器
開發和服務端安裝:
1,Microsoft .NET 2.0 Framework 本例使用vS2005開發
2,Silverlight 1.1 Alpha(或確認含有Silverlight.js 文件)
3,Asp.net Ajax 在//ajax.asp.net/下載
概覽:
在下面的的例子里將會分3個級別的內容來介紹連續變化:
下面給出一個連續變化的視圖,程序中包含2各textblock,他們會部分顯示當他們處在Silverligth控件的范圍內。當達到末尾時,ticketext2的數據將拷貝ticketext1的數據 ,然后在動畫啟動的過程中tickertext2的信息就會被更新。理論上講,我們可以弄很多個textblocks,為了簡單期間我們只示例2個。
采用asp.net Ajax 調用web services ,Asp.net AjAX將會為你注冊使用<asp:ServiceReference>標簽的web services自動產生一個javascirpt代理.當頁面被加載完后,我們通過組織XAMLTextBlock上的一些數據返回給web service。下面是
一個不同對象之間傳遞消息的時序圖:
采用隊列在silverlight和asp.net AjAx之間共享數據因為不是保證所有的數據同時通過ajax取出,所以程序再updatepanel中把asp.net Textbox當作對列來使用。asp.net AJax不斷去更新數據,同時silverlight周期性的從隊列中取出數據。
CreateSilverlight.js
各文件描述
下面的代碼是silverlight插件的運行代碼,功能是如果用戶沒有安裝sliverlight將會提示安裝silverlight插件
//contains calls to silverlight.js, example below loads TickerTape.xaml
function createSilverlight()
{
Silverlight.createObjectEx({
source: "TickerTape.xaml",
parentElement: document.getElementById("SilverlightControlHost"),
id: "SilverlightControl",
properties: {
width: "500",
height: "25",
version: "0.95",
background: "#00000000",
isWindowless: false,
enableHtmlAccess: true },
events: {}
});
}
Ticker.aspx
這個頁面使用了silverlight展現證券報價數據和asp.netajax從服務器檢索數據,把這個textbox被當作隊列,asp.netajax將會把股票數據填充到隊列中,當它通過javascript給silverlight控件后將會被從隊列中刪除。
<!-- AJAX code -->
<asp:ScriptManager runat="server" ID="scriptManager">
<Services>
<asp:ServiceReference Path="StockUpdate.asmx" />
</Services>
</asp:ScriptManager>
下面的asp.net Ajax 代碼來承擔少許重要的任務,通過增加<asp:ScriptManager> 控件,我們可以訪問asp.net Ajax提供的方法,使用aps.net ajax必須在頁面有這個控件,這段代碼同時也注冊了在第一次加載葉面時候調用
javascirpt的 web service StockUpdate.asmx。
<asp:UpdatePanel ID="StockPanel" runat="server">
<ContentTemplate>
<asp:Timer ID="RefreshTimer" runat="server" Interval="3000"
OnTick="RefreshTimer_Tick"> </asp:Timer>
<asp:TextBox ID="NewStockQueue" runat="server" Width="500">
</asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
下面的代碼會使用ajax組件定時訪問服務器并安排進新的股票隊列的textbox
<asp:UpdatePanel ID="StockPanel" runat="server">
<ContentTemplate>
<asp:Timer ID="RefreshTimer" runat="server" Interval="3000"
OnTick="RefreshTimer_Tick"> </asp:Timer>
<asp:TextBox ID="NewStockQueue" runat="server" Width="500">
</asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
TickerTape.xaml
XAML運行在siverlight插件中,它將在屏幕滾動顯示股票報價數據,西面兩個textblocks將包含進股票市場數據。
<!-- These contain the stock market information that are visible to
the client. -->
<TextBlock x:Name="tickerText1" Canvas.Top="3" FontSize="12"
Foreground="Yellow" FontFamily="Arial Black" Text="" />
<TextBlock x:Name="tickerText2" Canvas.Top="3" FontSize="12"
Foreground="Yellow" FontFamily="Arial Black" Text="" />
storyboadrd 將會從左邊移動數據,直到達到顯示邊緣,然后調用refreshTicker 代碼把數據從tickertext2復制到tickerText1,從隊列中更新數據到ticekertext2和重新啟動動畫。
<!-- This storyboard will animate the text boxes below,
moving them to the left until they hit the end.
Then it will restart, giving the appearance of continuously moving
information-->
<Storyboard x:Name="tickerAnimation" Completed="RefreshTicker" >
<DoubleAnimation x:Name="animationText1"
Storyboard.TargetName="tickerText1"
Storyboard.TargetProperty="(Canvas.Left)" BeginTime="0"
Duration="0:0:16" From="1" To="-550" />
<DoubleAnimation x:Name="animationText2"
Storyboard.TargetName="tickerText2"
Storyboard.TargetProperty="(Canvas.Left)" BeginTime="0"
Duration="0:0:16" From="550" To="0" />
</Storyboard>
StockUpdate.asmx
這是一個簡單得web services,它提供了一個訪問makretmanager 類的途徑,目的是為了從javescirpt訪問webserices,asp.net ajax將會自動的產生一個web代理,只要通過<asp:ServiceReference>標簽申明,通過code頁面去修改代碼。
在GAC添加中添加System.Web.Extensions 和asp.net ajax namespace后
// This is the ASP.NET AJAX reference we need
using System.Web.Script.Services;
我們也可以在類中增加scriptserviece屬性
[WebService(Namespace = "//xxxx.name/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class StockUpdate : System.Web.Services.WebService
MarketManager.cs
該類提供虛擬的隨機股票以及一些交易和價格的信息。
Web.config自動產生,無特殊變化Silverlight 能夠在多瀏覽前中產生豐富,震撼的視覺效果和良好的用戶交互,但它只是一個空殼,需要有數據來填充,無疑,asp.net ajax是很多種從服務器獲取數據的方式中最好的方式。
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:個人博客