Windows ストアアプリで帳票をプレビューする


◆VB-Report 7 Windows ストアアプリ用ビューアコントロール

アドバンスソフトウェアの帳票ツール「VB-Report 7」が Windows ストアアプリに対応しました。「VB-Report 7」は、Excel で帳票デザインを行い、プログラム中から値を差し込んでプレビュー・印刷を行う帳票ツールです。使い慣れた Excel で帳票をデザインするため、デザイナの機能を習得する必要もなく、エンドユーザーがレイアウトを調整することもできます。
2012 年 10 月 26 日公開の製品アップデートに追加モジュールとして Windows ストアアプリ用ビューアコントロールが付属します。このコントロールは、VB-Report 7 を使用してサーバーサイドで作成した帳票を、Windows ストアアプリ上でプレビュー・印刷するためのコントロールで、Windows 8 の Modern UI における帳票開発を支援します。

VB-Report 製品ページ

これらのコントロールを使用した Web サイトと Windows ストアアプリの開発手順を紹介します。


◆VB-Report 7 のインストールとアップデート

Windows 8 の環境に VB-Report 7 をインストールし、アップデート版をダウンロードして実行します。このステップは問題なく進むと思いますが、何か問題が発生した場合はアドバンスソフトウェアのサポートにご連絡下さい。


◆IIS のインストールと設定

コントロールパネルの「Windows の機能の有効化または無効化」で「インターネット インフォメーション サービス」を有効にします。この時、ASP.NET に関する項目に全てチェックをつけておく必要があります。また、今回は Web サイトで 32 bit アセンブリを使用するので、インターネット インフォメーション サービス マネージャの「接続」から「アプリケーション プール」を選択し、「詳細設定…」を開いて「32 ビット アプリケーションの有効化」を「True」に設定しておきます。



◆ソリューションの作成

Visual Studio 2012 を管理者として起動し、新しいプロジェクトを作成します。「新しいプロジェクト」画面の「その他のプロジェクトの種類」から「Visual Studio ソリューション」を選択します。今回はソリューション名を「StoreViewerSample」としました。


◆Web サイトの作成

次に「ファイル」の「追加」から「新しい Web サイト」を選択して Web サイトを作成します。今回は「Visual C#」で「ASP.NET 空の Web サイト」を選択して、「Web の場所」で「HTTP」選択、パスを「http://localhost/ReportXML」としました。ここでエラーが発生した場合、Visual Studio 2012 を管理者権限で実行していない可能性があります。

次に作成した Web サイトを右クリックして「参照の追加」を選択し、参照マネージャの「アセンブリ」の「拡張」から「AdvanceSoftware.VBReport7.Xlsx.Web.Report.4」をチェックして「OK」をクリックします。アセンブリが一覧に見つからない場合は、VB-Report 7 インストールフォルダの Bin2010 にある「VBReport7.Xlsx.Web.Report.4.dll」を選択して下さい。

ソリューション エクスプローラの Web サイト上で右クリックして「追加」から「Web フォーム」を選択します。今回は項目の名前に「XlsxReportXML」を設定しました。追加された「XlsxReportXML.aspx」を選択して「スタート ページに設定」を選択しておきます。

追加された「XlsxReportXML.aspx」を展開して「XlsxReportXML.aspx.cs」を開き、下記のコードに差し替えます。

using System;
using System.IO;
using AdvanceSoftware.VBReport7;

public partial class XlsxReportXML : System.Web.UI.Page
{
    private System.ComponentModel.IContainer components;
    private AdvanceSoftware.VBReport7.Xlsx.Web.XlsxWebReport xlsxWebReport1;

    private void InitializeComponent()
    {
        this.components = new System.ComponentModel.Container();
        this.xlsxWebReport1 = new AdvanceSoftware.VBReport7.Xlsx.Web.XlsxWebReport(this.components);
        // 
        // xlsxWebReport1
        // 
        this.xlsxWebReport1.DataSource = null;
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            InitializeComponent();
            CreateDocument();
        }
    }

    private void CreateDocument()
    {
        // 帳票ドキュメント作成開始
        xlsxWebReport1.Report.Start();
        // 帳票新規作成
        xlsxWebReport1.Report.Create(xlsxVersion.ver2010);
        // ページデータ作成
        xlsxWebReport1.Page.Start("Sheet1", "1");
        // データ入力
        xlsxWebReport1.Cell("B").ColWidth = 120;
        xlsxWebReport1.Cell("2").RowHeight = 409.50;
        xlsxWebReport1.Cell("B2").Attr.BackColor2 = xlColor.Blue;
        xlsxWebReport1.Cell("B2").Attr.FontColor2 = xlColor.White;
        xlsxWebReport1.Cell("B2").Attr.FontPoint = 30;
        xlsxWebReport1.Cell("B2").Attr.FontStyle = FontStyle.Bold;
        xlsxWebReport1.Cell("B2").Value = "VB-Report 7\n\n" +
                                          "Windows ストアアプリ用ビューアコントロール\n\n" +
                                          "サンプルプレビュー";
        xlsxWebReport1.Page.Attr.Size(PageOrientation.Landscape, System.Drawing.Printing.PaperKind.A4);
        // ページデータ作成終了
        xlsxWebReport1.Page.End();
        // 帳票ドキュメント作成終了
        xlsxWebReport1.Report.End();
        // 作成した帳票ドキュメントをストリーム(XMLデータ)出力
        MemoryStream memoryStream = new MemoryStream();
        xlsxWebReport1.Report.SaveXML(memoryStream);
        Response.Clear();
        Response.ContentType = "application/xml";
        Response.AddHeader("content-disposition", "attachment; filename=XlsxReport.xml");
        Response.BinaryWrite(memoryStream.ToArray());
        memoryStream.Close();

        Response.End();
    }
}

