В этой статье мы научимся:
  • Создавать WCF сервис и бизнес объекты для обработки данных
  • Создавать форму на Silverlight 4 для отправки данных.

Изучать мы будем на примере: «Рисование и отправка поздравительных открыток другу»
Картинки

Подготовка


Для работы с Silverlight 4 в Visual Studio 2010 нужно скачать и установить Silverlight 4 Tools. Expression Blend 4 сразу умеет работать с Silverlight 4, а также в нем есть всякие интересные примеры. После установки Silverlight 4 Tools в VS2010 появится возможность открывать проекты SL4 и станет возможно создание и редактирование приложений SL4 в дизайнере.

Когда создается приложение, которое работает с данными, важно начать с создания модели данных, с которыми приложение собирается работать. Мы будем использовать InkPresenter в качестве панели для рисования открыток.

Создание проекта


Мы создадим бизнес объект, который будет использоваться и Silverlight частью нашего приложения и в ASP.NET. В завершении мы создадим бизнес объект в ASP.NET части, который определит контракт данных и его предоставим WCF сервису.

Открываем студию и создаем проект Silverlight Application.

image

Мастер создания проекта предложит создать нам сайт для размещения Silverlight приложения.

image

Соглашаемся. И в итоге получается вот такой вот проект:

image

Создание модели данных


Атрибуты [DataContract] и [DataMember] будут использоваться WCF для сериализации и передачи данных. Без этих атрибутов не будет WCF. Для того, чтобы получить доступ к ним– добавляем в проект ASP.NET ссылку на сборку System.Runtime.Serialization. По умолчанию будет использоваться System.Runtime.Serialization.DataContractSerializer для сериализации классов контракта данных в XML. В .NET есть классы для сериализации данных в формат JSON.

Создаем класс PostCard для WCF сервиса:

using System.Runtime.Serialization;

namespace PostCardSender.Web
{
  /// <summary>
  /// Поздравительная открытка
  /// </summary>
  [DataContract]
  public class PostCard
  {
    /// <summary>
    /// Имя получателя открытки
    /// </summary>
    [DataMember]
    public string Name { get; set; }

    /// <summary>
    /// Email получается
    /// </summary>
    [DataMember]
    public string Email { get; set; }

    /// <summary>
    /// Рисунок из черточек кистью или ручкой
    /// </summary>
    [DataMember]
    public CardStroke[] Strokes { get; set; }
  }

  /// <summary>
  /// Штрих (черта)
  /// </summary>
  [DataContract]
  public class CardStroke
  {
    /// <summary>
    /// Ширина
    /// </summary>
    [DataMember]
    public double Width { get; set; }

    /// <summary>
    /// Высота
    /// </summary>
    [DataMember]
    public double Height { get; set; }

    /// <summary>
    /// Точки
    /// </summary>
    [DataMember]
    public StrokePoint[] Points { get; set; }
  }

  /// <summary>
  /// Точка в штрихе
  /// </summary>
  [DataContract]
  public class StrokePoint
  {
    /// <summary>
    /// X координата
    /// </summary>
    [DataMember]
    public double X { get; set; }

    /// <summary>
    /// Y координата
    /// </summary>
    [DataMember]
    public double Y { get; set; }
  }
}

* This source code was highlighted with Source Code Highlighter.


Создание WCF сервиса


Windows Communication Foundation предоставляет простой способ создания приложений, использующих «сервис ориентированную программную модель».

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

Когда создается WCF сервис, обычно определяется интерфейс и атрибутами описывающий операции сервиса. Использование интерфейса позволяет разделить реализацию и контракт. Это обычная практика создания WCF сервисов.

Создаем WCF сервис PostCardService

image

Определяем интерфейс нашего сервиса. Для начала он будет содержать всего один метод void SendPostCard(PostCard card).

using System.ServiceModel;

namespace PostCardSender.Web
{
  // NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IPostCardService" in both code and config file together.
  [ServiceContract]
  public interface IPostCardService
  {
    /// <summary>
    /// Отправить открытку другу
    /// </summary>
    [OperationContract]
    void SendPostCard(PostCard card);
  }
}

* This source code was highlighted with Source Code Highlighter.


PostCardService.svc.cs будет содержать реализацию интерфейса. Не будем тянуть с ней, и сразу напишем небольшой кусочек кода.

using System.Xml;

