ColdFusion developers have traditionally written code in Macromedia HomeSite or, more recently, in Dreamweaver. Unfortunately, HomeSite has not been updated in several years, and Dreamweaver is burdened with trying to be a code-centric IDE, as well as a designer's tool. In 2004, a new ColdFusion IDE was introduced in the form of an Eclipse plug-in, initially called the Basic ColdFusion Eclipse plug-in and later renamed CFEclipse.
There is now a large community supporting CFEclipse. Several developers have contributed to the open source project, and recently, Adobe Systems has thrown its support behind the Eclipse platform by releasing additional ColdFusion-related extensions and help files for ColdFusion V8.
In this article, we explore the features of CFEclipse while we develop, debug, and deploy a simple art gallery application using one of the sample databases included with ColdFusion V8. This article assumes you have the following software installed (see Resources).
- Eclipse V3.3 (Europa)
- Eclipse is the platform upon which Eclipse plug-ins run. Download the latest version of Eclipse from Eclipse.org.
- Operating system
- Any operating system capable of running Eclipse, including Windows®, Linux®, or Mac OS X. This article was written using the version for Windows, but the steps shown are essentially the same for Linux and Macintosh versions.
- ColdFusion V8 Developer Edition
- This is a recommended option for Windows users.
Installation of the CFEclipse plug-in is done from within Eclipse:
- Select Help > Software Updates > Find and Install.
- Select Search for new features to install, as shown in Figure 1.
- Click Next.
Figure 1. Search for new features

Now click New Remote Site.
Figure 2. New Remote Site

Type a name for the update site, such as CFEclipse
.
In the URL box, type http://www.cfeclipse.org/update
.
Figure 3. New update site

Click OK.
You should now have a CFEclipse node in the "Sites to include in search" window.
Figure 4. CFEclipse node

Select the CFEclipse box and click Finish. Eclipse will contact the CFEclipse site and retrieve the list of available items to install. As of this writing, you can install the latest version of CFEclipse (V1.3.1.5), as well as the CFUnit and CF Frameworks Explorer. Select the items you would like to install and click Next. For this article, we install everything.
Figure 5. Features to install

The remaining instructions are self-explanatory: agree to the license, install the software, restart Eclipse.
Before proceeding, it is important to understand some important concepts regarding Eclipse. When you first start Eclipse, you need to define a workspace. Once you open your workspace, you will be presented with the main window called the workbench. The workbench is the main IDE window comprising menus, toolbars, and views combined in a functional group. known as a perspective. In this article, we will be working in the CFEclipse perspective, a collection of views designed to support a specific task or function, in this case, editing ColdFusion-related files. Within each perspective, there are many views, a window or area that provides one specific function, such as projects, file navigator, text editor, bookmarks, and many others.
Figure 6. CFEclipse workbench

We now create a new Art Gallery project.
Unlike most IDEs, where you can simply open a file and begin working, the workflow in Eclipse is focused on working with projects. Creating a new ColdFusion project is easy using the New Project wizard.
First, ensure that the CFEclipse perspective is open:
- Click Window > Open Perspective > Other.
- Select CFEclipse.
- Click OK.
Now we can create our project:
- Click File > New > Project to open the New Project Wizard.
- Expand the CFEclipse node and click CFML Project.
- Click Next.
- Type the name of your project:
Art Gallery
. - Note the default location under the workspace area you defined during initial startup. You may also uncheck the Use default location option and define a different path.
- Click Finish.
Your Art Gallery project has been created. You will notice the presence of a .project file located in the root directory of the project. This is a simple XML file containing information regarding your project. Do not delete it. To close a project, simply right-click on the project and select Close Project.
Now that you have a project created, let's create the Application.cfc file for our project:
- Click File > New > CFML Page to create a new page. You may also create a ColdFusion component (CFC) using the CFC Wizard.
- Type the file name and verify the path.
- Click Finish.
The new ColdFusion document will be open and ready for editing. You can see the project, file and editor open.
Figure 7. Project, file and editor

Developing the Art Gallery application
CFEclipse is packed with features, some from the underlying Eclipse platform and many developed especially for CFEclipse itself. As you develop the Art Gallery application, you will explore some of these features and how they can speed up your ColdFusion development.
Defining the Art Gallery Application.cfc
Let's begin by defining the cfcomponent
tag in
Application.cfc. Within Application.cfc, you can define common variables that will be used throughout the
application. Once you start typing <c
, the tag insight
dialog will pop up, showing a list of all tags beginning with "C." As you continue to
type additional letters, the list will continue to display matching tags. This is due
to the tag insight feature. When you select the cfcomponent
tag, a description of the
tag in yellow will be displayed in the dialog to the right of the list.
Figure 8. Tag insight showing
cfcomponent

