Создание веб-фрагмента Silverlight 4 для SharePoint 2010

Microsoft SharePoint 2010 предоставляет бизнес-платформу для коллективной работы, которую можно легко адаптировать под потребности конкретной организации и которую можно будет масштабировать по мере развития этой организации. А при создании собственных решений на базе SharePoint лучше всего использовать преимущества клиентского интерфейса Silverlight.

Веб-фрагменты (Web Parts) являются центральной частью большинства решений на основе SharePoint. Когда разработчики задумываются о применении Silverlight в своих приложениях SharePoint, то большинству из них кажется очевидным использование этой инфраструктуры в веб-фрагментах, а веб-фрагменты — наиболее распространенный способ создания Silverlight-приложений в SharePoint. Но веб-фрагменты — отнюдь не единственный вариант.

Silverlight можно также использовать в меню, для навигации, в диалогах, разметке страниц, эталонных страницах (master pages) — везде, где можно разместить тег object. Это дает дизайнерам высокую гибкость в создании разнообразных интерфейсов для приложений, интегрируемых в SharePoint. При таком подходе Silverlight следует считать естественным расширением SharePoint.

Но обширность платформы SharePoint + Silverlight нередко отпугивает разработчиков. По сути, разработчики обычно фокусируются исключительно на SharePoint, а дизайнерам привычнее использовать Silverlight. Чтобы создать полезное приложение SharePoint, нужно понимать обе технологии. В этой статье я дам обзор по интеграции Silverlight с SharePoint 2010 и пройдусь по основам использования Silverlight в клиентском интерфейсе решений для SharePoint.

Silverlight и SharePoint

Первый шаг в работе с комбинацией Silverlight и SharePoint — подбор правильных инструментов. Visual Studio и Expression Blend рассчитаны на совместную работу, и, используя их, разработчик для Silverlight может создать отличное приложение, оперирующее данными из SharePoint.При этом от него не потребуется ни понимания SharePoint, ни даже его установки. Аналогично разработчик для SharePoint может интегрировать приложение Silverlight в SharePoint, ничего не зная о XAML-коде.

В этой статье я покажу, как создать простой веб-фрагмент Silverlight, который будет использовать клиентскую модель объектов SharePoint для Silverlight, чтобы извлекать данные из списка SharePoint. Этот веб-фрагмент также будет изолированным (sandboxed) приложением SharePoint, благодаря чему администраторы Site Collection смогут устанавливать его и управлять им. Кроме того, приложение будет работать под стандартными учетными записями SharePoint Online.

На рис. 1 показано, как будет выглядеть законченное приложение при выполнении в SharePoint.

Рисунок 1 Законченное приложение на основе Silverlight и SharePoint

Образцы данных SharePoint

Чтобы программисты для Silverlight и SharePoint могли работать независимо, в Silverlight потребуются образцы данных, основанные на данных SharePoint. Это даст программисту для Silverlight полную свободу в создании приложения, корректно взаимодействующего с SharePoint.

В Expression Blend имеется ряд средств для поддержки данных периода разработки и образцов данных (sample data). В этом примере я воспользуюсь образцом данных в формате XML. Это означает, что разработчик в SharePoint должен создать XML-файл, представляющий список SharePoint, с которым будет работать приложение. Вы можете создать этот файл с любой формой образцов данных, но намного облегчите себе жизнь, если их форма будет соответствовать той, которую будет возвращать SharePoint. Например, формы данных, возвращаемых с применением сущностей WCF Data Services и RESTful-сервисов ListData в SharePoint, отличаются от формы данных, возвращаемых при использовании клиентской модели объектов Silverlight.

В этом приложении я использую некоторые новые средства связывания с данными в Silverlight 4 и клиентской модели объектов SharePoint для Silverlight. Встроенного способа генерации образцов данных нет, поэтому вам придется написать простое консольное приложение, которое будет генерировать образец данных SharePoint. В данном случае я создал консольное приложение на Visual Basic, которое с помощью клиентской модели объектов Microsoft .NET Framework генерирует XML-документ из первых пяти элементов списка (рис. 2).

