【51CTO.com獨家特稿】微軟公司的Silverlight大大提高了程序的互操作性，非常感謝微軟公司和Soyatec，Eclipse開發人員將能夠在他們熟悉的IDE中創建Silverlight應用程序了。

開源FANS和高可配置Eclipse IDE最近獲得了一個新禮物：Eclipse的Silverlight插件。它提供了Visual Studio2008中Silverlight工具的大部分特性，包括代碼提示和XAML預覽。這個插件是由Soyatec基金支持開發，由微軟互操作性團隊管理的。學習Eclipse中Silverlight插件的特性***的辦法就是去使用它，因此，本文將使用Eclipse創建一個簡單的Silverlight應用程序，一個企業聯合組織反饋閱讀程序，它在頂層窗口中列出反饋條目，在列表的下面顯示選中的條目，實現這個功能的代碼短得驚人，最終完成的程序樣子如下圖所示：

圖1 企業聯合組織反饋閱讀程序

安裝Silverlight開發工具箱

Silverlight模塊需要下面的軟件，按順序安裝它們：

1.Microsoft Windows XP SP2或更高版本，或Windows Vista SP1。

2.Java Development Kit (JDK) 1.5.0-11或更高版本。

3.Eclipse Ganymede 3.4.1，32位版本。

4.Microsoft .NET Framework 3.5。

5.Silverlight 2 Runtime 2.0.31005.0或更高版本。

6.Silverlight 2 SDK

安裝這個Beta版本時需要注意幾件事情：

1.還沒有程序調試器，但這個已經列入開發計劃了。

2.Eclipse上的Silverlight插件還不支持64位Windows Vista系統，但修復這個問題也已經列入開發計劃了。

3.Ganymede的基礎版本已經可以工作得很好，當你安裝Silverlight模塊時，會自動解決依賴性問題。

當你安裝好Silverlight后，你應該更新到2008年10月的DataGrid，它幾乎修復了近30個bug，在這篇文章中將使用到DataGrid。

當你安裝好所有的先決條件后，就可以安裝Silverlight插件了，啟動Eclipse，然后選擇‘幫助’到‘軟件更新’，打開‘軟件更新和加載項’對話框，選擇‘可用的軟件’標簽，點擊‘添加站點’按鈕。

圖2 選擇可用的軟件標簽再點擊添加站點按鈕

在‘添加站點’對話框中，輸入http://www.eclipse4sl.org/update/，點擊‘確定’按鈕，注意不要忘了輸入www.，如果忘記輸入了，你會看到重復的條目，雖然不影響使用，但看上去很討厭。

圖3輸入http://www.eclipse4sl.org/update/，點擊‘確定’按鈕

在‘可用的軟件’標簽中將會顯示一條新的Silverlight項目，選擇它然后點擊‘安裝’按鈕，Eclipse將會安裝Silverlight及其依賴文件。

圖4 選擇Silverlight條目，點擊‘安裝’按鈕

如果想查看究竟都安裝了些什么插件，可以點擊‘幫助|關于’，看到立方體圖標的插件就是Silverlight了。

圖5 立方體插件圖標就是Silverlight

點擊立方體圖標顯示Silverlight模塊信息對話框。

圖6 點擊立方體圖標顯示Silverlight模塊信息對話框

點擊‘插件詳細信息’按鈕查看所有的組件。

圖7 點擊插件詳細信息按鈕顯示所有組件

創建項目模板

至此我們已經準備好可以創建Silverlight應用程序了，選擇窗口打開透視圖其它，打開透視圖選擇對話框。

圖8 打開透視圖對話框

注意這里顯示兩條Silverlight，***個藍色立方體的條目表示是Eclipse風格的透視圖，左側是項目管理器，右側是選項停靠區域，第二個條目表示是VisualStudio風格透視圖，它們剛好相反。

現在Silverlight透視圖設好了，選擇‘文件’‘新建’，你將會看到兩個Silverlight項目可供選擇：SilverlightProject和SilverlightWebProject，選擇SilverlightWebProject，這樣你可以在Web頁面中嵌入Silverlight程序。

圖9 SilverlightWeb項目允許你將Silverlight程序嵌入到還有其他元素的Web頁面中