You will notice that upon inserting the cfcomponent
tag, the cursor is placed ready to
insert attributes. But what if you can't remember the valid attributes available for
the cfcomponent
tag?
There are a lot of functions and tags to keep up with in ColdFusion. The searchable Dictionary View gives you quick insight — displaying the available attributes and a brief description for each tag and function, as shown in Figure 9. If it is not visible, open it: Window > Show View > Dictionary View.
Now type cfcomponent
and click Search. A list
will be displayed, showing the available attributes, their type, and values. Clicking
on an attribute will give you a brief description.
Figure 9. Dictionary view

For the Art Gallery example, you will simply type the output
attribute, as you won't be generating
any HTML from within Application.cfc.
<cfcomponent output="false" |
Notice when you type the closing >
, CFEclipse will
automatically add the closing tag: <cfcomponent
output="false"></cfcomponent>
.
Managing tasks while developing the Art Gallery
Next, you will add the rest of the standard Application.cfc functions, but you'll want
to remember to come back and add some default parameters. One of the neat features in
Eclipse is the Task List. Type a ColdFusion comment between the cfcomponent
tags you
defined earlier.
<!--- add some default values ---> |
Now simply modify that comment to include TODO:
at the
beginning.
<!--- TODO: add some default values ---> |
Save the file. Now open the Tasks view: Click Window > Show View > Tasks.
Figure 10. Tasks view

Task comments work in markup and cfscript. The Tasks view will show your existing tasks in open and closed documents within your current project. The Tasks view also displays the document, path, and line number of the comment. Clicking a task in the Tasks view opens the document and highlights the current task.
Now with the reminder set, let's quickly code up the rest of Application.cfc. Remember to use the tag insight.
Listing 1. Application.cfc
<cfcomponent output="false"> <!--- TODO: add some default values ---> <cffunction name="onApplicationStart" returnType="boolean" output="false"> <cfreturn true> </cffunction> <cffunction name="onRequestStart" returnType="boolean" output="false"> <cfargument name="thePage" type="string" required="true"> <cfreturn true> </cffunction> </cfcomponent> |
Next, you will create the application's home page. Close Application.cfm and create a file called index.cfm and simply add some text:
This is index.cfm |
Now we can test to see if the code works.
View the Art Gallery using the internal browser
An internal browser is integrated within Eclipse, enabling you to view your project within Eclipse. Before using the integrated browser, you should set the project's home page property:
- Right-click on the artgallery project directory.
- Click Edit URL.
- Type the URL to point to your local server:
http://localhost/workspace/artgallery/
. - Click OK.
Ensure that index.cfm is open and click the Browser View tab. You should be able to click the Home icon and view index.cfm.
Figure 11. Browser view

Now that our code works, let's go back and add some variables to Application.cfc. Remember the TODO task? Click the Tasks tab to open the Tasks view, and you will see the task. Double-click the task and Application.cfc will open.
Figure 12. Tasks view

Now you can add some variables.
Adding variables to the Art Gallery application
When you reopen Application.cfc, you may notice that some of the code appears missing. CFEclipse was one of the first ColdFusion editors to introduce code folding. Code folding simply takes a large set of code with an opening and closing tag (like our functions), and collapses the code contained between the opening and closing tags into one line.
Figure 13. Code folding

Let's add more variables in Application.cfc. You'll name the application and provide some default timeout values.
Listing 2. Application.cfc variables
<cfscript> this.name = "Art Gallery"; this.applicationTimeout = createTimeSpan(0,2,0,0); </cfscript> |
Like all good text editors, CFEclipse also supports standard features like bracket and brace matching. Hover your cursor near a bracket or brace and the corresponding opening or closing brace will highlight, as shown in Figure 14. Notice when you add the double quote for the variable names that CFEclipse will automatically add the closing quote. You may also highlight a word or phrase and press Ctrl+" or Ctrl+' to wrap the selected word. The CFEclipse wiki offers a list of all available keyboard shortcuts (see Resources).
Figure 14. Bracket and brace matching

Although Application.cfc isn't overly complex, CFEclipse does provide two views to help you navigate complex files and CFCs.
Examining the Art Gallery application with Outline and Method views
The Outline and Method views give you two views inside your files. The Outline view presents your document in a tree view with each tag presented as a node.
Figure 15. Outline view