Рисунок 2 Консольное приложение, возвращающее XML-данные

Imports Microsoft.SharePoint.Client
Imports System.Text

Module Module1
  Sub Main()
    Dim context As New _
      ClientContext("http://intranet.contoso.com")
    Dim sampleListItems As ListItemCollection
    Dim sampleList As List = _
      context.Web.Lists.GetByTitle("Contacts")

    Dim qry As New Microsoft.SharePoint.Client.CamlQuery
    qry.ViewXml = "<View><RowLimit>5</RowLimit></View>"
    sampleListItems = sampleList.GetItems(qry)

    context.Load(sampleListItems)

    context.ExecuteQuery()

    'Build the Sample XML Data
    Dim SampleData = _
      <SharePointListItems></SharePointListItems>
    'Iterate through each row using Linq
    'and XML Literals
    For Each item In sampleListItems
      Dim sampleItem = <ListItem>
        <%= From fieldValue In item.FieldValues _
        Select <<%= fieldValue.Key %>>
        <%= fieldValue.Value %></> %>
        </ListItem>
      SampleData.Add(sampleItem)
    Next
    'Write the file to disk
    System.IO.File.AppendAllText( _
      "C:\SharePointSampleData.xml", _
      SampleData.ToString())
  End Sub
End Module

Получив файл SharePointSampleData.xml, вы сможете использовать его в Expression Blend как источник данных периода разработки.

Разработка с использованием образца данных

Располагая XML-файлом с образцом данных, можно открыть Expression Blend и создать новое приложение Silverlight 4.

В панели Data щелкните значок Create Sample Data в верхнем правом углу и выберите Import Sample Data from XML, затем откройте файл SharePointSampleData.xml. Кроме того, вы можете оставить блок помеченным, чтобы видеть образец данных в ходе выполнения приложения. В ином случае вы увидите эти данные только в Blend или дизайнере Visual Studio.

На рис. 3 показан список контактов (Contacts List). Клиентская модель объектов на самом деле возвращает словарь с 45 полями, поэтому на иллюстрации они видны не все (окно нужно прокручивать).

Рисунок 3 Образец списка контактов

Следующий шаг — создание окна списка, связанного с данными. В панели Data убедитесь, что выбран List Mode. Значок этого режима вы найдете в верхнем левом углу панели Data. Теперь укажите поля, которые должны появляться в окне списка. В данном случае я выбрал Title (на самом деле это имя) и LastName (фамилия). Перетащите поля из списка в рабочую область дизайнера. Expression Blend создаст окно списка и шаблон данных, связанный с полями через механизм привязки данных. Сместите окно списка на левую сторону рабочей области, чтобы освободить место для подробных сведений.

Создание подробных сведений, связанных с данными, осуществляется так же легко. Выберите Details Mode, щелкнув значок в верхнем левом углу панели Data. Укажите поля, которые должны появляться как поля подробных сведений (details). Перетащите их в рабочую область дизайнера. Expression Blend создаст каждое поле связанным с элементом, выбранным в окне списка. Если вы нажмете F5 и запустите приложение, то увидите, что окно списка заполняется образцом данных. Перемещая подсветку по элементам в списке, вы заметите, что показываемые справа подробные сведения меняются (рис. 4).

Рисунок 4 Работа над приложением в Expression Blend

Теперь у вас есть полнофункциональное приложение, связанное с образцом данных SharePoint через механизм привязки данных. Как дизайнер на Silverlight вы можете продолжить тестировать и полировать свое приложение, ничего не зная о SharePoint. В этом примере я проделал еще немного дизайнерской работы, упорядочил все поля и добавил тему Sketch из Silverlight Toolkit.

Веб-фрагмент Silverlight

На этом этапе разработчик для Silverlight может передать файл проекта разработчику для SharePoint. Это возможно потому, что Expression Blend и Visual Studio совместно используют одни и те же файлы проектов. Разработчик для SharePoint открывает проект в Visual Studio 2010 и видит все части приложения, поэтому он может работать над приложением в дизайнере Visual Studio (рис. 5).

