エクステンダウィザードによって、ColorPicker Extenderコントロールがページに追加され、選択したTextBoxコントロールとエクステンダとの関連付けが、エクステンダのTargetControlIDプロパティにより行われます。次のマークアップの宣言は、ColorPicker Extenderを追加した後の、関係するマークアップの様子を示したものです。太字のマークアップの部分が、エクステンダウィザードによって追加された内容です。
<asp:TextBox ID="txtBGColor" runat="server"></asp:TextBox> <cc1:ColorPickerExtender ID="txtBGColor_ColorPickerExtender" runat="server" Enabled="True" TargetControlID="txtBGColor"> </cc1:ColorPickerExtender>
このコードが追加された状態で、ブラウザでこのページを開き、TextBoxをクリックすると、カラーパレットが表示されます。いずれかの色を選択すると、パレットは消え、選択色の16進値がテキストボックスに表示されます。こうしてTextBoxに格納された色は、ポストバック時にサーバに転送されます。サーバでデータベースに選択内容を保存することも可能です。
この既定の動作でも、確かに目的は達成できますが、改良したい点もいくつかあります。1つは、TextBoxに16進数文字列が表示される点です。ユーザーの多くは、16進数文字列と選択色との関係がわからないと思うので、混乱を招くおそれが大いにあります。もう1つは、TextBoxが読み取り専用でないため、ユーザーが無意味な値を入力したり、ColorPicker Extenderで設定した16進数文字列をユーザーが変更したりといったこともできてしまう点です。この記事のダウンロードファイルでは、次のような改良を施すことで、操作性を高めています。
- TextBoxの幅を35ピクセルに抑えることで、テキストボックスというより布地の色見本のような外観にしています。
- ユーザーがパレットで色を選択すると、
colorChangedというJavaScript関数が実行されます。この関数では、テキストボックスのフォーカスを外し、テキストボックスの前景色と背景色の両方を、選択色に設定します。これにより、ユーザーには文字列が見えなくなります（文字色と背景色が同じため）。
この記事のデモは、メッセージの入力と、前景色および背景色の選択を行うユーザーインターフェースの例です。もちろんここでは、2つのColorPicker Extenderを使用しています。1つは前景色用、もう1つは背景色用です。TextBoxコントロールとColorPicker Extenderのマークアップは次のとおりです。
<p>
Choose a background color:
<asp:TextBox ID="txtBGColor" Width="35px" runat="server" onfocus="this.blur();"></asp:TextBox>
<cc1:ColorPickerExtender ID="txtBGColor_ColorPickerExtender" runat="server"
Enabled="True" TargetControlID="txtBGColor"
OnClientColorSelectionChanged="colorChanged">
</cc1:ColorPickerExtender>
</p>
<p>
Choose a foreground color:
<asp:TextBox ID="txtFGColor" Width="35px" runat="server" onfocus="this.blur();"></asp:TextBox>
<cc1:ColorPickerExtender ID="txtFGColor_ColorPickerExtender" runat="server"
Enabled="True" TargetControlID="txtFGColor"
OnClientColorSelectionChanged="colorChanged">
</cc1:ColorPickerExtender>
</p>
どちらのColorPicker Extenderも、OnClientColorSelectionChangedは同じ値です。OnClientColorSelectionChangedプロパティを使用すると、色の選択時にクライアント側のJavaScript関数を実行できます。この関数の中で、当該のエクステンダに関連付けられたTextBoxコントロールを取得するには、get_element()関数を使用します。また、get_selectedColor()関数では、選択された色を取得できます。私はcolorChangedという関数を作成しました。TextBoxコントロールからフォーカスを外し、前景色と背景色を選択された色に設定する関数です。
<script type="text/javascript">
function colorChanged(sender) {
sender.get_element().blur();
sender.get_element().style.color = '#' + sender.get_selectedColor();
sender.get_element().style.backgroundColor = '#' + sender.get_selectedColor();
}
</script>
次のスクリーンショットは、このデモの動作の様子です。このユーザーは既に背景色を選択し、現在は前景色を選んでいる状態です。
ユーザーが［Place Order］ボタンをクリックすると、ポストバックが行われ、TextBoxコントロールの16進値がサーバに転送されます。サーバでは、TextBoxコントロールのTextプロパティでこの値を読み取り、必要に応じて使用できます。
