SharePoint 2010 整合Silverlight 4應用 - 任務管理

作者: Sunmoonfire 來源: 博客園發布時間: 2011-01-27 10:22 閱讀: 1264 次推薦: 0 原文鏈接 [收藏]

　　SharePoint 2010可以與Silverlight實現緊密集成。不管是在瀏覽器中運行的Silverlight程序還是單獨的一個Silverlight程序，都能與SharePoint 2010實現很好的整合。本文中我們將實現一個Silverlight和SharePoint高度整合的例子，通過SharePoint 2010客戶端對象模型訪問SharePoint任務列表。同時，我們還將學習如何通過SharePoint自帶的Silverlight Web部件來宿主Silverlight應用。下圖是根據我個人的理解繪制的Silverlight和SharePoint 2010應用整合示意圖。

　　從上圖我們可以看到，我們分別有SharePoint客戶端對象模型（OM）和SharePoint Web服務兩種API供 Silverlight應用程序調用。事實上客戶端對象模型和服務這兩條途徑，不僅僅能用在Silverlight中，還可以用于其它的客戶端應用程序中。

　　在開始編寫應用程序之前，我們首先了解一下Silverlight和SharePoint之間不同類型的集成模型。我們可以簡單的通過HTML以IFrame的方式顯示Silverlight應用程序，也可以將Silverlight應用程序宿主在Web部件中，還可以　　調用SharePoint對象模型或服務。這些方式彼此之間并沒有硬性的分類界限。只是人為的通過使用規模所做的一個區分。分類如下：

　　1. 無接觸：通過無接觸方式，可以直接把現有的Silverlight應用集成到SharePoint。目的只是在SharePoint中進行顯示。直接使用iframe即可。

　　2.低接觸：低接觸的應用與SharePoint間的互動多了一點。但也僅僅是通過SharePoint 開箱即用的Silverlight Web部件對Silverlight應用進行裝載而已。這個應用程序本身是一個獨立的應用程序，它可能會調用一些除SharePoint API以外的其他服務。

　　之前我的一篇博文中，曾討論過一個典型的低接觸的例子。是關于SharePoint2010整合Silverlight 4應用——Bing地圖控件

　　3.高接觸：高接觸整合是指利用到SharePoint客戶端對象模型或Web服務來讀寫SharePoint Server信息的應用整合。應用程序本身可以是一個WPF應用程序，或者是像Silverlight這樣的客戶端應用程序，或者是ASP.NET 、JavaScript應用程序。下圖為一個Silverlight客戶端應用程序的高接觸整合。

　　接下來，我們要實現一個Silverlight與SharePoint高接觸的應用，通過Silverlight調用客戶端對象模型。會對使用客戶端對象模型的三種場景都進行描述：

　　1. 在瀏覽器中運行的Silverlight應用程序

　　2. 在瀏覽器外運行的（Out of Browser,簡稱OOB）Silverlight應用程序

　　3. 作為Silverlight XAP文件宿主在SharePoint Web部件中的Silverlight應用程序

　　首先，我們需要創建一個Silverlight應用程序，打開Visual Studio 2010>“新建” >“項目” 。選擇Silverlight項目模板，并選擇.NET Framework 4.0。將該項目命名為“SilverlightSPIntegration”。

　　點擊“確定”按鈕后，會彈一個窗口要求自動創建一個Web應用程序，Silverlight應用程序將自動宿主在該Web應用程序中。

　　下一步我們要做的就是編寫Silverlight程序來調用客戶端對象模型的API 。右擊Silverlight解決方案，選擇“添加引用”

　　這里我們需要添加“Microsoft.SharePoint.Client.Silverlight.dll”和“Microsoft.SharePoint.Client.Silverlight.Runtime.dll”這兩個dll。他們位于"C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin"文件夾下。

　　引用添加完成后，整個Silverlight應用程序的文件夾結構如下：

　　接下來，我們要對Silverlight的XAML進行設計，實現SharePoint網站中的某些功能。如上所述，在本例中，我們會從SharePoint內置的任務列表中讀取一些數據。因此，我們不妨先參考一下SharePoint默認的界面。打開SharePoint網站，從快速啟動區中找到“任務”列表并點擊它。

