SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Infragistics NetAdvantageチュートリアル(AD)

Silverlight/WPFでデータバインディングを利用しOutlookライクなスケジュールを構築する その3
WCF サービス 接続編

Silverlight/WPFでOutlookライクなアプリ構築(3)

  • このエントリーをはてなブックマークに追加

 NetAdvantage for Silverlight LOB / NetAdvantage for WPF LOB にはスケジュールを管理するために活用できる、xamSchedule コントロールが含まれています。この xamSchedule コントロールを活用することで Microsoft Outlook ライクなスケジュール表示を行うことが可能です。今回はデータ ベースへの接続を行えるように WCF サービスを利用し接続を行います。

  • このエントリーをはてなブックマークに追加

はじめに

 NetAdvantage for Silverlight LOB / NetAdvantage for WPF LOB にはスケジュールを管理するために活用できる、xamSchedule コントロールが含まれています。この xamSchedule コントロールを活用することで Microsoft Outlook ライクなスケジュール表示を行うことが可能です。今回はデータ ベースへの接続を行えるように WCF サービスを利用し接続を行います。なお、xamSchedule の特徴やデータ構造についてはその1を参照してください。

対象読者

 Visual Basic 2010, Visual C# 2010, Expression Blend 4, XAML を使ってプログラミングをしたことのある人。XAML プラットフォームにおいてのデータ バインディングについて基本的な理解を持っている人。

必要環境

 Visual Basic 2010 あるいは Visual C# 2010, Expression Blend 4 でプログラムが作れる環境。サンプルは Visual Studio 2010 Ultimate, Silverlight 4, WPF4 で作成しています。また、Windows 7 Ultimate 64bit 版, SQL Server 2008 R2 64bit 版において動作を検証しています。

プログラム実行時の注意環境

Silverlight 4の場合

 あらかじめ Silverlight 4 Tools for Visual Studio 2010 がインストールされていることを確認してください。インストーラーはこちらより入手可能です。サンプル ソリューションを Visual Studio 2010 または Expression Blend 4 で開き実行します。

WPF4の場合

 あらかじめ、.NET Framework 4 ランタイムがインストールされていることを確認してください(Visual Studio 2010 セットアップ時に自動的にインストールされます)。単体のランタイムはこちらより入手可能です。

コンポーネントのインストールならびに製品ラインナップ

 はじめて NetAdvantage for Silverlight LOB, NetAdvantage for WPF LOB を使用する場合は、事前にソフトウェアをインストールする必要があります。インフラジスティックス社の Web ページからインストーラーをダウンロードしてください。両プラットフォームを含め、すべてのプラットフォーム対応版をインストールする場合、NetAdvantage Ultimateを選択し、こちらからダウンロードを行います(サイトへの登録が必要になります)。NetAdvantage Ultimate 2010 Volume 3 Complete はサンプル、ヘルプ全てを含んでおり、NetAdvantage Ultimate 2010 Volume 3 Full はコントロールのみ含まれています。この製品は有償ですが、20日間全ての機能を使用できるトライアル版として利用が可能です。

NetAdvantage for Silverlight LOB, NetAdvantage for WPF LOB について

 Silvelright 版 は 2009 年に日本初の Silverlight 対応コンポーネントとして、WPF 版は 2007 年に世界初の WPF 対応コンポーネントとして発売が開始され、原稿執筆時点での日本語版最新バージョンは 2010 Volume 3 となります。収録されているコントロールの特徴として、高機能、高パフォーマンスを実現したデータグリッド、ツリー、チャート、そして今回紹介するスケジュール コントロールを備え、リッチクライアント、RIA 開発の効率を高めます。また、2010 Volume 2 より両プラットフォームでのソースコード統合が図られ、プラットフォーム間でのポータビリティが向上しました。製品サンプルについてはこちらからオンラインで確認することも可能です。

xamSchedule データ構造を SQL Server 2008 R2 環境にアタッチ

 まず、その 1 で解説したデータ構造を SQL Server 2008 R2 環境で作成する必要があります。今回はサンプル DB、並びにテーブル作成のスクリプトを用意していますので、DB をアタッチ、もしくはスクリプトを実行し DB を作成してください。DB では下記クラスを表現するためのテーブル構造を構築しています。

図1 スケジュール データをアタッチ
図1 スケジュール データをアタッチ

ソリューションを Visual Studio で開き、サービスを作成

 まず、前回の記事から xamSchedule_2.zip ソリューションをダウンロードし、 Visual Studio で開きます。xamSchedule_SL.Web プロジェクトを開き、[新しい項目] - [データ] と選択し、ADO.NET Entity Data Model を "XamScheduleDataModel" と名付け、追加します。

図2 ADO.NET Entity Data Model を作成
図2 ADO.NET Entity Data Model を作成

 ウイザードが表示されるので、[データベースから作成] を選択します。

図3 モデルのコンテンツの選択
図3 モデルのコンテンツの選択

 [新しい接続] を選択し、接続のプロパティを設定します。

図4 接続プロパティの設定
図4 接続プロパティの設定

 接続プロパティを設定した後、エンティティに名前を付けて Web.Config に保存します。今回は "xamSchedule_SampleEntities" と名付けています。

図5 エンティティが定義される
図5 エンティティが定義される

 Entity Data Model ウイザード ではこのモデルに追加するテーブルを選択します。

図6 モデルに追加するテーブルを選択する
図6 モデルに追加するテーブルを選択する

 これでエンティティ データ モデルの作成が完了しました。xamScheduleDataModel.edmx を開くとエンティティを確認することができます。

図7 エンティティ データ モデル
図7 エンティティ データ モデル

WCF サービスの実装

 xamSchedule にはクライアントにスケジュール データを提供するための WCF サービスクラスを 2 個用意しています。用途に合わせて選択してください。

クラス 概要
WcfListConnectorServiceSingle 1 度のみ作成されるサービスインスタンス。クライアントからのリモート コールはサーバーの同じスレッドで動作するためパフォーマンスの低下を防げる。ただし、接続クライアント数が多い場合はボトルネックが発生し、それがパフォーマンス低下につながる可能性がある
WcfListConnectorServiceMulti 抽象クラス。クライアントからのリモート コールごとに新しいインスタンスが作成され、サーバーの異なるスレッドで動作する。クライアント接続数が多い場合にボトルネックを発生しにくい。ただし、毎回インスタンスを作成するので、クライアント数が多くない場合にはパフォーマンスは Single に比べ低くなる

 この記事では WcfListConnectorServiceSingle を利用します。そのため、xamSchedule_SL.Web プロジェクトに次のアセンブリ参照を追加します。

  • Infragistics4.Services.Schedules.WcfConnectorService.v10.3.dll
図8 アセンブリ参照の追加
図8 アセンブリ参照の追加

 次に、[新しい項目の追加] - [Silverlight] を選択し、Silverlight 対応 WCF サービス を "XamScheduleWCFService" と名付け作成します。

図9 Silverlight 対応 WCF サービスの追加
図9 Silverlight 対応 WCF サービスの追加

 作成された XamScheduleWCFService.svc.cs を開き、WcfListConnectorServiceSingle を継承します。また、ASP.NET 互換となるように設定します。このクラスではエンティティのマッピングを行っています。

コード1 サービスの実装
using System.ServiceModel.Activation;
using Infragistics.Services.Schedules;
using Infragistics.Controls.Schedules.Services;

namespace xamSchedule_SL.Web
{
    // ASP.NET 互換を設定
    [AspNetCompatibilityRequirements(RequirementsMode=AspNetCompatibilityRequirementsMode.Allowed)]
    public class XamScheduleWCFService : WcfListConnectorServiceSingle
    {
        // スケジュール エンティティ
        private xamSchedule_SampleEntities entities;

        public XamScheduleWCFService()
        {
            entities = new xamSchedule_SampleEntities();

            // リソースの設定
            this.ResourceItemsSource = entities.Resources;
            this.ResourcePropertyMappings =
                    new ResourcePropertyMappingCollection();
            this.ResourcePropertyMappings.UseDefaultMappings = true;

            // リソースカレンダーの設定
            this.ResourceCalendarItemsSource = entities.ResourceCalendars;
            this.ResourceCalendarPropertyMappings =
                    new ResourceCalendarPropertyMappingCollection();
            this.ResourceCalendarPropertyMappings.UseDefaultMappings = true;

            // 予定の設定
            this.AppointmentItemsSource = entities.Appointments;
            this.AppointmentPropertyMappings =
                    new AppointmentPropertyMappingCollection();
            this.AppointmentPropertyMappings.UseDefaultMappings = true;
        }
    }
}

 サービスの実装を完了し、Web.Config の contract を修正します。

コード2 Web.Config の修正
<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0">
      <assemblies>
        <add assembly="System.Data.Entity, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />
      </assemblies>
    </compilation>
  </system.web>
  <connectionStrings>
    <add name="xamSchedule_SampleEntities" connectionString="metadata=res://*/XamScheduleDataModel.csdl|res://*/XamScheduleDataModel.ssdl|res://*/XamScheduleDataModel.msl;provider=System.Data.SqlClient;provider connection string=&quot;Data Source=.\SQLEXPRESS;Initial Catalog=xamSchedule_Sample;Integrated Security=True;MultipleActiveResultSets=True&quot;" providerName="System.Data.EntityClient" />
  </connectionStrings>
  <system.serviceModel>
    <behaviors>
      <serviceBehaviors>
        <behavior name="">
          <serviceMetadata httpGetEnabled="true" />
          <serviceDebug includeExceptionDetailInFaults="false" />
        </behavior>
      </serviceBehaviors>
    </behaviors>
    <bindings>
      <customBinding>
        <binding name="xamSchedule_SL.Web.XamScheduleWCFService.customBinding0">
          <binaryMessageEncoding />
          <httpTransport />
        </binding>
      </customBinding>
    </bindings>
    <services>
      <!-- コントラクトを Infragistics.Services.Schedules.IWcfListConnectorService に修正-->
      <service name="xamSchedule_SL.Web.XamScheduleWCFService">
        <endpoint address="" binding="customBinding" bindingConfiguration="xamSchedule_SL.Web.XamScheduleWCFService.customBinding0"
          contract="Infragistics.Services.Schedules.IWcfListConnectorService" />
        <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" />
      </service>
    </services>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true"
      multipleSiteBindingsEnabled="true" />
  </system.serviceModel>
