Article
Enter the Dragon: Develop ColdFusion Apps for Free
Page: 1 2
ColdFusion Development with CFEclipse
Another potential cost when developing with ColdFusion is that of an IDE (Integrated Development Environment). Of course, Adobe sells the Dreamweaver MX product for development, and HomeSite+ also can be used for ColdFusion development. But these products cost money, and we're trying to avoid that! Fortunately, we can use a free add-on to the Eclipse IDE (Integrated Development Environment) called CFEclipse.
This add-on is installed through the Eclipse update manager, so first you'll need to install Eclipse.
Once you've done so, fire it up, and select Help > Software Updates > Find and Install. When you're prompted, click on the Select new features to install option, which will bring up a list of locations to choose from. The CFEclipse plugin isn't listed, so we'll need to add it -- click on New Remote Site..., and enter "CFEclipse" in the name field, and http://www.cfeclipse.org/update as the URL. Once you've done that, make sure that only the CFEclipse option is checked, then click Continue. Continue through with the rest of the installation process, restarting Eclipse when you're done.
What if Eclipse doesn't behave?
If Eclipse doesn't start after you've installed the plugin, try running it from the command line as eclipse -clean.
Now that CFEclipse is installed, it's time to create a new CFML project. Select File > New Project to bring up the new project wizard. As I've done in Figure 5 below, select CFML Project from the CFEclipse category.
The next screen will prompt you for a project name -- we'll call our first project MyFirstColdfusion. Deselect Use default location from the Directory option and browse for the wwwroot directory that we created during the BlueDragon installation.
The project creation wizard will prompt you for "referenced projects," a setting you can safely ignore for now. You may also be prompted to switch perspectives. A perspective is a version of the Eclipse user interface that can be modified, depending on which programming language you're coding in, and what stage of the development process you're at. Go ahead and allow Eclipse to change your current perspective.
When you've successfully created your project, look for the MyFirstColdfusion folder under the Project Navigator, click the + next to the folder to expand the view, and locate the index.cfm file. Double-click the filename to edit it in Eclipse.
"Hello World!" ColdFusion-style
By default, our index.cfm file contains a number of confusing tags; let's delete the entire contents of this file and replace it with the following code:
<html>
<head>
<title>BlueDragon CFML Test Page</title>
</head>
<body bgcolor=#FFFFFF>
<h1>BlueDragon CFML Test Page</H1>
<!-- Our code will go here -->
</body>
</html>
Note that I've left a comment in the body of our HTML file that indicates where we'll add our ColdFusion code later. Most introductions to programming languages begin with a simple "Hello world!" example, however, because we could easily achieve this goal using a simple HTML tag, we'll instead create an example that's a little more dynamic and CFML-specific. Here's our sample code:
<cfset hello_world = "Hello World!">
<cfoutput>#hello_world#</cfoutput>
Point your web browser at http://localhost:8080/, and you should see a page that displays "BlueDragon CFML Test Page" in its title, and the words "Hello World!" in its body.
Congratulations -- you've just written your first CFML program! Now, you may be wondering, "What did I just do?" Let's examine that first line of code:
<cfset hello_world = "Hello World!">
The cfset tag is used to set variables. In this case, we're creating a string that contains the value "Hello World," and can be identified by the name hello_world. In its most basic form, cfset syntax looks something like this:
<cfset variable_name = value>
While we've used a string in the above example, we could just as well have assigned a different data type, such as a number, an array or a list.
Let's take another look at that second line of code:
<cfoutput>#hello_world#</cfoutput>
The cfoutput tag accomplishes the same goal as functions such as print and echo in other languages -- it writes output to the browser (which is why it's called, erm, cfoutput). The # signs inside the tag let cfoutput know that the contents it contains are dynamic. You can place either a variable or the result of a function inside the # signs, and it will be evaluated and replaced with the dynamic content. You can also mix regular text with dynamic content, like this:
<cfoutput>The variable hello_world = #hello_world#</cfoutput>
This would produce the following output:
The variable hello_world = Hello World!
Conclusion
In this article, I introduced you to the free BlueDragon CFML server and the CFEclipse plugin. We walked through the installation process for both of these tools, and then you used them to write and execute your first CFML script. If the fear of cost and remote IP restrictions was preventing you from diving into ColdFusion development, you now have no more excuses. You can get started with these free tools today!