Introduction
YuiColorPicker is an ASP.NET control that can be used in various ways within a page or control. As the name suggests, it uses the handy YUI Color picker control. For those of you who are not familiar with YUI, it is a set of Javascript utilities and controls for building richly interactive web applications. Its files are provided via a CDN, which makes it faster and eases the load on your server. The picker control offers features such as animation, inline or modal popup behavior, dynamic loading of the YUI Library and client/server events. I originally wrote this control for a friend that was impressed with the color picker control, but did not want to get messy with all the plumbing involved with javascript-based (non-server) control.
Previous work
There has been a lot of work done on the integration of YUI controls and the ASP.NET technology. I found most of these controls to be unsuitable for my needs. Specifically, the ability to display the control in a dialog container, integrate well with other server and client code, and consume little bandwidth. This article by Alexander Turlov and some other articles offer some nice hand-made color pickers. However, the picker offered by the YUI library has a nice look & feel and provides some additional cool features. It also lets you keep the requirements to a minimum - not requiring server-side rendering and the use of the ASP.NET Ajax Control Toolkit.
Design goals and architectrue
The design goals were:
- Single file copy-and-paste integration
- No requirements to <include> any CSS or JS file. The YUI loader dynamically includes all the required resources (see the LoadYui property in the reference documentation below) .
- Minimal server-side rendering
- Use of a popular and tested control (YUI)
- Robustness and ability to tweak various features of the YUI control
- Project Integration by means of including a single .CS file
- Browser and platform independence
The control can be placed anywhere in your markup. The client JavaScript code is embedded within the C# code. This is done to reduce further requests and make the initial integration fast. Future versions might allow you to put this code (~3Kb uncompressed) on your webserver or CDN.
Using the Code
Basic Usage
The following snippet shows how to use the color picker in the simplest form:
Default.aspx:
...
<yui:YuiColorPicker
ID="YuiColorPicker1"
RunAt="server"
ColorPickerMode="Inline"
OnColorChanged="YuiColorPicker1_ColorChanged"
LoadYui="true"
/>
...
Let's go over the main properties of the color picker above:
- The ColorPickerMode property has the value "Inline". This will render the color picker inline as a part of the document.
- The OnColorChanged event is a server-side event that will be raised whenever the value of the color picker changes.
- The LoadYui property has the value "true". This is also the default value, but it's worth mentioning that this will use the YUI loader to bootstrap the required YUI library components. If you already use the YUI library in your page, make sure to include the colorpicker module, and set this to "false". For the rest of the examples, this property will be omitted, since we will always load the YUI library dynamically.
Test this code with CodeRun
Animation
The following snippet shows how to use the color picker, with some added animation:
Default.aspx:
...
<yui:YuiColorPicker
ID="YuiColorPicker1"
RunAt="server"
ColorPickerMode="Inline"
OnColorChanged="YuiColorPicker1_ColorChanged"
EnableAnimation="true"
Color="#ff0000"
/>
...
Notes:
- The EnableAnimation property causes the color picker to be slightly animated: when picking a new color, the picker will move smoothly from the old color to the new one.
- The Color property sets the initial color for the picker.
Test this code with CodeRun
Floating dialog
The following snippet shows how to use the color picker in a floating dialog. This lets you add a color picker in a very non-intrusive way :
Default.aspx:
...
<yui:YuiColorPicker
ID="YuiColorPicker1"
RunAt="server"
ColorPickerMode="FloatingDialog"
OnColorChanged="YuiColorPicker1_ColorChanged"
LoadYui="True"
/>
...
Notes:
- The ColorPickerMode property has the value "FloatingDialog". This causes the color picker to be rendered in a floating dialog.
Test this code with CodeRun
Floating modal dialog
In this example, the picker will be rendered in a floating modal dialog container. When the dialog is visible, the entire document will be masked and inaccessible :
Default.aspx:
...
<yui:YuiColorPicker
ID="YuiColorPicker1"
runat="server"
ColorPickerMode="FloatingDialog"
ModalBehavior="true"
OnColorChanged="YuiColorPicker1_ColorChanged"
/>
...
Notes:
- The ModalBehavior, in conjuction with the "FloatingDialog" mode, causes the dialog behavior.
Test this code with CodeRun
Client-side integration
The ASP.NET YUI color picker control offers some handy integration points for client-side code. This is done by exposing server-side methods on the control itself :
Default.aspx:
...
<yui:YuiColorPicker
ID="YuiColorPicker1"
runat="server"
ColorPickerMode="Inline"
ModalBehavior="false"
EnableAnimation="false"
OnColorChanged="YuiColorPicker1_ColorChanged"
UpdateMode="Continuous"
/>
...
<asp:Button ID="Button1" runat="server" Text="Postback" OnClick="Btn_Click" />
<input type="button" ID="btnShow" runat="server" value="Show" />
<input type="button" ID="btnHide" runat="server" value="Hide" />
<input type="button" ID="btnGetValue" runat="server" value="ShowValue" />
...
Default.aspx.cs:
protected void Page_Load(object sender, EventArgs e)
{
btnShow.Attributes["onclick"] = YuiColorPicker1.GetClientShowPickerScript();
btnHide.Attributes["onclick"] = YuiColorPicker1.GetClientHidePickerScript();
btnGetValue.Attributes["onclick"] = "alert('color picker value is '+" + YuiColorPicker1.GetClientGetPickerValueScript() + ");";
YuiColorPicker1.OnClientColorChanged = "document.body.style.backgroundColor = '#'+" + YuiColorPicker1.GetClientGetPickerValueScript()+";";
}
Notes:
- GetClientGetPickerValueScript() will return a javascript expression (as a string) that will evaluate to the selected color.
- GetClientShowPickerScript() will return a javascript statement (as a string) that will cause the color picker to show.
- GetClientHidePickerScript() will return a javascript statement (as a string) that will cause the color picker to hide.
- The OnClientColorChanged property may contain some JavaScript code that will be executed whenever the selected value changes. Used in conjunction with the methods above, you can achieve some nice results.
Test this code with CodeRun
Multiple instances
Multiple instances of the control work pretty well. You may test it online.
Complete referece
| Properties |
|---|
| ColorPickerMode | FloatingDialog - (default) The color picker will be rendered to a floating dialog container.
Use this when the picker does not need to be constantly visible and usable, or you don't want it to interfere with the layout of your page.
Inline - The color picker will be rendered to the document.
Use this when the picker needs to be constantly visible and usable as a part of the page.
|
| UpdateMode | Continuous - (default) The color picker will fire client/callback events immediately when the user clicks on a color (even before it confirms that color).
Use this when you want to visualize or otherwise respond to the selected color.
OnConfirm - The color picker will only fire client/callback events when the user approves the color by clicking on 'OK'.
(Only available when ColorPickerMode is FloatingDialog) |
| EnableAnimation | When set to true, the color picker will be slightly animated: when picking a new color, the picker will move smoothly from the old color to the new one |
| ModalBehavior | When using the FloatingDialog mode, this will make the floating dialog modal, masking the rest of the document while it is shown. |
| UseCallback | If you use ASP.NET callbacks (in ASP.NET Ajax for example), setting this property to true will fire callbacks whenever the value changes
(see also the UpdateMode property) |
| RGB | This holds the selected RGB value. It can either be assigned to or read from. |
| IsHidden | Setting this to false will hide the picker on the next postback. You may use GetClientShowPickerScript() to show it dynamically at the client. |
| ShowControls | Hide/show the entire set of controls |
| ShowHexControls | Hide/show the hex controls |
| ShowHexSummary | Hide/show the hex summary |
| ShowHSVControls | Hide/show the hsv controls |
| ShowRGBControls | Hide/show the rgb controls |
| ShowWebSafe | Hide/show the websafe swatch |
| LoadYui | This will cause the YUI library to be dynamically loaded via the YUI Loader.
If you already include YUI in your page, make sure to include the colorpicker module. |
| OnClientColorChanged | JavaScript code that will be executed whenever the value changes. (See also the UpdateMode property) |
| Events |
|---|
| ColorChanged | Server-side event that will be fired whenever the color picker value has changed. |
| Methods |
|---|
| GetClientHidePickerScript | Server-side method that returns a javascript statement (as a string) that will cause the color picker to hide. |
| GetClientShowPickerScript | Server-side method that returns a javascript statement (as a string) that will cause the color picker to show. |
| GetClientGetPickerValueScript | Server-side method that returns a javascript expression (as a string) that will evaluate to the selected color. |
Future versions
I had lots of fun writing this control. I'll be happy to get some feedback and feature requests. In the meantime, here's my list:
- Additional ColorPickerMode option of ExternalWindow that will render the the picker in a separate, external window (e.g window.open).
- Additional ColorPickerMode option of Button that will render the picker next to a button, similar to a dropdown box.
- Remove ModalBehavior and add another ColorPickerMode - ModalFloatingDialog.
- Be able to put the JavaScript code in an external file, and put it on a CDN / your website for caching, minification and GZipping.
- Support some JQuery color pickers that might require even less code and offer some additional features.
- Integrate with some nice JQuery popups.
- Enable an AutoPostback feature
Points of Interest
Here's some useful links:
Happy Coding!
