UML软件工程组织

 

 

用 Eclipse CFEclipse 插件快速编写 ColdFusion 应用程序


2008-10-10 作者:Jim Priest 来源:IBM
 
本文内容包括:
像其他 Web 开发语言一样,ColdFusion 受到了热情的追捧。由于 Eclipse 是一种流行的开源开发框架,因此 ColdFusion 插件脱颖而出只是时间问题。了解如何安装和使用该插件开发、测试和部署样例 ColdFusion 应用程序。

以前,ColdFusion 开发人员使用 Macromedia HomeSite 编写代码,最近则使用的是 Dreamweaver。不幸的是,HomeSite 已经多年未更新,而 Dreamweaver 还同时努力成为以代码为中心的 IDE 以及设计人员的工具。2004 年,以 Eclipse 插件的形式引入了一个新的 ColdFusion IDE,它最初叫做 Basic ColdFusion Eclipse 插件,之后更名为 CFEclipse。

现在有一个支持 CFEclipse 的大型社区。许多开发人员投入到该开源项目中,而且就在最近,Adobe Systems 也发布了针对 ColdFusion V8 的 ColdFusion 相关附加扩展和帮助文件,在 Eclipse 平台后端支持 CFEclipse。

本文将通过使用 ColdFusion V8 附带的一个样例数据库开发、调试和部署一个简单 Art Gallery 应用程序来探究 CFEclipse 的功能。本文假定您已经安装了下列软件(请参阅 参考资料)。

Eclipse V3.3 (Europa)
Eclipse 是运行 Eclipse 插件的平台。请从 Eclipse.org 下载 Eclipse 的最新版本。
操作系统
所有操作系统都能运行 Eclipse,包括 Windows®、Linux® 或 Mac OS X。本文使用的是 Windows 版本,但是所示步骤在本质上同样适用于 Linux 和 Macintosh 版本。
ColdFusion V8 Developer Edition
推荐 Windows 用户使用该选择。

安装 CFEclipse

安装 CFEclipse 插件是在 Eclipse 中完成的:

  1. 选择 Help > Software Updates > Find and Install
  2. 选择 Search for new features to install,如图 1 所示。
  3. 单击 Next
图 1. 搜索新功能
搜索新功能

现在单击 New Remote Site

图 2. 新建远程站点
新建远程站点

键入更新站点的名称,例如 CFEclipse。

在 URL 框中键入 http://www.cfeclipse.org/update。

图 3. 新建更新站点
新建更新站点

单击 OK

现在 “Sites to include in search” 窗口中应当有一个 CFEclipse 节点。

图 4. CFEclipse 节点
CFEclipse 节点

选中 CFEclipse 框并单击 Finish。Eclipse 将连接 CFEclipse 站点并检索可用的安装条目列表。撰写本文时,可以安装最新版本的 CFEclipse (V1.3.1.5),以及 CFUnit 和 CF Frameworks Explorer。选择需要安装的条目并单击 Next。对于本文,安装所有条目。

图 5. 要安装的功能
要安装的功能

其余指导信息意义非常清楚:同意许可证,安装软件,重新启动 Eclipse。

Eclipse 术语

继续之前,必须了解 Eclipse 的一些重要概念。第一次启动 Eclipse 时,需要定义工作区。打开工作区后,将显示称为工作台 的主窗口。工作台是由菜单、工具栏和合并为功能组的视图(称为透视图)组成的主 IDE 窗口。在本文中,我们将在 CFEclipse 透视图中工作,它是一组专门支持特定任务或功能的视图集合,在本例中,用来编辑与 ColdFusion 相关的文件。在每个透视图内,有许多视图、提供一项特定功能(例如项目、文件浏览器、文本编辑器、书签和许多其他功能)的窗口或区域。

图 6. CFEclipse 工作台
CFEclipse 工作台

现在创建一个新 Art Gallery 项目。

Art Gallery 项目设置

与只需打开文件并开始工作的大多数 IDE 不同,Eclipse 中的工作流程主要集中在使用项目上。使用 New Project 向导可以轻松创建一个新的 ColdFusion 项目。

首先,确保 CFEclipse 透视图已打开:

  1. 单击 Window > Open Perspective > Other
  2. 选择 CFEclipse
  3. 单击 OK

