引言
AJAX Toolkit Framework(下面简称ATF)为 Eclipse 提供 Ajax 支持,其绑定当下最流行的 AJAX
框架(Dojo, Zimbra, Rico, etc),为 Eclipse 提供整合的模块。Eclipse 用户可以使用 AJAX Toolkit
Framework 来编写 AJAX 应用程序。就像在 Eclipse 中开发平常的Java 程序一样,非常方便。
我们现在就以开发 Dojo
应用为例,从快速开发 Dojo 应用,以及使用 DOM Inspector and JavaScript Console 来帮助 Dojo 应用的开发 2
个方面,来看看 ATF 如何增强 Ajax 应用的开发。
本文目标读者主要是对 Ajax 技术感兴趣,并能够熟练安装 Eclipse 插件,使用
Eclipse开发和调试应用程序,对 Dojo Toolkit 有一定了解的 WEB 开发者。
开发环境搭建
1) 安装最新的Eclipse
SDK 3.2 以及Java SDK 1.4 (或者更高版本)
2) 安装Eclipse Web Tools Project (WTP) 1.5
(以及它的前置软件安装包) 推荐安装 :wtp-all-in-one-sdk-R-1.5.0-200606281455-win32.zip
软件包,它集成了上面提到的两项工具。
3) 安装Tomcat5.0以上版本或者WTP所支持的服务器。
4)
下载并解压缩XULRunner软件包,随后在命令行的方式下加入解压缩后的目录,输入xulrunner --register-global
来注册XULRunner,以便能够让Eclipse内嵌Mozilla浏览器。
5) 下载AJAX Toolkit
Framework,这是一个.jar文件,可以通过Eclipse更新选项里面的新的归档站点来添加这个插件到Eclipse中。
6) 下载最新的Dojo
工具包,目前最新的版本是0.3.1。解压缩并把其下的所有文件拷贝至Eclipse的plug-in文件夹下的org.dojo.runtime_<version>目录内。并确保Dojo解压缩包下的src文件夹的所有文件都被拷贝至该目录下。
7)
为了让Eclipse能够识别ATF插件的安装,我们需要在启动Eclipse的时候,在其快捷方式上,右击鼠标,并在出现的窗口中的目标一栏中修改相应信息,比如修改成:e:\eclipse\eclispe.exe
-
clean.
至此,使用ATF开发Dojo应用的开发环境就搭建好了,现在我们看一下使用ATF提供的功能:
使用ATF开发Dojo应用快速入门
1.打开Eclipse3.2,切换到J2EE视图,新建一个工程,选择Dojo
J2EE Project
2.填入合适的工程名,如果你没有配置Target
Runtime,则需要新建一个:
3.在新建Server Runtime
environment界面中选择一个你已经安装好的应用服务器。这里选择Apache Tomcat
v5.0作为示例Dojo应用的服务器运行环境:
4.完成服务器运行时环境配置后,点击完成按钮,这样一个开发Dojo应用的框架工程就搭建好了,我们便可以在这个基础上开发自己Dojo应用:
5.在新建好的dojoDemo工程内,右键点击WebContent,在弹出的菜单中选择新建Dojo
Application v0.2.2,如果没有该选项,则可以先选择Other,再在出现的菜单中选择。
6.点击Next,进入下一个页面,输入合适的工程名称,比如dojoApp,其他保留默认值,点击完成,这样一个简单的dojo应用就由ATF自动生成了:
我们看到在WebContent下生成了一个叫做dojoApp的目录,其下面包含一个叫做dojoApp.html的文件,我们就可以直接在这个文件中输入Dojo代码。从而使用ATF简化了dojo应用的开发。
7.我们在开发Dojo应用的时候,先在Eclipse下方选择Snippets
View,可以很方便的插入Dojo的代码,同时你会看到ATF对其他流行的Ajax框架提供的支持,包括Zimbra和Rico等
8.在完成了相应的Dojo代码编写后,我们在开发好的的dojoApp.html上右击,在弹出的菜单中,选择Run As -> Run in
Mozilla,
随后会弹出一个信息面板,让你选择需要使用的运行时服务器,我们只要选择刚才配置好的Tomcat服务器,点击完成。
这样我们就可以在内嵌的Mozilla浏览器中发布和查看开发好的dojo程序了,这里使用Dojo提供的Widget中的Tree类型,做的一个小的Dojo应用程序的演示:
这里只是演示了一个很简单的开发Dojo应用的例子,主要目的是为了说明,使用ATF对开发Dojo这样的Ajax应用程序的方便。其利用了Eclipse提供的强大开发功能为用户在开发Ajax项目的时候,不必每次手动拷贝Dojo资源包,创建编写繁琐的辅助性代码,更加专注于业务逻辑的开发。
使用ATF的DOM
Inspector and JavaScript Console
我们先来看一下ATF的DOM
Inspector提供的功能:
1.当我们在Mozilla中运行我们的dojo应用的时候,我们可以在Eclipse的Workspace右侧看到DOM
Inspector,它可以把整个html页面的DOM结构,清晰完整的在里面显示出来。当你点击任何一个标签的时候,其相应的部分就在左侧的页面中以红色边框包围,重复闪烁3次:
在DOM
Inspector中,我们可以很方便的扑捉页面的DOM树结构,并可以打开某个节点,浏览其相应的子节点,可以方便定位页面元素。
2.当我们在DOM
Inspector中选择一个节点的时候,它所包含的一些属性就在下面的属性-值得列表中显示出来:
这些属性分为3类:
1)盒子模型:里面主要是包含一些有关长宽高的属性。
2)DOM属性
:里面包含的属性是可以做修改的,不同的标签节点,所对应的属性不一样。
3)计算的样式
:主要是一些由CSS定义的值,可以在页面使用的CSS文件中进行修改。
3.我们也可以在内嵌的Mozilla中访问外部的web页面,这时DOM
Inspector也会根据加载的页面,做相应的调整,从而显示在Mozilla中当前加载的页面的DOM信息:
在这个页面中,加载的是IBM的官方站点,这时,在DOM
Inspector中,也自动显示该IBM首页面的DOM信息。
4.我们可以使用ATF提供的JavaScript
Console来扑捉当前Mozilla加载页面所包含的错误,以及这些错误在页面源文件中的行号,我们可以在JavaScript
Console中对所提示的信息,根据级别,分别选择All,Errors,Warnings,Messages等,就像我们开发普通的Java程序一样,在下面的Console中提示友好的编辑信息,这样便于我们发现和修改页面中的错误。
5.在XHR Monitor
view中我们还可以看到Dojo包加载机制对其页面所加载的JavaScript文件的加载顺序,其实也就是XmlHttpRequest
的监视控制台:
结束语
伴随着Web 2.0
的普及,Ajax应用层出不穷。正所谓工欲善其事,必先利其器。Dojo Toolkit作为一款开源工具包,为开发Ajax应用提供了极大的便利。而Ajax
Toolkit Framework作为Eclipse的一款插件,也方便了Dojo Toolkit等当下最流行的AJAX
框架的使用。希望本篇文章能够带领读者快速进入Ajax应用开发的世界,更快更好地开发出优秀的Ajax应用。
参考资料
Elipse插件中国
http://www.eclipseplugin.com.cn
相关推荐
GWT(Google Web Toolkit) 是 Google 最近推出的一个开发 Ajax 应用的框架,它支持用 Java 开发和调试 Ajax 应用,本文主要介绍如何利用 GWT 进行 Ajax 的开发。 Ajax技术是当前开发web应用的非常热门的技术,也是...
Clear Toolkit Framework.part1
本卷从最易于理解和使用的那部分入手,介绍ASP.NET AJAX框架中能够与传统ASP.NET无缝对接的服务器端部分,包括服务器端ASP.NET AJAX Extensions与ASP.NET AJAX Control Toolkit。这部分内容不需要读者有任何的客户端...
微软 AjaxControl Toolkit .NET4.5 控件
ASP.net Ajax Control Toolkit控件应用: 包括:利用AutoCompleteExtender控件实现自动完成的功能;利用NoBot控件自动拒绝垃圾发布程序;利用ReorderList控件实现拖拽排序;利用Rating控件实现评分功能;利用...
ASP.net Ajax开发教程PDF,内容有初识ASP.NET AJAX,AJAX Control Toolkit中的文本输入处理,基于AJAX的电子邮件处理等。
AJAX Control Toolkit for .NET 3.5 and sample site
Clear Toolkit Framework.part3
Clear Toolkit Framework.part2
第 11 部分:将 Ajax 带入 Eclipse 的 Ajax Toolkit Framework 的两个工具 第 12 部分:面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序 第 13 部分:面向 Java 开发人员的 Ajax: Ajax 的 Java 对象序列化 第...
nicklee ajax toolkit dll dev
Include <SCRIPT TYPE="text/javascript" SRC="dojo/dojo.js"></SCRIPT> and you're on your way. Browse to dojo/tests/runTests.html or dijit/themes/themeTester.html to see Dojo in action
使用 Google Web Toolkit、Apache Derby 和 Eclipse 构建 Ajax 应用程序 图文教程
.NET AJAX TOOLKIT 实现只能输入时间
本文档是一套HelixToolkit开发文档,由于网上这一块开发资料比较少,所以放出这个教程,供大家阅读查看。
本书从易到难、由浅入深、循序渐进系统地介绍了ASP.NET AJAX(C#)知识点和基于AJAX的Web应用系统的开发技术。全书通俗易懂,大量的实例供读者更加深刻地巩固所学习的知识,使读者更好地进行开发实践。 本书共分为15...
The Ajax Control Toolkit contains a rich set of controls that you can use to build highly responsive and interactive Ajax-enabled Web applications. The Ajax Control Toolkit contains more than 40 ...
面向 Java 开发人员的 Ajax 探索 Google Web Toolkit
AJAX Control Toolkit是微软提供的服务器端的控件,专门用来构建AJAX程序,我将ASP.NET 2.0和ASP.NET 3.5的打包在一起。
asp.net AJAX Control Toolkit 的软件包