Skip to main content

By clicking Submit, you agree to the developerWorks terms of use.

The first time you sign into developerWorks, a profile is created for you. Select information in your developerWorks profile is displayed to the public, but you may edit the information at any time. Your first name, last name (unless you choose to hide them), and display name will accompany the content that you post.

All information submitted is secure.

  • Close [x]

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerworks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

By clicking Submit, you agree to the developerWorks terms of use.

All information submitted is secure.

  • Close [x]

Code ColdFusion applications fast with the Eclipse CFEclipse plug-in

Leave Dreamweaver and Homesite behind

Jim Priest (priest@thecrumb.com), Senior Software Development Analyst, Lockheed-Martin
Jim Priest is a husband, father of two, developer, and avid motorcyclist. He currently works for Lockheed Martin as a senior software development analyst. He works primarily with ColdFusion, but also dabbles with Powerbuilder, as well as creating handheld applications in Visual CE.

Summary:  ColdFusion, like other Web development languages, enjoys an enthusiastic following. Since Eclipse is a popular open source development framework, it was only a matter of time before a ColdFusion plug-in would emerge. Find out how to install and use the plug-in to develop, test, and deploy a sample ColdFusion application.

Date:  06 Nov 2007
Level:  Intermediate
Also available in:   Korean  Russian  Japanese

Activity:  26344 views
Comments:  

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.

Installing CFEclipse

Installation of the CFEclipse plug-in is done from within Eclipse:

  1. Select Help > Software Updates > Find and Install.
  2. Select Search for new features to install, as shown in Figure 1.
  3. Click Next.

Figure 1. Search for new features
Search for new features

Now click New Remote Site.


Figure 2. New Remote Site
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
New update site

Click OK.

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


Figure 4. CFEclipse node
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
Features to install

The remaining instructions are self-explanatory: agree to the license, install the software, restart Eclipse.


Eclipse terminology

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
CFEclipse workbench

We now create a new Art Gallery project.


Art Gallery project setup

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:

  1. Click Window > Open Perspective > Other.
  2. Select CFEclipse.
  3. Click OK.

Now we can create our project:

  1. Click File > New > Project to open the New Project Wizard.
  2. Expand the CFEclipse node and click CFML Project.
  3. Click Next.
  4. Type the name of your project: Art Gallery.
  5. 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.
  6. 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.

Create new file

Now that you have a project created, let's create the Application.cfc file for our project:

  1. Click File > New > CFML Page to create a new page. You may also create a ColdFusion component (CFC) using the CFC Wizard.
  2. Type the file name and verify the path.
  3. 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
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
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?

Using the syntax dictionaries

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
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
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:

  1. Right-click on the artgallery project directory.
  2. Click Edit URL.
  3. Type the URL to point to your local server: http://localhost/workspace/artgallery/.
  4. 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
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
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
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
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
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
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.

Dynamic snippets

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
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
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
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
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:

  1. Click Help > Software Updates > Find and Install.
  2. Select Search for new features to install.
  3. Click Next.
  4. Click New Archived Site.
  5. Select the ColdFusion_Extensions_for_Eclipse.zip file.
  6. Click OK.
  7. Make sure the ColdFusion_Extensions_for_Eclipse.zip node is selected.
  8. Click Finish.
  9. Select ColdFusion_Extensions_for_Eclipse.zip as the feature to install.
  10. Click Next.
  11. 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
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
Server timeout settings

After making these changes, restart ColdFusion. Next, we configure Eclipse to connect to the ColdFusion server via Remote Development Services (RDS):

  1. Click Window > Preferences.
  2. Select ColdFusion > RDS Configuration.
  3. Type any description you wish in the dialog, as shown in Figure 23.
  4. If your ColdFusion server is running locally, type 127.0.0.1 for the Host Name.
  5. 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).
  6. Type the username and password you created when installing ColdFusion V8.
  7. Click Test Connection.

Figure 23. RDS configuration
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
Debug menu

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


Figure 25. Debugger configuration
Debugger configuration

  1. Type a name for your ColdFusion server.
  2. 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.
  3. Click Apply.
  4. Click Debug.

Now open the Debug perspective: Window > Open Perspective > Other > Debug. You should now be in the Debug perspective.


Figure 26. Debug perspective
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
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
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
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.


Deploying projects

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
File Explorer view locations

Provide a name and connection information.


Figure 31. Location connection information
Location connection information

You can now select your new connection.


Figure 32. New connection
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
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
ColdFusion Extensions -- RDS

You can use any of these methods to deploy Art Gallery or any of your applications.


Summary

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.


Resources

Learn

Get products and technologies

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

About the author

Jim Priest is a husband, father of two, developer, and avid motorcyclist. He currently works for Lockheed Martin as a senior software development analyst. He works primarily with ColdFusion, but also dabbles with Powerbuilder, as well as creating handheld applications in Visual CE.

Report abuse help

Report abuse

Thank you. This entry has been flagged for moderator attention.


Report abuse help

Report abuse

Report abuse submission failed. Please try again later.


developerWorks: Sign in


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Select information in your developerWorks profile is displayed to the public, but you may edit the information at any time. Your first name, last name (unless you choose to hide them), and display name will accompany the content that you post.

Choose your display name

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


Rate this article

Comments

Help: Update or add to My dW interests

What's this?

This little timesaver lets you update your My developerWorks profile with just one click! The general subject of this content (AIX and UNIX, Information Management, Lotus, Rational, Tivoli, WebSphere, Java, Linux, Open source, SOA and Web services, Web development, or XML) will be added to the interests section of your profile, if it's not there already. You only need to be logged in to My developerWorks.

And what's the point of adding your interests to your profile? That's how you find other users with the same interests as yours, and see what they're reading and contributing to the community. Your interests also help us recommend relevant developerWorks content to you.

View your My developerWorks profile

Return from help

Help: Remove from My dW interests

What's this?

Removing this interest does not alter your profile, but rather removes this piece of content from a list of all content for which you've indicated interest. In a future enhancement to My developerWorks, you'll be able to see a record of that content.

View your My developerWorks profile

Return from help

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Open source
ArticleID=266293
ArticleTitle=Code ColdFusion applications fast with the Eclipse CFEclipse plug-in
publish-date=11062007
author1-email=priest@thecrumb.com
author1-email-cc=