The Methods view is similar to the Outline view, but is used to view a CFC, as shown in Figure 16. With more and more ColdFusion projects using frameworks, CFCs and OO techniques, being able to easily open a CFC and navigate to where you need to be is made much easier with the Methods view. Clicking on a method in the view will take you to that method in the CFC.
Figure 16. Methods view

Let's continue coding Application.cfc. You are going to need to insert a few CFSET
tags. To save some typing, you will create a CFSET
snippet to easily insert these tags into the code.
A popular feature in Homesite, dynamic snippets, return in CFEclipse. A brief example illustrates how to use this great time-saving feature. When developing an application, most developers include some common information at the beginning of each page. You can create a snippet to do this for you.
To create a CFSET
snippet, open the Snip Tree view if it's not already open: Window
> Show View > Snip Tree View. Click the + sign to create a new snippet.
In the New Snippet dialog, you will define your snippet.
Figure 17. Defining a new snippet

In the Snippet starting block, we have defined the snippet using some dynamic variables.
<cfset name="$${Variable}" = "$${Value}"> |
Now let's define the application title and data source for Art Gallery. Type
set immediately followed by Ctrl+J. Type the values shown below for each
CFSET
:
- Variable name
APPLICATION.name = "ColdFusion Art Gallery"
- Variable name
APPLICATION.dsn = "cfartgallery"
The user-defined Variable and Value will prompt you with a dialog box upon insertion of
the snippet, allowing you to type the values for the CFSET
tag, as shown in Figure 18. In
addition to user-defined variables, there are some default variables available for
quickly inserting dates, file name, and other values. A complete list is available on
the CFEclipse wiki (see Resources).
Figure 18. Dynamic snippet variable

We now have a very basic Art Gallery application started, with Application.cfc and index.cfm files defined, which you can browse using the Browser view. While you develop the Art Gallery application, you will be constantly switching between Application.cfc and index.cfm. Switching among many files is a common task when developing large applications. Luckily, CFEclipse provides a handy way to quickly move around among files.
Moving around among Art Gallery files
Building complex MVC sites using frameworks involves lots of files and jumping between views and controllers. Just as bookmarks allow you to easily navigate to saved URLs within your browser, bookmarks within Eclipse allow you to easily navigate to sections within your code. Let's open Application.cfc again and add a bookmark. As you develop the application, you will be coming back to this file frequently.
Open Application.cfc, expand the onApplicationStart
function, and right-click on a line number in the gutter area. Select Add
Bookmark, as shown in Figure 19. Add a bookmark, name it onApplicationStart
, click OK, and close Application.cfc.
Figure 19. Adding a bookmark

Now open the Bookmark view: Window > Show View > Bookmarks. Similar to the Task List view, each bookmark will show you the filename and line number of the bookmark, as shown in Figure 20. Double-clicking a bookmark will take you to that location within the file. You may also right-click on the bookmark and select Show In to highlight the file within the Navigator or File Explorer view.
Figure 20. Bookmarks view

