Microsoft Visual Studio 2010 で Report Sharp Shooter for Silverlight を使って簡単な Web アプリケーションを作成する方法

基本的な使い方

目次

はじめに

製品の必要条件

Web アプリケーションの作成方法

終わりに

はじめに

このユーザーマニュアルの目的は、Report Sharp Shooter for Silverlight を使用するための主要なポイントを示し、このコンポーネントを使用するための情報を提供することです。Report Sharp Shooter for Silverlight を使用して Web アプリケーションを作成する方法を順を追って説明します。サービスの作成と設定方法、レポートのデザイン、そして最後にアプリケーションのページにレポートビューアを統合する方法がわかります。

サンプルプロジェクトを実行する際の注意点:
ソリューションに2つのプロジェクトがあり、実行するだけでは片方のプロジェクトだけしかビルドされず白紙で表示されます。最新の状態で実行するには、ソリューションをビルドしてから実行してください。

製品の必要条件

サンプルを動作させるには、コンピュータに次のソフトウェアがインストールされていなければなりません。

  • Visual Studio 2010 製品版(※ Express 版では作成できません。)
  • .Net Framework 4.0
  • ASP.Net 4.0
  • Silverlight 4.0
  • Silverlight Tools for VisualStudio 2010(日本語版)
  • Silverlight 4 toolkit(April 2010 など)
  • Report Sharp Shooter for Silverlight 4J

