連載：Microsoft AJAX Library＆JavaScriptプログラミング 第3回　MS AJAX LibでAJAX対応コントロールを開発しよう（前編） 山田 祥寛（http://www.wings.msn.to/） 2007/12/21

Page1 Page2 Page3 Page4 Page5

Back Issue

1 MS AJAX Libで実践オブジェクト指向JavaScript 2 PageRequestManagerクラスでUpdatePanelコントロールを極める！

　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クラスで公開しているメンバを共通して利用することが可能である。

クラス メンバ 概要 Sys.Component ［P］ events コンポーネントに登録されたイベントのリスト（Sys.EventHandlerListオブジェクト） メソッド 概要 addHandler(name, handler) リストにハンドラを追加 getHandler(name) 指定されたハンドラを取得 removeHandler(name, handler) 指定されたハンドラを削除 ［P］ id コンポーネントを一意に特定するID値 ［M］ initialize コンポーネントを初期化 ［M］ dispose コンポーネントを破棄（disposingイベントを発生） ［M］ beginUpdate() プロパティ値の更新を開始 ［M］ endUpdate() プロパティ値の更新を終了 ［M］ updated() プロパティ値更新後の処理を定義 ［M］ raisePropertyChanged(name) プロパティの変更を通知（propertyChangedイベントを発生） ［E］ disposing コンポーネントを破棄したタイミングで発生 ［E］ propertyChanged プロパティ値が変更されたタイミングで発生 Sys.UI.Behavior ［P］ element 関連付いたターゲット要素（読み取り専用） ［P］ name Behaviorオブジェクトの名前 Sys.UI.Control ［P］ element 関連付いた要素（読み取り専用） ［P］ parent 親コントロール ［P］ visible 可視状態（visible｜hidden） ［P］ visibilityMode 不可視時の状態（hide｜collapse） ［M］ onBubbleEvent(sender, args) raiseBubbleEventメソッドのコール時に実行 ［M］ raiseBubbleEvent(sender, args) 親コントロールのonBubbleEventメソッドを呼び出し ［M］ addCssClass(clazz) 指定されたスタイルシート・クラスを追加 ［M］ removeCssClass(clazz) 指定されたスタイルシート・クラスを削除 ［M］ toggleCssClass(clazz) 指定されたスタイルシート・クラスを切り替え

表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のとおりだ。

メンバ 概要 ［P］Message メッセージボックスに表示するメッセージ ［E］Closed メッセージボックスを閉じたタイミングで発生

表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プログラミング」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）