　　這是默認的SharePoint任務列表。當然你也可以使用任意的列表，甚至是自定義列表。只需要根據實際的設計修改對應的用戶界面和代碼即可。現在，為該任務列表輸入一些虛擬的數據。

　　下面是我為的任務列表添加的一些虛擬數據。

　　至此，我們完成了SharePoint部分的工作。接下來我們要創建一個自定義的UI，用Silverlight來顯示這些數據。界面比較簡陋，只是為了說明兩者是如何實現整合的。

　　返回Visual Studio，在Silverlight解決方案中，設計一些簡單的XAML界面。

　　為了快速設置樣式，我用Expression Blend對界面做了一點美化工作。

　　保存該Expression Blend項目，并在Visual Studio中從我們的Silverlight應用程序中打開。它會要求重新加載應用程序，因為內容在當前環境外被修改了。

　　以下是Silverlight用戶界面的XAML代碼：

<!--
    <Setter Property="MinWidth" Value="150" />
    <Setter Property="MaxWidth" Value="150" />
    <Setter Property="HorizontalAlignment" Value="Left" />
-->
<!--
    <Setter Property="HorizontalAlignment" Value="Right" />
    <Setter Property="Foreground" Value="Orange" />
-->

　　現在，我們完成了界面設計。可以按“F5”運行一下，看看用戶界面的樣子。

　　上圖就是我們設計的Silverlight應用程序。它托管在ASP.NET Web應用程序里。現在就可以使用 SharePoint 客戶端對象模型來從SharePoint服務器中讀取任務列表數據了。

　　因為我們要通過類來讀取列表的信息，所以首先要創建一個任務類型的類，作為任務的容器。下面是任務類代碼。

public class Tasks
{
        public string Title { get; set; }
        public string DueDate { get; set; }
        public string Status { get; set; }
        public string Priority { get; set; }
        public double PercentComplete { get; set; }
}

　　打開MainPage.XAML.CS文件，添加如下的命名空間

using Microsoft.SharePoint.Client;

　　添加好命名空間后就可以調用對象模型API了。

　　下面的示例代碼可以從特定的SharePoint站點中獲取某列表實例。

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            using (ClientContext SharePointContext = new ClientContext(this.SPWebSiteURL))
            {
                this.query = new CamlQuery();
                SharePointContext.Load(SharePointContext.Web);
                this.task = SharePointContext.Web.Lists.GetByTitle("Tasks");
                this.strQuery = @" ";
                query.ViewXml = this.strQuery;
                this.taskLists = this.task.GetItems(this.query);
                SharePointContext.Load(this.taskLists);
                SharePointContext.ExecuteQueryAsync(this.OnSiteLoadSuccess, this.OnSiteLoadFailure);
            }
        }

　　SharePointContext.ExecuteQueryAsync方法的執行是異步的。該方法使用兩個回調函數分別處理成功和失敗的返回結果。

　　如上面的代碼所示，如果我們的程序成功執行，它會調用OnSiteLoadSuccess，否則調用 OnSiteLoadFailure。下面是這兩個函數實現代碼。

private void OnSiteLoadSuccess(object sender, ClientRequestSucceededEventArgs e)
{
    foreach (ListItem item in this.taskLists)
    {
       Tasks objTask = new Tasks();
       objTask.Title = item["Title"].ToString();
       objTask.DueDate = item["DueDate"].ToString();
       objTask.Status = item["Status"].ToString();
       objTask.Priority = item["Priority"].ToString();
       double fraction = Convert.ToDouble(item["PercentComplete"]);
       objTask.PercentComplete = fraction * 100;
       this.SharePointTasks.Add(objTask);
    }
   AddTaskList( this.SharePointTasks);
}

private void OnSiteLoadFailure(object sender, ClientRequestFailedEventArgs e)
{
    MessageBox.Show(e.Message +  e.StackTrace);
}

　　接下來，我們需要創建一個委托來更新UI。使用Dispatcher.BeginInvoke ，以避免跨線程調用的異常。

private void AddTaskList()
{
    this.Dispatcher.BeginInvoke(new UpdateSilverLightUI(this.AddItemsToLists), this.SharePointTasks);
}
private void AddItemsToLists(List tasks)
{
    foreach (Tasks t in tasks)
    {
        TaskList.Items.Add(t.Title);
    }
}

　　現在，所有的任務已被添加到Silverlight的Task List中，然后我們要處理的ListBox的SelectionChanged事件，并在不同的文本框中顯示相應的值。

private void TaskList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var v = this.SharePointTasks.FirstOrDefault(item => item.Title.Equals(TaskList.SelectedItem.ToString()));
    if (v != null)
    {
        txtTitle.Text = v.Title;
        txtDueDate.Text = v.DueDate;
        txtPriority.Text = v.Priority;
        txtStatus.Text = v.Status;
        txtPercentage.Value = v.PercentComplete;
    }
}

　　OK，到這里所有的代碼編寫部分就完成了。但如果你現在嘗試運行該應用程序，會得到一個跨域訪問異常。因為SharePoint網站宿主在IIS中，而正在運行的應用程序卻是在VS里。為了解決這個問題，你必須把clientAccessPolicy.xml文件放到SharePoint站點的根目錄。
　　按F5運行該應用程序。沒錯，所顯示的Silverlight風格的任務列表和前面我們創建的SharePoint列表完全一致。可以點擊List中的一個任務來顯示詳細信息。

　　至此，我們完成了一個在單獨的網站中運行的Silverlight應用，并與SharePoint集成。你可以把這個應用宿主在任何ASP.NET Web應用程序中。

　　接下來，讓我們把這個Silverlight應用程序變得更有趣些，使其可以在瀏覽器外運行。事實上僅僅是通過VS2010自帶的配置工具做一個小小的修改就OK了。

　　在解決方案管理器中右鍵點擊Silverlight應用程序 >“屬性”，然后勾選“允許在瀏覽器外運行應用程序” 復選框，如下圖所示。

　　點擊“瀏覽器外設置...”可以做更細的配置。您可以修改窗口的高度，寬度和標題等。

　　完成瀏覽器外設置后，再運行該應用程序，你會發現它現在和Windows應用程序運行效果很相似.

　　我們已經實現了在瀏覽器中和在瀏覽器外的Silverlight應用與SharePoint 集成。

　　如何將Silverlight應用作為一個SharePoint Web部件宿主在SharePoint中呢。其實和在一般網站中一樣，SharePoint也是通過Silverlight的XAP文件實現宿主的，之前我已經在上次講地圖控件的時候提到過。

　　首先，我們在與上面的例子相同的解決方案下，新建一個SharePoint 2010項目。選擇“ 空白SharePoint項目 ”模板。

　　為項目命名，然后單擊“ 確定 ”。接下來將顯示如下的部署向導。

　　要求輸入作為調試的SharePoint網站的位置和部署類型。你可以使用默認的選擇。點擊“ 確定 ”，完成對SharePoint項目的創建。

　　現在，我們需要添加一個SharePoint項——模塊。模塊包含一個待部署的文件，本身需要包含在一個SharePoint項目中。要添加一個模塊，可以在SharePoint項目上右擊，并點擊添加新項。

　　在SharePoint 2010分類下，選擇“模塊”，為其命名，點擊“ 添加 ”。然后右擊該模塊，點擊“ 屬性 ”。

　　在屬性窗口的“ 項目輸出引用 ”選擇器中，做如下圖的設置。

　　請注意，你需要選擇部署類型為“ElementFile”，項目名稱應該是Silverlight解決方案的名稱。點擊確定。這是SharePoint模塊的“Element.XML”文件中，會添加到Silverlight的xap文件的路徑。通過這種方式可以把Silverlight應用添加到SharePoint網站中，使其成為SharePoint的一部分。

　　完成我們的SharePoint項目后，就可以編譯部署了。右鍵單擊SharePoint項目，選擇部署。這樣就完成了部署操作。