ASP.NET Atlas でカスタム動作を作成する

著者：Eve Cole 更新時間：2009-06-30 16:12:07

英語版: http://dflying.dflying.net/1/archive/120_build_your_own_behaviors_in_aspnet_atlas.html
Atlas の動作は、コントロールのイベントがトリガーされたときの動作を定義します。動作は、クリックやホバーなど、カプセル化された DHTML イベントとして見ることができます。ビヘイビアーは、複雑なドラッグアンドドロップ、自動補完、フローティング機能やその他の機能など、Atlas クライアントコントロールのより高度で豊富な機能を提供するために、Atlas クライアントコントロールにアタッチできるコンポーネントにすることもできます。動作は、Atlas コントロールの動作コレクションで定義されます。

Atlas のドキュメントとソースファイルから、Atlas には次の組み込み動作があることがわかります。

クリック動作: マウスクリックの処理を提供します。
フローティング動作: ドラッグアンドドロップ効果を提供します。
ホバー動作: DHTML イベント onmouseover、onmouseout、onfocus、onblur の処理を提供します。
ポップアップコンポーネント: ポップアップ機能を提供し、高度なツールチップの実装に使用できます。
オートコンプリート動作: 自動コンプリート機能を提供します。これは、Atlas デモでよく使用される機能の 1 つでもあります。この動作にはサーバー側のハンドラーも必要です。
Click Behavior は DHTML の onclick イベントを処理するために使用されます。これは非常に便利ですが、提供される関数はやや単純です。一部のより複雑なプログラムでは、左キーと右キーの機能を分離する必要がある場合があります。たとえば、左キーは選択に使用され、右キーはショートカットメニューのポップアップに使用されます。この if-else を Click Behavior ハンドラーに組み込むことはできますが、これは Atlas の適切な方法ではありません。したがって、今日は、ExtendedClickBehavior と呼ばれる、より強力なクリック動作を作成します。これは、動作内で左右のキーを分離し、2 つの異なるイベントをトリガーできます。この ExtendedClickBehavior を記述することで、Atlas でカスタム Behavior を作成する一般的なプロセスを理解することもできます。

通常、カスタム Behavior を作成するには 5 つの手順があります。

Sys.UI.Behavior 基本クラスから継承します。
独自のイベントを定義して、DHTML でイベントをカプセル化します。これらのイベントは、元の未変更の DHTML イベントの代わりに他の Atlas コントロールを公開するために使用されます。
ビヘイビアのコンストラクターでイベントのハンドラーを指定し、デストラクターでイベントのハンドラーを切り離します。
ハンドラー関数で対応するイベントを発行します。 ExtendedClickBehavior の例では、さまざまなマウスボタンに基づいてさまざまなイベントを発行します。
getDescriptor() メソッドで定義したイベントの説明を追加します。
以下は ExtendedClickBehavior の JavaScript コードです。上記の 5 つの手順は、コード内でコメントとしてマークされています。以下のコードを ExtendedClickBehavior.js として保存します。

Sys.UI.ExtendedClickBehavior = function() {
Sys.UI.ExtendedClickBehavior.initializeBase(this);

var _clickHandler;

// ステップ 2
this.click = this.createEvent();
this.leftClick = this.createEvent();
this.rightClick = this.createEvent();

this.dispose = function() {
// ステップ 3
this.control.element.detachEvent('onmousedown', _clickHandler);
Sys.UI.ExtendedClickBehavior.callBaseMethod(this, 'dispose');
this.initialize

= function() {
Sys.UI.ExtendedClickBehavior.callBaseMethod(this, 'initialize');

// ステップ 3
_clickHandler = Function.createDelegate(this, clickHandler);
this.control.element.attachEvent('onmousedown', _clickHandler);
}

this.getDescriptor = function() {
var td = Sys.UI.ExtendedClickBehavior.callBaseMethod(this, 'getDescriptor');

// ステップ 5
td.addEvent('クリック', true);
td.addEvent('leftClick', true);
td.addEvent('rightClick', true);
tdを返します。
}

// ステップ 4
関数 clickHandler() {
this.click.invoke(this, Sys.EventArgs.Empty);
if (window.event.button == 1)
{
this.leftClick.invoke(this, Sys.EventArgs.Empty);
}
else if (window.event.button == 2)
{
this.rightClick.invoke(this, Sys.EventArgs.Empty);
}
}
}
// ステップ 1
Sys.UI.ExtendedClickBehavior.registerSealedClass('Sys.UI.ExtendedClickBehavior', Sys.UI.Behavior);
Sys.TypeDescriptor.addType('script', 'extendedClickBehavior', Sys.UI.ExtendedClickBehavior);
この ExtendedClickBehavior をページ上でテストしてみましょう。クリックのページに <div> を追加し、クリック情報を表示するラベルを追加します。以下は、ASPX ファイルからの HTML 定義です。 ScriptManager で ExtendedClickBehavior.js ファイルへの参照を追加することを忘れないでください。

<atlas:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="server">
<スクリプト>
<atlas:ScriptReference Path="ExtendedClickBehavior.js" />
</スクリプト>
</atlas:スクリプトマネージャー>
<div>
<div id="myButton" style="border: 1px plain black; width: 20em;white-space:normal">クリックしてください (左と右)!</div> <br />
<span id="myLabel">クリックされていません</span>
</div>
以下は Atlas スクリプトの定義です。 Atlas の setProperty アクション (Atlas アクションについては、次の記事を参照) を使用して、クリックするたびにラベルのテキストを設定していることに注意してください。