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:
|Name||color||The name and id that will be given to the text input field. It must be unique within your page.|
|ImagesLocation||/images/color_picker/||The location of the 2 images used in the custom tag. You can either create the default folder on your site and place them there, or define your own.|
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.
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.
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.
hi, this is great and thanks for sharing. i wonder if its possible to create this without use any JS?
thank you again