Next »

Is There a Need for CfTagLib?


Coldfusion is known for rapid application development. It already has cfform, cfinput, cfselect, and cftextarea. So why do we have the needs to create another version of them? Well, tags in our CfTagLib are lightweight, designed for specific needs, but flexible enough for you to create your own theme/layout and even add additional attributes to meet your needs. They address different concerns than the built-in tags do.

Where I work, deadlines are often yesterday. The bugs in the presentation layer are often minus and tedious. Most of the times they are not even bugs, just consistency and 508 related issues. CfTagLib aims to prevent these problems and saves us time in development and debugging. Here is a simple example of creating and modifying a user account. To create a form for both new and edit views, this is what you would write:

These queries are used to populate the state and country select lists.

<cfquery datasource="dsn" name="qryState">
SELECT STATE_CD, STATE_NM FROM STATE ORDER BY STATE_NM ASC </cfquery>

<cfquery datasource="dsn" name="qryCountry">
SELECT COUNTRY_CD, COUNTRY_NM FROM COUNTRY ORDER BY COUNTRY_NM ASC </cfquery>


This needs to be on the edit page. If these variables do not already exist, then they take the values of the qryAccount query. These variables would already exist if the form returns after validation failed.

<cfset account="Edit"/>
<cfif structKeyExists(variables,'qryAccount')>
<cfparam name="attribubtes.id" default="#trim(qryAccount.id)#"/> <cfparam name="attribubtes.firstName" default="#trim(qryAccount.firstName)#"/> <cfparam name="attribubtes.lastName" default="#trim(qryAccount.lastName)#"/> <cfparam name="attribubtes.email" default="#trim(qryAccount.email)#"/> <cfparam name="attribubtes.state" default="#trim(qryAccount.state_cd)#"/> <cfparam name="attribubtes.country" default="#trim(qryAccount.country_cd)#"/> </cfif>


For the new page, this is necessary.

<cfset account="New"/>
<cfparam name="attribubtes.id" default="0"/>
<cfparam name="attribubtes.firstName" default=""/>
<cfparam name="attribubtes.lastName" default=""/>
<cfparam name="attribubtes.email" default=""/>
<cfparam name="attribubtes.state" default=""/>
<cfparam name="attribubtes.country" default=""/>


Here is the form.

<cfoutput>
<form id="account" action="#myself##xfa.action#&id=#attributes.id#" method="post"> <fieldset><legend class="legend">#account# Account</legend>
<label class="label" for="firstName">First Name</label> <input type="text" id="firstName" name="firstName" value="#htmlEditFormat(attributes.firstName)#" maxlength="64"/><br/>
<label class="label" for="lastName">Last Name</label> <input type="text" id="lastName" name="lastName" value="#htmlEditFormat(attributes.lastName)#" maxlength="64"/><br/>
<label class="label" for="email">Email Address</label> <input type="text" id="email" name="email" value="#htmlEditFormat(attributes.email)#" maxlength="64"/><br/>
<label class="label" for="state">State</label> <select id="state" name="state"> <option value="">Select One...</option> <cfloop query="qryState"> <option value="#trim(qryState.state_cd)#"<cfif trim(qryState.state_cd) eq trim(attributes.state)>selected</cfif>>#qryState.state_nm#</option> </cfloop> </select><br/>
<label class="label" for="country">Country</label> <select id="country" name="country"> <option value="">Select One...</option> <cfloop query="qryCountry"> <option value="#trim(qryCountry.country_cd)#"<cfif trim(qryCountry.country_cd) eq trim(attributes.country)>selected</cfif>>#qryState.state_nm#</option> </cfloop> </select><br/>
<button type="submit">Submit</button> </fieldset> </form> </cfoutput>

Now if you use our CfTagLib, this is equivalent to everything written above.

<!---Set these on new page--->
<cfset account="New"/>
<cfset action="create"/>

<!---Set these on edit page--->
<cfset account="Edit"/>
<cfset action="Modify"/>

<cfset request.ui.form.all.config.dsn = "dsn"/>
<cfset request.ui.form.select.config.optionHeader = "Select One..."/>

<cfimport taglib="/taglib/fusebox/" prefix="ui"/>

<cfoutput>
<ui:form legend="#account# Account" name="#action#"> <ui:hidden name="qryAccount.id" default="0"/>
<ui:input name="qryAccount.firstName" label="First Name"/>
<ui:input name="qryAccount.lastName" label="Last Name"/>
<ui:input name="qryAccount.email" label="Email Address"/>
<ui:select table="state" value="state_cd" option="state_nm" checkValue="qryAccount.state_cd"/>
<ui:select table="country" value="country_cd" option="country_nm" checkValue="qryAccount.country_cd"/> </ui:form> </cfoutput>

With this code you can be sure that all the labels have the for attribute that matches the id attribute in the form fields. All text fields have htmlEditFormat() wrap around it, and all fields have trim().