Webページのデザイン
では、さっそくアプリケーションを作成していきましょう。
作成するアプリケーションは、ドロップダウンリストを使用して2つのレポートを切り替えて表示できるようにします。
ページのレイアウト
使用するコントロールは、C1ReportViewer、Label、DropDownListの各コントロールです。
プロジェクトの準備とコントロールの配置
まずは、ASP.NETアプリケーション用のプロジェクトを用意します。マスターページを使う場合は、適宜不要な部分を削除するなど編集しておきます。
1. DropDownListコントロールを配置し、Itemsプロパティの値欄をクリックして以下の項目を設定します。
- 表形式表示
- グループ化表示
2. DropDownListコントロールのイベントハンドラ「SelectedIndexChanged」を作成します。
3. DropDownListコントロールの「AutoPostBack」プロパティをTrueにします。これで、イベントハンドラに記述した処理をC1ReportViewerコントロールに反映させることができます。
4. DropDownListコントロールの横にLabelコントロールを配置し、Textプロパティの値を空白にします。
5. C1ReportViewerコントロールを配置します。Widthプロパティを「900」にし、「SplitterDistance」プロパティを「200」に変更します。
以上で、Webページのレイアウトは完成です。
レポート定義ファイルの作成
C1ReportViewerコントロールを配置したら、C1Reportデザイナでレポートの形式をデザインし、定義ファイルに保存します。
レポートは2種類作成し、1つは単純な表形式のレポートで、もう一つは市区町村名でグループ化した一覧表レポートです。
単純な表形式のレポートの作成
では、C1Reportデザイナを使用してレポートを作成していきます。
作成するのは、Microsoft Accessで作成したデータベース「東京都立図書館リスト.mdb」です。このデータベースファイルのテーブル「図書館リスト」には、東京都立図書館の所在市区町村、図書館名、所在地、電話番号が格納されています。このデータを、一覧表形式のレポートにします。
1. まずは、データベースファイルをプロジェクトに組み込みます。ソリューションエクスプローラーにあるフォルダ「App_Data」を右クリックして、ショートカットメニューから［追加－既存の項目］を選び、データベースファイル「東京都立図書館リスト.mdb」を選択します。
2. C1Reportデザイナを起動します。左ペインにある［レポートの作成］をクリックします。レポート新規作成ウィザードが起動します。
3. ［接続文字列の作成］ボタンをクリックします。「データリンクプロパティ」というダイアログが表示されます。
4. ［プロバイダー］タブをクリックし、「Microsoft Jet 4.0 OLE DB Provider」をクリックして［次へ］ボタンをクリックします。
5. ［接続］タブに移動しますので、レポートを作成したいデータベース名を選択し、「ユーザー名」を空欄にして［接続のテスト］ボタンをクリックします。接続テストに成功したら、メッセージボックスのOKボタンをクリックし、「データリンクプロパティ」ダイアログのOKボタンをクリックします。
6. 「レポート新規作成ウィザード」に戻り、「データソース」をクリックします。テーブル名が表示されるので、「図書館リスト」をクリックし［次へ］ボタンをクリックします。
7. 「利用可能なフィールド」が表示されますので、［>>］ボタンをクリックして「詳細」に移動し、［次へ］ボタンをクリックします。ここで選択したフィールドがレポートに使用されます。
8. 「レイアウト」で「表形式」をクリックし、［次へ］ボタンをクリックします。
ここでは、どのような形式のレポートにするのかを選びますが、あくまでもテンプレートを選ぶだけなので、このあとデザイナで自由にレイアウトを変えることができます。
9. レポートのスタイルを選びます。C1Reportデザイナには、組み込みのスタイルが多く用意されていますので、ここから「Concource」を選びます。組み込みスタイルを使用すると、配色やヘッダ・フッタなどの設定をすべて行ってくれますので、手軽にレポートのデザインを整えることができます。
10. 最後にレポート名を設定します。このレポート名を後でC1ReportViewerコントロールに設定することになります。ここでは、自動的にレポート名が作成されますので、このまま変更せずに［完了］ボタンをクリックします。
11. 続いてレイアウトの修正を行います。
まず、「PageHeader」の「ID」ラベルをクリックし、ツールバーの［中央揃え］ボタンをクリックします。これで、「ID」はラベルの中央に表示されるようになります。 「Detail」のIDも同じように「中央揃え」にします。
12. レポートの右端をドラッグしてサイズを広げます。ルーラーの17.5ぐらいまで幅を大きくします。
13. 「PageHeader」と「Detail」にある「電話番号」と「図書館名」を右端にずらし、「図書館名」の幅を広げます。そして、「市区町村」の幅を小さくし、「所在地」の幅を広げます。
ここで一度プレビューを表示し、レイアウトを確認します。
14. デザイナモードに戻り、アプリケーションボタンをクリックします。メニューが開きますので、［名前を付けて保存］をクリックし、保存します。ここでは、「東京都立図書館一覧.xml」という名前で保存します。以上で、レポート定義ファイルは出来上がりです。
続いてもう一つレポートを作成しますので、C1Reportデザイナは終了しないでください。
