.NET TIPS [ASP.NET AJAX]独自のエクステンダ・コントロールを作成するには?(クライアントサイド編)[3.5、C#、VB]山田 祥寛2009/12/03 |
|
本稿は「TIPS:[ASP.NET AJAX]独自のエクステンダ・コントロールを作成するには?(サーバサイド編)」の続きである。サーバサイド編では、エクステンダ・コントロールに必要な要素のうち、サーバサイド(サーバ・コントロール)の挙動にかかわるデザイン・クラスとエクステンダ・クラスとについて解説した。
本稿では、引き続きクライアントサイドの挙動を定義するBehaviorオブジェクトを作成するとともに、出来上がったエクステンダを.aspxファイルから呼び出す方法について解説する。
サーバサイド編でも示したが、本稿で作成するDialogButtonコントロール(DialogButtonExtender)の実行結果は次の画面のようになる。
本稿で作成するDialogButtonコントロールの実行例 |
ボタンをクリックすると、あらかじめ決められたメッセージをダイアログ表示 |
それではさっそく、実装の手順を見ていくことにしよう。
1. Behaviorオブジェクトを定義する
サーバサイド編でも触れたように、Behaviorオブジェクトはエクステンダのクライアントサイド機能を定義するためのJavaScriptのクラスである。サーバサイドのデザイナ・クラスはその中身が空で、そのペアとなるエクステンダ・クラスも単なる宣言の塊であったのに対して、Behaviorオブジェクトはエクステンダの挙動を決める――実質、エクステンダ・コントロールの中核を担うクラスであるといえる。
次のコードは、独自のBehaviorオブジェクト「DialogButtonBehavior」を定義するDialogButtonBehavior.jsファイルの内容だ。
|
|
DialogButtonコントロールの挙動を規定するBehaviorオブジェクト(DialogButtonBehavior.js) |
なお、Behaviorオブジェクトを新たに作成した場合、ソリューション・エクスプローラから該当のファイルを選択したうえで、プロパティ・ウィンドウから[ビルド アクション]として「埋め込まれたリソース」を選択する必要がある。さもないと、Behaviorオブジェクトがアセンブリに組み込まれなくなってしまうので、要注意だ。
Behaviorオブジェクトは埋め込みリソースとして定義する |
それでは、コードの内容について、ポイントを押さえていこう。なお、JavaScriptでクラスを定義する方法については、「Microsoft AJAX Libraryで実践オブジェクト指向JavaScript」が詳しいので、併せて参照していただくとよい。
AjaxControlToolkit.BehaviorBaseクラスを継承すること
AjaxControlToolkit.BehaviorBaseクラスは、エクステンダ・クラスとのプロパティ値の受け渡しをはじめ、Behaviorオブジェクトに必要な最低限の機能を提供するものだ。Behaviorオブジェクトは、原則として、このBehaviorBaseオブジェクトを継承している必要がある。
エクステンダ・クラスのプロパティと対応していること
エクステンダ・クラスで公開されたプロパティをBehaviorオブジェクトで利用するには、Behaviorオブジェクトで対応するプロパティ(アクセサ・メソッド)を用意しておく必要がある。ここでは、get_Messageメソッドとset_Messageメソッドがそれだ。
アクセサ・メソッドの名前は、「get_<プロパティ名>」「set_<プロパティ名>」の形式で命名する必要がある(大文字小文字も区別される)。
プロパティ値の変更はraisePropertyChangedメソッドで通知
プロパティ値を変更した場合、raisePropertyChangedメソッドを使ってプロパティ値の変更を通知するのが作法だ。このサンプルでは、特にこの通知を受け取って何かをしているわけではないので、省略しても動作には支障ないが、Behaviorオブジェクトとしての汎用性と後々の拡張を考慮するならば、このようなわずかな手間を惜しむ理由はないだろう。
|
|
[構文]raisePropertyChangedメソッド | |
name:プロパティ名。 |
イベント・ハンドラを登録する
ここでは、ターゲット要素でclickイベントが発生したタイミングで、ダイアログ・ボックスを表示する必要がある。このためのイベント・ハンドラを定義するのが、$addHandlerショートカット関数の役割である。
|
|
[構文]$addHandlerショートカット関数 | |
elem:ターゲット要素。 ev:イベント名。 handler:イベント・ハンドラ。 |
Behaviorオブジェクトでターゲット要素を取得するには、get_elementメソッドをコールすればよい。これによって、ここではエクステンダに関連付いたボタンを取得することができる。
2. DialogButtonコントロールを配置する
以上で、エクステンダの準備は完了だ。プロジェクトをビルドすると、プロジェクト・フォルダ配下の「bin/Release」フォルダ(または「bin/Debug」フォルダ)配下に「プロジェクト名.dll」(ここではMyExtender.dll)ができているはずだ。
これを、DialogButtonコントロールを利用するWebサイト配下のBinフォルダに配置しよう。また、「TIPS:[ASP.NET AJAX]ASP.NET AJAX Control Toolkitを利用するには?」で紹介した要領で、ツールボックスにエクステンダを登録しておくこと。
ツールボックスに登録されたエクステンダ・コントロール |
3. 新規のWebフォームを作成する
新規のWebフォーム(DialogButton.aspx)を作成したら、フォーム・デザイナから以下の画面の要領でサーバ・コントロールを配置する。
Webフォーム(DialogButton.aspx)のフォーム・レイアウト | ||||||
以下のコントロールを配置する。 | ||||||
|
あとは、Buttonコントロールに対してDialogButtonコントロールを関連付けるだけだ。Buttonコントロール右肩のタスク・メニューから[エクステンダの追加]を選択する。
[エクステンダ ウィザード]ダイアログ |
[エクステンダ ウィザード]ダイアログが起動するので、エクステンダの一覧から「DialogButtonExtender」を選択し、ID値には「dbe」と指定しておこう。これでButtonコントロール「btnSend」にDialogButtonコントロールが適用された。
DialogButtonコントロールのプロパティは、(エクステンダそのものではなく)関連付けたコントロールのプロパティとして設定する必要がある点に注意してほしい。この場合であれば、Buttonコントロール「btnSend」のプロパティ・ウィンドウに「dbe」(DialogButtonコントロールのID値)という項目が追加されているので、この項目の配下から個々の値を設定することができる。ここでは、Messageプロパティに「こんにちは、エクステンダ!」という文字列だけを設定しておく*1。
*1 そのほかはエクステンダ共通で用意されたプロパティであるが、ここでは気にする必要はない。 |
以上の手順を終えたら、サンプルを実行してみよう。冒頭の画面のように、ボタンをクリックしたタイミングで、ダイアログ・ボックスが表示されればエクステンダは正しく動作している。
本稿では、エクステンダ独自の基本を押さえるという意味で、まずは最小限の構成でエクステンダを作成してみたが、本格的にエクステンダを実装するうえでは知っておきたい事項はあまたある。
例えば、エクステンダからの出力をきれいにレイアウトしたい場合には、エクステンダに画像やスタイルシートを組み込みたいこともあるだろう。また、エクステンダをJavaScriptコードから操作するためのイベントを定義したいということもあるかもしれない。はたまた、そもそもエクステンダからサーバ側に対して非同期通信を行いたいというケースもあるだろう。
これらのケースについては、それぞれ後日「TIPS:[ASP.NET AJAX]エクステンダ・コントロールでイベントを定義するには?」「TIPS:[ASP.NET AJAX]エクステンダ・コントロールにスタイルシートや画像を組み込むには?」「TIPS:[ASP.NET AJAX]エクステンダ・コントロールから非同期通信を行うには?」で紹介する予定である。
利用可能バージョン:.NET Framework 3.5 カテゴリ:Webフォーム 処理対象:ASP.NET AJAX 関連TIPS:[ASP.NET AJAX]独自のエクステンダ・コントロールを作成するには?(サーバサイド編) 関連TIPS:[ASP.NET AJAX]ASP.NET AJAX Control Toolkitを利用するには? 関連TIPS:[ASP.NET AJAX]エクステンダ・コントロールでイベントを定義するには?(後日公開予定) 関連TIPS:[ASP.NET AJAX]エクステンダ・コントロールにスタイルシートや画像を組み込むには?(後日公開予定) 関連TIPS:[ASP.NET AJAX]エクステンダ・コントロールから非同期通信を行うには?(後日公開予定) |
「.NET TIPS」 |
- 第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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
|
|