Рисунок 5 Работа над приложением в Visual Studio

Первое, что понадобиться сделать разработчику для SharePoint, — добавить пустой проект SharePoint к существующему решению, содержащему проект Silverlight. Он использует этот проект SharePoint для развертывания файла приложения Silverlight (.xap) и создания веб-фрагмента Silverlight, которое будет выступать в роли хоста приложения Silverlight.

Visual Studio 2010 упрощает выполнение этих двух задач по сравнению с тем, когда вы создавали решения SharePoint в прошлом. Щелкните правой кнопкой мыши решение и выберите Add New Project. Перейдите к шаблонам SharePoint 2010 и выберите Empty SharePoint Project. В мастере New Project обязательно сохраните предлагаемый по умолчанию вариант создания проекта как изолированного проекта (sandboxed solution). Это лучший вариант; вдобавок он обеспечивает максимальную гибкость и безопасность развертывания. Кроме того, Silverlight прекрасно работает с изолированными решениями, потому что Silverlight выполняется на клиенте и не ограничивается столь сильно, как серверный код, выполняемый в изолированной программной среде (sandbox).

Хотя порядок на самом деле не имеет значения, лучше создать сначала веб-фрагмент. Тогда вы сможете вставить модуль, который будет развертывать XAP-файл Silverlight в веб-фрагменте. Это просто сохраняет четкость структуры проекта и облегчает его понимание по мере разрастания вашего решения.

Добавьте веб-фрагмент в свой проект SharePoint, щелкнув его правой кнопкой мыши и выбрав Add New Item. Выберите Web Part из папки шаблонов SharePoint 2010. В вашем проекте появится новый пустой веб-фрагмент.

Веб-фрагмент состоит всего из трех элементов. Первый — файл Elements.xml. Это файл решения SharePoint, описывающий элементы в какой-либо функции (feature).

Второй — файл определения веб-фрагмента с расширением .webpart. Этот файл развертывается в галерею веб-фрагментов SharePoint и определяет код для веб-фрагмента и всех его свойств.

Наконец, третий — файл кода. Все эти три файла помещаются в папку в структуре проекта.

И вот тут появляется кое-что интересное. Все эти файлы, добавленные в проект при создании нового веб-фрагмента, нужны, только если вы разрабатываете веб-фрагмент с нуля. В данном случае вам не требуются все автоматически сгенерированные файлы, потому что с SharePoint поставляется веб-фрагмент Silverlight. И здесь вы опираетесь на этот существующий веб-фрагмент. Для этого вам достаточно сделать так, чтобы файл .webpart указывал на код веб-фрагмента Silverlight и включал все его свойства.

Создайте копию встроенного файла веб-фрагмента Silverlight (с расширением .webpart). На самом деле это можно сделать автоматически. В SharePoint добавьте веб-фрагмент Silverlight на любую страницу. Находясь в режиме проектирования (design mode), щелкните раскрывающееся меню веб-фрагмента и выберите Export. Это позволяет сделать копию файла .webpart, которую вы можете добавить в свой проект. Теперь просто измените несколько свойств, таких как путь к приложению Silverlight, заголовок, описание и др. Кроме того, поскольку вы теперь используете код для веб-фрагмента из встроенной библиотеки Microsoft.SharePoint.dll, вам больше не нужен файл с расширением .cs для этого веб-фрагмента. Можете просто удалить его. На рис. 6 показан пример того, как будет выглядеть ваш файл .webpart после его добавления в проект.

Рисунок 6 Фрагмент содержимого файла .webpart по умолчанию

