すべて展開
すべて折りたたむJavascriptの機能を使用して、Flash Viewer UIをカスタマイズすることができます。このチュートリアルはFlash Viewerの外観や操作感をカスタマイズする方法を紹介します。
このチュートリアルでは、以下の作業を行います。
- Flashビューワのオプションをカスタマイズするコードを追加する
- Flashビューワのイベントをハンドルするコードを追加する
このチュートリアルの手順を行うには、先に、クイックスタートの「Flash ビューワの使用」にある、ASP.NET Webアプリケーションの作成とFlashビューワの設定を行ってください。
Flashビューワのオプションをカスタマイズするコードを追加する
- .aspxページ上の［WebViewer］を選択し、［プロパティ］ウィンドウの ［FlashViewerOptions］ノードを展開します。
- ［UseClientApi］（FlashViewerOptions）プロパティを[True]に設定します。（デフォルト値は False です。）
-
.aspxソースビューに以下のコードを追加し、Flashビューワを定義します。
.aspxソースにコードを貼り付けます コードのコピー<script language="javascript" type="text/javascript">
var viewer;function init() {
GrapeCity.ActiveReports.Viewer.OnLoad ("WebViewer1", function() {
viewer = GrapeCity.ActiveReports.Viewer.Attach("WebViewer1");
});
}
</script>...
<body onload="return init()">
-
WebViewerが配置されているフォーム上にVisual Studioツールボックスから［Html Input (Button)］コントロールをドラッグします。
-
［Button］コントロールをダブルクリックし、以下のコードを貼り付けます。
.aspxソースにコードを貼り付けます コードのコピー<input id="button1" type="button" value="button" onclick="return Button1_onclick()" />
-
このボタンに以下の関数を追加します。
.aspxソースにコードを貼り付けます コードのコピーfunction Button1_onclick() { var zoom = viewer.getZoom(); alert("プロパティがこの値から変更されていることを確認します：" + zoom); zoom += 0.1; viewer.setZoom(zoom); alert("to " + zoom); }
メモ:イベントハンドラでは、変数の定義や、Flashビューワとの関連付けを直接行うことができます。
.aspxソースにコードを貼り付けます コードのコピーfunction Button1_onclick()
{
var viewer;
viewer = GrapeCity.ActiveReports.Viewer.Attach("WebViewer1");
...
}
使用できるFlashビューワプロパティ
|
メモ: 以下のプロパティは、"{get|set}<プロパティ名>()"メソッドを使用して値を設定または参照します。 |
|
プロパティ名 |
解説 |
|---|---|
|
CurrentPage |
整数型。現在選択されているビューに対するページを設定または参照します |
|
HyperLinkBackColor |
文字列型。ドキュメント内のすべてのハイパーリンクの背景色を設定または参照します。この値は新しいドキュメントがロードされた後にのみ適用されます。形式は#FF0000(#RRGGBB)です。 |
| HyperLinkForeColor | 文字列型。ドキュメント内のすべてのハイパーリンクの前景色を設定または参照します。この値は新しいドキュメントがロードされた後にのみ適用されます。形式は#FF0000(#RRGGBB)です。 |
|
HyperLinkUnderline |
ブール型。ドキュメント内のすべてのハイパーリンクのテキストに下線が引かれるかどうかを設定または参照します。この値は新しいドキュメントがロードされた後にのみ適用されます。 |
|
SearchResultsBackColor |
文字列型。検索ダイアログを使用した時の検索結果のテキストの背景色を設定または参照します。形式は#FF0000(#RRGGBB)です。 |
| SearchResultsForeColor | 文字型。検索ダイアログを使用した時の検索結果のテキストの前景色を設定または参照します。形式は#FF0000(#RRGGBB)です。 |
| PaperColor | 文字列型。レポートの用紙の色を設定または参照します。形式は#FF0000(#RRGGBB)です。 |
| ShowSplitter |
ブール型。スプリッタを表示するかどうかを示す値を設定または参照します。Trueに設定した場合、スプリッタが表示されます。 |
| TargetView | 文字列型。"Primary"または"Secondary"を設定します。現在アクティブになっているビューが上のビュー（Primary）か下のビュー（Secondary）かを指定する値を設定または参照します。ShowSplitterプロパティが"False"の場合、2番目のビューに切り替えることはできません。 |
| ThemeUrl | 文字列型。Flashビューワに適用するテーマファイルの相対URLを示す値を設定または参照します。 |
| Zoom | 整数型。レポートを表示するズーム倍率を示す値を設定または参照します。 |
| TocPanel |
オブジェクト型。「見出し一覧」ペインオブジェクトを参照します。このプロパティは読み取り専用です。
|
| ViewType | 文字列型。ViewTypeの値を設定または参照します。"Single"、"MultiPage"、"Continuous"を設定します。 |
| EventsHandler | オブジェクト型。イベントハンドラのコンテナを設定または参照します。 |
使用できるFlashビューワメソッド
|
メモ： 以下のメソッド以外に、各プロパティについて、"{get|set}<プロパティ名>()"メソッドを利用できます。プロパティについては、「使用できるFlashビューワプロパティ」セクションを参照してください。 |
| メソッド | 解説 | ||||
|---|---|---|---|---|---|
|
LoadDocument(string documentUrl) |
RDFドキュメントをロードします。 ストリームされたドキュメントを提供するためにサーバー上のRDFファイル、RpxHandler、CompiledReportHandlerまたはカスタムHttpハンドラの実装を使用してください。このメソッドは現在のドキュメントのロード処理をキャンセルします。 コードサンプル
|
||||
|
CancelDocumentLoad() |
現在のドキュメントのロード処理をキャンセルします。 |
||||
| Print(PrintOptions options) | ページがロードされて印刷ダイアログが表示されるまでViewerが待つように設定し、印刷処理を開始します。PageRangesCollectionメソッドがPrintOptionsクラスに含まれること以外は、PrintOptionsはFlashViewerPrintOptionsクラスと同様です。 | ||||
|
CreatePrintOptions() |
Print()メソッド用のオプションを作成します。 | ||||
|
SetViewType(string viewType, int multiPageRows, int multiPageCols) |
ViewTypeを指定します。 第1パラメータの値はViewType列挙体（"Single"、"MultiPage"、"Continuous"）を指定します。残りの2つのパラメータは、"MultiPage"の場合にのみ適用されます。"MultiPage"以外の場合には、"1,1"を設定してください。 |
||||
Flashビューワのイベントをハンドルするコードを追加する
- 以下のコードを.aspxソースに追加し、Flashビューワを定義しイベントハンドラを追加します。
| .aspxソースにコードを貼り付けます |
コードのコピー
|
|---|---|
<script language="javascript" type="text/javascript">
var viewer;
function init() {
GrapeCity.ActiveReports.Viewer.OnLoad("WebViewer1", function() {
viewer = GrapeCity.ActiveReports.Viewer.Attach("WebViewer1");
viewer.setEventsHandler({
<EVENTS>
});
});
}
</script>
...
<body onload="return init()">
|
|
|
メモ:<EVENTS>については、以下の［使用できるイベント］一覧をご参照ください。 |
使用できるイベント
| イベント | 解説 | ||||
|---|---|---|---|---|---|
|
OnLinkClick(LinkEventArgs) |
リンクされた項目または文字列のURL値を指定します。このイベントは、ハイパーリンクを含むレポートオブジェクトがクリックされた場合に発生します。 別のブラウザウィンドウを開くようなハイパーリンクのデフォルト操作をオーバーライドすることを可能にします。キャンセル可能です。 イベントハンドラは、このイベントに関するデータを含むLinkEventArgs型の引数を受け取ります。 ハンドラ引数にはハイパーリンクURL値を返すLinkフィールドが含まれています。 コードサンプル
|
||||
|
OnError(ErrorEventArgs) |
アプリケーションがエラーまたは警告を出したときに発生します。 このイベントを使用してFlashビューワのエラーメッセージおよび警告をカスタマイズできます。 イベントハンドラは、このイベントに関するデータを含むErrorEventArgs型の引数を受け取ります。ハンドラ引数にはErrorTypeおよびMessageフィールドが含まれています。 ErrorTypeフィールドにはエラーの種類を指定する値が含まれ、MessageフィールドにはFlashビューワに関する問題の解説が含まれています。 このイベントを利用して、ユーザーへの通知を変更できます。 コードサンプル
|
||||
| OnLoadProgress(LoadProgressArgs) |
レポートの処理中に発生します。 イベントハンドラは、このイベントに関するデータを含むLoadProgressArgs型の引数を受け取ります。 ハンドラ引数にはPageCount、PageNumberおよびStateフィールドが含まれています。このイベントでは、戻り値が無視されます。 PageCountフィールドは、レポートの総ページ数を返します。 PageNumberフィールドは処理されたレポートのページ番号を返します。 Stateフィールドは、レポートの処理の進歩状況を示す値を返します。 参照可能な値は、"InProgress"、"Cancelled"および"Completed"です。 "InProgress": レポートが読み込み中の状態を示します。 "Cancelled": レポートの読み込みがキャンセルされた状態を示します。 "Completed": レポートの読み込みが完了した状態を示します。 コードサンプル
|
||||
|
OnTargetViewChanging(TargetViewChangeEventArgs) |
ビューワのアクティブなビューが変更されるときに発生します。 イベントハンドラは、このイベントに関するデータを含むTargetViewChangedEventArgs型の引数を受け取ります。 ハンドラ引数にはCurrentViewおよびNewViewフィールドが含まれています。 CurrentViewフィールドは現在選択されているビューの値を返します。 NewViewフィールドは選択された新しいビューの値を返します。 コードサンプル
|
||||
|
OnToolClick(ToolClickEventArgs) |
ツールバー上のボタンがクリックされたときに発生します。キャンセル可能です。 イベントハンドラは、このイベントに関するデータを含むToolClickEventArgs型の引数を受け取ります。ハンドラ引数にはToolフィールドが含まれています。 Toolフィールドはクリックされたボタンのボタン名を返します。 コードサンプル
|
||||
| OnCurrentPageChanged(CurrentPageChangeEventArgs) |
ユーザーナビゲーションコマンドまたはコードによって現在のビュー内でページが変更された時に発生します。 このイベントは、現在のアクティブなビューが変更される場合にも発生します。 イベントハンドラは、このイベントに関するデータを含むCurrentPageChangedEventArgs型の引数を受け取ります。ハンドラ引数にはPageNumberおよびViaApiフィールドが含まれています。 PageNumberフィールドにはページ番号が含まれています。ViaApiフィールドは、イベントがCurrentPageプロパティにページ番号を設定することで発生するかどうかを指定します。 |
||||
|
メモ:クライアント側でイベントがハンドルされたことを示すには、"return true;"を使用してください。 "return false;"はイベントがハンドルされなかったことを示します。 |