テンプレートの修正
HelloAjaxControlExtender.vbファイルの設定
実際にソリューションから作成されたテンプレートは次のようになっています（コメントは著者が追記した部分です）。
HelloAjaxControlExtender.vb(テンプレート作成時)
Imports System Imports System.ComponentModel Imports System.Web.UI Imports System.Web.UI.WebControls Imports AjaxControlToolkit #Region "Assembly Resource Attribute" ' HelloAjaxControlBehavior.jsファイルをリソースとして登録 <Assembly: System.Web.UI.WebResource("HelloAjaxControl.HelloAjaxControlBehavior.js", "text/javascript")> #End Region Namespace HelloAjaxControl ' HelloAjaxControlDesigner.vbをデザイナとして登録 ' ExtenderControlBaseクラスのインスタンスを ' HelloAjaxControlBehavior.jsと紐付ける ' TargetControlIDとしてすべてのコントロールを許容する ' ExtenderControlBaseクラスを継承して ' HelloAjaxControlExtenderクラスを生成する <Designer(GetType(HelloAjaxControlDesigner))> _ <ClientScriptResource("HelloAjaxControl.HelloAjaxControlBehavior", _ "HelloAjaxControl.HelloAjaxControlBehavior.js")> _ <TargetControlType(GetType(Control))> _ Public Class HelloAjaxControlExtender Inherits ExtenderControlBase ' TODO: Add your property accessors here. ' JavaScriptファイルに送られるプロパティを設定 ' String型のプロパティに対しデフォルトの値をnullに設定 <ExtenderControlProperty()> _ <DefaultValue("")> _ Public Property MyProperty() As String Get Return GetPropertyValue("MyProperty", "") End Get Set(ByVal value As String) SetPropertyValue("MyProperty", value) End Set End Property End Class End Namespace
JavaScriptファイルのアセンブリの組み込み方法について
テンプレートを利用している場合、テンプレートが作成したBehavior.jsファイルはアセンブリの組み込みが自動設定されていますが、もし追加でJavaScriptファイルなどをソース内に組み込もうとしたときは2つの手順を踏む必要があります。1つ目は「ソース内でアセンブリを組み込むこと」です。上記ソースの中で#Region "Assembly Resource Attribute"内に該当するJavaScriptファイルなどの情報を「プロジェクト名.フォルダ名.ファイル名」の形式で記述します。2つ目は「ビルド時のアクションの設定」です。既定では[コンテンツ]に設定されていますが、[埋め込まれたリソース]として設定します（図7）。
この方法はJavaScritファイルに限らずリソースを組み込む時に必要な方法なので覚えておきましょう。
図7プロパティウィンドウの画面
それでは実際のサンプル作製に入ります。今回のサンプルでは、全てのWebコントロールをTargetControlIDで設定できるExtenderコントロールにするので、TargetControlTypeの記述変更は行いません。続いてプロパティの設定ですが、はじめに書いた機能を実装するために、今回は次の2種類のプロパティを作成します
作成するプロパティの機能
| プロパティ名 | 概要 |
| TargetButtonID | 利用状態を切り替えるButtonコントロールを設定 |
| DisplayText | 初回の利用状態切り替え時にButtonコントロールのテキストとして表示 |
テンプレート作成時に既に［MyProperty］が用意されているので、［MyProperty］の部分をすべて［TargetButtonID］に設定し直して利用します。また。同様に［DisplayText］も記述します。
HelloAjaxControlExtender.vb
Imports System Imports System.ComponentModel Imports System.Web.UI Imports System.Web.UI.WebControls Imports AjaxControlToolkit Imports System.ComponentModel.Design #Region "Assembly Resource Attribute" ' HelloAjaxControlBehavior.jsファイルをリソースとして登録 <Assembly: System.Web.UI.WebResource(
以上で「HelloAjaxControlExtender.vb」の設定は完了です。
HelloAjaxControlBehavior.jsファイルの設定
続いて「HelloAjaxControlBehavior.js」ファイルの設定ですが、その前にテンプレートから作成された状態のファイルを見てください（コメントは著者が追記した部分です）。
HelloAjaxControlBehavior.js（テンプレート作成時）
// README // // There are two steps to adding a property: // // 1. Create a member variable to store your property // 2. Add the get_ and set_ accessors for your property. // // Remember that both are case sensitive! // //名前空間の定義 Type.registerNamespace('HelloAjaxControl'); // HelloAjaxControl.HelloAjaxControlBehaviorクラスのコンストラクタの作成 HelloAjaxControl.HelloAjaxControlBehavior = function(element) { //継承元すべてのメンバを //HelloAjaxControl.HelloAjaxControlBehaviorクラスに引き継ぎ初期化 HelloAjaxControl.HelloAjaxControlBehavior.initializeBase( this, [element]); // TODO : (Step 1) Add your property variables here //プロパティの初期化 this._myPropertyValue = null; } // HelloAjaxControlBehaviorクラスの定義 HelloAjaxControl.HelloAjaxControlBehavior.prototype = { //initializeの設定 initialize : function() { HelloAjaxControl.HelloAjaxControlBehavior.callBaseMethod( this, 'initialize'); // TODO: add your initalization code here }, //クラスの破棄 dispose : function() { // TODO: add your cleanup code here //リソースの破棄するためのコードを記述 HelloAjaxControl.HelloAjaxControlBehavior.callBaseMethod( this, 'dispose'); }, // TODO: (Step 2) Add your property accessors here //プロパティの定義 get_MyProperty : function() { return this._myPropertyValue; }, set_MyProperty : function(value) { this._myPropertyValue = value; } } //クラスの登録 HelloAjaxControl.HelloAjaxControlBehavior.registerClass( 'HelloAjaxControl.HelloAjaxControlBehavior', AjaxControlToolkit.BehaviorBase);
「HelloAjaxControlBehavior.js」ファイルもテンプレートにより骨組みはほとんどできているので、必要な部分だけ修正や加筆するだけで利用できます。なお、このJavaScriptファイル上ではMicrosoft AJAX Libraryが活用できるので$getや$addHandlerなど活用できるものはどんどん活用しましょう。
Microsoft AJAX Libraryで利用できるショートカット関数
実際にMicrosoft AJAX Libraryではショートカット関数が用意されています。Microsoft AJAX Libraryを利用してコーディングを行う過程で頻繁に扱うものをショートカット化しているので、覚えることでコードが見やすくなります。
「Sys.～」の記述はMicrosoft AJAX Libraryのフレームワーク内の名前空間を表しています。さまざまなクラスが用意されているので、他にどのようなクラスやメソッドがあるのか興味がある方はASP.NET AJAX Client Referenceをご覧ください。
Microsoft AJAX Libraryのショートカット
| ショートカット関数 | 説明 |
| $get (id, element) | Sys.UI.DomElement.getElementByIdの省略。指定されたID（id）のDOM要素の取得。elementの指定は既定ではdocument elementだが、他のelementに属する場合は指定が必要。 |
| $addHandler (element, eventName, handler) | Sys.UI.DomEvent.addHandlerの省略。対象要素（element）のDOMイベント（eventName）によって呼び出される関数（handler）を指定。 |
| $addHandlers(element, events, handlerOwner) | Sys.UI.DomEvent.addHandlersの省略。対象要素（element）のDOMイベントによって呼び出される関数をリスト化（events）してまとめて指定。第三引数はオブジェクトのインスタンス（handleOwner）を指定。 |
| $removeHandler(element, eventName, handler) | Sys.EventHandlerList.removeHandlerの省略。$addHandlerの逆で、対象要素（element）のDOMイベント（eventName）によって呼び出さされる関数（handler）を指定して削除。 |
| $clearHandlers(element) | Sys.UI.DomEvent.clearHandlersの省略。Sys.UI.DomEvent.addHandlerまたはSys.UI.DomEvent.addHandlersによって加えられたDOM要素（element）から、すべてのDOMイベントによって呼び出される関数を削除。 |
| $find(id, parent) | Sys.Application.findComponentの省略。指定されたID（id）のコンポーネントを取得。$getと同じく第二引数は他のelementに属する場合に指定が必要。 |
| $create(type, properties, events, references, element) | Sys.Component.createの省略。指定されたオブジェクト（type）を生成し初期化。構成要素はJSONオブジェクトによるプロパティ（properties）、イベント（events）、リファレンス（references）、生成されたオブジェクトと結びつく要素（element）となる。なお、第二要素以降はオプション。 |
さて、このJavaScriptファイルでは「TargetControlIDプロパティに設定したコントロールの上にマウスを移動させた時に、アラートを表示する」と「アラート表示後に対象のButtonコントロール（<asp:Button --/>）1つの利用状態を切り替える」それぞれの振る舞いを記述します。2つの振る舞いはマウスがTargetControlIDプロパティで設定されたコントロール上にマウスが移動した直後の動作なのでmouseoverイベントにまとめることができます。前述のJavaScriptファイルに追記しただけなので、以下のコードをコメントを読みながら眺めてみてください。
HelloAjaxControlBehavior.js（一部）
//名前空間の定義 Type.registerNamespace('HelloAjaxControl'); // HelloAjaxControl.HelloAjaxControlBehaviorクラスのコンストラクタの作成 HelloAjaxControl.HelloAjaxControlBehavior = function(element) { //継承元すべてのメンバを //HelloAjaxControl.HelloAjaxControlBehaviorクラスに引き継ぎ初期化 HelloAjaxControl.HelloAjaxControlBehavior.initializeBase( this, [element]); // TODO : (Step 1) Add your property variables here //プロパティの初期化 this._TargetButtonID = null; this._DisplayText = null; } // HelloAjaxControlBehaviorクラスの定義 HelloAjaxControl.HelloAjaxControlBehavior.prototype = { //initializeの設定 initialize : function() { HelloAjaxControl.HelloAjaxControlBehavior.callBaseMethod( this, 'initialize'); // TODO: add your initalization code here // TargetControlIDプロパティで設定されたコントロールに対して // _onMouseover関数をイベントとして処理するための // マウスオーバーイベントハンドラの登録 $addHandler(this.get_element(), "mouseover", Function.createDelegate(this, this._onMouseover)); }, //クラスの破棄 dispose : function() { // TODO: add your cleanup code here //必要に応じて破棄したいコードを記述 HelloAjaxControl.HelloAjaxControlBehavior.callBaseMethod( this, 'dispose'); }, //TargetControlID上にマウスムーブした時の処理 _onMouseover : function() { var e = $get(this._TargetButtonID); //アラートを表示 alert("Hello,Ajax Control!"); //TargetButtonIDで設定されたボタンに //DisplayTextに入力された値を表示する e.value = this._DisplayTextValue; if (e.disabled){ //TargetButtonIDで設定されたボタンを利用可能にする e.disabled = ""; } else { //TargetButtonIDで設定されたボタンを利用不可能にする e.disabled = true; } }, // TODO: (Step 2) Add your property accessors here //プロパティの定義 get_TargetButtonID : function() { return this._TargetButtonID; }, set_TargetButtonID : function(value) { this._TargetButtonID = value; }, get_DisplayText : function() { return this._DisplayTextValue; }, set_DisplayText : function(value) { this._DisplayTextValue = value; } } //クラスの登録 HelloAjaxControl.HelloAjaxControlBehavior.registerClass( 'HelloAjaxControl.HelloAjaxControlBehavior', AjaxControlToolkit.BehaviorBase);
以上で「HelloAjaxControlBehavior.js」ファイルの設定も完了です。ここまでの作業でExtenderコントロールの原型ができました。