<webParts>
  <webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
    <metaData>
      <type name="Microsoft.SharePoint.WebPartPages.SilverlightWebPart, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />
      <importErrorMessage>$Resources:core,ImportErrorMessage;
      </importErrorMessage>
    </metaData>
    <data>
      <properties>
        <property name="HelpUrl"
                  type="string" />
        <property name="AllowClose"
                  type="bool">True</property>
        <property name="ExportMode"
                  type="exportmode">All</property>
        <property name="Hidden"
                  type="bool">False</property>
        <property name="AllowEdit"
                  type="bool">True</property>
        <property name="Description"
                  type="string">Contacts Web Part</property>
        ...
        <property name="Height"
                  type="unit">480px</property>
        <property name="ChromeType"
                  type="chrometype">None</property>
        <property name="Width"
                  type="unit">640px</property>
        <property name="Title"
                  type="string">Contacts Demo</property>
        <property name="ChromeState"
                  type="chromestate">Normal</property>
        <property name="TitleUrl"
                  type="string" />
        <property name="Url"
                  type="string">
        ~site/_catalogs/masterpage/SilverlightApplication1.xap
        </property>
        <property name="WindowlessMode"
                  type="bool">True</property>
      </properties>
    </data>
  </webPart>
</webParts>

Развертывание Silverlight в SharePoint

На этом этапе у вас есть полнофункциональное приложение Silverlight и веб-фрагмент, выступающий в роли хоста этого приложения. Теперь нужно создать модуль SharePoint, чтобы развернуть XAP-файл Silverlight в SharePoint.

В Visual Studio 2010 для этого предусмотрена встроенная функциональность, так что задача соединения компонентов достаточно прямолинейна. Щелкните правой кнопкой мыши папку своего веб-фрагмента и выберите Add New Item. Выберите Module в шаблонах SharePoint 2010.

Новая модель по умолчанию содержит файл elements.xml — точно такой же, который вы добавили в веб-фрагмент. Он также содержит файл sample.txt. Удалите его — он вам не понадобится.

Есть особый способ добавления ссылки на приложение Silverlight в ваш проект. Выберите папку Module в Solution Explorer и просмотрите свойства. Щелкните свойство Project Output References, чтобы открыть одноименный диалог. В этом диалоге нажмите кнопку Add, чтобы добавить новую ссылку. В раскрывающемся меню Project Name укажите проект приложения Silverlight. Выберите Ele­ment File в Deployment Type и закройте диалог.

Вот вы и добавили ссылку на приложение Silverlight. Этот вариант работает во многом подобно ссылкам на стандартные проекты, где проект Silverlight будет компилироваться до проекта SharePoint и результат компиляции проекта Silverlight (файл .xap) будет копироваться в проект SharePoint и компилироваться в файл решения SharePoint (файл .wsp).

Последний шаг — задать путь для развертывания приложения Silverlight. Это местоположение, в которое будет скопирован файл .xap и откуда веб-фрагмент будет загружать приложение.

Откройте файл elements.xml в папке Module. Задайте свойство URL файлового элемента (file element) таким же, как и свойство URL в файле .webpart. В данном случае вы будете развертывать его в галерею эталонных страниц (master page gallery), поэтому присвойте такое значение:

~site/_catalogs/masterpage/
  SilverlightApplication1.xap

Заметьте, что тильда в начале пути является специальным символом подстановки в SharePoint, указывающим корень сайта.

Теперь разверните решение в SharePoint, чтобы проверить, все ли настроено корректно. Укажите проект SharePoint как стартовый по умолчанию и нажмите F5. Visual Studio скомпилирует и упакует решение. Хотя Visual Studio откроет сайт SharePoint и подключит отладчик, вам все равно понадобиться добавить веб-фрагмент на страницу. Разрабатывая свое решение, я обнаружил, что самый простой способ сделать это — добавить веб-фрагмент в новую страницу сайта (Site Page).

Клиентская модель объектов

Все готово, и вы можете связывать приложение Silverlight с реальными данными SharePoint. SharePoint 2010 включает клиентские модели объектов для CLR, Silverlight и ECMAScript. Они обеспечивают простой доступ к данным SharePoint (например, спискам и библиотекам) с использованием знакомой объектной модели.

В данном конкретном случае вы создаете приложение Silverlight, поэтому нужно добавить ссылку на клиентскую модель объектов для Silverlight. Эта модель состоит из двух файлов:Microsoft.SharePoint.Client.Silverlight.dll и Microsoft.SharePoint.Client.Silverlight.Runtime.dll. Они находятся в каталоге C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin\.

