特集記事

ASP.NET AJAX版ColorDialogコントロールを作成する

Ajax Control Toolkitを利用したドラッグ可能なColorDialogコントロール

Higty[著]

2007/04/09 08:00

ポスト

ダウンロード ColorDialog.zip (536.6 KB)

処理の作成

　それでは各メソッドの実装内容について説明してきます。

コントロールの生成処理の作成

　まずはJavaScriptなしで動作するようにします。「ColorDialog.cs」ファイルのCreateChildControlsメソッドの中で子コントロールを作成し、AttributeおよびStyleを設定してコントロールに追加します。

iframeについて補足

　IE6.0にはドロップダウンリストのz-indexの値が正しく反映されないというバグがあります。このバグによりz-indexを設定しても常にドロップダウンリストが画面の一番手前側に表示されてしまいます。このバグはiframeを利用することで回避できます。
　具体的には

dropdownlist.style.zIndex = 1;
iframe.style.zindex = 2;
mycontrol.style.zindex = 3;

　というようにiframeを挟むようにコントロールを配置することによって、mycontrolを一番上に表示させることができます。
　この記事ではBrowserTypeを判別し、IE6.0の場合のみiframeを追加するようにしています。こうすることで、ColorDialogコントロールをドラッグしてドロップダウンリストの上に表示した場合でも、ColorDialogが一番手前に表示されるようになります。

DragPanelExtenderによるドラッグ機能の付加

　次にドラッグ機能を付加します。「ColorDialog.cs」ファイルのOnPreRenderメソッドの中で、DragPanelExtenderのTargetControlIDとDragHandleIDを設定します。この処理をOnPreRenderメソッドで行う理由は、このタイミングであればサーバコントロールに適切なClientIDが割り当てられているからです。

OnPreRender

protected override void OnPreRender(EventArgs e)
{
    String Url
     = this.Page.ClientScript.GetWebResourceUrl(this.GetType(),
       "Higuchi.Web.CustomControl.ColorDialog.ColorDialog.js");
    JavaScript.RegisterStartupScriptResource(this.Page, 
                                             this.GetType(), 
                                             "LoadScript", Url);

    ///ドラッグ対象のコントロールのID
    this.zDragPanelExtender.TargetControlID = this.ClientID;
    ///ドラッグハンドルとなるのコントロールのID
    this.zDragPanelExtender.DragHandleID = this.zHeaderBar.ClientID;
}

　また、InitializePropertyメソッド内で、ドラッグハンドルとなるzHeaderBarコントロールのInnerHtmlに、全角の空白文字を設定します。FirefoxではInnerHtmlが空文字の場合、ハンドルをつかむことができなくなるためです。全角の空文字を設定することで、これを回避しています。

CreateColorCellメソッドの実装

　このメソッドの中では色のセルとなるdivコントロールを生成しています。色のセルはクライアントサイドのイベントに反応して処理を行う必要があります。

　コントロールを生成し、適切な値を設定するように記述した後、以下の実装をします。

OnMouseOverイベントで$get('ColorDialog1').ColorDialog.Preview(ColorCell)メソッドを呼び出す記述。
OnClickイベントで$get('ColorDialog1').ColorDialog.SelectColor(ColorCell)メソッドを呼び出すように記述。

　上記のPreview関数では選択した色のプレビュー処理を行います。SelectColor関数では選択した色の色コードの値を元に、値を指定したターゲットプロパティへセットする処理を行います。

　これらJavaScript関数については、後ほど処理の内容を説明します。

Observeメソッドの作成

　AjaxでColorDialogを使うためには、クライアントサイドでColorDialog関数を呼び出すスクリプトが必要です。Observeメソッドには、このスクリプトを生成する処理を記述します。

Observe

public void Observe(String inTriggerControlID, 
                    String inEventName, 
                    TextBox inTextBox, 
                    Boolean inIsFocus)

引数

第1引数	処理を起動するコントロール
第2引数	JavaScriptのイベントの種類
第3引数	ターゲットのテキストボックス
第4引数	選択後にテキストボックスにフォーカスを移動するかどうかを示す値

閉じる画像をクリックしたときの処理

　ColorDialogの右上の×ボタンをクリックしたときに、プレビューによって変更した値を元に戻すための処理を記述します。

　具体的にはImageのOnClickイベントでHide関数とResetPreview関数を呼び出します。Hide関数ではColorDialogコントロールを非表示にし、ResetPreviewではPreviewによって変更した値を元の値に戻します。

Renderメソッドの実装

　「ColorDialog.cs」ファイルのRenderメソッド内では、最初にEnsureChildControlsメソッドとEnsureIDメソッドを呼び出します。EnsureChildControlsメソッドは子コントロールがまだ生成されていない場合、CreateChildControlsメソッドを呼び出して子コントロールを生成します。

Render

protected override void Render(HtmlTextWriter writer)
{
    this.EnsureChildControls();
    this.EnsureID();

    this.zPanel.Style.Add(HtmlTextWriterStyle.BackgroundColor, 
                          ColorTranslator.ToHtml(this.BackColor));

    this.zCloseImage.ImageUrl
     = this.Page.ClientScript.GetWebResourceUrl(this.GetType()
        , "Higuchi.Web.CustomControl.ColorDialog.Close.gif");

    ///このコントロールを表示するスクリプトの書き出し処理
    this.Page.ClientScript.RegisterStartupScript(this.GetType()
        , this.ClientID + "Script", JavaScript.StartScript + 
        this.zClientScript.ToString() + JavaScript.EndScript);
    ///ColorDialogを非表示にするスクリプト
    this.Page.ClientScript.RegisterStartupScript(this.GetType()
        , this.ClientID + "Close"
        , String.Format("$addHandler($get('{0}'),"
        , this.zCloseImage.ClientID)
        + " 'click', function(){"
        + String.Format("$get('{0}').ColorDialog.Hide();"
        , this.ClientID)
        + String.Format("$get('{0}').ColorDialog.ResetPreview();"
        , this.ClientID)
        + "});"
        , true);

    ///インスタンスの生成
    this.Page.ClientScript.RegisterStartupScript(this.GetType()
        , this.ClientID + "Initialize"
        , String.Format("$get('{0}').ColorDialog
         = new Higuchi.UI.ColorDialog('{0}','{1}');"
        , this.ClientID, this.zPropertyType)
        , true);

    base.Render(writer);
}