</configuration>

 XamScheduleWCFService.svc をブラウザで開き、下記のような画面が出力されることを確認します。

図10 サービスの動作を確認
図10 サービスの動作を確認

Silverlight アプリケーション ソリューションでサービスを使用

 xamSchedule_SL プロジェクトでサービスを使用する場合、参照設定から [サービス参照の追加] を選択します。先ほど作成したサービスが表示されますので、サービスの名前空間を "XamScheduleWCFService" とし、追加します。

図11 サービスの参照を追加
図11 サービスの参照を追加

 プロジェクトに ServiceReferences.ClientConfig ファイルが追加され、こちらに設定を記述することができます。この設定の中で、コントラクトを修正します。

コード3 ServiceReference.ClientConfig を修正
<configuration>
    <system.serviceModel>
        <bindings>
            <customBinding>
                <binding name="CustomBinding_IWcfListConnectorService">
                    <binaryMessageEncoding />
                    <httpTransport maxReceivedMessageSize="2147483647" maxBufferSize="2147483647" />
                </binding>
            </customBinding>
        </bindings>
        <client>
          <!-- contract をWcfListConnectorServiceSL.IWcfListConnectorServiceと設定 -->
            <endpoint address=http://localhost:2823/XamScheduleWCFService.svc
                binding="customBinding" bindingConfiguration="CustomBinding_IWcfListConnectorService"
                contract="WcfListConnectorServiceSL.IWcfListConnectorService"
                name="CustomBinding_IWcfListConnectorService" />
        </client>
    </system.serviceModel>
</configuration>

 次に、MainPage.xaml.cs を開き、その1で設定したコードによる予定追加部分を削除します。

コード4 MainPage.xaml.cs
using System.Windows.Controls;

namespace xamSchedule_SL
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

 MainPage.xaml に追加されているコントロールをすべて削除し、新たに XamMonthView, XamScheduleDataManager, WcfListDataConnector を追加します。

コード5 MainPage.xaml
<UserControl x:Class="xamSchedule_SL.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" 
    xmlns:ig="http://schemas.infragistics.com/xaml">
    <Grid>
        <ig:XamMonthView Name="xamMonthView1" />
        <ig:XamScheduleDataManager Name="xamScheduleDataManager1" />
        <ig:WcfListScheduleDataConnector Name="wcfListScheduleDataConnector1" />
    </Grid>
</UserControl>

 XamMonthView と XamScheduleDataManager を連結します。

コード6 DataManager の接続
<ig:XamMonthView Name="xamMonthView1" 
                    DataManager="{Binding ElementName=xamScheduleDataManager1}"/>

 XamScheduleDataManager と WcfListScheduleDataConnector を連結します。また、今回はリソース ID をあらかじめ定義しておきます。

コード7 DataConnector の接続
<ig:XamScheduleDataManager Name="xamScheduleDataManager1" 
                   DataConnector="{Binding ElementName=wcfListScheduleDataConnector1}"
                   CurrentUserId="R0001" />

 最後に WcfListScheduleDataConnector にエンドポイント設定名やデータ取得間隔を指定します。

コード8 コネクターの設定
<ig:WcfListScheduleDataConnector Name="wcfListScheduleDataConnector1" 
EndpointConfigurationName="CustomBinding_IWcfListConnectorService"
PollingInterval="00:00:30"
PollingMode="Detailed" />

 すべてが正しく設定されていると、実行時にDB からスケジュールデータを取得し、表示することが可能になります。

図12 データ ベースのスケジュール データを表示
図12 データ ベースのスケジュール データを表示

まとめ

 今回は WCF サービスを構築し、データ ベースからスケジュールデータを取得する方法をご紹介しました。このサンプルでは表示のみの機能を有効にしていますが、XamScheduleDataManager において、追加、削除、更新などを有効にし、データをサーバーへコミットさせる仕組みを実装することで、標準的なスケジュール機能を実現できます。ぜひ、試してみてください。また、筆者の Blog において今後いろいろな実装例をご紹介する予定になっていますので、こちらも併せて参照してください。

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5677 2011/01/05 14:28

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング