ASP.NET AJAXで学ぶAJAX対応コントロール実装の基本（後篇）

#Region "Assembly Resource Attribute"
' HelloAjaxControlBehavior.jsファイル、
'   HelloAjaxControl.cssファイルをリソースとして登録
' PerformSubstitution:=Trueの設定をすることで
'   ajaxcontrolimg.pngファイルをCSS上で参照することが可能
' HelloAjaxControl.ajaxcontrolimg.pngファイルを登録
<Assembly: System.Web.UI.WebResource(
"HelloAjaxControl.HelloAjaxControlBehavior.js", "text/javascript")>
<Assembly: System.Web.UI.WebResource(
"HelloAjaxControl.HelloAjaxControl.css",
 "text/css", PerformSubstitution:=True)>
<Assembly: System.Web.UI.WebResource(
"HelloAjaxControl.ajaxcontrolimg.png", "image/png")>
#End Region

' HelloAjaxControlDesigner.vbをデザイナとして登録
' CommonToolkitScriptsファイル・PopupExtenderファイルを
'   読み取るように設定する（読み込む順番は数字の順）
' ExtenderControlBaseクラスのインスタンス
'   をHelloAjaxControl.cssファイルと紐付ける
' ExtenderControlBaseクラスのインスタンスを
'   HelloAjaxControlBehavior.jsファイルと紐付ける
' TargetControlIDとしてすべてのコントロールを許容する
' ExtenderControlBaseクラスを継承して
'   HelloAjaxControlExtenderクラスを生成する
<Designer(GetType(HelloAjaxControlDesigner))> _
<RequiredScript(GetType(CommonToolkitScripts), 0)> _
<RequiredScript(GetType(PopupExtender), 1)> _
<ClientCssResource("HelloAjaxControl.HelloAjaxControl.css")> _
<ClientScriptResource("HelloAjaxControl.HelloAjaxControlBehavior",
 "HelloAjaxControl.HelloAjaxControlBehavior.js")> _
<TargetControlType(GetType(Control))> _
Public Class HelloAjaxControlExtender
    Inherits ExtenderControlBase

.helloajaxcontrol_body
{
    background-color:#9966cc;
    height: 200px;
    width: 200px;
}

.helloajaxcontrol_img
{
    height: 97px;
    width: 171px;
    background:url(<%=WebResource(
"HelloAjaxControl.ajaxcontrolimg.png")%>);
}

//CSSファイル・Imageファイルから情報を取り出し
//DOM生成を行い生成されたDOMを表示する処理
_showPopup : function() {
var e = this.get_element();
    //AjaxControlToolkit.DLLに含まれているCommonToolkitScriptsクラスの
    //createElementFromTemplateメソッドを利用してDOMを生成する
    //この時生成するnodeNameやプロパティの設定が可能
    //今回はCSSファイルから情報を取り出し生成し、
    //TargetControlIDで設定したTargetControlIDで設定された
    //DOM Elementに生成したdiv要素を追加する
    this._popupDOMelement =
        CommonToolkitScripts.createElementFromTemplate({
        nodeName : "div",
        cssClasses : ["helloajaxcontrol_body"]}, e.parentNode);

    //上記同様にdiv要素を生成し、上記の要素に追加する
    this._popupDOMimage =
        CommonToolkitScripts.createElementFromTemplate({
        nodeName : "div",
        cssClasses : ["helloajaxcontrol_img"]}, this._popupDOMelement);

    //AjaxControlToolkit.PopupBehaviorの生成とプロパティの設定
    //コンポーネントが結び付けられるDOMの設定を行う
    this._popupBehavior = new $create(AjaxControlToolkit.PopupBehavior, {
        parentElement : e,
        positioningMode : AjaxControlToolkit.PositioningMode.BottomLeft },
        null, null, this._popupDOMelement);
    //生成されたDOMを表示させる処理
    this._popupBehavior.show();
},

//生成されたDOMを非表示させる処理
_hidePopup : function() {
    this._popupBehavior.hide();
},

//TargetControlIDプロパティで設定されたコントロールに対して
//_onMouseover関数をイベントとして処理するための
//マウスオーバーイベントハンドラの登録
$addHandler(this.get_element(), "mouseover",
    Function.createDelegate(this, this._onMouseover));
//TargetControlIDプロパティで設定されたコントロールに対して
//_onMouseout関数をイベントとして処理するための
//マウスアウトイベントハンドラの登録
$addHandler(this.get_element(), "mouseout",
    Function.createDelegate(this, this._onMouseout));

中略

//TargetControlID上にマウスが移動した時の処理
_onMouseover : function() {
var e = $get(this._TargetButtonID);
    //TargetButtonIDで設定されたボタンに
    //DisplayTextに入力された値を表示する
    e.value = this._DisplayTextValue;
        //TargetButtonIDで設定されたボタンを利用不可能にする
        e.disabled = true;
        //生成されたDOMのポップアップを表示する
        this._showPopup();
},

//TargetControlID上マウスが移動した時の処理
_onMouseout: function() {
    var e = $get(this._TargetButtonID);
    //TargetButtonIDで設定されたボタンを利用可能にする
    e.disabled = "";
    //生成されたDOMのポップアップを非表示する
    this._hidePopup();
},