すべて展開
すべて折りたたむDesignerコントロール（Professionalのみ）を使用して、デザイナ機能をアプリケーションに組み込み、エンドユーザーにレポート編集機能を提供することが出来ます。このチュートリアルでは、Windowsフォームアプリケーションに基本的なエンドユーザーレポートデザイナを作成する方法を示します。
 |
注意: DesignerコントロールはWebアプリケーションでは使用できません。 |
このチュートリアルでは、以下の作業を行います。
- フォームへのコントロールの追加
- Dataツールボックスグループを作成する
- OnExitメソッドを追加する
- ツールボックス、メニュー、ツールストリップを設定する
- セクションレポートのレイヤー一覧を無効化
- エンドユーザーレポートデザイナを表示する
このチュートリアルが完了すると、以下のようなエンドユーザーレポートデザイナが作成されます。
 |
 |
メモ: Designerコントロールまたはその他のActiveReportsコントロールをVisual Studioのツールボックスに追加する方法については、ActiveReportsコントロールを追加するを参照してください。 |
フォームへのコントロールの追加
- Windowsフォームアプリケーションで、フォームを選択して［プロパティ］ウィンドウに移動し、Nameプロパティを「formDesigner」に、Textプロパティを「ActiveReports for .NET 9.0J」に、それぞれ変更します。
- 次の手順の表で示すコントロールが収まるように、フォームのサイズを変更します。
- Visual Studioのツールボックスから、以下のコントロールをリストの上から順にフォームにドラッグします。一部のコントロールは他のコンテナーコントロールの内部に配置されるため、順序は重要です。また、プロパティを以下のリストのとおりに設定します。
フォームに配置するコントロール
コントロール 親 Name Dock プロパティ値 ToolStripContainer formDesigner toolStripContainer Fill LeftToolStripPanel - Enabled = False
RightToolStripPanel - Enabled = FalseSplitContainer toolStripContainer splitContainer Fill FixedPanel = Panel1 Designer splitContainer.Panel2 arDesigner None Anchor = Top, Bottom, Left, Right
必要に応じてサイズと位置を変更します。TabControl splitContainer.Panel2 tabControl None Anchor = Right
必要に応じてサイズと位置を変更します。ReportExplorer tabControl.tabPage1 arReportExplorer None ReportDesigner = arDesigner
これでActiveReportsデザイナがReportExplorerコントロールにバインドされます。
必要に応じてサイズと位置を変更します。また、VisibleNodesプロパティを使用して、レポートエクスプローラに表示されるノードを設定します。LayerList tabControl.tabPage2 arLayerList None ReportDesigner = arDesigner
これでActiveReportsデザイナがLayerListコントロールにバインドされます。
必要に応じてサイズと位置を変更します。PropertyGrid splitContainer.Panel2 arPropertyGrid None Anchor = Top, Bottom, Right
必要に応じてサイズと位置を変更します。Toolbox splitContainer.Panel1 arToolbox Fill -
- arDesignerを選択し、［プロパティ］ウィンドウのPropertyGridプロパティに移動して［arPropertyGrid］を選択します。これで、選択した項目のプロパティを表示するプロパティグリッドがデザイナにアタッチされます。
- tabControlを選択し、［プロパティ］ウィンドウでTabPagesプロパティの［...］ボタンをクリックします。
- ［TabPageコレクションエディター］ダイアログが表示されたら、tabPage1を選択し、Textプロパティを「レポートエクスプローラ」に変更します。
- tabPage2を選択し、 Text プロパティを「レイヤー一覧」に変更します。
これでフォームは次の図のようになります。
Dataツールボックスグループを作成する
以下のコードを追加して、ツールボックスにデータグループを作成します。このLoadToolsメソッドは、データツールボックスグループをツールボックスにロードするためにformDesigner_Loadイベントから呼び出します。
サンプルコードを以下に示します。
Visual Basic
| Visual Basicコード（formDesignerクラスの上に貼り付けます） |
コードのコピー
|
|---|---|
Imports GrapeCity.ActiveReports.Design
|
|
| Visual Basicコード（formDesignerクラス内に貼り付けます） |
コードのコピー
|
|---|---|
Private Sub LoadTools(ByVal arToolbox As Toolbox.Toolbox) ' Dataプロバイダを追加します。 Me.arToolbox.AddToolboxItem(New System.Drawing.Design.ToolboxItem(GetType(System.Data.DataSet)), "Data") Me.arToolbox.AddToolboxItem(New System.Drawing.Design.ToolboxItem(GetType(System.Data.DataView)), "Data") Me.arToolbox.AddToolboxItem(New System.Drawing.Design.ToolboxItem(GetType(System.Data.OleDb.OleDbConnection)), "Data") Me.arToolbox.AddToolboxItem(New System.Drawing.Design.ToolboxItem(GetType(System.Data.OleDb.OleDbDataAdapter)), "Data") Me.arToolbox.AddToolboxItem(New System.Drawing.Design.ToolboxItem(GetType(System.Data.Odbc.OdbcConnection)), "Data") Me.arToolbox.AddToolboxItem(New System.Drawing.Design.ToolboxItem(GetType(System.Data.Odbc.OdbcDataAdapter)), "Data") Me.arToolbox.AddToolboxItem(New System.Drawing.Design.ToolboxItem(GetType(System.Data.SqlClient.SqlConnection)), "Data") Me.arToolbox.AddToolboxItem(New System.Drawing.Design.ToolboxItem(GetType(System.Data.SqlClient.SqlDataAdapter)), "Data") End Sub |
|
C#
| C#コード（formDesignerクラスの上に貼り付けます） |
コードのコピー
|
|---|---|
using GrapeCity.ActiveReports.Design;
|
|
| C#コード（formDesignerクラス内に貼り付けます） |
コードのコピー
|
|---|---|
private void LoadTools(Toolbox.Toolbox arToolbox) { // Dataプロバイダを追加します。 this.arToolbox.AddToolboxItem(new System.Drawing.Design.ToolboxItem(typeof(System.Data.DataSet)), "Data"); this.arToolbox.AddToolboxItem(new System.Drawing.Design.ToolboxItem(typeof(System.Data.DataView)), "Data"); this.arToolbox.AddToolboxItem(new System.Drawing.Design.ToolboxItem(typeof(System.Data.OleDb.OleDbConnection)), "Data"); this.arToolbox.AddToolboxItem(new System.Drawing.Design.ToolboxItem(typeof(System.Data.OleDb.OleDbDataAdapter)), "Data"); this.arToolbox.AddToolboxItem(new System.Drawing.Design.ToolboxItem(typeof(System.Data.Odbc.OdbcConnection)), "Data"); this.arToolbox.AddToolboxItem(new System.Drawing.Design.ToolboxItem(typeof(System.Data.Odbc.OdbcDataAdapter)), "Data"); this.arToolbox.AddToolboxItem(new System.Drawing.Design.ToolboxItem(typeof(System.Data.SqlClient.SqlConnection)), "Data"); this.arToolbox.AddToolboxItem(new System.Drawing.Design.ToolboxItem(typeof(System.Data.SqlClient.SqlDataAdapter)), "Data"); } |
|
OnExitメソッドを追加する
- formDesignerを右クリックして［コードの表示］を選択します。
- コードビューが表示されたら、以下のコードを追加してOnExitメソッドを作成します。このメソッドは、後で作成する［終了］メニュー項目から呼び出します。
サンプルコードを以下に示します。
Visual Basic
C#Visual Basicコード（formDesignerクラス内に貼り付けます） コードのコピーPrivate Sub OnExit(ByVal sender As Object, ByVal e As EventArgs) MyBase.Close() End Sub
C#コード（formDesignerクラス内に貼り付けます） コードのコピーprivate void OnExit(object sender, EventArgs e) { Close(); }
ツールボックス、メニュー、ツールストリップを設定する
- フォームのデザインビューから、formDesignerのタイトルバーをダブルクリックし、formDesigner_Loadイベントのイベント処理メソッドが作成します。
- 以下の処理を実行するコードをハンドラに追加します。
- ツールボックスの設定
- メニューとツールストリップの設定
- メニューへ[終了]コマンドの追加
サンプルコードを以下に示します。
Visual BasicC#Visual Basicコード（formDesigner Loadイベント内に貼り付けます） コードのコピー' ツールボックスにコントロールを追加します。 LoadTools(arToolbox) arDesigner.Toolbox = arToolbox ' メニューとツールストリップをフォームに追加します。 Dim menuStrip As ToolStrip = arDesigner.CreateToolStrips(DesignerToolStrips.Menu)(0) Dim fileMenu As ToolStripDropDownItem = CType(menuStrip.Items(0), ToolStripDropDownItem) ' ［ファイル］メニューに終了コマンドを追加します。 fileMenu.DropDownItems.Add(New ToolStripMenuItem("終了", Nothing, AddressOf OnExit)) Dim panel As ToolStripPanel = toolStripContainer.TopToolStripPanel panel.Join(menuStrip, 0) panel.Join(arDesigner.CreateToolStrips(DesignerToolStrips.Zoom)(0), 1) panel.Join(arDesigner.CreateToolStrips(DesignerToolStrips.Undo)(0), 1) panel.Join(arDesigner.CreateToolStrips(DesignerToolStrips.Edit)(0), 1) panel.Join(arDesigner.CreateToolStrips(DesignerToolStrips.Report)(0), 1) panel.Join(arDesigner.CreateToolStrips(DesignerToolStrips.Layout)(0), 2) panel.Join(arDesigner.CreateToolStrips(DesignerToolStrips.Format)(0), 2)
C#コード（formDesigner Loadイベント内に貼り付けます） コードのコピー// ツールボックスにコントロールを追加します。 LoadTools(arToolbox); arDesigner.Toolbox = arToolbox; // メニューとツールストリップをフォームに追加します。 ToolStrip menuStrip = arDesigner.CreateToolStrips(DesignerToolStrips.Menu)[0]; ToolStripDropDownItem fileMenu = (ToolStripDropDownItem)menuStrip.Items[0]; // ［ファイル］メニューに終了コマンドを追加します。 fileMenu.DropDownItems.Add(new ToolStripMenuItem("終了", null, this.OnExit)); ToolStripPanel panel = ToolStripContainer.TopToolStripPanel; panel.Join(menuStrip, 0); panel.Join(arDesigner.CreateToolStrips(DesignerToolStrips.Zoom)[0], 1); panel.Join(arDesigner.CreateToolStrips(DesignerToolStrips.Undo)[0], 1); panel.Join(arDesigner.CreateToolStrips(DesignerToolStrips.Edit)[0], 1); panel.Join(arDesigner.CreateToolStrips(DesignerToolStrips.Report)[0], 1); panel.Join(arDesigner.CreateToolStrips(DesignerToolStrips.Layout)[0], 2); panel.Join(arDesigner.CreateToolStrips(DesignerToolStrips.Format)[0], 2);
セクションレポートのレイヤー一覧を無効化
レイヤーはページレポートとRDLレポートのみでサポートされているため、セクションレポートではレイヤー一覧オプションを無効にします。以下の手順に従って、セクションレポートからレイヤー一覧を除去します。
- formDesignerのコードビューで、レポートレイアウトを変更するOnLayoutChangedイベントハンドラを追加します。
Visual Basic
C#Visual Basicコード（formDesignerクラスのコンストラクタ内に貼り付けます） コードのコピー' イベントハンドラを作成します。 Public Sub New() InitializeComponent() AddHandler Me.arDesigner.LayoutChanged, AddressOf OnLayoutChanged End Sub
C#コード（formDesignerクラスのコンストラクタ内に貼り付けます） コードのコピー// イベントハンドラを作成します。 this.arDesigner.LayoutChanged += new LayoutChangedEventHandler(OnLayoutChanged);
- 以下のコードを追加して、OnLayoutChanged関数を作成します。この関数はformDesigner_Loadイベントから呼び出すことができます。サンプルコードを以下に示します。
Visual BasicC#でコードを記述する場合Visual Basicコード（formDesignerクラス内に貼り付けます）
コードのコピーPrivate Sub OnLayoutChanged(ByVal sender As System.Object, ByVal e As LayoutChangedArgs) Handles arDesigner.LayoutChangedEnd Sub
C#コード（formDesignerクラス内に貼り付けます） コードのコピーprivate void OnLayoutChanged(object sender, LayoutChangedArgs e){}
- OnLayoutChanged関数で、セクションレポートの場合にはレイヤー一覧を追加せず、ページレポートとRDLレポートの場合には追加するようにコードを記述します。サンプルコードを以下に示します。
Visual Basic
C#Visual Basicコード（OnLayoutChanged関数内に貼り付けます） コードのコピーIf arDesigner.ReportType = DesignerReportType.Section Then tabControl.TabPages.Remove(TabPage1) tabControl.TabPages.Remove(TabPage2) tabControl.TabPages.Add(TabPage1) tabControl.Refresh() End If If arDesigner.ReportType = DesignerReportType.Page Then tabControl.TabPages.Remove(TabPage1) tabControl.TabPages.Remove(TabPage2) tabControl.TabPages.Add(TabPage1) tabControl.TabPages.Add(TabPage2) tabControl.Refresh() End If If arDesigner.ReportType = DesignerReportType.Rdl Then tabControl.TabPages.Remove(TabPage1) tabControl.TabPages.Remove(TabPage2) tabControl.TabPages.Add(TabPage1) tabControl.TabPages.Add(TabPage2) tabControl.Refresh() End If
C#コード（OnLayoutChanged関数内に貼り付けます） コードのコピーif (arDesigner.ReportType == DesignerReportType.Section) { tabControl.TabPages.Remove(tabPage1); tabControl.TabPages.Remove(tabPage2); tabControl.TabPages.Add(tabPage1); tabControl.Refresh(); } if (arDesigner.ReportType == DesignerReportType.Page) { tabControl.TabPages.Remove(tabPage1); tabControl.TabPages.Remove(tabPage2); tabControl.TabPages.Add(tabPage1); tabControl.TabPages.Add(tabPage2); tabControl.Refresh(); } if (arDesigner.ReportType == DesignerReportType.Rdl) { tabControl.TabPages.Remove(tabPage1); tabControl.TabPages.Remove(tabPage2); tabControl.TabPages.Add(tabPage1); tabControl.TabPages.Add(tabPage2); tabControl.Refresh(); }
- 以下のコードをformDesigner Loadイベントに追加して、OnLayoutChanged関数を呼び出します。
Visual Basic
C#Visual Basicコード（formDesigner_Loadイベント内に貼り付けます） コードのコピーOnLayoutChanged(Nothing, Nothing)
C#コード（formDesigner_Loadイベント内に貼り付けます） コードのコピーOnLayoutChanged(null, null);
エンドユーザーレポートデザイナを表示する
- ［F5］を押してプロジェクトを実行します。エンドユーザーレポートデザイナが開いてセクションレポートが表示されます。
- ［ファイル］メニューから［新規］を選択して、［新しいレポートの作成］ダイアログを開きます。
- ［テンプレート］から［ページレポート］または［RDLレポート］を選択してデザイナに開きます。対応するツールボックスコントロール、レポートエクスプローラ、およびレイヤー一覧の項目も同時に表示されます。
- 再び［ファイル］メニューに移動します。メニュー項目に［終了］が追加されていることを確認します。
このエンドユーザーレポートデザイナをさらにカスタマイズするため、たとえばページレポートまたはRDLレポートのツールボックスで［セクションレポート］タブを無効にできます。これを含むカスタマイズの例については、「エンドユーザーデザイナ」サンプルを参照してください。
関連トピック