Click here to Skip to main content
Click here to Skip to main content

An ASP.NET Color Picker Control based on YUI Color picker

, 3 Jun 2009 Ms-PL
Rate this:
Please Sign up or sign in to vote.
An ASP.NET Color Picker Control based on YUI Color picker

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!

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)

Share

About the Author

Alon.Weiss
Product Manager CodeRun
United States United States
I'm a founder and product manager at CodeRun. I'm interested in C#, Code technology, Javascript, and everything in between.
Aside from these professional interests, I enjoy playing and listening to music, movies, diving, hiking, biking, wine, food, and everything life has to offer.

Comments and Discussions

 
GeneralGreat one PinmemberDan-el Khen31-May-09 7:07 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.1411028.1 | Last Updated 3 Jun 2009
Article Copyright 2009 by Alon.Weiss
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid