oboutの無償のASP.NET Color Pickerコントロールの使用方法
ASP.NETで利用できるカラーピッカーコントロールは、ACTのColorPicker Extender以外にもたくさんあります。ここではその中から、oboutのASP.NET Color Pickerという無償のコントロールを紹介します。oboutは、多種多様なASP.NETサーバコントロールを商用製品としてリリースしていますが、Color Pickerコントロールは無償で利用でき、ACTのColorPicker Extenderよりも多機能なパレットを備えています。
oboutのASP.NET Color Pickerコントロールを使用するには、まずobout Suiteをダウンロードします。この中には、oboutのASP.NETコントロールがすべて含まれています。ダウンロードした中には、Color Pickerコントロール専用のアセンブリ（obout_ColorPicker.dll）があります。このファイルをWebサイトのBinフォルダにコピーし、Color PickerコントロールをVisual Studioのツールボックスに追加します。
obout Suiteのダウンロードファイルの中には多数のデモが含まれており、コンピュータ上で実際に動かしてみることができます。また、Color PickerのWebページにも、オンラインで試せるサンプルが10種類以上掲載されています。この記事でダウンロードできるデモは、ACTのColorPicker Extenderで実装したのと同様の機能を備えたものですが、次の点が異なります。
- 色見本の部分には、TextBoxコントロールではなくLabelコントロールを使用しました
- 選択した色の格納にTextBoxを使用しないことから、ポストバック時にクライアントからサーバに選択色を転送するために何らかの策が必要です。ここでは2つのHiddenFieldコントロールを使用しました
このデモも、先ほどの例と同様に、前景色と背景色を選択するための2つのカラーピッカーを使用しています。
<asp:HiddenField runat="server" ID="fgColor" />
<asp:HiddenField runat="server" ID="bgColor" />
<p>
Choose a background color:
<asp:Label ID="lblBGColor" runat="server" Text=" " Width="35px" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"></asp:Label>
<obout:ColorPicker ID="cpBGColor" runat="server" TargetId="lblBGColor"
PickButton="False" TargetProperty="style.backgroundColor" OnClientPicked="onBGColorPicked">
</obout:ColorPicker>
</p>
<p>
Choose a foreground color:
<asp:Label ID="lblFGColor" runat="server" Text=" " Width="35px" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"></asp:Label>
<obout:ColorPicker ID="cpFGColor" runat="server" TargetId="lblFGColor"
PickButton="False" TargetProperty="style.backgroundColor" OnClientPicked="onFGColorPicked">
</obout:ColorPicker>
</p>
oboutのColor Pickerコントロールでは、選択色を表示するコントロールを指定できます。この例では、前景色と背景色のそれぞれに対応するLabelコントロールを指定しています。また、選択色に設定するクライアント側プロパティも指定できます。この既定値はvalueですので、TextBoxコントロールとの組み合わせで使用した場合なら、ACTのColorPicker Extenderと同様に、TextBoxのテキストに選択色が設定されることになります。しかしこの例の場合は、Labelの背景色を選択色に設定する必要があるため、TargetPropertyをstyle.backgroundColorにします。
上記のコードの冒頭には、HiddenFieldコントロールが2つあります。ポストバック時にユーザーの選択色をサーバに転送するために使用するコントロールです。両コントロールの値は、ユーザーが色を選択するたびに設定します。色の選択時にJavaScript関数を実行するには、Color PickerコントロールのOnClientPickedプロパティを使用します。この例では、onBGColorPickedとonFGColorPickedという2つのJavaScript関数を作成しました。それぞれ、選択色を適切なHiddenField値に設定する関数です。下記のコードにもあるように、選択色を表す16進数文字列は、sender.getColor()というJavaScriptコードで取得できます。
<script type="text/javascript">
function onBGColorPicked(sender) {
var hiddenField = document.getElementById('<%=bgColor.ClientID %>');
hiddenField.value = sender.getColor();
}
function onFGColorPicked(sender) {
var hiddenField = document.getElementById('<%=fgColor.ClientID %>');
hiddenField.value = sender.getColor();
}
</script>
次のスクリーンショットは、oboutのColor Pickerコントロールの実際の使用例です。パレットでの色の選択肢がACTのColorPickerよりも多いのが分かります。また、oboutのColor Pickerコントロールでは、定義済みの色をパレットに表示したり、定義済みの色以外は選択できないように制限することも可能です。
それでは、ハッピープログラミング！