これで Web サイト側の作業は終了です。Windows ストアアプリ用ビューアに返すデータは 54 行目の SaveXML メソッドを使用して作成します。今回は説明をよりシンプルにするためにロード時に帳票を作成して返す Web サイトとして作成しましたが、入力フォームを作成して入力データから帳票を作成したり、データベースから取得したデータで帳票を作成することもできます。


◆Windows ストアアプリの作成

ソリューション エクスプローラでソリューションを選択して右クリックし、「追加」から「新しいプロジェクト」を選択します。「新しいプロジェクトの追加」画面で「Visual C#」の「Windows ストア」から「新しいアプリケーション(XAML)」を選択して名前に「StoreViewerSample」と入力して「OK」をクリックします。

ソリューション エクスプローラで作成されたプロジェクト「StoreViewerSample」を右クリックして「スタートアップ プロジェクトに設定」を選択しておきます。そのまま展開して「MainPage.xaml」を開きます。

次に Windows ストアアプリ用ビューアコントロールを追加します。ツールボックスを右クリックして「タブの追加」を選択し、追加されたタブに「Advance Software」と入力します。追加したタブを右クリックして「アイテムの選択」を選択します。

次に Windows ストアアプリ用ビューアコントロールを追加します。ツールボックスを右クリックして「タブの追加」を選択し、追加されたタブに「Advance Software」と入力します。追加したタブを右クリックして「アイテムの選択」を選択します。「ツールボックス アイテムの選択」画面で「Windows XAML コンポーネント」タブを選択し、「参照」ボタンをクリックして製品インストールフォルダの「Bin2012」フォルダに格納されている「VBReport7Viewer.dll」を選択します。一覧に「ViewerControl」が追加されるのでチェックボックスをオンにして「OK」ボタンをクリックします。

ツールボックスに追加された「ViewerControl」を「MainPage.xaml」上に展開してサイズを調整します。展開したコントロールを選択した状態からプロパティウインドウの「名前」に「ViewerControl1」と入力します。

ツールボックスからボタンを選択して追加します。追加したボタンを選択した状態からプロパティウインドウの「名前」に「Button」と入力します。イベントの「Click」でダブルクリックしてハンドラを追加します。

メインページを選択した状態からプロパティウインドウの「名前」に「MainPage1」と入力します。イベントの「Loaded」でダブルクリックしてハンドラを追加します。

次に「MainPage.xaml.cs」を開き、下記のコードに差し替えます。

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

// 空白ページのアイテム テンプレートについては、http://go.microsoft.com/fwlink/?LinkId=234238 を参照してください

namespace StoreViewerSample
{
    /// <summary>
    /// それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        /// <summary>
        /// このページがフレームに表示されるときに呼び出されます。
        /// </summary>
        /// <param name="e">このページにどのように到達したかを説明するイベント データ。Parameter 
        /// プロパティは、通常、ページを構成するために使用します。</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            // 印刷準備
            ViewerControl1.InitializePrinting();
            base.OnNavigatedTo(e);
        }
        /// <summary>
        /// 画面非アクティブ時
        /// </summary>
        /// <param name="e"></param>
        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            // 印刷準備解除
            ViewerControl1.DisconnectPrinting();
            base.OnNavigatedFrom(e);
        }

        private void MainPage1_Loaded(object sender, RoutedEventArgs e)
        {
            ViewerControl1.ViewZoom = -1;
            ViewerControl1.ReportUri = "http://localhost/ReportXML/XlsxReportXML.aspx";
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Application.Current.Exit();
        }
    }
}

帳票の作成はサーバーで行うので、コントロール側では 44 行目のコードでサーバーに対して帳票の作成を要求するだけです。

    ViewerControl1.ReportUri = “http://localhost/ReportXML/XlsxReportXML.aspx”;

ビルドして実行すると下記の画面が表示されるはずです。



◆まとめ

2012 年 10 月 26 日公開のアップデートには、サンプルとして今回紹介した Web サイトと Windows ストアアプリのソリューション(C# と VB)が含まれますので、Windows 8 と Visual Studio 2012 の環境ですぐに動作を確認することができます。
Windows ストアアプリ用ビューアコントロールを使用することで、サーバー上で作成した帳票を従来のデスクトップアプリケーションだけでなく、タッチデバイス上でも簡単に表示することができ、より幅広い帳票開発が可能となります。

You can leave a response, or trackback from your own site.

Leave a Reply