Our first component

To get started, in this example, we will create a component and functions to output the message "Hello world".

Create a new file called greetings.cfc and save it within your ColdFusion webroot.

The following is a component base tag; add this code into the new CFC to define the component:

<cfcomponent displayName="greetings">
</cfcomponent>

Listing 1.1 component base tags

As you can see, the name attribute within the CFC matches the name of the file. The cfcomponent tags form the base structure of our ColdFusion Component. No other code can be placed outside of these tags, as it will simply display an error.

It may be helpful to think of the cfcomponent tag as the wrapping paper on a parcel. It forms the outer shell of the package, holding everything else nicely in place.

Defining a method

We have now created the component, but at the moment it does not actually do anything. It has no function to run. We need to add a method into the CFC to create a function to call and use within our application. The following code is a basic function definition; place it between the opening and closing cfcomponent tags:

<cffunction name="sayHello">
<!--- the CFML code for the method will go here --->
</cffunction>

Listing 1.2 basic function definition

You have now added a method to the CFC. The cffunction tags are nested within the cfcomponent tags. We now need to add some CFML code within the cffunction tags to create our method and perform the operation. Let's create a variable within the function that will be our display message. The following code is for declaring a string variable; place it inside the cffunction tags:

<cffunction name="sayHello">
<cfset var strHelloMessage = 'Hello World!' />
</cffunction>

Listing 1.3 declaring a string variable

We have created a string variable containing the text to display to the browser.

Returning the data

To return the data we need to add an extra tag into the method. This is possible by using the cfreturn tag, which returns results from a component method. The cfreturn tag has one required attribute that is the expression or value you wish to return.

Add the following code to your CFC so our method will return the welcome message and the completed component will look like this:

<cfcomponent displayName="greetings">
<cffunction name="sayHello">
<cfset var strHelloMessage = 'Hello World!' />
<cfreturn strHelloMessage />
</cffunction>
</cfcomponent>

Listing 1.4 returning data from the function

ColdFusion 9 scripted components

Since the release of ColdFusion 9, developers now have the ability to also write ColdFusion components in complete script syntax instead of pure tag form.

To write the previous component in this format, the code would look as follows:

component
displayname="greetings"
{
function sayHello(){
// the CFML code for the method will go here
var strHelloMessage='Hello World';
return strHelloMessage;
}
}

Listing 1.5 component declaration in the script syntax

Although written using cfscript syntax, there is no requirement to wrap the code within<cfscript> tags, instead we can write it directly within the .cfc page.

We do not even need to contain the code within cfcomponent tags, as the entire content of the component will be compiled as cfscript if left as plain text without tags.

Creating your object

There it is, a simple ColdFusion Component. The method is created using the cffunction tags, wrapped up nicely within the cfcomponent tags, and the value returned using the cfreturn tag. Now that we have written the function, how do we call it?

In this example, we will call the component and run the method by using the createObject() function. Create a new file called hello.cfm and add the following code to the template:

<cfset objGreeting = createObject('component', 'greetings') />
<cfoutput>#objGreeting.sayHello()#</cfoutput>

Listing 1.6 creating the component object

In the previous code, we have created an instance of the greetings CFC, which we can reference by using the objGreeting variable. We have then accessed the sayHello() method within the component, surrounded by cfoutput tags, to display the returned data.

Save the file and view it within your browser. You should now see the welcome message that we created within the method.