接著你會看到新建項目對話框，輸入SyndicationFeedReader作為項目名，這個項目不依賴于其它任何項目，因此你可以不點擊‘下一步’按鈕，直接點擊‘完成’按鈕。

圖10在新建項目對話框中，輸入SyndicationFeedReader作為項目名稱

在開始動手之前，先看看都創建了些什么內容，項目管理器中顯示了兩個項目：SyndicationFeedReader和SyndicationFeedReader.Web。

圖11項目管理器中顯示了兩個項目：SyndicationFeedReader和SyndicationFeedReader.Web

在上面的屏幕截圖中，鼠標指針懸停在視圖菜單按鈕上，當前版本的插件沒有顯示視圖菜單，但你可以從其它Eclipse透視圖打開和關閉你的Silverlight項目。

如果這個時候編譯并運行的話，只會顯示一個空白頁面，但它給我們一個機會設置一些選項，選擇‘運行’‘運行配置’，啟動‘運行配置’對話框，在列表中選擇‘SilverlightWebApp’，然后點擊‘新建’按鈕。

圖12選項運行運行配置，啟動運行配置對話框

接著你會看到配置對話框，在名稱區域輸入SyndicationFeedReader，在用于測試的項目處選擇SyndicationFeedReader.Web，開始頁SyndicateFeedReaderTestPage.html也將被選中，點擊‘應用’，然后點擊‘運行’按鈕。

圖13輸入運行配置名稱，選擇項目開始頁面

在你的瀏覽器中將會顯示一個空白頁面，但你在上面點擊右鍵就會顯示Silverlight配置上下文菜單，這說明Silverlight已經在運行，只不過還沒有填充內容吧了。
注意：我們將對SyndicationFeedReaderTestPage.html做一點小小的改動，但它可能不會在項目管理器中作為SyndicationFeedReader.Web項目的一部分列出來，Soyatec已經修復了這個bug，但你在閱讀本文的時候可能還沒有發布補丁，如果真是這樣，你可以手動添加它，在項目名稱SyndicationFeedReader.Web上點擊右鍵，選擇‘新建’‘添加現有文件’，然后切換到項目目錄，將過濾器改為*.*，然后選擇文件，將會詢問你是否要覆蓋現有文件，回答‘不’，文件就會顯示在項目列表中了。

#p#

為程序自定義代碼

現在我們在Page.xaml文件為用戶添加接口代碼，XAML即可擴充應用程序標記語言，XAML文件實際上是一個XML文件，雙擊Page.xaml在編輯器中打開它，下面面板顯示源代碼，上面面板顯示預覽效果。你會看到文件中已經包含了一些框架代碼，頂層的UserControl元素包含所有的Silverlight內容，我們從移除Width和Height參數開始，這樣

    xmlns="    xmlns:x="    >
    
        
            
            
        
    

Silverlight Grid控制和HTML表類似，但語法稍有不同，我們的Silverlight程序將包括兩行，上面的行容納一個標記和按鈕，下面的行容納反饋項目，及一個反饋項目列表，被選中的項目將以HTML樣式顯示。

想要添加一個行的定義，使用如下語法：

    Xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation 
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml 
    >
    
    

接下來我們要添加一個水平方向的StackPanel來容納標簽文本和按鈕，可以使用右側的選項面板，點擊‘容器’，然后拖動StackPanel項目到代碼窗口，在標記后輸入一個空格，然后按Ctrl+空格鍵，彈出代碼提示窗，向下滾動到Orientation，或輸入‘O’加速搜索速度，雙擊選中它，保持默認值‘Horizontal’即可。

我們兩個StackPanel控制器將會是一個TextBlock和一個Button，TextBlock將會賦予‘Wired’（本文我們用它作為反饋的名字），注意不是所有的反饋都可以工作，這個域必須通過在服務器上托管一個小文件執行跨域訪問，如wired.com上的這個文件。

