連載:Microsoft AJAX Library&JavaScriptプログラミング第4回 MS AJAX LibでAJAX対応コントロールを開発しよう(後編)山田 祥寛(http://www.wings.msn.to/)2008/02/08 |
|
|
[4]Behaviorオブジェクトを編集する
続いて、Behaviorオブジェクトを編集する。やや長いコードとなるが、注目すべき点は限定されている。全体的な構造については、ここまでの解説を踏まえながら読み解いていただきたい。
| |
リスト5 DialogButtonExternalコントロールのクライアント側の挙動を定義するBehaviorオブジェクト(DialogButtonExternalBehavior.js) |
コードの全体的な流れはリスト内のコメントを参照いただくとして、ここで注目していただきたいのは以下の2点である。
新規の要素をシンプルなコードで生成する
Behaviorオブジェクトを記述するうえでは、動的にDOM要素を生成したいという局面は少なからず発生する。もちろん、これを標準的なDOM APIで記述しても構わないわけであるが、要素に付随するプロパティやイベント・ハンドラが複数になる場合、1つの要素を定義するにもコードが冗長になってしまうのはうれしくない。そもそも書き方によっては、1つの要素定義がコードのあちこちに散在してしまう可能性もあり、コードの可読性を損なう一因ともなるだろう。
そこで登場するのが、CommonToolkitScriptsクラスが提供するcreateElementFromTemplateメソッドなのだ。このメソッドは、その名前のとおり、生成する要素の定義内容をテンプレートで記述するためのメソッドだ。このメソッドを利用することで、プロパティ定義からイベント・ハンドラの定義までを1カ所に、かつ、ハッシュ形式でコンパクトに記述することが可能になる。
createElementFromTemplateメソッドの一般的な構文は、以下のとおりだ。また、併せてControl Toolkit内のCommon.js(CommonToolkitScriptsクラスを定義したソース・ファイル)に示されている例文も引用しておく(ただしコード内のコメントは筆者によるもの)。
| |
CommonToolkitScriptsクラスのcreateElementFromTemplateメソッドの構文 |
| |
リスト6 createElementFromTemplateメソッドの記述例 | |
Control Toolkit内のCommon.js(CommonToolkitScriptsクラスを定義したソース・ファイル)に示されている例文。 * $commonは、CommonToolkitScriptsクラスでのエイリアスである。 |
以上を踏まえて、リスト5の の部分を読み解いてみると、このコードによって最終的には、以下のような<div>要素が生成されることになる。
|
[参考]CommonToolkitScriptsクラス CommonToolkitScriptsクラスは、Behaviorオブジェクトの開発に利用できるばかりではない。Webフォームから直接利用することも可能である。CommonToolkitScriptsクラス(正確にはCommonToolkitScriptsクラスを含む、AjaxControlToolkit.dll内のCommon.js)をインポートするには、[ScriptReferenceコレクションエディタ]ダイアログにてScriptManager.Scriptsプロパティにあらかじめ以下の表4のような情報を登録しておけばよい。
Scriptsプロパティについては前回で既出であるが、実ファイルを直接参照する場合と異なり、アセンブリ内のスクリプトを取得するには(Pathプロパティではなく)Assembly/Nameプロパティで取得する必要があるので、注意されたい。 あとは、ページ内のJavaScriptからBehaviorオブジェクトの場合と同様に、CommonToolkitScriptsクラスを利用することが可能だ。アセンブリに含まれるほかのBehaviorオブジェクトを利用する場合も同様の手続きで可能である。 |
要素にポップアップ機能を適用する
次に、新規に生成された<div>要素に対してポップアップ機能を適用する。前述したように、ポップアップ機能を提供するのは、AjaxControlToolkit.PopupControlBehaviorクラスの役割だ。前回でも紹介したように、Behaviorオブジェクト(コンポーネント)を初期化するには、$createショートカット関数を利用すればよい。
ここでは、AjaxControlToolkit.PopupControlBehaviorクラスに対して、以下のプロパティを指定して初期化しているわけだ。
| ||||||
表5 AjaxControlToolkit.PopupControlBehaviorクラスのプロパティ | ||||||
コンポーネントをインスタンス化できたら、後はshowメソッドでメッセージボックスをポップアップ表示することができる。また、メッセージボックスを非表示にするにはhideメソッドを呼び出せばよい。
[5]スタイルシートを用意する
前述したように、DialogButtonExternalコントロールでは、メッセージボックスのスタイルを指定するためにCSSスタイルシートを利用している。ここでは、以下のようなスタイルシートを用意しておくものとしよう*4。
*4 前述したように、スタイルシートのようなリソースはあらかじめソリューション・エクスプローラで「埋め込まれたリソース」として設定しておく必要があるので要注意。 |
| |
リスト7 DialogButtonExternalBehavior.jsから利用するCSSスタイルシート(Dialog.css) |
ここで注目していただきたいのは、リスト内の太字部分だ。ここでは、background-imageプロパティとしてメッセージボックスの背景画像を指定しているわけであるが、先にも見たように、背景画像(Back.jpg)はアセンブリ内のリソースとして登録されている。
このような場合、(当然ながら)
|
のように指定しても、Back.jpgにアクセスすることはできない。アセンブリ内のリソースを参照するには、WebResourceプロパティでリソース参照のためのURLを動的に取得する必要があるのだ。
WebResourceプロパティを呼び出すには、リソースの中で、
|
のように記述すればよい。これによって、<%= 〜 %>ブロックの中身は実行時に動的に解析され、出力時には、
|
といったURLが埋め込まれることになる。
ただし、先にも述べたように、リソース内で<%= 〜 %>ブロックを使用する場合には、エクステンダ・クラスの側でWebResource属性(PerformSubstitutionプロパティ)を付加しておく必要があるので注意してほしい。ここではスタイルシートに<%= 〜 %>ブロックを埋め込む方法について紹介したが、もちろん、JavaScriptファイルやテキスト・ファイルなど、そのほか任意のリソースに対しても、同じ要領で指定できる。
[6]DialogButtonExternalコントロールの動作を確認する
以上で、DialogButtonExternalコントロールの実装の手順は完了だ。前回の手順に従って、DialogButtonExternalコントロールをWebサイトに配置した後、WebフォームからDialogButtonExternalコントロールの動作を確認してみよう。
新規のWebフォーム(DialogButtonExternal.aspx)を作成したら、フォーム・デザイナから以下の図7の要領でサーバ・コントロールを配置する。また、それぞれのコントロールに対しては、表6の内容でプロパティ値を設定しておこう。
図7 Webフォーム(DialogButtonExternal.aspx)のレイアウト |
| ||||||||||||||
表6 図7で配置したコントロールとその設定 | ||||||||||||||
以上の手順を終えたら、さっそく、DialogButtonExternal.aspxを実行してみよう。図3のように、[表示切り替え]ボタンをクリックすることで、オリジナルのポップアップ・メッセージボックスが表示/非表示されれば成功だ。
■
以上、今回はExtenderコントロールにAjax機能を付与する方法、および既存のBehaviorオブジェクトを引用する方法について紹介した。特にControl Toolkitで提供されているBehaviorオブジェクトには有用なものが多く、駆使すれば、高度な処理をシンプルなコードで実現できるはずだ。
もっとも、Control Toolkitで提供されているBehaviorオブジェクト(とその中に含まれる諸メソッド)の分量は膨大であり、本稿でそのすべてを紹介することはできない。興味のある方は、拙著『ASP.NET AJAXプログラミング − Windows標準AJAXフレームワークによるリッチクライアント開発手法− 』でもまとめているので、参照いただきたい。
さて、次回は再びMS AJAX Lib単独の機能に戻って、JavaScriptプログラミングを効率化するさまざまなユーティリティ・クラスをTIPS的に紹介する予定だ。どうぞお楽しみに。
INDEX | ||
Microsoft AJAX Library&JavaScriptプログラミング | ||
第4回 MS AJAX LibでAJAX対応コントロールを開発しよう(後編) | ||
1.Ajax対応のExtenderコントロールを作成しよう | ||
2.AjaxDialogButtonコントロールのBehaviorオブジェクト | ||
3.Control Toolkit標準のBehaviorオブジェクトを活用しよう | ||
4.DialogButtonExternalコントロールのBehaviorオブジェクト | ||
「Microsoft AJAX Library&JavaScriptプログラミング」 |
- 第2回 簡潔なコーディングのために (2017/7/26)
ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている - 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう - 第1回 明瞭なコーディングのために (2017/7/19)
C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える - Presentation Translator (2017/7/18)
Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
|
|