技術メモ

［ASP.NET AJAX］独自のエクステンダ・コントロールを作成するには？（サーバサイド編）
http://www.atmarkit.co.jp/fdotnet/dotnettips/947aspajaxcustomextender1/aspajaxcustomextender1.html
［ASP.NET AJAX］独自のエクステンダ・コントロールを作成するには？（クライアントサイド編）
http://www.atmarkit.co.jp/fdotnet/dotnettips/951aspajaxcustomextender2/aspajaxcustomextender2.html

1. プロジェクト作成
　　クラスライブラリでプロジェクトを作成
　　binにAjaxControlToolkit.dllを配置

2. プロジェクトに参照を追加する
　　System.Design
　　System.Web
　　System.Web.Extensions
　　System.Web.Extensions.Design
　　AjaxControlToolkit.dll

3. デザイナ・クラスを定義する
　　最低限のファイルは以下の構成
　　XxxxxExtender.cs
　　　　エクステンダ・クラス。コントロールのサーバサイド機能を定義するクラス
　　XxxxxDesigner.cs
　　　　デザイナ・クラス（コントロールのフォーム・デザイナ上での挙動を定義するためのクラス）
　　XxxxxBehavior.js
　　　　Behaviorオブジェクト。コントロールのクライアントサイド機能を定義するクラス

　　必要であれば、画像ファイル・スタイルシートなどのリソースファイルを追加

　　エクステンダー・コントロールはフォーム・デザイナ上の見掛けを持たないので
　　デザイナクラスは空のものでよい

　　①デザイナ・クラス定義
　　　　デザイナ・クラスであることの条件は、
　　　　ExtenderControlBaseDesigner<T>クラス（AjaxControlToolkit.Design名前空間）を継承するという
　　　　ジェネリックの型パラメータには、対応するエクステンダ・クラスを指定すればよい

　　　　-------------------------------------------------------------------------------------------
　　　　using System;
　　　　using System.Collections.Generic;
　　　　using System.Linq;
　　　　using System.Text;
　　　　using AjaxControlToolkit.Design;

　　　　namespace MyExtender {
　　　　　class DialogButtonDesigner : ExtenderControlBaseDesigner<DialogButtonExtender> { }
　　　　}
　　　　-------------------------------------------------------------------------------------------

　　②エクステンダ・クラスを定義
　　　　サーバサイド機能を定義する
　　　　エクステンダ・クラスで定義する必要があるのは、コントロールとして公開すべきプロパティの定義と、
　　　　デザイナ・クラス／Behaviorオブジェクトの宣言（関連付け）

　　　　・エクステンダ・クラスはExtenderControlBaseクラスを継承する
　　　　　ExtenderControlBaseクラス（AjaxControlToolkit名前空間）は、クライアントサイド・スクリプトの
　　　　　管理をはじめ、Behaviorオブジェクトとのプロパティ値の受け渡し、ターゲット要素とのひも付けなど、
　　　　　エクステンダ・コントロールの動作には欠かせない基本的な機能を提供するクラス
　　　　・TargetControlType属性は、エクステンダを適用できるコントロールを制限するための属性

　　　　-------------------------------------------------------------------------------------------
　　　　using System;
　　　　using System.Collections.Generic;
　　　　using System.Linq;
　　　　using System.Text;
　　　　using System.ComponentModel;
　　　　using System.Web;
　　　　using System.Web.UI;
　　　　using System.Web.UI.WebControls;
　　　　using AjaxControlToolkit;

　　　　[assembly:WebResource("MyExtender.DialogButtonBehavior.js", "text/javascript")]
　　　　namespace MyExtender {

　　　　　[Designer(typeof(DialogButtonDesigner))]
　　　　　[ClientScriptResource("MyExtender.DialogButtonBehavior", "MyExtender.DialogButtonBehavior.js")]
　　　　　[TargetControlType(typeof(IButtonControl))]
　　　　　public class DialogButtonExtender : ExtenderControlBase {

　　　　　　// Messageプロパティを定義
　　　　　　[ExtenderControlProperty]
　　　　　　[DefaultValue("")]　
　　　　　　public string Message {
　　　　　　　get {
　　　　　　　　return GetPropertyValue("Message", "");
　　　　　　　}
　　　　　　　set {
　　　　　　　　SetPropertyValue("Message", value);　
　　　　　　　}
　　　　　　}
　　　　　}
　　　　}
　　　　-------------------------------------------------------------------------------------------

4. Behaviorオブジェクトを定義する
　　・Behaviorオブジェクトはエクステンダのクライアントサイド機能を定義するためのJavaScriptのクラス
　　・Behaviorオブジェクトはエクステンダの挙動を決める
　　　―実質、エクステンダ・コントロールの中核を担うクラス
　　・Behavior.jsは「ビルドアクション」-「埋め込まれたリソース」として設定する

　　①AjaxControlToolkit.BehaviorBaseクラスを継承すること
　　②エクステンダ・クラスのプロパティと対応していること
　　③プロパティ値の変更はraisePropertyChangedメソッドで通知
　　④イベント・ハンドラを登録する

　　　　-------------------------------------------------------------------------------------------
　　　　// MyExtender名前空間を宣言
　　　　Type.registerNamespace("MyExtender");

　　　　// MyExtender.DialogButtonBehaviorクラスのコンストラクタ
　　　　MyExtender.DialogButtonBehavior = function(element) {

　　　　　// 基底クラスのコンストラクタをコール
　　　　　MyExtender.DialogButtonBehavior.initializeBase(this, [element]);

　　　　　// Messageプロパティの値を格納するためのプライベート変数を初期化
　　　　　this._Message = '';
　　　　}

　　　　// MyExtender.DialogButtonBehaviorクラスのメソッドを定義
　　　　MyExtender.DialogButtonBehavior.prototype = {

　　　　　// Behaviorオブジェクトを初期化
　　　　　initialize: function() {

　　　　　// 基底クラスのinitializeメソッドをコール
　　　　　　MyExtender.DialogButtonBehavior.callBaseMethod(this, 'initialize');

　　　　　　// ターゲット要素にclickイベント・ハンドラを関連付け
　　　　　　$addHandler(
　　　　　　　this.get_element(),
　　　　　　　'click',
　　　　　　　Function.createDelegate(this, this._onClick)
　　　　　　);

　　　　},

　　　　　// Messageプロパティのゲッター・メソッド
　　　　　get_Message: function() {
　　　　　　　return this._message;
　　　　　},

　　　　　// Messageプロパティのセッター・メソッド
　　　　　set_Message: function(value) {

　　　　　　// 設定値が元の値と異なる場合にのみ変更処理を実施
　　　　　　if (this._message !== value) {
　　　　　　　this._message = value;
　　　　　　　this.raisePropertyChanged('Message');
　　　　　　}
　　　　　},

　　　　　// ターゲット要素がクリックされたときの処理
　　　　　_onClick: function(e) {
　　　　
　　　　　 // ダイアログを表示した後、イベントをキャンセル（ポストバックを抑制）
　　　　　　window.alert(this._message);
　　　　　　return false;
　　　　　}
　　　　};

　　　　// BehaviorBaseオブジェクトを継承する
　　　　// MyExtender.DialogButtonBehaviorクラスを登録
　　　　MyExtender.DialogButtonBehavior.registerClass(
　　　　　'MyExtender.DialogButtonBehavior',
　　　　　AjaxControlToolkit.BehaviorBase);
　　　　-------------------------------------------------------------------------------------------
 

1.ライセンスの取得
  以下のURLよりAPIキーを取得する
  http://code.google.com/intl/ja/apis/maps/
  ※利用サイトURLと動作URLが異なると正しく
    動作しないので注意
  ※APIキーは、<script src></script>タグで囲われた
    部分になるので控えていたほうが良い

2.画面の設定
  GoogleMapを表示させたいページに以下のコントロールを
  設置しプロパティを設定する
  ①ScriptManager
    Scriptsにメンバを追加し、PathにAPIキーを設定する
  ②Panel
    Height,Widthに任意の値を設定
    ※設定しないとGoogleMapが表示されない

3.スクリプトの設定
  以下のソースを貼り付け

 [緯度・経度で指定する場合]
  ─────────────────────────────────
    var map = null;

    // ページ・ロード時に呼び出されるイベント・ハンドラ
    function pageLoad() {

      // 使用しているブラウザがGoogleマップに対応しているかを判定
      if (GBrowserIsCompatible) {

        // 「id=gmap」で定義された領域に地図を表示
        //（ナビゲーションや表示位置、種類を定義）
        map = new GMap2($get('pnlMap'));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        var point = new GLatLng(" + latitude + ", " + longitude +
        var marker = new GMarker(point);
        map.setCenter(point, 17);
        map.setMapType(G_NORMAL_MAP);  
        map.addOverlay(marker);  

        var builder = new Sys.StringBuilder();
        builder.append('<a href=""' + result.Url + '"">');
        builder.append(result.Place + '</a><br />');
        builder.append('" + hotelname + "');

        // マーカをクリックした場合に、バルーンを表示
        GEvent.addListener(
          marker,
          'click',
          function(){
            marker.openInfoWindowHtml(builder.toString());
          }
        ); 
      }
    }
  ─────────────────────────────────

 [住所で指定する場合]
--------------------------------------------------------------------------------
    var map = null;
    // ページ・ロード時に呼び出されるイベント・ハンドラ
    function pageLoad() {
      // 使用しているブラウザがGoogleマップに対応しているかを判定
      if (GBrowserIsCompatible) {
        // 「id=gmap」で定義された領域に地図を表示
        //（ナビゲーションや表示位置、種類を定義）
        map = new GMap2($get('pnlMap'));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        var geocoder = new GClientGeocoder();
        geocoder.getLatLng(
            '"+ address +"',
            function(point) {
                if(!point){
                    alert('住所情報が正しくありません。');
                }else{
                    var marker = new GMarker(point);
                    map.setCenter(point, 17);
                    map.setMapType(G_NORMAL_MAP);  
                    map.addOverlay(marker);  
                    var builder = new Sys.StringBuilder();
                    builder.append('" + hotelname + "');
                    // マーカをクリックした場合に、バルーンを表示
                    GEvent.addListener(
                      marker,
                      'click',
                      function(){
                        marker.openInfoWindowHtml(builder.toString());
                      }
                    ); 
                }
            }
        );
      }
    }
--------------------------------------------------------------------------------

 

1.ASP.NET AJAXのダウンロード
　以下の公式サイトからASP.NET AJAXのインストール・パッケージをダウンロードする
　http://ajax.asp.net/
　※ASP.NET 3.5（Visual Studio 2008）では標準インストールされる

2.AjaxControlToolkitのダウンロード
　以下のサイトからAjaxControlToolkit-Framework3.5.zipをダウンロードする
　http://www.asp.net/ajax/
　http://www.codeplex.com/AjaxControlToolkit/Release/ProjectReleases.aspx?ReleaseId=11121
　※上はServicePack,下は2008.2.22のリリースバージョン

2.配置
　AjaxControlToolkit-Framework3.5.zipを展開し、
　「/SampleWebSite/bin」フォルダの中にある「AjaxControlToolkit.dll」（アセンブリ）を、
　自分が作っているアプリケーションルート配下の「/bin」フォルダにコピーします。

3.ツールボックス登録
　上記配置したファイルを参照しツールボックスへコントロールを登録する
　対象：Accordion.AccordionPane

4. Control Toolkitのコントロール群をアプリケーションに登録する
　次に、Control Toolkitで提供されるコントロールを利用するための設定をWeb.configに対して記述する。

　<?xml version="1.0"?>
　<configuration>
　  ……中略……
　  <system.web>
　     ……中略……
　    <pages>
　      <controls>
　         ……中略……
　        <add tagPrefix="ajaxToolkit" namespace="AjaxControlToolkit" assembly="AjaxControlToolkit"/>
　         ……中略……
　      </controls>
　      ……中略……
　    </pages>
　     ……中略……
　  </system.web>
　  ……中略……
　</configuration>

5.テンプレートの登録
　Control Toolkitのアーカイブを解凍すると、配下に「AjaxControlExtender」フォルダというフォルダが展開されるので、
　この中に含まれるAjaxControlExtender.vsiファイルをダブルクリックすればよい。