Click on the bookmark to reopen Application.cfc.
Now let's add some code to index.cfm and Application.cfc, as shown in Listing 3 to complete the rest of the Art Gallery application, which we can then test using the debugger.
Listing 3. Application.cfc and index.cfm
// Application.cfc <cfcomponent output="false"> <cfscript> this.name = "ColdFusion Art Gallery"; this.applicationTimeout = createTimeSpan(0,2,0,0); </cfscript> <cffunction name="onApplicationStart" returnType="boolean" output="false"> <cfset StructClear(application)/> <cfset APPLICATION.name = "ColdFusion Art Gallery"> <cfset APPLICATION.dsn = "cfartgallery"> <cfreturn true> </cffunction> </cfcomponent> // index.cfm <html> <head> <title>Art Gallery</title> </head> <body> <h1>Art Gallery</h1> <cfquery datasource="#application.dsn#" name="getArt"> SELECT * FROM art a, artists t, media m WHERE a.artistID = t.artistID AND a.mediaID = m.mediaID ORDER BY a.mediaID, a.artistID, a.price desc </cfquery> <cfoutput query="getArt" group="mediaID"> <h2>#mediaType#</h2> <cfoutput group="artistID"> <h3 style="padding-left: 20px;">#firstName#</h3> <cfoutput> <p style="padding-left: 40px;">#artname# (<em>by #firstname# #lastname#</em>) <cfif price GT 100000> <strong>#DollarFormat(price)#</strong> <cfelse> #DollarFormat(price)# </cfif> </p> </cfoutput> </cfoutput> </cfoutput> </body> </html> |
Debugging the Art Gallery application
Now that you have completed the Art Gallery application, you can troubleshoot any issues using the debugger. With the release of ColdFusion V8, Adobe has released a debug component that is included in the ColdFusion V8 Extensions for Eclipse download available at Adobe.com (see Resources).
Once you have downloaded the ColdFusion extensions, installation is similar to CFEclipse, with a few minor changes to install from an archive vs. a remote site. Download the ColdFusion_Extensions_for_Eclipse.zip file to your local drive:
- Click Help > Software Updates > Find and Install.
- Select Search for new features to install.
- Click Next.
- Click New Archived Site.
- Select the ColdFusion_Extensions_for_Eclipse.zip file.
- Click OK.
- Make sure the ColdFusion_Extensions_for_Eclipse.zip node is selected.
- Click Finish.
- Select ColdFusion_Extensions_for_Eclipse.zip as the feature to install.
- Click Next.
- The next instructions are self-explanatory: agree to the license, install the software and restart Eclipse.
To use the debugger, after installing the ColdFusion extensions for Eclipse, you need to enable the line debugger within the ColdFusion V8 Administrator.
Figure 21. ColdFusion administrator — Debugger settings

While you have the Administrator window open, you should also enable a longer timeout limit for requests.
Figure 22. Server timeout settings

After making these changes, restart ColdFusion. Next, we configure Eclipse to connect to the ColdFusion server via Remote Development Services (RDS):
- Click Window > Preferences.
- Select ColdFusion > RDS Configuration.
- Type any description you wish in the dialog, as shown in Figure 23.
- If your ColdFusion server is running locally, type
127.0.0.1
for the Host Name. - If you installed ColdFusion in a stand-alone configuration, type
8500
for the port number of the server. Otherwise, type the port number of your Web server (usually port 80). - Type the username and password you created when installing ColdFusion V8.
- Click Test Connection.
Figure 23. RDS configuration

Once you have defined the RDS connection, in addition to debugging, you will also be able to browse data sources in the RDS Dataview view, see available CFCs in the Services Browser view, use the wizards, and more. Now that RDS has been correctly configured, you need to set up the debugger server connection so you can debug the Art Gallery. Expand the debug dialog.
Figure 24. Debug menu

Click ColdFusion Application, then click New Launch Configuration to open the debugger configuration dialog.
Figure 25. Debugger configuration

- Type a name for your ColdFusion server.
- Type the debug URL for your server. In this example, we are connecting to a local server. The default port for the debugger is 8500.
- Click Apply.
- Click Debug.
Now open the Debug perspective: Window > Open Perspective > Other > Debug. You should now be in the Debug perspective.
Figure 26. Debug perspective

Now you can switch back to the CFEclipse perspective and add some breakpoints to the Art Gallery's index.cfm file. Double-click or right-click within the gutter next to each line where you would like to enter a breakpoint. Breakpoints are indicated by a small blue dot.
Figure 27. Inserting breakpoints

Now switch back to the Debug perspective. Open a browser and navigate to the Art Gallery. As your code runs in the debugger, each breakpoint will halt execution of the template at that line. You may inspect current variables, expressions, and their values.
Figure 28. Debugging Art Gallery

Within the debug perspective, you can control how the debugger executes the code and interacts with the breakpoints set earlier.
Figure 29. Controlling the debugger execution

- To continue processing your page, click Continue. This will run the page until the request is complete or until another breakpoint is reached.
- To stop debugging, simply click Stop. The debugging session will be terminated.
- The step into button will step into the code located at the breakpoint. Using this, you can execute code within a loop or CFC.
- The step over button will step over loops, functions, etc., which allows you to bypass certain sections of code.
If you use an early version of ColdFusion, you can install FusionDebug. See Resources for links and more information.
If all goes well, you should be able to step through and debug the Art Gallery with no issues. Next, you need to deploy Art Gallery to the Web server so others can view the application.
There are various methods to deploy the Art Gallery project from within Eclipse. CFEclipse has the ability to FTP files to a remote directory. First, select the File Explorer view. Click the arrow to add a new location.
Figure 30. File Explorer view locations

Provide a name and connection information.
Figure 31. Location connection information

You can now select your new connection.
Figure 32. New connection