namespace PostCardSender.Web
{
  // NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "PostCardService" in code, svc and config file together.
  public class PostCardService : IPostCardService
  {
    #region IPostCardService Members

    public void SendPostCard(PostCard card)
    {
      if (card == null)
        return;

      ///Можно записывать в базу, но для упрощения сервиса будем писать в xml файл.
      string fileName = @"D:\Projects\PostCardSender\PostCardSender.Web\App_Data\{0}.xml";

      XmlWriter writer = XmlWriter.Create(string.Format(fileName, card.Name));
      writer.WriteStartDocument();

      writer.WriteStartElement("user");
      writer.WriteAttributeString("name", card.Name);
      writer.WriteAttributeString("email", card.Email);

      writer.WriteStartElement("strokes");
      if (card.Strokes != null && card.Strokes.Length > 0)
      {
        foreach (CardStroke stroke in card.Strokes)
        {
          writer.WriteStartElement("stroke");

          writer.WriteAttributeString("width", stroke.Width.ToString());
          writer.WriteAttributeString("height", stroke.Height.ToString());

          if (stroke.Points != null && stroke.Points.Length > 0)
          {
            writer.WriteStartElement("points");
            foreach (StrokePoint point in stroke.Points)
            {
              writer.WriteStartElement("point");
              writer.WriteAttributeString("x", point.X.ToString());
              writer.WriteAttributeString("y", point.Y.ToString());
              writer.WriteEndElement();
            }
            writer.WriteEndElement();
          }

          //stroke
          writer.WriteEndElement();
        }
      }
      //end strokes
      writer.WriteEndElement();

      //end user
      writer.WriteEndElement();

      writer.WriteEndDocument();
      writer.Flush();
      writer.Close();
    }

    #endregion
  }
}

* This source code was highlighted with Source Code Highlighter.


Завершив создание сервиса, смотрим что отвечает сам сервис (ПКМ на сервисе View in Browser)

image

Silverlight


В проекте Silverlight добавляем ссылку на сервис (Add Service Reference…)

image

Сначала нажимаем Discover – мастер ищет сервисы в решении. VS найдет сервис PostCardService. Изменяем имя namespace и добавляем ссылку. VS добавила новые ссылки и файлы и создала ServiceReferences.ClientConfig, в котором находятся настройки привязки сервиса.

Создание панели рисования открытки

В этом примере будет очень простой рисовальщик открыток. Будем использовать Grid как основную панель.

<UserControl x:Class="PostCardSender.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400" Width="600" Height="400" BorderBrush="#FF700404" BorderThickness="1">

  <Grid x:Name="LayoutRoot" Background="White">
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <StackPanel VerticalAlignment="Top" Grid.Column="1">
      <TextBlock Text="Имя" Margin="12,7,7,2" FontSize="16" />
      <TextBox x:Name="textBoxName" TextWrapping="Wrap" Width="180" Margin="7,0,7,7" FontSize="16" Foreground="#FF700404" FontWeight="Bold" />
      <TextBlock TextWrapping="Wrap" Text="Email" d:LayoutOverrides="Width" Margin="12,7,7,2" FontSize="16" />
      <TextBox x:Name="textBoxEmail" TextWrapping="Wrap" Width="180" Margin="7,0,7,7" FontSize="16" Foreground="#FF700404" FontWeight="Bold" />
      <Button x:Name="buttonSend" Content="Отправить!" Margin="5,15,5,0" FontSize="26.667" Click="ButtonSendClick" />
    </StackPanel>
    <Border BorderBrush="#FF0010FF" BorderThickness="1" Margin="5">
      <InkPresenter x:Name="inkPostCard" MouseLeftButtonDown="InkPostCardMouseLeftButtonDown" MouseLeftButtonUp="InkPostCardMouseLeftButtonUp" MouseMove="InkPostCardMouseMove" Background="#FFCEF9FF" />

    </Border>

  </Grid>
</UserControl>

* This source code was highlighted with Source Code Highlighter.


image

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

image

Нажав кнопку «Отправить» и получили положительное сообщение, смотрим что сохранилось на сервере. А там все наши данные в xml формате.

image

Резюме


Теперь можно спокойно создавать сервисы WCF с использование Silverlight и встраивать в свои сайты и корпоративные бизнес приложения. Silverlight является отличным помощником для создания больших корпоративных порталов.

Литература