ColdFusion Customized Tags Can Use Dashes In Tag Names

Yesterday, I used to be wanting on the Laravel Flux UI framework; and was impressed with how clearly they’ve codified their strategy to customized tag group. I wished to borrow their considering to do some exploration on the ColdFusion facet. In Flux, they use the dot (.) to namespace their tags. This does not work in ColdFusion; however, I used to be pleasantly shocked to see that dashes (-) can be utilized in customized tag identifiers.

Within the Flux UI framework, they use two conventions for grouping customized tags. If a tag can meaningfully stand by itself – such because the Button tag – they supply a dad or mum tag with a .group suffix. Instance:

<flux:button.group>
	<flux:button />
</flux:button.group>

Nonetheless, if a tag does not make sense by itself – akin to with the Breadcrumb merchandise tag – they use a .merchandise suffix on every of the kids. Instance:

<flux:breadcrumbs>
	<flux:breadcrumbs.merchandise />
</flux:breadcrumbs>

On the ColdFusion facet, we will not use . in customized tag identifiers; however, after some trial-and-error, I found that we will use dashes. It does not learn fairly at properly because the dots; however, it may be used to drive the identical form of organizational philosophy.

Notice: in ColdFusion, the dot (.) can be utilized to namespace directories for customized tags, very similar to it may be used to namespace directories for ColdFusion elements.

To discover, let’s setup a demo ColdFusion software that defines a per-application setting for customized tag paths. The next code tells the ColdFusion server to look within the native ./tags listing for customized tags earlier than wanting within the server’s international customized tags listing.

part {

	this.identify = "ModuleNameTest";
	this.applicationTimeout = createTimeSpan( 0, 1, 0, 0 );
	this.sessionManagement = false;
	this.setClientCookies = false;

	this.webroot = getDirectoryFromPath( getCurrentTemplatePath() );

	// ColdFusion will look on this directories for customized tags.
	// --
	// Notice: Adobe ColdFusion will recursively search by way of the customized tag paths wanting
	// for matching tag names. Lucee CFML will NOT search recursively. As such, this demo
	// does not work identically in each CFML runtimes.
	this.customTagPaths = arrayToList([
		"#this.webroot#tags"
	]);

}

Pursuant to the Flux UI strategy, let create two ColdFusion customized tags which have a grouping relationship:

• Factor-Group.cfm
• Factor.cfm

Behind the scenes, this does nothing however mimic HTML’s ul/li parent-child relationship; however, be aware that the grouping customized tag has a splash within the identify.

Now, let’s attempt to invoke these ColdFusion customized tags utilizing numerous mechanics:

<cf_thing-group type="cf_">
	<cf_thing>Anna</cf_thing>
	<cf_thing>Anna</cf_thing>
	<cf_thing>Bo-banna</cf_thing>
	<cf_thing>Banana-fanna fo-fanna</cf_thing>
	<cf_thing>Price-fi-mo-manna</cf_thing>
	<cf_thing>Anna!</cf_thing>
</cf_thing-group>

<hr />

<cfmodule identify="ui.thing-group" type="cfmodule[name]">
	<cfmodule identify="ui.factor">Anna</cfmodule>
	<cfmodule identify="ui.factor">Anna</cfmodule>
	<cfmodule identify="ui.factor">Bo-banna</cfmodule>
	<cfmodule identify="ui.factor">Banana-fanna fo-fanna</cfmodule>
	<cfmodule identify="ui.factor">Price-fi-mo-manna</cfmodule>
	<cfmodule identify="ui.factor">Anna!</cfmodule>
</cfmodule>

<hr />

<cfmodule template="./tags/ui/thing-group.cfm" type="cfmodule[template]">
	<cfmodule template="./tags/ui/factor.cfm">Anna</cfmodule>
	<cfmodule template="./tags/ui/factor.cfm">Anna</cfmodule>
	<cfmodule template="./tags/ui/factor.cfm">Bo-banna</cfmodule>
	<cfmodule template="./tags/ui/factor.cfm">Banana-fanna fo-fanna</cfmodule>
	<cfmodule template="./tags/ui/factor.cfm">Price-fi-mo-manna</cfmodule>
	<cfmodule template="./tags/ui/factor.cfm">Anna!</cfmodule>
</cfmodule>

<hr />

<cfimport taglib="./tags/ui" prefix="ui" />

<ui:thing-group type="cfimport[ui:]">
	<ui:factor>Anna</ui:factor>
	<ui:factor>Anna</ui:factor>
	<ui:factor>Bo-banna</ui:factor>
	<ui:factor>Banana-fanna fo-fanna</ui:factor>
	<ui:factor>Price-fi-mo-manna</ui:factor>
	<ui:factor>Anna!</ui:factor>
</ui:thing-group>

On this ColdFusion code, we’re utilizing the 4 customized tag reference mechanics:

1. The cf_ prefix.
2. The cfmodule[name] tag.
3. The cfmodule[template] tag.
4. The cfimport tag (a compile-time directive).

After we run this ColdFusion code, we get the next output:

As you may see, the entire numerous ColdFusion customized tag mechanics have been ready to make use of the (-) within the thing-group.cfm identifier. Once more, it does not learn fairly as properly because the Flux UI’s dot-based name-spacing; however, I feel it might work simply as properly.

Need to use code from this put up?
Take a look at the license.

https://bennadel.com/4774