`

使用 Ajax Toolkit Framework 开发 Dojo 应用

    博客分类:
  • js
阅读更多

使用 Ajax Toolkit Framework 开发 Dojo 应用

developerWorks
文档选项
<script type="text/javascript"></script> <noscript></noscript> <script type="text/javascript"></script>   <noscript></noscript>
将打印机的版面设置成横向打印模式

打印本页

将此页作为电子邮件发送

将此页作为电子邮件发送

<!--START RESERVED FOR FUTURE USE INCLUDE FILES--><!-- this content will be automatically generated across all content areas --><!--END RESERVED FOR FUTURE USE INCLUDE FILES-->

级别: 初级

贾 军 (jiajun2004@gmail.com), 华东理工大学研究生

2006 年 9 月 14 日

本文主要介绍如何利用 Ajax Toolkit Framework 工具来使用 Dojo Toolkit 开源工具包,从而简化和增强 Ajax 应用的开发。
<!--START RESERVED FOR FUTURE USE INCLUDE FILES--><!-- include java script once we verify teams wants to use this and it will work on dbcs and cyrillic characters --><!--END RESERVED FOR FUTURE USE INCLUDE FILES-->

引言

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应用。



参考资料



关于作者

 

贾军,华东理工大学研究生,目前在IBM上海全球化实验室(SGL)实习。对开源的项目很感兴趣。你可以通过 jiajun2004@gmail.com 与他联系。

分享到:
评论

相关推荐

    Ajax与Atlas设计高质量的Ajax应用

    5. **Java与Ajax**:在Java环境中,开发者可以使用各种Ajax框架,如jQuery、Prototype、Dojo或GWT(Google Web Toolkit)来构建Ajax应用。这些框架提供了与JavaScript和XMLHttpRequest对象交互的简单API,使得Java...

    AJAX架构之Dojo篇

    【Dojo Toolkit】是本文的重点,它是一种开源的JavaScript工具包,主要针对客户端的AJAX应用。自2004年9月起,由Alex Russell领导的JotSpot团队创立,Dojo因其强大的功能和灵活性受到广泛的关注。Dojo的核心在于其...

    Ajax详解.rar

    第 11 部分:将 Ajax 带入 Eclipse 的 Ajax Toolkit Framework 的两个工具 127 1.1 Eclipse ATF 127 1.2 Dojo 128 1.3 Zimbra Ajax Toolkit 130 1.4 initiative 在前进 132 第 12 部分:面向 Java 开发人员的 ...

    Dojo学习教程

    这个“Dojo学习教程”将引导你深入了解Dojo的各个方面,从基础工具集到高级组件,从模块化编程到实际应用开发,帮助你成为一名“精通Dojo”的开发者。通过阅读和实践,你将能够利用Dojo的威力,打造高效、易维护的...

    Pragmatic Ajax A Web2.0 Primer(国外经典)

    《Pragmatic Ajax A Web2.0 Primer》是一本深入探讨Web 2.0核心...通过阅读《Pragmatic Ajax A Web2.0 Primer》,开发者可以全面了解Ajax技术,掌握如何在不同的开发环境中运用Ajax,提升Web应用的交互性和用户体验。

    DOJO中文手册,非常全面

    - **定义**:DOJO官方将其定义为Toolkit,而不是完整的Framework或简单的Library。 - **灵活性**:DOJO支持高度的自定义和扩展性,用户可以轻松编写自己的扩展模块。 #### 四、DOJO的AJAX架构 ##### 1. ...

    AJAX高级程序设计(源代码)

    Java也有自己的AJAX库,如Spring MVC的Ajax支持和Dojo Toolkit等。在Java中,可以使用Servlet、JSP和JSF等技术实现AJAX。例如,通过使用JSON-P(JSON with Padding)或JSONP,Java后端可以向跨域的JavaScript发送...

    Mastering Dojo PDF 下载

    Dojo是一个开源的JavaScript工具包,提供了丰富的功能,包括DOM操作、AJAX通信、动画效果、数据存储、模块化开发等,广泛应用于构建富互联网应用程序(RIA)和复杂的Web应用。 【描述】"H5移动端商城纯静态html、...

    AJAX最新控件大全

    - Dojo Toolkit,一个全面的JavaScript库,包括AJAX功能和丰富的UI控件。 总之,"AJAX最新控件大全"这个资源包涵盖了各种用于改善Web应用程序交互性的工具。开发者可以通过学习和应用这些控件,实现更高效、更具...

    AJAX安装文件以及扩展

    - **jQuery和其他库**:虽然你可以使用原生的JavaScript来实现AJAX,但使用jQuery或其他JavaScript库如Prototype、Dojo等,可以简化AJAX操作,提供更好的浏览器兼容性和便利的功能。 - **ASP.NET AJAX生命周期**:...

    ajax in prpc

    Dojo is often referred to as an AJAX framework because of its robust support for AJAX functionalities. AJAX (Asynchronous JavaScript and XML) is a technique used for creating faster and more ...

    应用最广的十大Javascript框架下载地址

    - **优势**: Rialto 支持 AJAX 技术,并且具有高度可定制性,适合复杂的 Web 应用开发。 ### 7. Dojo Toolkit - **官网**: [http://dojotoolkit.org/](http://dojotoolkit.org/) - **博客**: ...

    Ajax in Action

    **Appendix A: The Ajax Craftsman’s Toolkit** - **Description**: This appendix provides a detailed overview of tools and frameworks that are useful for Ajax development. It covers popular libraries ...

    JFly Application Framework-开源

    2. **dojotapestry5demo**:这可能是包含一个示例应用的目录,展示如何使用JFly框架和Dojo Toolkit开发实际项目。 3. **dojotapestry5**:可能包含JFly框架的核心代码,实现了与Tapestry5.1和Dojo Toolkit的整合。 4...

    21个强大的javascript框架.doc

    Rico框架简化了RIA应用程序的开发,提供了Grid、Calendar、Tree、Accordion等常见控件,并支持Ajax处理和拖放功能,增强了用户体验。 #### Silverlight Toolkit:扩展Silverlight功能 Silverlight Toolkit为...

    8大流行JS框架 10大新的最具潜力JS框架

    1. **Dojo**:Dojo Toolkit是一个全面的JavaScript库,包含了大量的API、工具和UI组件。它提供跨浏览器的解决方案,特别适合构建复杂的Web应用程序。Dojo以其强大的AJAX、事件处理和UI组件闻名,但文件大小较大,...

Global site tag (gtag.js) - Google Analytics