かるあ のメモ

アクセスカウンタ

help リーダーに追加 RSS AJAX Control Toolkit で別クラスに含まれる Behavior を使用する。

<<   作成日時 ： 2007/06/27 17:31   >>

ブログ気持玉 0 / トラックバック 1 / コメント 6

ASP.NET AJAX Control Toolkit の Custom Extender を作成していると別クラスに含まれる Behavior を使用したくなる場合が出てきます。
特にポップアップやアニメーションや、コントロールのテンプレートを作成する　$common.createElementFromTemplateメソッド などは CustomExtender を作成する上でとても役に立ちます。
今回は AjaxControlToolkit.DLL 内の PopupExtender に含まれる Behavior を使用して、 Custom Extender でポップアップウインドウを描画する処理について説明しようと思います。

最初からExtenderを作るのも大変なので、以前作成した AlertMessageExtender に変更を加えます。

まず、別クラスの Behavior を使用する場合は Extender のクラスに RequiredScript 属性を追加しスクリプトを読み込むクラスを指定します。このときに対象 Behavior の親子関係も考慮して取り込むスクリプトの順番を指定する必要があります。
クラス宣言の部分は次のようになります。
<Designer(GetType(AlertMessageExtenderDesigner))> _
<ClientScriptResource("MyExtenders.AlertMessageExtenderBehavior", "MyExtenders.AlertMessageExtenderBehavior.js")> _
<RequiredScript(GetType(CommonToolkitScripts), 0)> _
<RequiredScript(GetType(DateTimeScripts), 1)> _
<RequiredScript(GetType(PopupExtender), 2)> _
<TargetControlType(GetType(System.Web.UI.Control))> _
Public Class AlertMessageExtenderExtender
    Inherits ExtenderControlBase

    ' TODO: Add your property accessors here.
    <ExtenderControlProperty()> _
    <DefaultValue("")> _
    Public Property Text() As String
        Get
            Return GetPropertyValue("Text", "")
        End Get
        Set(ByVal value As String)
            SetPropertyValue("Text", value)
        End Set
    End Property
End Class


前回のクリックイベントでは alert メソッドでメッセージボックスを表示しています。
// クリックハンドラ
_onClick : function() {
alert(this._text);
},


今回は PopupBehavior クラスを作成し、クリックされたエレメントの左下にポップアップを表示しています。
_onClick : function() {
    this._showPopup();
},

_showPopup: function() {
    var element = this.get_element();
    var div = $common.createElementFromTemplate({ nodeName : "div",
                                                  properties : { style : { height : "50px", width : "50px", backgroundColor : "black" } }
                                                }, element.parentNode);
    var text = $common.createElementFromTemplate({ nodeName : "span",
                                                  properties : { style : { height : "20px", width : "20px",backgroundColor : "white" } }
                                                }, div);
    text.innerHTML = this.get_Text();                                                   
    this._popupBehavior = new $create(AjaxControlToolkit.PopupBehavior, { parentElement : element, positioningMode : AjaxControlToolkit.PositioningMode.BottomLeft }, {}, {}, div);
    this._popupBehavior.show();
}


設定テーマ

注目テーマ 一覧
<< 前記事（2007/06/24） トップへ 後記事（2007/07/02）>>

月別リンク

ブログ気持玉

クリックして気持ちを伝えよう！
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック（1件）

タイトル （本文） ブログ名／日時
自作の Extender 作成をする過程で覚えておくといいこと1
かるあ のメモ からです。 AJAX Control Toolkit で別クラスに含まれる Behavior を使用する。 かるあさんが 以前の投稿 からプラスアルファとして AjaxControlToolkit.dll ...続きを見る
ナオキにASP.NET（仮）
2007/06/29 18:23

トラックバック用URL help


自分のブログにトラックバック記事作成（会員用） help

タイトル
本　文

コメント（6件）

内 容 ニックネーム／日時
$common.createElementFromTemplateメソッドを利用してDOMを生成する場合にCSSを絡めたりする方法もありますね。

自作のExtenderコントロールを作成するにはExtenderBaseControlが何かを知る事と、利用できそうなbehaviorを洗い出すことが重要なのかなぁなんて思わされています。

＃よくよく見てるとInheritsしているクラスがECB以外の場合もありますし自作Extender奥が深い。。。
 naoki0311
2007/06/27 18:27
ちなみに先日の関係上ピンポイントでこの部分を取り扱っているので見つけた瞬間びっくりしました(笑)

現状生成したDOMをpopupを利用しないで表示する方法あるのかなぁと気になってたりします。
 naoki0311
2007/06/27 19:00
>自作のExtenderコントロールを作成するにはExtenderBaseControlが何かを知る事と、利用できそうなbehaviorを洗い出すことが重要なのかなぁなんて思わされています。

これよくわかります。
各 Extender の中でどんな Behavior があるかとかってそのうちドキュメントにまとまるといいな〜
 かるあ
2007/06/28 17:15
>現状生成したDOMをpopupを利用しないで表示する方法あるのかなぁと気になってたりします。

こっちは position の absolute や relative 使って
style: { position: "absolute", top: "10px", left: "10px" }
とかすればいいんじゃって違う話かな
 かるあ
2007/06/28 17:35
↑ あっコンテナの部分ね
 かるあ
2007/06/28 17:35
＞各 Extender の中でどんな Behavior があるかとかってそのうちドキュメントにまとまるといいな〜

なんか自分がこれやることになりそうな予感が・・・

＞現状生成したDOMをpopupを利用しないで表示する方法あるのかなぁと気になってたりします。

表示位置ではなく表示方法ですよー。
HoverMenuもpopupbehavior利用しているので現状popupbehaviorを利用するしかないのかなぁと。
 naoki0311
2007/06/29 09:33

コメントする help

ニックネーム
本　文
<< 前記事（2007/06/24） トップへ 後記事（2007/07/02）>>