CFEclipse CFExplained Part II

 
Apr 10, 2006
By Robert Blackburn

In the last article, I introduced you to CFEclipse and explained some of the new terms you will encounter when using it. In this article I will actually walk you through two typical work scenarios: creating a CFML page and creating a CFC. We will wrap up by discussing a few features that will help you become more familiar with the CFEclipse interface.

Typical Work Scenarios

Creating a CFML Page

What would an introductory guide be without a "Hello World" example? Here are the steps you would follow to create a "Hello World" CFML page:
  1. First create a ColdFusion project by clicking "File" > "New" > "Project" from the menu. Then select "CFML Project" (under "CFEclipse").

  2. You may be prompted to switch to the CFEclipse perspective. If you are, click "Yes".

  3. You will be prompted for the name of your project. The name we will be using for our example project is "CFExplained".

  4. If your workspace is located in your server's web root, click the "Finish" button. (Otherwise uncheck "Use Default" and set the "Directory" to a location on the web root.)

  5. Your project will be added to the Navigation window to the left of the editor pane (if you don't see a Navigation tab click "Window" > "Show View" > "Other" in the menu, then select "Navigation" under the "Basic" folder).

  6. Add a CFML file to the project by right-clicking your new project in the Navigation window and select "File" > "New" > "Other" then select "CFML Page" (under "CFEclipse").

  7. Give the file a name and click "Finish". Your CFML page will now be listed under your project, and will be opened in the editor pane.

  8. Type the following into the Editor Pane: <h1>Hello World!</h1>. Press CTRL+S to save the change.

  9. Click on the "Browser View" window below the editor pane (if you don't see a browser view tab, click "Window" > "Show View" > "Other" in the menu, then select "Browser View" under the "CFML" folder).

  10. In the browser window's address field, type in the URL location of your project. (For example: if your workspace is located in the web root, and you named your project "CFExplained", then the URL would be something like "http://localhost/CFExplained") and hit enter. The web page will load.

  11. In the Editor Pane, change your page again so that it is now <h1>Hello World!</h1>Fusion Authority Rules! and save the change.

  12. Hit F5, and the browser window will refresh with the updated page.
Congratulations! You have now created, tested, and edited a CFML page in CFEclipse. When done, your screen should look something like this:

Creating a CFC

Creating a ColdFusion Component is just as simple. However, CFEclipse also provides a wizard that can make creating CFCs even easier. Here is how:
  1. Under the navigation window right-click on the project you created in the last example. Select "File" > "New" > "Other", and then select "CFC" (under "CFEclipse").

  2. Click "Next", give the component a name and click "Next" again.

  3. Add a property by clicking the "+" button. Give the property a name and check off "Write Getter" and "Write Setter". Click "Next".

  4. Add a function by clicking the "+" button. Give the function a name, set the return type to "String", and the access to "Public". Click "Next".

  5. In the functions dropdown, select the function you added and give it an argument by clicking the "+" button. Name the argument "name" and set its type to "String".

  6. Click "Finish".

  7. The CFC will be created and opened in the Editor Pane. The CFC will have the property you added with corresponding getter and setter methods. The function you added will also be created, with the following comment for its contents:
    <cfargument name="name" type="string" />
    <!--- TODO: Implement Method --->

  8. Replace that method's contents with the following:
    <cfargument name="name" type="string" />
    <cfreturn "Hello " & arguments.name & ", from CFC!"/>

  9. In the navigation window, double click the CFML page you created in the last example. Replace the contents of this CFML page with this:
    <cfset variables.text = createObject("component", "MyCFC").getText("World")>
    <h1><cfoutput>#variables.text#</cfoutput></h1>Fusion Authority Rules!

  10. Hit F5, and the browser window will refresh with the updated page.
That's it. You have now created a CFC, updated the CFML page to consume it, and tested the change. When done, your screen should look something like this:

Note that you are not required to use the CFC wizard. At any point, you could have clicked "Finish" instead of "Next" and completed the CFC code by hand.

A Few Extras

So now you know how the basics of creating CF files in CFEclipse. But to help you get even more comfortable using this new environment, I will also show you a few quick tricks.

The first thing I usually do for any new CFML project is to set its home page. You can do this by clicking "Project" > "Properties" in the menu, and then selecting "CFEclipse Properties". Fill in the project's URL and click "OK". For the project in my examples above, I would set the URL to "http://localhost/CFExplained". From that point on I can click the home icon in the Browser View and it will take me to my project's home page. The project?s properties apply to all the files within the project. So if I open a file from another project that I have set a URL for, I can click the home icon in the Browser View to go to its home page. I find this makes it easier to bounce between projects.

This is a rather basic example of using a project's configuration, but I think it shows how organizing your files into projects can allow CFEclipse to help you do your job. There are many ways CFEclipse uses the projects. Another example of this is using CFEclipse to automatically run your CFUnit tests (See: http://www.fusionauthority.com/Techniques/4583-Test-Driven-Development-with-ColdFusion-Part-III.htm).

The second trick I would like to share is how to maximize any panel on your workbench. Double clicking any tab, whether it's in the edit pane or a tab to a view, will cause that tab to expand to fill the entire workbench. Double click the tab again and it will put everything back to where it was. I do this all the time, especially when editing a large file or when I would like to look at a web page with a lot of content. This is just one of the many handy little features in Eclipse that will make your development easier.

Summary

Hopefully you now see how easy and powerful using CFEclipse can be. I hope you will feel comfortable enough to explore and experiment using CFEclipse's numerous other features. Rest assured, I have only scratched the surface on the potential power of CFEclipse in these articles.

To help you further explore those features, Fusion Authority and I will be working on another series of articles focused on the individual features available in CFEclipse. So if you have any suggestions, comments, or would like to see any specific features covered, feel free to email us at: cfeclipse@fusionauthority.com.
Robert Blackburn is a developer and team leader of the Internet Application Development team at American Power Conversion Corporation (http://www.apcc.com). He has been using ColdFusion since 1999, and has revived and manages the CFUnit open source project (http://cfunit.sourceforge.net). He currently has a blog at http://www.rbdev.net/devblog for his occasional ramblings.
Privacy | FAQ | Site Map | About | Guidelines | Contact | Advertising | What is ColdFusion?
House of Fusion | ColdFusion Jobs | Blog of Fusion | AHP Hosting