The Aptana plug-in (see Resources) allows you to sync your local file system or Eclipse project to a remote FTP/SFTP site, as shown in Figure 33. In addition to FTP, it provides a great CSS, JavaScript, and HTML editor — and makes a great addition to CFEclipse
.
Figure 33. Aptana file sync

Remote Development Services (RDS) is included within the ColdFusion V8 Extensions for Eclipse extensions package that provides the ColdFusion V8 code debugger. Using RDS, you can access remote files and data sources, as shown in Figure 34. Note that according to ColdFusion best practices, RDS should not be installed on production servers.
Figure 34. ColdFusion Extensions — RDS

You can use any of these methods to deploy Art Gallery or any of your applications.
We created, tested, and deployed a simple Art Gallery application using CFEclipse. We explored some of the many features that can help you develop projects faster and more efficiently. However, there are many features we did not explore. If you are still using HomeSite or Dreamweaver, I encourage you to download CFEclipse and join the growing CFEclipse community.
Learn
-
The CFEclipse wiki holds user-contributed
documentation for the CFEclipse project.
-
See the CFEclipse wiki Frequently Asked Questions.
-
Check out the CFEclipse mailing list.
-
The basics of the Eclipse plug-in architecture and how to create one are described in
the IBM developerWorks article titled "Developing Eclipse
plug-ins," by David Gallardo.
-
For more information about plug-in development, visit Eclipse.org.
-
For an excellent introduction to the Eclipse platform, read "Getting started with
the Eclipse Platform," also by David Gallardo.
-
Creating Eclipse plug-ins is well described in a book titled
Eclipse: Building Commercial-Quality
plug-ins, by Eric Clayberg and Dan Rubel.
-
Browse a complete list of plug-ins for Eclipse.
-
Check out the ColdFusion V8 Help Files for Eclipse.
-
Check out the "Recommended Eclipse reading list."
-
Browse all the Eclipse content on developerWorks.
-
New to Eclipse? Read the developerWorks article "Get started with Eclipse Platform" to learn its origin and architecture, and how to extend Eclipse with plug-ins.
-
Expand your Eclipse skills by checking out IBM developerWorks' Eclipse project resources.
-
To listen to interesting interviews and discussions for software developers, check out developerWorks podcasts.
-
For an introduction to the Eclipse platform, see "Getting started with the Eclipse Platform."
-
Stay current with developerWorks' Technical events and webcasts.
-
Watch and learn about IBM and open source technologies and product functions with the no-cost developerWorks On demand demos.
-
Check out upcoming conferences, trade shows, webcasts, and other Events around the world that are of interest to IBM open source developers.
-
Visit the developerWorks Open source zone for extensive how-to information, tools, and project updates to help you develop with open source technologies and use them with IBM's products.
Get products and technologies
-
Get the ColdFusion V8 Extensions for Eclipse.
-
Download the CFEclipse plug-in.
-
Get CFUnit, a open source unit-testing
framework for ColdFusion.
-
FusionDebug is a commercial ColdFusion debugger.
-
XMLBuddy is a solid and functional XML editor.
-
Subversion is an Eclipse Team Provider
plug-in, providing support for Subversion within the Eclipse IDE.
-
Apache Ant, the Java-based build tool, is now built
into Eclipse.
-
The Aptana IDE is a free cross-platform open source
JavaScript-focused editor and development environment for building Ajax applications.
-
Get the ColdFusion V8
Syntax Dictionaries.
-
Check out the latest Eclipse technology downloads at IBM alphaWorks.
-
Download Eclipse Platform and other projects from the Eclipse Foundation.
-
Download IBM product evaluation versions, and get your hands on application development tools and middleware products from DB2®, Lotus®, Rational®, Tivoli®, and WebSphere®.
-
Innovate your next open source development project with IBM trial software, available for download or on DVD.
Discuss
-
The Eclipse Platform newsgroups should be your first stop to discuss questions regarding Eclipse. (Selecting this will launch your default Usenet news reader application and open eclipse.platform.)
-
The Eclipse newsgroups has many resources for people interested in using and extending Eclipse.
-
Participate in developerWorks blogs and get involved in the developerWorks community.
Related
You might also be interested in the following content from developerWorks
- Together at last: Sharing session data between ColdFusion and J2EE components
- Build an Ajax-enabled search page using the Rico JavaScript library, ColdFusion MX 7, and Windows Indexing Service
- Program in DB2 UDB with Macromedia Coldfusion