想要增加一個文本塊（TextBlock），在選項面板上點擊控制器（Controls），然后拖動TextBlock到你的代碼窗口中兩個StackPanel標記之間，然后點擊按鈕，拖動按鈕控制器到代碼窗口中TextBlock下，象下面這樣配置控制器，不用告訴它不要使用grid的***行（row 0），因為默認就是這樣了，使用StackPanel時，你可以使用Ctrl+空格鍵得到語法幫助。

                            VerticalAlignment="Center" 
                FontSize="36" 
                Padding="10"
                Foreground="White" 

                />
                            Margin="5"
                Height="50"
                Width="100"
                Foreground="Purple"
                />
 

迄今為止一切順利，但按鈕還沒有起任何作用，我們還需要在按鈕上添加事件控制程序，當點擊按鈕時就訪問反饋，在按鈕的結束方括號前插入光標，按Ctrl+空格鍵，代碼提示只有一個選項，即點擊事件，雙擊選中它，將會顯示一個事件處理程序對話框，輸入Btn_Click作為事件的名稱，然后點擊確定。

圖 14 從代碼提示中選擇點擊事件，將會顯示一個事件處理程序對話框

#p#

這樣將會在代碼后臺文件Page.xaml.cs中創建一個事件處理程序占位符，然后打開它，事件處理程序只需要三行代碼。

首先我們以一個訪問服務器數據的WebClient對象為例進行說明，因為我們要異步訪問反饋，需要為OpenReadCompleted事件添加一個事件處理程序，最后，我們使用OpenReadAsync方法提交請求。 

