※ この内容は、こちら の記事にまとめました （2007/06 更新）

【環境】
ASP.NET AJAX 1.0 RC
ASP.NET AJAX December CTP (with ASP.NET AJAX Control Toolkit)

1. 事前準備
2. ASP.NET AJAX によるサーバセントリックな実装
3. パーソナライズの実装
4. カスタム Extender の作成と Control Toolkit
5. Web サービス連携とクライアントセントリックな実装
   

こんにちは。
今日は、サーバセントリックな実装の最後の話（まとめ）として、カスタム Extender の作成方法と、 関連して ASP.NET AJAX Control Toolkit を簡単ですがご紹介します。
Extender とは何か、については、前回簡単に概念を記述しましたので参考にしてください。

Extender は、今日ご紹介するように、開発者の皆さんで独自に作成することができます。カスタム Extender の作成方法は、http://ajax.asp.net/ のビデオキャストにおいてもご紹介されていますが、RC版での変更により、現時点 (このブログの記載日は 2007-01-16 です) で http://ajax.asp.net/ でご紹介されているソースと異なる点がありますので、ここでは RC 版で動作するソースとしてご紹介していきたいと思います。

では、サンプルの Extender として、TextBox に値を入力すると、その値を Label にリアルタイムに表示するというデモ用の TextBox の Extender を作成していきたいと思います。(まったく実用的でない Extender ですみません。あくまで AJAX の 「理解」 を目的としています。)

1. Visual Studio を起動し、プロジェクトの新規作成で（注意: Web サイトの新規作成ではありませんので注意してください）、[ASP.NET AJAX Control Project] テンプレートからプロジェクトを新規作成します。(以下の説明では、すべて C# のコードでご紹介します。)
   プロジェクト名は「NewTextBox」としておきましょう。

2. NewTextBoxExtender.cs のソースコードを開き、TargetControlType 属性を

   [TargetControlType(typeof(TextBox))]

   に変更してください。
   このように設定することで、TextBox 専用の Extender として定義され、後ほど動作をみて頂きますが、TargetControlID として TextBox (標準コントロール) から選択可能になります。

3. つぎに、Extender のプロパティを設定します。(同様に、ここで設定した Extender のプロパティがデザイナー上でどのように表示されるかは、後ほど動作確認の中でみていきます。)
   この Extender では、表示する先の Label (標準コントロール) というものを使用するため、これをプロパティ名「TargetLabelId」として設定したいと思います。NewTextBoxExtender.cs のソースコードを開き、文字列 「MyProperty」の箇所を「TargetLabelId」という文字列に変更します。こうした一連の実施すべき作業の箇所には、ソース内に、「TODO」とコメントが記載されていますが、初回は、抜けがないよう (はまらないよう) 文字列を grep しておくと良いでしょう。
   また、追加可能な属性などもインテリセンスで確認して、どういったカスタマイズできるのか探ってみてもおもしろいかもしれません。(例えば、プロパティの説明を入れたり、デザイン時のみ指定可能にしたり、などの指定もおこなえます。)

4. つぎに、上記の TargetLabelId プロパティに、以下の属性定義を追加します。(既に属性として [DefaultValue(“”)] と書かれていると思いますが、その下に追加します。)

   [IDReferenceProperty(typeof(Label))]

5. NewTextBoxBehavior.js を開いてください。このソースは、実際にクライアント上 (ブラウザ上) にレンダリングされた後の JavaScript の処理で、後ほどの動作確認の際などにブラウザからソースをみてもらうとわかりますが、ここに記載したコードはサーバ上でカスタマイズされずそのままスクリプトコードとしてブラウザにレンダリングされます。
   このファイルの TODO に従って文字列 PropertyValue, myPropertyValue の双方の文字列を「TargetLabelId」に変更してください。このコードの編集時は IntelliSense などの表示はおこなわれませんが、将来的 (Visual Studio の次期バージョンなど) には IntelliSense の利用 (Visual Studio が JavaScript を解釈する仕様) が計画されています。

6. さらに、NewTextBoxBehavior.js の「// TODO: add your initialization code here」の箇所に、以下のコードを追加して、該当の TextBox にイベント処理を追加します。(IntelliSense が使えないので慎重な記述を。また万一間違った場合、デバッグも面倒になります。)

   this.get_element().attachEvent('onkeyup', Function.createDelegate(this, this._onkeyup));

7. NewTextBox.NewTextBoxBehavior.prototype に、カスタムの関数として、以下のイベント関数を追加してください。
   ここで、直前の関数宣言の最後に , (カンマ) を入れるのを忘れないようにしてください。

   _onkeyup : function() {var lbl = document.getElementById(this._TargetLabelId);var inputText = this.get_element().value;lbl.innerHTML = 'You entered : ' + inputText;  }

8. ビルドをおこないます。

これで、新しい Extender の dll が作成されました。つぎに、この Extender を使用してみましょう。

1. Visual Studio を起動し、[ASP.NET AJAX Enabled Web Site] のテンプレートから新しい Web サイトを作成します。
2. Default.aspx のデザイン画面を表示し、ツールボックス上に、上記で作成した dll を挿入します。
   挿入方法は、ツールボックス上でマウスを右クリックして、[アイテムの選択] から上記のプロジェクトで構築された dll を選択します。(その前に専用のタブを追加しておくとわかりやすいです。) すると、ツールボックスに、NewTextBoxExtender が表示されるはずです。
3. Default.aspx に TextBox (標準コントロール) と Label (標準コントロール) を挿入します。
4. Default.aspx に NewTextBoxExtender を挿入します。
5. NewTextBoxExtender のプロパティ画面を表示し、TargetControlID プロパティに「TextBox1」(上記で挿入した TextBox の ID) を設定します。
6. つぎに、上記で挿入した TextBox のプロパティ画面を表示し、[NewTextBoxExtender] – [TargetLabelId] から「Label1」(上記で挿入した Label の ID)を選択します。
   先ほど、IDReferenceProperty 属性を設定したと思いますが、この設定により、ここに設定する値が Label の中の1つであることをデザイナーが知っています。

では、ビルドして実行してみましょう。
文字列を入力する度にLabel が更新されるのが確認できるはずです。

このように、開発者のみなさんによって簡単に Extender をカスタム開発し、サーバコントロールとして組み込んで使うことができます。
そして、既に、Microsoft の開発者や社外のコミュニティの開発者の方などにより、非常に有用な (かつ完成度も高い) AJAX 用のコントロールが開発されています。それらを同胞したものが、第１回でインストールした ASP.NET AJAX Control Toolkit になります。
ここに含まれる Extender がどのような動作をするものか 1 つ 1 つは説明しませんが、雰囲気を掴んでもらうため、以下に一部代表的なものを紹介しておきます。詳細は http://ajax.asp.net/ のビデオキャストで紹介していますので、実際に使ってみてください。

• AlwaysVisibleControlExtender
  特定の領域 (div) を画面の所定の位置に常に表示 (スクロールに関係なく固定位置に表示) する Extender
• AnimationExtender
  イベント発生 (例：マウスカーソルをあわせた時、クリック時、など) にあわせて、アニメーション効果による動作 (例：色の変化、サイズの変化、など) を実現させる Extender
• DropShadowExtender
  コントロールに対して影をつけて、ビジュアリティを向上させる Extender
• HoverMenuExtender
  ツールチップのように、カーソルを当てると Panel の内容をポップアップ表示する Extenderで、コンテキストメニューのような動作を作成する場合などに使う
• ModalPopupExtender
  Web 上のページでモーダルダイアログライクな制御を実現する Extender (注: alert, confirm などの JavaScript で準備されたモーダルダイアログではなく、Panel に含まれる HTML の内容をモーダル制御する)
• NumericUpDownExtender
  よく数値入力のテキストボックスなどで見かけるような、テキストボックスの横にトグルを表示し、アップ&ダウンを可能にする Extender。
  数値以外に、列挙型なども指定可能
• PasswordStrength
  パスワードの強さ (「文字と数値を混ぜている」など、どの程度、パスワード文字列として適当か) を入力時にリアルタイムに色等を使ってビジュアルに示唆する Extender
• PopupControlExtender
  日付のピックアップなど、パネルを表示してテキストボックスの入力を補助する Extender
• ResizableControlExtender
  コントロール (Panel など) をマウスを使ってリサイズ可能にする Extender