GrapeCity ActiveReports for .NET 12.0J > ActiveReportsユーザーガイド > サンプルとチュートリアル > サンプル > Professionalのサンプル > HTML5ビューワサンプル |
HTML5ビューワサンプルでは、HTML5ビューワの使い方と、基本的なビューワまたはカスタマイズしたビューワで各種レポートタイプをロードするためのオプションを紹介します。
フォルダ
<User Folder>\Samples\Professional\HTML5 Viewer
実行時の機能
このサンプルを実行すると、HTML5ビューワを含むindex.htmlがブラウザに表示されます。このファイルには以下のオプションがあります。
既定ではデフォルトUIビューワが最初に表示されます。[カスタム UI]オプションをクリックすることで、カスタムUIビューワに切り替えることが可能です。
[カスタム UI]オプションをクリックすると、CustomUI.htmlがブラウザにロードされます。カスタムUIビューワのページには、MoviesReport.rdlxにパラメータを渡す[ジャンル]カテゴリボタンがあり、このボタンをクリックすると、渡されたパラメータ値に基づいてビューワにレポートがロードされます。
カスタムUIビューワで表示しているときに、[ベーシック]オプションをクリックすることで、デフォルトUIビューワに戻すことができます。
これらのオプションはデフォルトUIビューワの一部です。いずれかのボタンをクリックすると、選択した形式のレポートがロードされます。
これらのオプションはデフォルトUIビューワの一部であり、ビューワのレポートプレビュー領域に関係しています。このプロジェクトを実行すると、既定ではデスクトップUIがブラウザに表示されます。[モバイル]ボタンをクリックすると、モバイルUIに切り替わります。
プロジェクトの構造
cssフォルダ
cssフォルダには、HTML5ビューワアプリケーションのスタイルを格納する、以下のcssファイルが含まれます。
fontsフォルダ
fontsフォルダには、実行時にHTML5ビューワに表示されるテキストのスタイルを提供する、以下のフォントファイルが含まれます。
imagesフォルダ
Reportsフォルダ
Reportsフォルダには以下のレポートが含まれます。
Scriptsフォルダ
scriptsフォルダには、このアプリケーションをビルドするために必要な、以下のJavaScriptファイルとその依存関係が含まれます。
ActiveReports.ReportService.asmx
このレポートWebサービスは、HTML5ビューワが正常に機能するために必要です。ActiveReports.ReportService.asmxは、Visual Studioの[プロジェクト]メニューの[新しい項目の追加]から追加することもできます。
customUI.html
index.html