private void Btn_Click(object sender, RoutedEventArgs arg1)
        {
            WebClient client = new WebClient();
            client.OpenReadCompleted += 
                  new OpenReadCompletedEventHandler(client_OpenReadCompleted);
            client.OpenReadAsync(
                  new Uri("        }
OpenReadCompleted

事件處理程序將會綁定反饋數據到顯示它的控制器上，在我們的例子中就是DataGrid，因此在添加處理程序之前，我們先回到Page.xaml添加好DataGrid。

在選項面板中點擊容器，拖動DataGrid到代碼窗口，把它放在StackPanel下面，在兩個關閉標記 和之間，這樣不僅在代碼中添加了DataGrid標記，在文件的頂部還添加了額外的命名空間，然后在項目中添加了一個到System.Windows.Controls.Data的引用。

我們想給DataGrid取一個名字，以便可以在OpenReadCompleted事件處理程序中引用它，我們將把反饋數據綁定到它上面，名字就命名為gridSyndicationItems，然后添加兩個屬性：Grid.Row="1"（因為列表是從grid的第二行開始的，***行是row=0）和AutoGenerateColumns="false"（稍后會有詳細說明）。最后我們想要web頁面顯示選中的反饋，因此需要一個SelectionChanged事件觸發程序，代碼提示可以起到幫助作用，只需按Ctrl+空格鍵即可。

如果你不將AutoGenerateColumns設置為false，DataGrid將會為每個反饋自動產生一列，通常這不是你想要的效果，如果你將其設置為false了，你可以進一步設置顯示哪些列，這才是我們想要的，下面就是示例：

          AutoGenerateColumns="false" SelectionChanged="gridFeed_SelectionChanged" >
           
                     
                     
                        
            
    

Binding語句指定了每一列要顯示的字段，字段名稱是Syndication字段對象的屬性。
現在我們再回到我們的代碼隱藏文件Page.xaml.cs，為反饋讀取完畢添加事件處理程序，在Btn_Click處理程序下面為OpenReadCompleted處理程序添加下面的代碼：

private void client_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
         {
            if (e.Error == null)
            {
                XmlReader reader = XmlReader.Create(e.Result);
                SyndicationFeed feed = SyndicationFeed.Load(reader);
                gridSyndicationItems.ItemsSource = feed.Items;
                reader.Close();
            }
          }

如果在讀取反饋時沒有遇到錯誤，我們創建一個XmlReader對象，使用我們的反饋初始化它，然后將XmlReader載入名叫‘feed’的SyndicationFeed對象，它的項目屬性包含了反饋項目的集合，為了綁定反饋數據到DataGrid，我們為反饋項目指定DataGrid的ItemsSource屬性。

命名空間包含了SyndicationFeed類，但它還不是我們項目的一部分，在項目管理器中，展開SyndicationFeedReader項目，在‘引用’上點擊右鍵，選擇‘添加引用’。

圖 15 在SyndicationFeedReader項目的引用上點擊右鍵，選擇添加引用

此時會彈出一個可用組合的列表，那些在當前項目中已經引用了的項目以灰色高亮顯示，選擇System.ServiceModel.Syndication，點擊‘確定’按鈕。

圖 16 選擇Select System.ServiceModel.Syndication，點擊確定

接下來需要為代碼隱藏文件Page.xaml.cs添加一些‘using’提示：

using System.ServiceModel.Syndication;
using System.Xml;
using System.Windows.Browser;

在顯示選中的反饋時使用到了System.Xml和System.Windows.Browser，它包含兩部分內容：

◆當選擇的反饋項目發生變化時的事件處理程序

◆在頁面上以iframe形式顯示選中反饋的HTML

在OpenReadCompleted事件處理程序下面添加SelectionChanged事件處理程序，這次沒有自動創建占位符了，代碼提示將會在未來的版本中增強。

private void gridFeed_SelectionChanged(object sender, EventArgs e)
        {
            SyndicationItem selectedItem = 
                  (SyndicationItem)gridSyndicationItems.SelectedItem;
            HtmlElement element = 
                   HtmlPage.Document.GetElementById("rssFrame");
            element.SetAttribute("src", selectedItem.Links[0].Uri.ToString());
        }

***行是更新選中的項目，它后面的兩行就是顯示內容了，注意對rssFrame的引用，實際上它是一個要顯示的iframe的名字。

最后一步是將iframe添加到我們的HTML頁面中，在SyndicationFeedReader.Web項目中的SyndicationFeedReaderTestPage.html上點擊右鍵，選擇‘以…打開’‘文本編輯器’，首先限制Silverlight程序占整個頁面的50%，通過將silverlightControlHost的高度值從100調整到50實現。

#silverlightControlHost {
     height: 50%;
    }

然后在標記前添加下面兩行代碼：

分享到微信

微信掃碼分享

分享到微博

相關推薦

開始你的編程之旅吧！從Python入門講起……

本文中，筆者將帶領你使用本人最喜愛的Python語言來學習編程的概念。

2020-05-21 14:03:21

python編程代碼

代碼編寫之道：十條經驗引領高效編程之旅

不要盲目追求項目性能而單純依賴某種編程語言。雖然C++通常比Java快，Java比Python快，但在絕大多數實際項目中，項目的訪問速度很少會達到需要比拼語言速度的程度。硬件配置、網絡帶寬等因素往往對性能的影響更為顯著。

2024-11-28 11:34:54

在 Linux 中玩樂：Cmatrix 之旅

Cmatrix是一款充滿樂趣的Linux和Unix系統命令行程序。它可以模仿經典電影《黑客帝國》系列中的場景，用綠色的字符流營造出雨一般的下落效果。

2023-11-28 13:21:52

開始Worklight的開發之旅

簡介：為了更好的在移動平臺上提供企業級的程序服務，IBM公司于2012年2月27日（美國時間）收購了在移動程序開發行業中占領先地位的Worklight公司。作為一個開放而高級的移動程序開發平臺，Worklight提供了開發純WEB模式，混合模式（hybrid）和本地模式（native）移動程序的方法。解決方案的整體分為四個部分：基于Eclipse的IDE系統，基于Tomcat或者WebSphe...

2012-06-21 13:46:22

javascriptworklight嵌入式系統

在Eclipse中安裝TomcatPlugin

在Eclipse中安裝TomcatPlugin,閱讀此文使您學會如何在Eclipse中安裝tomcatplugin

2009-06-02 15:20:16

eclipse tomtomcatplugitomcatplugi

在Silverlight 3中消耗WCF服務

本文中，我們將為大家介紹在Silverlight3中消耗服務所需的步驟，還會談到一些重要的性能。我們會討論如何用Silverlight客戶端處理異步調用。

2009-06-25 11:18:20

Silverlight

在Windows Embedded中創建Silverlight組件

Silverlight在嵌入式領域發揮的作用絕對不僅僅只有增加Web的用戶體驗而已。很多嵌入式設備需要豐富多彩的用戶交互界面，比如ATM、自動售貨機、自助查詢終端、老虎機（喔）……WindowsEmbeddedStandard的主要應用領域恰好在這幾個方面，所以Silverlight對于來說WindowsEmbeddedStandard來說是如虎添翼。可能有朋友也會說，我們使用其他技術也可以實現與Silv...

2009-04-03 13:09:12

Windows Emb

在Windows Embedded Standard中開發Silverlight

本文介紹了如何在WindowsEmbeddedStandard中開發Silverlight。Silverlight在嵌入式領域發揮的作用絕對不僅僅只有增加Web的用戶體驗而已。

2009-07-16 15:46:09

Windows Emb

企業在開始云計算遷移之旅時應該考慮什么?

過渡到云平臺可能很復雜，特別是在更多選擇的情況下，那么企業在開始云遷移過程中應該考慮什么

2021-01-13 10:33:57

云計算云遷移云平臺

新工具使Eclipse成為Silverlight IDE

一個新工具集使Eclipse成為SilverlightIDE，以方便開發者創建和部署Silverlight面板。

2009-03-12 16:18:14

Visual StudEclipseSilverlight

如何開始你的SOHO之旅

仔細算算自己在家上班已經有差不多4年了，所以回想起整個過程，只有一種感受，那就是再也回不去了。我相信很多在家工作多年的朋友也會有同樣的感受，“自由”這東西一旦擁有就太難再放棄掉。

2013-08-19 15:36:07

在家辦公程序員

混合云之旅，從Linux開始！

當今時代，組織通過持續的投入新技術和實踐來改變他們為客戶提供價值的方式。隨著我們進入一個混亂的時代，這已經成為一個關鍵的投資領域，這其中云計算在支持推動數字化轉型的技術和流程方面起著至關重要的作用。

2019-07-02 16:57:20

混合云技術Linux

談在Eclipse中配置Tomcat

本文簡述了在Eclipse中配置Tomcat的一些經驗。

2009-06-05 14:59:31

Eclipse中配置T

利用Eclipse插件Spring IDE在Eclipse中的使用

本文介紹如何利用Eclipse插件SpringIDE在Eclipse中的使用。

2009-06-17 17:44:41

Eclipse插件Sp

在Windows Embedded中創建Silverlight播放器

本文將介紹如何在WindowsEmbeddedStandard中創建Silverlight播放器，Silverlight是微軟針對RIA市場推出的一個產品。

2009-07-16 15:27:13

Windows Emb

在Silverlight應用程序中調試WCF服務

創建WCF服務的方法很多，這里要介紹的方法會讓你解決問題變得更容易，它利用VisualStudio2010中提供的輕量級WCF配置選項。

2010-11-25 10:05:22

Visual StudSilverlightWCF

SilverLight編程問題大串燒

SilverLight編程問題的解決方法在這里都有：通過IIS瀏覽，出現2401，silverLight應用程序不能下載的異常的解決方法；通過SilverLight訪問WCF，提示跨域訪問的解決方法等。

2010-01-04 11:23:59

SilverLight

在Windows Embedded支持Silverlight

支持Silverlight的WindowsEmbeddedStandard好了，完成安裝之后，我們就可以來做WindowsEmbeddedStandard的第一個操作系統鏡像了。

2009-02-17 14:22:40

Windows Emb

JavaScript模塊編程之寫法

JavaScript模塊化編程，已經成為一個迫切的需求。理想情況下，開發者只需要實現核心的業務邏輯，其他都可以加載別人已經寫好的模塊。但是，JavaScript不是一種模塊化編程語言，它不支持"類"（class），更遑論"模塊"（module）了。

2012-10-29 13:25:54

JavaScriptJSjQuery

Re: 從零開始的React再造之旅

今天我們通過不依賴任何第三方庫的方式，拋棄邊界處理、性能優化、安全性等弱相關代碼手寫一個基礎版的React，供大家學習和理解React的核心原理。

2020-02-11 16:49:24

React前端代碼

微博

QQ

微信

復制鏈接

微信掃碼分享

51CTO技術棧公眾號

51CTO技術棧公眾號