Добавив ссылки, вы можете писать код, извлекающий контакты из списка Contacts. Начните со вставки в самое начало MainPage.xaml.cs выражения using для Microsoft.SharePoint.Client. Затем определите пару полей уровня класса для хранения возвращенных результатов. Кроме того, вам понадобиться обрабатывать событие загруженной страницы (page-loaded event), которое используется для загрузки данных списка:

public partial class MainPage : UserControl {
  ClientContext ctx;
  ListItemCollection contactsListItems;

  public MainPage() {
    InitializeComponent();
    this.Loaded += MainPage_Loaded;
  }

  void MainPage_Loaded(
    object sender, RoutedEventArgs e) {
    LoadList();
  }
}

Далее реализуйте метод LoadList для извлечения данных из SharePoint. Во-первых, получите ссылку на текущий клиентский контекст. Контекст для узла, в который загружен веб-фрагмент, возвращает статический метод ClientContext.Current. Затем вызовите GetByTitle, чтобы получить ссылку на список Contacts. Метод Load добавит ваш запрос в общий. Наконец, вызовите ExecuteQueryAnsc, чтобы выдать окончательный запрос к SharePoint Server:

void LoadList(){
  ctx = ClientContext.Current;

  if (ctx != null) { //null if not in SharePoint
    List contactsList =
      ctx.Web.Lists.GetByTitle("Contacts");
    contactsListItems =
      contactsList.GetItems(
      CamlQuery.CreateAllItemsQuery());

    ctx.Load(contactsListItems);
    ctx.ExecuteQueryAsync(
      ContactsLoaded, ContactsLoadedFail);
  }
}

Вызовы, адресованные серверу, выдаются в Silverlight асинхронно. Метод Exe­cute­­QueryAsync принимает два делегата обратного вызова:один вызывается в случае успеха, второй — неудачи. В методе обратного вызова ContactsLoaded вы связываете результаты через механизм привязки данных с XAML, которые были созданы дизайнером Silverlight в начале этой статьи. В обратном вызове в случае успеха вам нужно лишь записать в свойство ItemsSource окна списка набор контактов, возвращенных клиентской моделью объектов. Кромет ого, обратный вызов происходит в фоновом потоке, поэтому вам потребуется обновлять это свойство внутри метода BeginInvoke, принадлежащего Dispatcher:

// ContactsLoaded
void ContactsLoaded(object sender,
  ClientRequestSucceededEventArgs args) {
  //call back on the UI thread
  this.Dispatcher.BeginInvoke(() => {
    ContactsListBox.ItemsSource = contactsListItems;
  });
}

Реализацию обратного вызова на случай неудачи я оставляю вам.

Перед запуском приложения нужно сделать еще одно: вы должны сменить способ, которым Silverlight выполняет связывание с источником данных. Помните, в начале статьи я создал XML-файл, представляющий данные от SharePoint, но это не совсем те данные, так как клиентская модель объектов SharePoint на самом деле возвращает набор значений словарных полей.

Одна из новых особенностей Silverlight 4 — возможность связывания с индексаторами. То есть вы можете осуществить через механизм привязки данных связывание со значениями словаря, возвращаемыми клиентской моделью объектов, используя имя значения ключа как строку в команде связывания. Увы, хорошего способа оперировать с этими сложными образцами данных на основе словаря нет, но можно достаточно легко менять привязки с помощью средств поиска и замены в Visual Studio. Например, вам нужно заменить Text="Binding Title" на Text="Binding Path=FieldValues[Title]". И сделать это для всех полей. Я включил в примеры кода для этой статьи регулярное выражения для такого переключения привязок.

Сменив все привязки на привязку Silverlight 4 к индексатору, вы готовы запустить приложение. Перейдите к странице на узле (сайте), которую вы создали для хостинга приложения Silverlight. Она должна выглядеть как на рис. 1 в начале статьи.

Динамически загружаемая клиентская модель объектов

На этом этапе ваше приложение закончено, но я хочу показать вам еще одну вещь. В финальной версии SharePoint есть изменение по сравнению с бета-версией. Когда я создал ссылку на клиентскую модель объектов для Silverlight переходом к файлам в диалоге Add References в Visual Studio, то по умолчанию Visual Studio включил в скомпилированный XAP-пакет эти два файла. А это увеличивает размер вашего пакета Silverlight на 407 Кб.

Более эффективный вариант — динамически загружать эти сборки в период выполнения. Это позволяет браузеру кешировать эти файлы, уменьшая размер вашего приложения и время загрузки и в то же время увеличивая скорость его работы.

Со времен бета-версии SharePoint упаковывал два файла клиентской модели объектов в один XAP-файл Microsoft.SharePoint.Client.xap. Этот файл находится в том же каталоге, что и другие файлы клиентской модели объектов:C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin . Вам все равно потребуется добавить ссылку на файлы клиентской модели объектов, так как это обеспечивает необходимую поддержку IntelliSense и компиляции. Но вы должны выбрать все файлы в папке ссылок своего приложения Silverlight и установить свойство Copy Local в false. Такая настройка предотвратит добавление этих файлов средой Visual Studio в ваш XAP-пакет.

Кроме того, для динамической загрузки сборок клиентской модели объектов надо добавить соответствующий код. Это очень универсальный код, и его можно использовать в любом приложении Silverlight в любом XAP-пакете с минимальными изменениями. Начните с изменения события окончания загрузки страницы для вызова кода, который скачивает и загружает сборки. В данном примере вы передаете делегат обратного вызова в метод LoadList. Тем самым, когда сборки загружены и готовы к использованию, вы загружаете данные списка из SharePoint, например:

void MainPage_Loaded(
  object sender, RoutedEventArgs e) {
  LoadClientOM loadClientOM =
    new LoadClientOM(delegate() { LoadList(); });
  loadClientOM.Run();
}

Добавьте в свой проект новый файл класса с именем LoadClientOM.cs и включите в него код, показанный на рис. 7. Этот код использует WebClient для скачивания XAP-пакета из /_layouts/clientbin/Microsoft.SharePoint.Client.xap. Как только пакет скачан, вы загружаете каждую сборку из этого пакета.

Рисунок 7 Загрузка Microsoft.SharePoint.Client.xap

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.IO;
using System.Windows.Resources;
using System.Reflection;

namespace SilverlightApplication1 {
  public class LoadClientOM {
    private bool isDownloaded = false;
    private Action action;

    public LoadClientOM(Action action) {
      this.action = action;
    }

    public void Run() {
      WebClient client = new WebClient();
      client.OpenReadCompleted +=
        new OpenReadCompletedEventHandler(
        client_OpenReadCompleted);
      client.OpenReadAsync(new Uri(
        "/_layouts/clientbin/Microsoft.SharePoint.Client.xap",
        UriKind.Relative));
    }

    void client_OpenReadCompleted(object sender,
      OpenReadCompletedEventArgs e) {
      Stream assemblyStream;
      AssemblyPart assemblyPart;

      assemblyStream = Application.GetResourceStream(
        new StreamResourceInfo(e.Result, "application/binary"),
        new Uri("Microsoft.SharePoint.Client.Silverlight.Runtime.dll",
        UriKind.Relative)).Stream;
      assemblyPart = new AssemblyPart();
      Assembly b = assemblyPart.Load(assemblyStream);

      assemblyStream = Application.GetResourceStream(
        new StreamResourceInfo(e.Result, "application/binary"),
        new Uri("Microsoft.SharePoint.Client.Silverlight.dll",
        UriKind.Relative)).Stream;
      assemblyPart = new AssemblyPart();
      Assembly a = assemblyPart.Load(assemblyStream);

      this.isDownloaded = true;

      if (action != null) {
        action();
      }
    }
  }
}

Снова запустите приложение. Вы увидите, что оно выглядит точно так же, как и раньше, но теперь клиентская модель объектов для Silverlight загружается с сервера динамически в период выполнения. В столь простом приложении разница окажется незаметной, но все равно скорость его работы при динамической загрузке сборок будет выше.