在Eclipse中開始Silverlight編程之旅

作者：黃永兵譯 2009-03-13 10:39:55

現在通過插件，Eclipse開發人員將能夠在他們熟悉的IDE中創建Silverlight應用程序了。它提供Visual Studio 2008中Silverlight工具的大部分特性，本文將為大家開始Silverlight編程之旅。

【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 點擊插件詳細信息按鈕顯示所有組件

#p#

創建項目模板

至此我們已經準備好可以創建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" 

                />

迄今為止一切順利，但按鈕還沒有起任何作用，我們還需要在按鈕上添加事件控制程序，當點擊按鈕時就訪問反饋，在按鈕的結束方括號前插入光標，按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%;
    }

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

責任編輯：彭凡來源： 51CTO

51CTO技術棧公眾號

業務
速覽

媒體

51CTO CIOAge HC3i

社區

51CTO博客鴻蒙開發者社區 AI.x社區

教育

51CTO學堂精培企業培訓 CTO訓練營



     </PRE></TD></TR></TBODY></TABLE></P>
<P>搞定！保存所有文件，切換到‘運行’菜單，選擇‘Run History’&#61664;‘SyndicationFeedReader’，當瀏覽器窗口啟動后，點擊‘Get Feed’按鈕，載入反饋項目，當你選擇不同的項目時，關聯的頁面將會自動顯示在窗口下方區域，當然你可以脫離Eclipse雙擊SyndicationFeedReaderTestPage.html運行它。</P>
<P><STRONG>Java Web Service的互操作性</STRONG></P>
<P>本文我只列舉了一個非常簡單的程序示例，Eclipse的Silverlight插件還可以創建獨立的Silverlight程序，它也支持和基于SOAP或REST協議的Java Web Service互操作性，在<A >http://www.eclipse4sl.org/documentation/userdoc/html/webservice/</A>你可以找到示例。</P>
<P>Eclipse Silverlight插件現在是一個非常活躍的開發插件，歡迎你的加入。</P>
<P>【編輯推薦】</P>
<OL>
<LI><A  target=_blank>在Silverlight中進行基本的數據驗證</A></LI>
<LI><A  target=_blank>詳解Silverlight中的Downloader對象</A></LI>
<LI><A  target=_blank>Silverlight 2 Twitter 例程</A></LI></OL>

<table id="ue0m2"></table>

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

在Eclipse中開始Silverlight編程之旅