Web アプリケーションの作成方法
(※ 画面は C# のもので説明していますが、基本的な操作は VB.NET でも同様です。後述するコード例では、C# と VB.NET 両方のコードを掲載しています。)

手順1. 新しい Silverlight アプリケーションのプロジェクトを作成し、SampleApplication という名前にします。





プロジェクトの作成時に「Silverlight アプリケーションを新しい Web サイトで ホストする」にチェックを付け、Web プロジェクトの名前を SampleApplication.Web にします。



これで VS が、2つのプロジェクトを含んだ新しいソリューションを作成します。

手順2. 静的ポート 5555 を使用するための Web アプリケーションの設定
SampleApplication.Web のプロパティを開きます。



SampleApplication.Web のプロパティの Web タブで「ポートを指定する」にチェックを付けて、5555 を設定します。



手順3. WCF サービスの追加と設定
クライアントとサーバーとを相互作用させるには、特別なサービスが必要です。このサービスを作成する前に、SampleApplication.Web プロジェクトの参照設定を右クリックし、ポップアップメニューから「参照の追加」を選択して PerpetuumSoft.Reporting.Silverlight.Server.dll の参照を追加しなければなりません。





SampleApplication.Web プロジェクトに Silverlight 対応の WCF サービスを追加し、名前を ReportService.svc にします。
それを行うには、SampleApplication.Web を右クリックし、ポップアップメニューから「追加」->「新しい項目」を選択します。



プロジェクトに、Report Service Over HTTP テンプレートを追加します。

ReportService クラス (ReportService.svc.cs) のソースコードを開いて、 次の using ディレクティブがない場合は追加します。 

using System.Collections.Generic;
using System.Data;
using PerpetuumSoft.Reporting.Silverlight.Server;
using PerpetuumSoft.Reporting.Silverlight.Server.Cache;

※ VB.NET の場合
Imports System.Collections.Generic
Imports System.Data
Imports PerpetuumSoft.Reporting.Silverlight.Server
Imports PerpetuumSoft.Reporting.Silverlight.Server.Cache

ReportService クラスは、Silverlight のレポートビューアのための WCF サービスの実装を格納する PerpetuumSoft.Reporting.Silverlight.Server.ReportServiceBase クラスを拡張します。

手順4. レポートテンプレートを作成します。

まず、データソースの構造を作成します。デザイナでサービスを開きます。それには、ReportService.svc.cs を右クリックし、ポップアップメニューから「デザイナーの表示」を選択します。

ツールボックスから Dataset を追加します(ツールボックスの Dataset をダブルクリックします)。



そして、「型指定のないデータセット」を選択します。



その後、データセットのノード (dataSet1) がデザイナに表示されます。



Tables プロパティのコレクション エディタ( ボタンをクリック)を開きます。



dataSet1 に Customers テーブルを追加します(「追加」ボタンをクリックし、TableName プロパティの値を 「Customers」 に設定し、Name プロパティの値を 「customers」 に設定します)。

そして、(プロパティグリッドの Tables コレクション エディタの ボタンをクリックして) Columns プロパティのコレクション エディタを開きます。



「追加」ボタンをクリックして2つの列を追加し、ColumnName プロパティの値をそれぞれ 「Name」 と 「Phone」 に設定します。



データ構造が定義されたので、Customers テーブルにデータを設定します。ソースコードを表示するには、デザイナ上で右クリックし、コンテキストメニューの「コードの表示」をクリックします。



ReportService クラスの OnLoadData オーバーライドメソッドを使用して、データソースに値を設定してください。

[ C# の場合 ]

protected override void OnLoadData(IDictionary<string, object> parameters, string reportName, PerpetuumSoft.Reporting.Components.ReportSlot reportSlot)

{

base.OnLoadData(parameters, reportName, reportSlot);

DataRow row = customers.NewRow();

row["Name"] = "Johnson Leslie";

row["Phone"] = "613-442-7654";

customers.Rows.Add(row);

row = customers.NewRow();

row["Name"] = "Fisher Pete";

row["Phone"] = "401-609-7623";

customers.Rows.Add(row);

row = customers.NewRow();

row["Name"] = "Brown Kelly";

row["Phone"] = "803-438-2771";

customers.Rows.Add(row);

}

[ VB.NET の場合 ]

Protected Override Sub OnLoadData(ByVal parameters As System.Collections.Generic.IDictionary(Of String, Object), ByVal reportName As String, ByVal reportSlot As PerpetuumSoft.Reporting.Components. ReportSlot)

MyBase.OnLoadData(parameters, reportName, reportSlot)

Dim row As DataRow = customers.NewRow()

row("Name") = "Johnson Leslie"

row("Phone"] = "613-442-7654"

customers.Rows.Add(row)

row = customers.NewRow()

row("Name") = "Fisher Pete"

row("Phone") = "401-609-7623"

customers.Rows.Add(row)

row = customers.NewRow()

row("Name") = "Brown Kelly"

row("Phone") = "803-438-2771"

customers.Rows.Add(row)

End Sub

 

備考:問い合わせた(クエリされた)ドキュメント情報とそのパラメータは、OnLoadData メソッドのパラメータに渡されます。

では、ReportManager コンポーネントを追加します(ツールボックスで ReportManager をダブルクリックします)。このコンポーネントはレポート生成を行います。



その後、ReportManager のノード (reportManager1) がデザイナに表示されます。



ReportService サービスの ReportManager プロパティを設定します。 それには、プロパティ ウィンドウから ReportService のプロパティを開きます。



プロパティ一覧から reportManager1 を選択します。



では、レポートを作成します。
reportManager1 を右クリックして「エディタの起動」を選択してレポートマネージャのエディタを起動します。



レポートテンプレートを作成する前に、レポートを生成するデータソースを追加します。

「データソース」タブのデータバインドリストに 「Customers」 テーブルを追加します(「追加」ボタンをクリックし、「オブジェクト名の編集」の「名称」の値を Customers に、「値」にはコンボボックスから dataSet1.Customers を選択します)。





「レポート」タブで新しいオブジェクトを追加します(「追加」ボタンをクリックして InlineReportSlot を追加します)。



ReportName プロパティの値を CustomersReport に設定します。以後、レポートマネージャからドキュメントをこの名前で取得します。次に、「デザイナの起動」を押してレポートデザイナを立ち上げます。



[ファイル] ->[新規]メニューを選択すると、下図の画面に表示されているフォームが表示されます。



「新規」タブのリストから「標準のレポート」を選択し、「OK」 ボタンを押します。



画面に、「スタンダード ウィザード」ウィンドウが表示されます。

ドキュメントのパラメータを下図のように設定します。



「追加」()ボタンを使ってデータソースを追加します。



ボタンをクリックし、表示されたツリービューから Customers をダブルクリックして選択します。



レポートに出力したいフィールドを選択します(フィールドの 「Name」 と 「Phone」 の両方を移動できるはずです)。



OK ボタンを押すと、テンプレートが作成されます。



では、テンプレートを保存してデザイナを閉じてください。

手順5. Silverlight の ReportViewer コンポーネントの追加と設定

レポートを表示するために、Silverlight アプリケーションにレポートビューア コンポーネントを追加します。それには、ReportViewer を格納している PerpetuumSoft.Reporting.Silverlight.Client アセンブリの参照を追加してください(ソリューションエクスプローラの SampleApplication の参照設定を右クリックし、ポップアップメニューから「参照の追加」を選択してください)。





System.Windows.Controls.Toolkit.dll アセンブリの参照も追加します。



デザイナで MainPage.xaml を開き、PerpetuumSoft.Reporting.Silverlight.Client アセンブリの "rss" xml 名前空間を追加します。



次に、Grid セクションに ReportViewer コンポーネントを追加します。

<rss:ReportViewer x:Name="ReportViewer1"

ServiceUrl="http://localhost:5555/ReportService.svc"

ReportName="CustomersReport"/>


変更した後、UserControl セクションは次のようになるはずです。

<UserControl x:Class="SilverlightApplication.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"

xmlns:rss="clr-namespace:PerpetuumSoft.Reporting.Silverlight.Client;assembly=PerpetuumSoft.Reporting.Silverlight.Client"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Background="White">

<rss:ReportViewer x:Name="ReportViewer1" ReportName="CustomersReport" ServiceUrl="http://localhost:5555/ReportService.svc"/>

</Grid>

</UserControl>


MainPage のソースコードを開いて、コード行を次のように変更/追加します。

[ C# の場合 ]

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

Loaded += new RoutedEventHandler(MainPage_Loaded);

}

void MainPage_Loaded(object sender, RoutedEventArgs e)

{

ReportViewer1.RenderDocument();

}

}

[ VB.NET の場合 ]

Pertical Public Class MainPage
Inherits UserControl

Public Sub New()

InitializeComponent()

AddHandler Loaded, Address Of MainPage_Loaded

End Sub

Sub MainPage_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs)

ReportViewer1.RenderDocument()

End Sub

End Class

備考:

RenderDocument() の呼び出しは、サーバーにある現在のレポートの生成し、レポートビューアに表示します。

手順6. アプリケーションの起動
SampleApplication.Web アプリケーションをスタートアップ プロジェクトに設定します。それには、SampleApplication.Web を右クリックし、ポップアップメニューから「スタートアップ プロジェクトに設定」を選択します。



Visual Studio のメインツールバーにある「デバッグ開始」( ボタン)をクリックしてアプリケーションを実行します。



終わりに

一般的な手順を踏んで、シンプルでかなり操作可能なアプリケーションができました。コードをたくさん記述する必要はなく、既存の実装を使用しただけです。大半はそれで十分です。Report Sharp Shooter for Silverlight の多数の動作面だけでなく、レポートビューアの外観も変更できるので、必要に応じてデフォルトの動作を大幅に変えることができます。