連載:Microsoft AJAX Library&JavaScriptプログラミング

第3回 MS AJAX LibでAJAX対応コントロールを開発しよう(前編)

山田 祥寛(http://www.wings.msn.to/
2007/12/21


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


Insider.NET フォーラム 新着記事
  • 第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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間