Extending ColdFusion Components

Contact Us or call 1-877-932-8228
Extending ColdFusion Components

Extending ColdFusion Components

ColdFusion components can inherit from other ColdFusion components by means of the extends attribute. The example below shows a ThumbNails component that extends the Images component.

Code Sample:

CFCs/Demos/ThumbNails.cfc
<cfcomponent extends="Images">
	<cffunction name="CreateImageTable" access="public" returntype="string">
		<cfargument name="directory" type="string" required="true">
		<cfargument name="columns" type="numeric" default="2">
		<cfargument name="extensions" type="string" default="jpg,gif">
		<cfset aryImages = getFileList(arguments.directory,arguments.extensions)>
		<cfset rows = Ceiling(ArrayLen(aryImages)/columns)>
		<cfset picture = 1>
		<cfsavecontent variable="ReturnTable">
			<table border="1">
				<cfloop index="i" from="1" to="#rows#">
					<tr>
						<cfloop index="j" from="1" to="#columns#">
							<td>
								<cfoutput><img src="#arguments.directory#/#aryImages[picture]#"></cfoutput>
							</td>
							<cfset picture = picture + 1>
						</cfloop>
					</tr>
				</cfloop>
			</table>
		</cfsavecontent>
		<cfreturn ReturnTable>
	</cffunction>
</cfcomponent>

The ThumbNails component has a single method that displays all the images in the specified directory as a table. The following example makes use of that method and of a method in the parent Images component.

Code Sample:

CFCs/Demos/ThumbNails.cfm
<html>
<head>
<title>Thumbnails</title>
</head>
<body>
<h1>Thumbnails</h1>
<cfobject name="objThumbNail" component="ThumbNails">
   
<cfinvoke component = "#objThumbNail#" method="CreateImageTable" returnvariable="ImgTable">
	<cfinvokeargument name="directory" value="Images/Runners">
	<cfinvokeargument name="columns" value="3">
</cfinvoke>
<cfoutput>#ImgTable#</cfoutput>
<hr />
<cfinvoke component = "#objThumbNail#" method="ImageFlipper" returnvariable="imgpath">
	<cfinvokeargument name="directory" value="Images/Runners">
</cfinvoke>
<cfoutput><img src="#imgpath#"/></cfoutput>
</body>
</html>

Although the examples above aren't very interesting in terms of functionality, they should give you the idea of how CFCs can be extended.

Next