A ColdFusion color picker custom tag

February 10, 2011|ColdFusion2

Remembering color codes is not the easiest task, even for veteran web developers. In this article we’ll see how to use a custom tag which allows you to easily select a web safe color. In the process, we’ll also take a look at how easy Coldfusion makes it for us to create a custom tag.

First, using the custom tag

The custom tag which does all the work is a file named “color_picker.cfm“, and can be found in the downloadable materials for this article. Place the file inside your custom tags directory or under the same folder as the file that you are going to call it from. First, you call the custom tag from your source code:

<form name="frmForm" method="post" action="index.cfm">
	<cf_color_picker />
</form>

This creates an input box with links to select and clear a color:

Clicking on the color selector next to the input box displays a DIV section with all the web-safe colors for you to choose from:

The tag has 2 optional parameters:

Here’s an example of using the attributes above, in a form where more than one color selector is used:

<form name="frmForm" method="post" action="index.cfm">
	<cf_color_picker Name="color1" ImagesLocation="" />
	<br />
	<cf_color_picker Name="color2" ImagesLocation="" />
</form>

In the example above the images are located in the same folder as the custom tag.

In depth look at creating the custom tag

As any coldfusion custom tag, processing inside the tag is divided in 2 execution modes: start and end. As it usually happens, I used the start mode to verify if the tag was called correctly.

<!--- begin start mode --->
<cfswitch expression="#ThisTag.ExecutionMode#">

	<cfcase value="start">

		<cfset variables.Error = "">
		<!--- must have a closing tag --->
		<cfif NOT ThisTag.HasEndTag>
			<cfset variables.Error = variables.Error & "<li>A closing tag for CF_COLOR_PICKER is needed</li>">
		</cfif>
		<cfif NOT StructKeyExists(attributes, "Name") OR NOT Len(attributes.Name)>
			<cfset variables.Error = variables.Error & "<li>The argument 'Name' cannot be left blank</li>">
		</cfif>
		<!--- print out the error messages --->
		<cfif Len(Trim(variables.Error))>
			<strong>The following Errors have been detected in CF_COLOR_PICKER</strong>
			<ol>
				<cfoutput>#variables.Error#</cfoutput>
			</ol>
			<cfexit>
		</cfif>

		<cfparam name="attributes.Name" type="string" default="color">
		<cfparam name="attributes.ImagesLocation" type="string" default="/images/color_picker/">

	</cfcase>
	...

Let’s look at the code above in more detail. First, we verify that we used a closing tag in our source code when calling it:

• Correct: <cf_color_picker />
• Correct: <cf_color_picker></cf_color_picker>
• Incorrect: <cf_color_picker>

Then we check if the attribute Name was used and if it was then it must not be left empty. If any errors were found, we display them and exit the tag. Otherwise we define the 2 attributes (Name and ImagesLocation), together with their default values.

...
	<cfcase value="end">

		<!--- IDs to be used in the tag --->
		<cfparam name="variables.ColorPickerMainWrapper" type="string" default="ColorPicker">
		<cfparam name="variables.PaletteSelectList" type="string" default="pallete_color_picker">
		<cfparam name="variables.PaletteWebSafe" type="string" default="palette_websafe">
		<cfparam name="variables.PaletteSelectedColor" type="string" default="PaletteSelectedColor">
		<!--- /IDs to be used in the tag --->
		<cfif NOT StructKeyExists(request, "ColorPickerOutput")>
			<cfset _OutputColorPicker()>
			<cfset request.ColorPickerOutput = true>
		</cfif>
		 <cfoutput>
			<input type="text" name="#attributes.Name#" id="#attributes.Name#" value="" maxlength="7" size="7">
			<a href="javascript:ShowColorPicker('#attributes.Name#')">
				<img src="#attributes.ImagesLocation#icon_colorpicker.gif" alt="Select color" border="0">
			</a>
			<a href="javascript:ClearColorField('#attributes.Name#')">
				<img src="#attributes.ImagesLocation#icon_delete.gif" alt="Clear color" border="0">
			</a>
		</cfoutput>

	</cfcase>

</cfswitch>

The end mode of the tag takes care of the actual processing and output of the HTML. First, we define our variables that will be used throughout the tag. These include the IDs that will be given to the HTML elements. As these must be unique in your HTML output, make sure you are not using the same ones somewhere else.

Then we need to output the hidden DIV of the color selector and the common Javascript functions that do all the work. Since we want to output this content only once, we create a request scope variable (ColorPickerOutput), and set it to true once we do our output. This will ensure that if we use the same custom tag again in the same page, this output will be created only once.  Finally, we output the input box with the links to select and clear a color.

The actual color selector DIV and Javascript functions are written by the function “_OutputColorPicker“.  I don’t think there is any need to go through it here, you can see it yourselves from the downloads. It’s a simple HTML table content with all the colors, with some Javascript that captures the click event in each cell to return the value back to the input box.

Feel free to use this tag to your liking. If you think of any improvements to it let me know and I will try to add them to it. Use the available forum for this article to make your requests. If you do them yourself then post them on the forum for this article for all to see.