开发AJAX应用程序需要使用的工具

第5章开发AJAX应用程序需要使用的工具在前面几章中，向读者介绍了开发AJAX应用程序的语言：JavaScript的基本知识和常用对象，然后向读者介绍了操作HTML文档的接口：DOM（文档对象模型）。读者已经明白了如何编写一个操作HTML文档的JavaScript程序。工欲善其事，必先利其器。选择好的开发工具会使实际编码的工作变得更加简单和高效。本章向读者推荐一些开发AJAX应用程序可以使用的工具，例如AptanaWebIDE、firebug等等。5.1开发工具：Aptana一直以来，由于缺少专业的JavaScript开发工具，使得大多数开发者只能使用简单的文本编辑器，例如NotePad，或者稍微支持JavaScript语法提示的开发工具，例如Dreamweaver、VisualStudio等，进行JavaScript和AJAX的开发，使得JavaScript开发效率和调试成为了开发者的难点问题。直到Aptana的横空出世。Aptana是一款使用Java开发，基于JVM的专业JavaScript开发工具。Aptana提供了强大的代码提示，浏览器兼容性提示，错误提示，代码自动完成等功能，并且提供了基于firefox的调试功能，同时支持各大主流的AJAX开发框架，包括prototype、JQuery、YUI-ext等等。Aptana提供了开发者良好的编码体验，能够支持开发者进行快速高效的AJAX应用程序开发。下面，让读者来认识这款优秀的开发工具：Aptana。5.1.1Aptana的下载和安装Aptana是采用Java开发的、免费的、开源的、跨平台的WEBIDE。因为采用Java开发，所以需要有JVM的支持。Aptana的官方网站是：。官方网站上的下载频道提供了Aptana的下载，其地址为：。打开下载页面，如图5.1所示。图5.1下载Aptana网站上针对不同操作系统提供win版本、Mac版本和Linux版本的Aptana完整版的下载，同时还提供了一个作为Eclipse插件的版本下载。这里以win版本为例，单击下载链接跳转到页面底部，如图5.2所示。·135·图5.2下载Aptana单击“WindowsNT4.0/2000/XP/Vista(x86)”下面的“Download”链接即可开始下载。下载完成后，运行所下载的Aptana安装文件开始安装。安装过程与一般的应用软件安装方式相同，这里不再赘述。5.1.2Aptana的界面介绍Aptana安装完成后，会在桌面和“开始--程序”中生成快捷方式。双击快捷方式启动Aptana，如图5.3所示。图5.3启动Aptana第一次启动时，Aptana会提示用户选择工作区，即保存项目的路径。如图5.4所示。图5.4设置工作区一般设置为Apache或者IIS的虚拟目录。如果希望以后启动Aptana都使用这个工作区，则可以将图中的checkbox选中，设置选择的工作区为默认值即可。单击“确定”按钮，进入Aptana工作界面。如图5.5所示。·136·图5.5Aptana界面Aptana启动时默认会打开一个叫AptanaStartPage的标签页，其中包含了Aptana网站上最新的一些内容。如果用户不需要，可以将其关闭。现在来看Aptana的工作界面。如图5.6所示，按照界面各部分的功能划分为不同的区域。图5.6Aptana的工作区域Aptana界面最上面是功能菜单，功能菜单包含了Aptana完整功能的导航。然后是一些快捷操作按钮，提供了诸如新建和打开文档，保存、打印、打开插件试图，调试及运行等功能的快捷操作。左边第一个区域由两个标签页组成，分别是代码辅助文案和FTP，提供了当前文档的辅助信息和FTP管理工具。左边下面的区域是文件/项目资源管理工具，也是由两个标签页组成。文件资源管理提供了本地文件系统和FTP的文件资源管理。项目资源管理提供了按照工作区内的项·137·目分组的资源管理。中间最大的区域是主要工作区，以标签页的现实用户打开的文档，供用户编辑。主要工作区的下面，是错误报告区域和控制台。错误报告区可以实时的显示用户编辑的文档中所出现的错误。控制台则显示系统当前的活动信息。右边部分首先是大纲视图区域。这个区域会以大纲视图的形式来显示当前所操作的文档的层次结构。大纲视图区域的下面，是帮助和示例区域。显示了一些相关的帮助信息，和流行Ajax开发框架的一些示例。5.1.3Aptana的使用认识了Aptana的界面后，本节开始向读者介绍如何使用Aptana。本书并不会完整的介绍如何使用Aptana的所有功能和所有细节，而只会介绍基本的操作，更多的功能需要读者在实际使用过程中去摸索和体验。1.创建项目在开始一个项目时，首先需要创建一个Aptana项目。创建项目有三种方式。（1）第一种是使用功能菜单的“文件—新建—项目”。如图5.7所示。图5.7使用功能菜单新建项目（2）第二种方式是使用快捷按钮的新建按钮，如图5.8所示。·138·图5.8使用快捷按钮新建项目（3）最后一种方式，就是将文件/项目资源管理器切换到项目视图，然后右击视图中的空白区域，在弹出的菜单中选择“新建—项目”。创建项目时，首先会让用户选择所需要创建的项目类型，如图5.9所示。图5.9选择项目类型Aptana默认提供了常规项目类型和AjaxProjects两种项目类型，用户可以通过添加Aptana插件来让Aptana支持更多的项目类型，例如Ruby项目、Rails项目等等。这里选择AjaxProjects的AjaxLibraryProject，这个项目类型能让用户基于Aptana支持的主流Ajax开发框架进行项目开发。单击“下一步”，填写项目名称，如图5.11所示。这里将项目命名为MyFirstAjax。单击“下一步”，选择需要导入的Ajax开发框架，如图5.11所示。·139·图5.10填写项目名称图5.11选择需要导入的Ajax开发框架如果需要多个框架，可以多选。这里选择Prototype1.5.0，单击“完成”。到这里，项目的创建工作就全部完成了。注意：Prototype是一个优秀的Ajax基础开发框架，1.5.0是其版本号。官方网站是。本书将会在第14章中向读者介绍这个框架的使用方法。2.辅助文案创建完成后，Aptana自动打开了一个Prototype框架的示例，页面名字为prototype_sample.htm。这时候Aptana的各个工作区发生了相应的变化，如图5.12所示。图5.12完成创建首先来看辅助文案区域。辅助文案区域中增加了一个以当前打开的页面名字命名的文件夹，文件夹中是当前页面所引用的文件，图中是prototype.js。将鼠标移动到文件上，会出现一个tooltip来显示此文件在文件系统中的位置，如图5.13所示。·140·图5.13显示文件位置3.项目资源管理在项目资源管理区域中，出现了刚才创建的项目，以树形图的方式显示了项目中所包含的所有文件。如图5.14所示。图5.14项目资源管理器右击选择文件或者文件夹，可以进行相关的操作，例如：删除、移动、重命名、查看属性等。4.更改项目使用的编码Aptana默认使用的编码是从操作系统继承而来，中文操作系统一般为gbk，而实际项目使用的编码通常是utf-8，这时，就需要手动来调整项目的编码。（1）在项目资源管理区中右键单击项目文件夹，在弹出菜单中选择“属性”，打开项目的属性面板。如图5.15所示。·141·图5.15属性面板（2）在“信息”栏中，有“文本文件编码”一项，默认为“从容器继承（GBK）”。将单选按钮切换到“其他”，并在下拉列表中选择utf-8。如图5.16所示。图5.16选择文件编码（3）然后单击“确定”按钮，保存设置。这时候，项目使用的编码，就改变为了utf-8。5.大纲视图大纲视图区域以树形图的形式显示了示例文档的层次结构。因为打开的是一个HTML文档，所以大纲视图显示的是一个以html节点为根的、包含了页面所有元素的树形图。如图5.17。在大纲视图中单击元素，可以将主工作区域中打开的文档的焦点，定位到所选择的元素上。如图5.18所示。·142·图5.17大纲视图图5.18定位元素在主工作区中，h3标签被加上了灰色的方框来表示当前在大纲视图中被选中，h3所在的行背景色也发生了变化。6.创建文件和文件夹创建文件和文件夹的方式与创建项目类似，可以使用功能菜单、快捷按钮或是项目资源管理器中的邮件菜单来创建文件。在lib目录下创建一个文件夹，并将其命名为class，来存放创建的JavaScript文件。然后再创建一个JavaScript文件，将其命名为test.js。如图5.19所示。图5.19新建文件和文件夹7.设置文件默认内容·143·test.js被创建后，会自动在主工作区打开，如图5.20所示。图5.20test.js可以看到，新建的test.js的内容中，被自动加入了一段内容。用户可以更改默认加入的文档内容。（1）通过功能菜单中的“窗口—首选项”打开首选项面板，如图5.21所示。（2）打开首选项面板后，在左侧的导航菜单中选择“Aptana—Editors—JavaScriptEditor”，打开Aptana的JavaScript编辑器设置。如图5.22所示。图5.21首选项面板图5.22JavaScript编辑器设置（3）在右边的面板中，可以看到InitialJavaScriptfilecontents这一项，就是文档的默认内容。现在将其修改为如图5.23所示的内容并保存。·144·图5.23设置默认内容（4）保存完毕后，再新建一个JavaScript文件test_2.js，可以看到，默认加入的内容已经改变为了刚才设置的内容。如图5.24所示。图5.24test_2.js（5）由于Aptana在创建HTML文档时，默认的DTD是HTML4.0strick的，如果用户需要使用其他的DTD，例如XHTML，则需要手动修改。为了避免每次修改的麻烦，也可以在HTML的默认内容中，将DTD改变为XHTML的。打开首选项面板，并选择“Aptana—HTMLEditor”，修改文档默认内容保存即可。如图5.25所示。·145·图5.25修改HTML文档默认内容首选项还提供了更多的功能设置，读者可以自己进行查看。8.代码提示功能Aptana最让人兴奋的功能之一，就是其JavaScript代码提示功能。用VisualStudio开发过C#或者VB应用程序的读者应该会对其代码实时提示的功能印象深刻。而Aptana针对JavaScript的代码提示功能，也毫不逊色。回到test_2.js，在主工作区中进行编辑。读者可以看到，随着键盘的输入，Aptana会自动根据输入的内容，来提示相关的JavaScript方法和属性，如图5.26所示。图5.26代码提示提示的内容中，提示词前面的图标标识了词的类型，是一个方法、关键字、还是对象。词后面是浏览器的兼容性提示，每一个小图标代表了一种浏览器，从左到右依次是IE、Firefox、Netscape、Opera和Safari。如果图标是半透明的，那么表示该浏览器不支持该关键字、方法或者属性或者对象等等。提示最后面的文字，是对提示词的说明。9.JavaScript对象在大纲中的实时显示当在文档中声明一个变量、函数时，会自动更新显示在文档大纲视图中，例如，在文档中输入如下代码。vara=1;varb=[1,2,3,4,5];varc={p1:1,P2:2,p3:function()·146·{return3;}}functiontest(){vara=1;varb=2;returna+b;}varb=function(){return1;}大纲视图更新为如图5.27所示。图5.27大纲视图10.错误报告Aptana还有一个很方便的特性，就是在编辑文档时，如果所编写的程序有语