|
|||||||||||||||||||||||
|
|||||||||||||||||||||||
|
Announcements
Chapters
Services
Feature Zones
|
IntroductionIt is difficult to find a decent color picker control for ASP.NET. However, there are plenty of pure JavaScript color picker controls. I decided to take one of them and convert it into an ASP.NET web server control. As a base, I took the dhtmlgoodies advanced color picker. Project SetupFirst, let’s do New Project ->ASP.NET Server Control. By default, the name of the project would be the same as the name of the default namespace. I called my project CutomControls, and renamed ServerControl1.cs to ColorPicker.cs. Then, I added to the project the images, JavaScript, and styles supplied by dhtmlgoodies.
Then, I clicked on each file's properties and changed the Build Action from Content to Embedded Resource. AssemblyInfo.csI registered all the resources like this: [assembly: System.Web.UI.WebResource("CustomControls.Images.slider_handle.gif",
"img/gif")]
[assembly: System.Web.UI.WebResource("CustomControls.Images.tab_center_active.gif",
"img/gif")]
[assembly: System.Web.UI.WebResource("CustomControls.Images.tab_left_active.gif",
"img/gif")]
[assembly: System.Web.UI.WebResource("CustomControls.Images.tab_left_inactive.gif",
"img/gif")]
[assembly: System.Web.UI.WebResource("CustomControls.Images.tab_right_active.gif",
"img/gif")]
[assembly: System.Web.UI.WebResource("CustomControls.Images.tab_right_inactive.gif",
"img/gif")]
[assembly: System.Web.UI.WebResource("CustomControls.Images.color_picker_icon.jpg",
"img/jpeg")]
[assembly: System.Web.UI.WebResource("CustomControls.Styles.js_color_picker_v2.css",
"text/css")]
[assembly: System.Web.UI.WebResource("CustomControls.Javascript.color_functions.js",
"text/js")]
[assembly: System.Web.UI.WebResource("CustomControls.Javascript.js_color_picker_v2.js",
"text/js")]
As you might have noticed, [Assembly Name].[Folder].[File Name]
This is very important, since it is not documented even in MSDN. ColorPicker.csI modified [ToolboxData("<{0}:ColorPicker runat="server">")]
Next, I wanted a custom icon in the Visual Studio Toolbox. After [System.Drawing.ToolboxBitmap(typeof(ColorPicker),
"Images.color_picker_icon.jpg")]
where the first parameter is the type of the control and the second parameter is the icon file name used in AssemblyInfo.cs. Then, I needed to load the stored resources from the DLL. The best event for this is // Javascript
string colorFunctions = Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker),
"CustomControls.Javascript.color_functions.js");
Page.ClientScript.RegisterClientScriptInclude("color_functions.js", colorFunctions);
string colorPicker = Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker),
"CustomControls.Javascript.js_color_picker_v2.js");
Page.ClientScript.RegisterClientScriptInclude("js_color_picker_v2.js", colorPicker);
//Images we need to set javascript variables,
//so javascript will know where to find images
string script = string.Format(@"
var form_widget_amount_slider_handle = '{0}';
var tab_right_active = '{1}';
var tab_right_inactive = '{2}';
var tab_left_active = '{3}';
var tab_left_inactive = '{4}';
", Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker),
"CustomControls.Images.slider_handle.gif")
, Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker),
"CustomControls.Images.tab_right_active.gif")
, Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker),
"CustomControls.Images.tab_right_inactive.gif")
, Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker),
"CustomControls.Images.tab_left_active.gif")
, Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker),
"CustomControls.Images.tab_left_inactive.gif")
);
Page.ClientScript.RegisterStartupScript(Page.GetType(),
"initColorPicker", script, true);
// CSS
HtmlGenericControl csslink = newHtmlGenericControl("link");
csslink.Attributes.Add("href", Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker),
"CustomControls.Styles.js_color_picker_v2.css"));
csslink.Attributes.Add("type", "text/css");
csslink.Attributes.Add("rel", "stylesheet");
Page.Header.Controls.Add(csslink);
The rest is simple. I used the
|
||||||||||||||||||||||