SharePoint 2010 データにアクセスする Silverlight アプリケーションを作成する

SharePoint 2010 での Web 開発の概要: DataGrid コントロール内に SharePoint 2010 リストを表示する Microsoft Silverlight アプリケーションを作成し、Silverlight アプリケーションを SharePoint サイトに配置する方法について解説します。

最終更新日: 2011年1月27日

適用対象: SharePoint Foundation 2010 | SharePoint Server 2010 | Visual Studio | Visual Studio 2010

この記事の内容
Silverlight アプリケーション プロジェクトを作成する
SharePoint リスト データにアクセスして表示するコードを追加する
ソリューションを配置してテストする
次の手順

この演習では、DataGrid コントロール内に SharePoint Server 2010 リストを表示する簡単な Microsoft Silverlight 3 アプリケーションを作成します。リストのデータは、Microsoft SharePoint 2010 クライアント オブジェクト モデルを使用してサーバーから取得します。次に、Visual Studio 2010 ソリューションを Microsoft SharePoint Server 2010 を実行しているローカル サーバーに配置します。このタスクを完了するには、以下の作業を実行します。

• Silverlight アプリケーション プロジェクトを作成する

• SharePoint リスト データにアクセスして表示するコードを追加する

• ソリューションを配置してテストする

注意

この演習では、このトピックの後半で指定する SharePoint サイトに Projects という名前のリストがあるものと想定しています。Projects リストの作成方法については、「リンクされているリストを SharePoint 2010 に作成する」を参照してください。

Silverlight アプリケーション プロジェクトを作成する

このタスクでは、Silverlight アプリケーション プロジェクトを Microsoft Visual Studio 2010 に作成します。

Silverlight プロジェクトを作成するには

1. Visual Studio 2010 を起動して、[ファイル] をクリックし、[新規作成] をポイントし、[プロジェクト] をクリックします。

2. [インストールされているテンプレート] セクションで [その他のプロジェクトの種類] ノードに移動し、[Visual Studio ソリューション]、[空のソリューション] の順にクリックします。

3. 画面上部で [.NET Framework 3.5] を選択し、[名前] ボックスに「Begin」と入力して、[OK] をクリックします。

4. [ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックします。

5. [インストールされているテンプレート] セクションで [Visual C#] ノードを展開し、[Silverlight]、[Silverlight アプリケーション] の順にクリックします。

6. 画面上部で [.NET Framework 3.5] を選択し、[名前] ボックスに「SPSilverlightExample」と入力して、[OK] をクリックします。

7. [新しい Silverlight アプリケーション] ダイアログ ボックスで [OK] をクリックします。

8. 次に、SharePoint Silverlight クライアント オブジェクト モデルへの参照を追加します。ソリューション エクスプローラーで [SPSilverlightExample] ノードを右クリックし、[参照の追加] をクリックします。

9. 以下のフォルダーに移動します。 C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin

10. [Microsoft.SharePoint.ClientSilverlight.dll] と [Microsoft.SharePoint.Client.Silverlight.Runtime.dll] を選択して、[OK] をクリックします。

SharePoint リスト データにアクセスして表示するコードを追加する

このタスクでは、SharePoint リスト データにアクセスして表示できるコードをプロジェクトに追加します。

コードをプロジェクトに追加するには

1. この [表示] メニューで [ツールボックス] をクリックして、ツールボックスを表示します。

2. ツールボックスから Page.xaml Silverlight デザイナーの既存のグリッドに DataGrid コントロールをドラッグします。

3. ページ全体を使用するよう DataGrid コントロールを拡張します。[プロパティ] ウィンドウで、以下のプロパティを表示されている値に設定します。

   プロパティ	値
   Width	Auto
   Height	Auto
   HorizonalAlignment	Stretch
   VerticalAlignment	Stretch
   Margin	0

4. また、[プロパティ] ウィンドウで、[AutoGenerateColumns] チェック ボックスをオンにします。

5. App.xaml.cs を開き、以下の using ステートメントをファイルの先頭に追加します。

   using Microsoft.SharePoint.Client;
   using System.Threading;
   

6. 以下のコードを Application_Startup メソッドの先頭に追加します。

   ApplicationContext.Init(e.InitParams, SynchronizationContext.Current);
   

7. MainPage.xaml.cs を開き、以下の using ステートメントをファイルの先頭に追加します。

   using Microsoft.SharePoint.Client;
   

8. 以下のクラスを MainPage クラスの前に追加します。

   public class Project
   {
       public string Title { get; set; }
       public DateTime DueDate { get; set; }
       public string Description { get; set; }
   }
   

9. 以下の変数を MainPage クラスに追加します。

   private ListItemCollection _projects;
   

10. InitializeComponent の呼び出しの後で、以下のコードを MainPage メソッドに追加します。

    ClientContext context = new ClientContext(ApplicationContext.Current.Url);
    context.Load(context.Web);
    List Projects = context.Web.Lists.GetByTitle("Projects");
    context.Load(Projects);
    
    CamlQuery query = new Microsoft.SharePoint.Client.CamlQuery();
    string camlQueryXml = "<View><Query><Where><Gt>" +
        "<FieldRef Name='Due_x0020_Date' />" +
        "<Value Type='DateTime'>2008-01-1T00:00:00Z</Value>" +
        "</Gt></Where></Query><ViewFields>" +
        "<FieldRef Name=\"Title\" /><FieldRef Name=\"Description\" />" +
       "<FieldRef Name=\"Due_x0020_Date\" />" +
        "</ViewFields></View>";
    
    query.ViewXml = camlQueryXml;
    _projects = Projects.GetItems(query);
    context.Load(_projects);
    context.ExecuteQueryAsync(new ClientRequestSucceededEventHandler(OnRequestSucceeded), null);
    

11. 以下のコードを MainPage メソッドの後に追加します。

    private void OnRequestSucceeded(Object sender, ClientRequestSucceededEventArgs args)
    {
        // This is not called on the UI thread.
        Dispatcher.BeginInvoke(BindData);
    }
    
    private void BindData()
    {
        List<Project> projects = new List<Project>();
        foreach (ListItem li in _projects)
        {
            projects.Add(new Project()
            {
                Title = li["Title"].ToString(),
                DueDate = Convert.ToDateTime(li["Due_x0020_Date"].ToString()),
                Description = li["Description"].ToString()
            });
        }
        dataGrid1.ItemsSource = projects; // must be on UI thread
    }
    

    前述の手順で追加したコードによって、SharePoint Silverlight クライアント オブジェクト モデル コンテキスト (ClientContext) が初期化されます。次に、Projects リストへの参照を取得して、リストに対して簡単な CAML クエリを実行し、期限日が 2008 年 1 月 1 日以降のすべてのプロジェクトを取得します。結果はプロジェクトのリストに変換され、Silverlight DataGrid コントロールにバインドされます。

ソリューションを配置してテストする

このタスクでは、Web パーツを SharePoint サイト上のページに追加することにより、ソリューションを配置してテストします。

ソリューションを配置してテストするには

1. ソリューションを SharePoint に配置するには、Silverlight プロジェクトによって生成された .xap ファイルが C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin フォルダーにある必要があります。

   [SPSilverlightExample] ノードを右クリックし、[プロパティ] をクリックして、[ビルド] を選択します。

2. [出力パス] を C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin に変更します。

3. [SPSilverlightExample] ノードを右クリックし、[ビルド] をクリックして、ソリューションをビルドします。.xap ファイルが目的の SharePoint ディレクトリにコピーされ、Silverlight Web パーツを SharePoint サイトに追加できるようになりました。

4. Internet Explorer を開き、SharePoint サイトに移動します。

5. ページ上部の [編集] アイコンを選択します。

6. [挿入]、[Web パーツ] の順にクリックします。

7. [カテゴリ] リストから [メディアおよびコンテンツ] をクリックし、Web パーツ リストから [Silverlight Web パーツ] をクリックして、[追加] をクリックします。

8. [Silverlight Web パーツ] ダイアログ ボックスに URL として「/_layouts/ClientBin/SPSilverlightExample.xap」と入力し、[OK] をクリックします。

   Web パーツは図 1 のようになります。

   図 1. プロジェクト リスト アイテムが表示される Silverlight Web パーツ

   

次の手順

• SharePoint 2010 での Web 開発の概要

• 次の手順

• ff630939(v=office.14).md