連載:Microsoft AJAX Library&JavaScriptプログラミング第3回 MS AJAX LibでAJAX対応コントロールを開発しよう(前編)山田 祥寛(http://www.wings.msn.to/)2007/12/21 |
|
Back Issue |
||||
|
ASP.NET AJAX Control Toolkit(以降、Control Toolkit)はASP.NET AJAXをベースに構築されたオープン・ソースのサーバ・コントロール集だ。.NET TIPSでも紹介しているように、Control Toolkitで提供されるサーバ・コントロールを利用することで、ASP.NET AJAX単体では多くのコーディングを必要とした機能を、最低限のコードで実現することができるようになる。
しかし、Control Toolkitが提供するコントロールはあくまで汎用的によく利用される機能を集めたもので、実際のアプリケーション開発をControl Toolkitによるコントロールだけで賄うにはおのずと限界がある。アプリケーション固有のAjax要件を満たしたいという場合には、どうしても自作のコントロールを構築したいという局面が発生してくるはずだ。
そこで本稿では、Microsoft AJAX Library(以降、MS AJAX Lib)を利用したAjax対応のサーバ・コントロールを開発する方法について紹介する。もっとも、いきなりサーバ・コントロール開発、というのもややハードルが高いかもしれない。本稿では最初にクライアントサイド・スクリプトだけを利用したコンポーネント(クラス)開発を紹介した後、これをサーバ・コントロール化するという流れで、解説を進めていくことにしよう。
コンポーネント開発のための基本クラス
MS AJAX Libでは、コンポーネント開発のための基本クラスを標準で提供している。すなわち、
- Sys.Component
- Sys.UI.Control
- Sys.UI.Behavior
の3つである。MS AJAX Libでは、これら基本クラスを継承することで、最低限のコーディングでコンポーネントを開発できるというわけだ。
本稿では、具体的なコンポーネント開発に先立って、まずは、これら基本クラスの特徴について触れておくことにしよう。
最初に、Sys.Componentクラス。すべてのコンポーネントの基底クラスとなるのが、このSys.Componentクラスである(つまり、すべてのコンポーネントはSys.Componentクラスを継承しているはずであるし、また、していなければならない)。
Sys.UI.Control/Sys.UI.Behaviorクラスも、Sys.Componentクラスを継承した派生クラスである。ユーザー・インターフェイスを持たず、かつ、Behaviorオブジェクト(後述)としての機能を必要としない――ごく基本的なコンポーネントを構築する場合には、Sys.Componentクラスを直接に継承してコンポーネントを定義すればよい。
もっとも、Sys.Componentクラスはコンポーネントのための基本的な機能しか提供していないため、独自のユーザー・インターフェイスを持ったコンポーネントを構築する場合にはSys.UI.Controlクラスを、Behaviorオブジェクトとしての機能を実装したい場合にはSys.UI.Behaviorクラスを、それぞれ継承した方がコード量を節約できる。
Behaviorオブジェクトとは、特定のページ内要素に対して任意の挙動(Behavior)を追加するためのオブジェクトである。ちなみに、Control Toolkitで提供される多くのExtenderコントロールは、クライアントサイドでの挙動を定義するためにBehaviorオブジェクトを利用している(これについてはあらためて後述する)。
さて、これら基本クラスの機能を概観するという意味も込めて、以下の表1では、それぞれのクラスで公開されている主なメンバをまとめておく。繰り返しであるが、Sys.UI.Control/Sys.UI.BehaviorはSys.Componentクラスの派生クラスであるので、Sys.Componentクラスで公開しているメンバを共通して利用することが可能である。
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
表1 コンポーネント開発のための基本クラスと、その主要なメンバ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
[P]はプロパティ、[M]はメソッド、[E]はイベントを意味する。 |
ここで注目していただきたいのは、Sys.Componentクラスで提供されるメソッドだ。これらのメソッドの多くは、派生クラスでオーバーライドされることを想定したメソッドである。例えば、コンポーネント開発者はinitialize/disposeメソッドをオーバーライドすることで、コンポーネントの初期化/終了処理を定義できるし、beginUpdate/endUpdate/updatedメソッドを定義することで、プロパティ値更新前後の処理を規定できるというわけだ。
なお、Sys.UI.Behavior/Sys.UI.Controlクラスは、Sys.Componentクラスの基本的な機能に加えて、ターゲット要素取得のためのプロパティや、イベント/CSS操作のメソッドをそれぞれ提供している。
MS AJAX Libを利用したシンプルなコンポーネント
コンポーネント開発の基盤ともなる基本クラスについて理解できたところで、いよいよ具体的なコンポーネント開発に取り組んでみよう。
ここで紹介するのは、任意のボタンに対してメッセージボックス表示機能を付与するMyAjaxLib.DialogButtonBehaviorコンポーネントだ。コンポーネントとして定義するまでもない、ごくシンプルなものだが、まずはMyAjaxLib.DialogButtonBehaviorコンポーネントの実装を通じて、コンポーネント開発の基本的なイメージを養ってみよう。
ボタンをクリックするとメッセージボックスが表示される メッセージボックスを閉じる |
図1 MyAjaxLib.DialogButtonBehaviorコンポーネントを利用したページの実行結果 |
MyAjaxLib.DialogButtonBehaviorコンポーネントを適用したボタンをクリックすると、あらかじめ定義したメッセージボックスを表示する。また、メッセージボックスを閉じた後、任意のスクリプトを実行することができる(ここでは背景色を青色に変化させる)。 |
MyAjaxLib.DialogButtonBehaviorコンポーネントが公開するメンバは、以下の表2のとおりだ。
| ||||||
表2 MyAjaxLib.DialogButtonBehaviorコンポーネントが公開するメンバ | ||||||
[P]はプロパティ、[E]はイベントを意味する。 |
ではさっそく、具体的な実装の手順を見ていくことにしよう。
INDEX | ||
Microsoft AJAX Library&JavaScriptプログラミング | ||
第3回 MS AJAX LibでAJAX対応コントロールを開発しよう(前編) | ||
1.コンポーネント開発のための基本クラス/シンプルなコンポーネント | ||
2. MyAjaxLib.DialogButtonBehaviorを定義する/Webフォームから利用する | ||
3.Control Toolkitを利用したサーバ連携コントロールの開発 | ||
4.エクステンダ・クラスを編集する/Behaviorオブジェクトを定義する | ||
5.Extenderコントロールを利用しよう | ||
「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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
|
|