処理の作成
それでは各メソッドの実装内容について説明してきます。
コントロールの生成処理の作成
まずはJavaScriptなしで動作するようにします。「ColorDialog.cs」ファイルのCreateChildControlsメソッドの中で子コントロールを作成し、AttributeおよびStyleを設定してコントロールに追加します。
具体的には
dropdownlist.style.zIndex = 1; iframe.style.zindex = 2; mycontrol.style.zindex = 3;
この記事ではBrowserTypeを判別し、IE6.0の場合のみiframeを追加するようにしています。こうすることで、ColorDialogコントロールをドラッグしてドロップダウンリストの上に表示した場合でも、ColorDialogが一番手前に表示されるようになります。
DragPanelExtenderによるドラッグ機能の付加
次にドラッグ機能を付加します。「ColorDialog.cs」ファイルのOnPreRenderメソッドの中で、DragPanelExtenderのTargetControlIDとDragHandleIDを設定します。この処理をOnPreRenderメソッドで行う理由は、このタイミングであればサーバコントロールに適切なClientIDが割り当てられているからです。
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メソッドには、このスクリプトを生成する処理を記述します。
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メソッドを呼び出して子コントロールを生成します。
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); }
ColorDialogコントロールは、子コントロールが必ず存在する必要があるので、コントロールの書き出しの前にEnsureChildControlsを呼び出し、子コントロールが確実に生成されている状態にします。
EnsureIDメソッドはClientIDをセットするメソッドです。このコントロールではJavaScriptを使用するのでクライアントサイドでのIDが必要です。そのため、EnsureIDメソッドを呼び出してIDが必ず生成されるようにします。