现在可以创建项目:

  1. 单击 File > New > Project 打开 New Project 向导。
  2. 展开 CFEclipse 节点并单击 CFML Project
  3. 单击 Next
  4. 键入项目名称:Art Gallery。
  5. 记下初始启动过程中在工作区下定义的默认位置。还可以取消选中 Use default location 选项并定义其他路径。
  6. 单击 Finish

Art Gallery 项目已创建。您将注意到 .project 文件出现在项目的根目录下。这是包含项目信息的简单 XML 文件。请不要删除它。要关闭项目,只需右键单击该项目并选择 Close Project

创建新文件

现在已经创建了项目,接下来让我们创建项目的 Application.cfc 文件:

  1. 单击 File > New > CFML Page 创建新页面。还可以使用 CFC 向导创建 ColdFusion 组件 (CFC)。
  2. 键入文件名并检验路径。
  3. 单击 Finish

新 ColdFusion 文档将打开并且可供编辑。可以看到打开的项目、文件和编辑器。

图 7. 项目、文件和编辑器
项目、文件和编辑器

开发 Art Gallery 应用程序

CFEclipse 附带了许多功能,一些功能来自底层 Eclipse 平台并且许多功能是专门为 CFEclipse 本身开发的。在开发 Art Gallery 应用程序的过程中,将探究其中一些功能以及这些功能如何提高 ColdFusion 的开发速度。

定义 Art Gallery Application.cfc

让我们先在 Application.cfc 中定义 cfcomponent 标记。在 Application.cfc 内,可以定义将在整个应用程序内使用的一般变量。当您开始键入 <c 时,tag insight 对话框将弹出,显示开头为 “C” 的所有标记列表。随着继续键入其他字符,该列表将继续显示匹配标记。这要归功于 tag insight 功能。当您选择 cfcomponent 标记时,对话框中列表的右侧将显示黄色的标记描述。

图 8. 显示 cfcomponent 的 tag insight
显示 cfcomponent 的 tag insight

您将注意到在插入 cfcomponent 标记时,光标被放置在准备插入属性的位置。但是如果您忘记了可用于 cfcomponent 标记的有效属性怎么办?

使用语法字典

ColdFusion 提供了许多函数和标记。可搜索的 Dictionary View 将您能够快速了解 —— 显示每个标记和函数的可用属性和简要说明,如图 9 所示。如果未显示 Dictionary View,请通过 Window > Show View > Dictionary View 打开它。

现在键入 cfcomponent 并单击 Search。将显示一张列表,显示可用属性及其类型和值。单击属性将提供简要说明。

图 9. Dictionary 视图
Dictionary 视图

对于 Art Gallery 示例,只需键入 output 属性,因为不会从 Application.cfc 中生成任何 HTML。

<cfcomponent output="false"

注意,在键入结束 > 时,CFEclipse 将自动添加结束标记:<cfcomponent output="false"></cfcomponent>。

管理 Art Gallery 的开发任务

接下来,将添加其余的标准 Application.cfc 函数,但是需要记得要返回这里添加一些默认参数。Eclipse 的一个优秀功能是任务列表。在先前定义的 cfcomponent 标记之间键入 ColdFusion 注释。

<!--- add some default values  --->

现在只需修改该注释使其在开头包括 TODO:。

<!--- TODO:  add some default values  --->

保存文件。现在打开 Tasks 视图:Click Window > Show View > Tasks

图 10. Tasks 视图
Tasks 视图

任务注释作用于标记和 cfscript。Tasks 视图将显示当前项目内打开和关闭的文档中的现有任务。Tasks 视图还将显示文档、路径和注释的行号。单击 Tasks 视图中的任务将打开文档并高亮显示当前任务。

现在设置好提示后,让我们快速编写 Application.cfc 的其余部分。记住要使用 tag insight 功能。

清单 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>

接下来,将创建应用程序的主页。关闭 Application.cfm,创建名为 index.cfm 的文件并简单添加一些文本:

This is index.cfm

现在可以测试查看代码是否工作。

使用内部浏览器查看 Art Gallery

Eclipse 中集成了一个内部浏览器,允许查看 Eclipse 内的项目。在使用集成浏览器之前,应当设置项目的主页属性:

  1. 右键单击 artgallery 项目目录。
  2. 单击 Edit URL
  3. 键入 URL 以指向本地服务器:http://localhost/workspace/artgallery/。
  4. 单击 OK

确保 index.cfm 已打开并单击 Browser View 选项卡。应当能够单击 Home 图标和查看 index.cfm。

图 11. Browser 视图
Browser 视图

现在代码已运行,让我们返回将一些变量添加到 Application.cfc 中。还记得 TODO 任务么?单击 Tasks 选项卡打开 Tasks 视图,然后您将看到任务。双击任务,然后 Application.cfc 将打开。

图 12. Tasks 视图
Tasks 视图

现在可以添加一些变量。

向 Art Gallery 应用程序中添加变量

在重新打开 Application.cfc 时,您可能会注意到某些代码似乎丢失了。CFEclipse 是引入代码折叠功能的首批 ColdFusion 编辑器之一。代码折叠 只是用开始和结束标记(像函数一样)包含大型代码集,并且将开始和结束标记之间包含的代码折叠到一行中。

图 13. 代码折叠
代码折叠

让我们把更多变量添加到 Application.cfc 中。您将为应用程序命名并提供一些默认超时值。

清单 2. Application.cfc 变量
 
<cfscript>
        this.name = "Art Gallery";
        this.applicationTimeout = createTimeSpan(0,2,0,0);
    </cfscript>

像所有优秀文本编辑器一样,CFEclipse 还支持中括号和大括号匹配之类的标准功能。将光标放在中括号或大括号附近,相应的开始或结束括号将高亮显示,如图 14 所示。注意,当您为变量名添加双引号时,CFEclipse 将自动添加结束引号。还可以高亮选中一个词或短语并按 Ctrl+"Ctrl+' 组合键把选定词括起来。CFEclipse 维基提供了所有可用键盘快捷键列表(请参阅 参考资料)。

图 14. 中括号和大括号匹配
中括号和大括号匹配

虽然 Application.cfc 不是非常复杂,但是 CFEclipse 却提供了两个视图来帮助浏览复杂的文件和 CFC。

用 Outline 和 Method 视图检验 Art Gallery 应用程序

Outline 和 Method 视图提供了查看文件的两个视图。Outline 视图用树视图的形式呈现文档,每个标记表示为一个节点。

图 15. Outline 视图
Outline 视图

Methods 视图类似于 Outline 视图,但是用于查看 CFC,如图 16 所示。随着使用框架、CFC 和 OO 技术的 ColdFusion 项目越来越多,用 Methods 视图能够轻松地打开 CFC 并且更轻松地浏览到所需位置。单击视图中的方法将打开 CFC 中的方法。

图 16. Methods 视图
Methods 视图

让我们继续编写 Application.cfc 的代码。需要插入一些 CFSET 标记。为节省一些键入工作,您将创建 CFSET 代码片段以将这些标记轻松地插入代码中。

动态代码片段

CFEclipse 中重现了 Homesite 中的常用功能:动态代码片段。一个简要示例将演示如何使用这种优秀的省时功能。开发应用程序时,大多数开发人员在每个页面的开头都需要包括一些一般信息。您可以创建一个代码片段来完成这项工作。

要创建 CFSET 代码片段,打开 Snip Tree 视图(如果尚未打开):Window > Show View > Snip Tree View。单击 + 号创建新代码片段。在 New Snippet 对话框中,您将定义代码片段。

图 17. 定义新代码片段
定义新代码片段

在 Snippet starting block 中,我们已经使用一些动态变量定义了代码片段。

<cfset name="$${Variable}" = "$${Value}">

现在让我们定义 Art Gallery 的应用程序标题和数据源。键入 set 后立即按 Ctrl+J 组合键。为每个 CFSET 键入下面所示的值:

  • 变量名 APPLICATION.name = "ColdFusion Art Gallery"
  • 变量名 APPLICATION.dsn = "cfartgallery"

插入代码片段时,系统将显示一个包括用户定义的 Variable 和 Value 的对话框,允许键入 CFSET 标记的值,如图 18 所示。除了用户定义的变量之外,还有一些默认变量可用于快速插入日期、文件名和其他值。可以在 CFEclipse 维基中获得完整列表(请参阅 参考资料)。

