Code ColdFusion applications fast with the Eclipse CFEclipse plug-in

Document options Document options requiring JavaScript are not displayed Rate this page Help us improve this content

Level: Intermediate

Jim Priest (priest@thecrumb.com), Senior Software Development Analyst, Lockheed-Martin

06 Nov 2007

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.

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.

Now click New Remote Site.

Type a name for the update site, such as CFEclipse.

In the URL box, type http://www.cfeclipse.org/update.

Click OK.

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

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.

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

Back to top

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.

We now create a new Art Gallery project.

Back to top

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.

Back to top

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.

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.

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.

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.

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

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.

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.

Let's add more variables in Application.cfc. You'll name the application and provide some default timeout values.

                
    <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).

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.

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.

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.

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).

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.

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.

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.

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

Back to top

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.

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

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.

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.

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

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.

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.

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.

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

• 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.

Back to top

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.

Provide a name and connection information.

You can now select your 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

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.

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

Back to top

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

• 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 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 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.

• 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.
  
  

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.

Rate this page

Please take a moment to complete this form to help us better serve you. Did the information help you to achieve your goal? Yes No Don't know   Please provide us with comments to help improve this page:   How useful is the information? 1 2 3 4 5 Not useful Extremely useful

Back to top