图 18. 动态代码片段变量
动态代码片段变量

我们现在已经有了一个非常基本的 Art Gallery 应用程序,并且定义了可以使用 Browser 视图进行浏览的 Application.cfc 和 index.cfm 文件。在开发 Art Gallery 应用程序时,您将经常在 Application.cfc 和 index.cfm 之间切换。开发大型应用程序时,在许多文件之间切换是常见任务。幸运的是,CFEclipse 提供了一种便利的方法在文件之间快速移动。

在 Art Gallery 文件之间移动

使用框架构建复杂的 MVC 站点涉及大量文件及在视图与控制器之间来回切换。就像使用书签可以轻松地浏览到浏览器内保存的 URL 一样,使用 Eclipse 中的书签可以轻松地浏览到代码内的各个部分。让我们重新打开 Application.cfc 并添加一个书签。在开发应用程序时,您将频繁返回此文件。

打开 Application.cfc,展开 onApplicationStart 函数,并在 gutter 区域中右键单击一个行号。选择 Add Bookmark,如图 19 所示。添加一个书签,将其命名为 onApplicationStart,单击 OK,然后关闭 Application.cfc。

图 19. 添加书签
添加书签

现在打开 Bookmarks 视图:Window > Show View > Bookmarks。类似于 Task List 视图,每个书签将显示文件名和书签的行号,如图 20 所示。双击书签将定位到文件中的位置。还可以在书签上右键单击并选择 Show In 来高亮显示 Navigator 视图或 File Explorer 视图内的文件。

图 20. Bookmarks 视图
Bookmarks 视图

单击书签以重新打开 Application.cfc。

现在让我们把一些代码添加到 index.cfm 和 Application.cfc 中(如清单 3 所示)来完成 Art Gallery 应用程序的其余部分,随后使用调试器测试。

清单 3. Application.cfc 和 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>

调试 Art Gallery 应用程序

现在已经完成了 Art Gallery 应用程序,可以继续使用调试器对所有问题进行故障排除。随着 ColdFusion V8 的发行,Adobe 也发布了一个调试组件,该组件包含在可在 Adobe.com 中下载的 ColdFusion V8 Extensions for Eclipse 中(请参阅 参考资料)。

下载了 ColdFusion 扩展之后,安装类似于 CFEclipse,只是需要确定从归档还是从远程站点进行安装。将 ColdFusion_Extensions_for_Eclipse.zip 文件下载到本地驱动器中:

  1. 单击 Help > Software Updates > Find and Install
  2. 选择 Search for new features to install
  3. 单击 Next
  4. 单击 New Archived Site
  5. 选择 ColdFusion_Extensions_for_Eclipse.zip 文件。
  6. 单击 OK
  7. 确保选中 ColdFusion_Extensions_for_Eclipse.zip 节点。
  8. 单击 Finish
  9. 选择 ColdFusion_Extensions_for_Eclipse.zip 作为要安装的功能。
  10. 单击 Next
  11. 接下来的指导信息意义明了:同意许可证,安装软件并重新启动 Eclipse。

要在安装 Eclipse 的 ColdFusion 扩展后使用调试器,需要在 ColdFusion V8 Administrator 内启用行调试器。

图 21. ColdFusion Administrator —— 调试器设置
ColdFusion Administrator —— 调试器设置

在打开 Administrator 窗口时,您还应当为请求启用更长的超时限制。

图 22. 服务器超时设置
服务器超时设置

做出这些更改后,重新启动 ColdFusion。接下来,配置 Eclipse 使其通过远程开发服务(Remote Development Services,RDS)连接到 ColdFusion 服务器:

  1. 单击 Window > Preferences
  2. 选择 ColdFusion > RDS Configuration
  3. 键入对话框中需要的任意描述,如图 23 所示。
  4. 如果 ColdFusion 服务器在本地运行,则为 Host Name 键入 127.0.0.1。
  5. 如果在独立配置中安装了 ColdFusion,则为服务器的端口号键入 8500。否则,键入 Web 服务器的端口号(通常为 80 端口)。
  6. 键入在安装 ColdFusion V8 时创建的用户名和密码。
  7. 单击 Test Connection
图 23. RDS 配置
RDS 配置

定义了 RDS 连接后,除了调试外,还可以浏览 RDS Dataview 视图中的数据源,查看 Services Browser 视图中的可用 CFC,使用向导等等。现在已经正确配置了 RDS,需要设置调试服务器连接以便可以调试 Art Gallery。展开调试对话框。

图 24. Debug 菜单
Debug 菜单

单击 ColdFusion Application,然后单击 New Launch Configuration 以打开调试器配置对话框。

图 25. 调试器配置
调试器配置
  1. 键入 ColdFusion 服务器的名称。
  2. 键入服务器的调试 URL。在本例中,将连接到本地服务器。调试器的默认端口是 8500。
  3. 单击 Apply
  4. 单击 Debug

现在打开 Debug 透视图:Window > Open Perspective > Other > Debug。现在应当已打开 Debug 透视图。

图 26. Debug 透视图
Debug 透视图

现在可以切回到 CFEclipse 透视图并将一些断点添加到 Art Gallery 的 index.cfm 文件中。在需要输入断点的行的旁边,双击或右键单击。断点是由小蓝点表示的。

图 27. 插入断点
插入断点

现在切回到 Debug 透视图。打开浏览器并浏览到 Art Gallery。当代码在调试器中运行时,每个断点将在该行处中断模板的执行。可以检查当前变量、表达式及其值。

图 28. 调试 Art Gallery
调试 Art Gallery

在 debug 透视图内,可以控制调试器如何执行代码及如何与先前设置的断点交互。

图 29. 控制调试器执行
控制调试器执行
  • 要继续处理页面,请单击 Continue。这样将运行页面,直至请求完成或者到达另一个断点。
  • 要停止调试,只需单击 Stop。调试会话将被终止。
  • 使用 step into 按钮可以得到断点处的代码。使用此按钮,可以在循环或 CFC 内执行代码。
  • 使用 step over 按钮可以跳过循环、函数等,允许绕过某些代码部分。

如果使用的是早期版本的 ColdFusion,则可以安装 FusionDebug。有关链接和更多信息,请参阅 参考资料

如果一切运行正常,应当能够顺利运行并调试 Art Gallery。接下来,需要将 Art Gallery 部署到 Web 服务器中,以便其他人可以查看应用程序。

部署项目

可以使用各种方法从 Eclipse 中部署 Art Gallery 项目。CFEclipse 能够将文件通过 FTP 传到远程目录中。首先,选择 File Explorer 视图。单击箭头添加新位置。

图 30. File Explorer 视图位置
File Explorer 视图位置

提供名称和连接信息。

图 31. 位置连接信息
位置连接信息

现在可以选择新连接。

图 32. 新连接
新连接

Aptana 插件(请参阅 参考资料)允许将本地文件系统或 Eclipse 项目与远程 FTP/SFTP 站点同步,如图 33 所示。除了 FTP 之外,它还提供了优秀的 CSS、JavaScript 和 HTML 编辑器 —— 为 CFEclipse 提供了有益的补充。

图 33. Aptana 文件同步
Aptana 文件同步

提供 ColdFusion V8 代码调试器的 ColdFusion V8 Extensions for Eclipse 扩展包附带了远程开发服务(Remote Development Services,RDS)。使用 RDS,可以访问远程文件和数据源,如图 34 所示。注意,根据 ColdFusion 最佳实践,不应当把 RDS 安装到生产服务器中。

图 34. ColdFusion 扩展 —— RDS
ColdFusion 扩展 —— RDS

您可以使用上述任意一种方法部署 Art Gallery 或任何应用程序。

结束语

我们使用 CFEclipse 创建、测试和部署了一个简单 Art Gallery 应用程序。很多功能都可以帮助您更快更高效地开发项目,我们探讨了其中的一些。但是,还有很多功能尚未讨论。如果您仍在使用 HomeSite 或 Dreamweaver,我鼓励您下载 CFEclipse 并加入正在成长的 CFEclipse 社区。

参考资料

学习 获得产品和技术 讨论
 

组织简介 | 联系我们 |   Copyright 2002 ®  UML软件工程组织 京ICP备10020922号

京公海网安备110108001071号