AJAX Toolkit FrameworkQ下面简UATFQؓ(f) Eclipse 提供 Ajax 支持Q其l定当下最行?AJAX 框架QDojo, Zimbra, Rico, etcQ，?Eclipse 提供整合的模块。Eclipse 用户可以使用 AJAX Toolkit Framework 来编?AJAX 应用E序。就像在 Eclipse 中开发^常的Java E序一P非常方便?/p>
我们现在׃开?Dojo 应用ZQ从快速开?Dojo 应用Q以?qing)?DOM Inspector and JavaScript Console 来帮?Dojo 应用的开?2 个方面，来看?ATF 如何增强 Ajax 应用的开发?/p>
本文目标读者主要是?Ajax 技术感兴趣Qƈ能够熟练安装 Eclipse 插gQ?Eclipse开发和调试应用E序Q对 Dojo Toolkit 有一定了(jin)解的 WEB 开发者?/p>
|
|
1Q?安装最新的Eclipse SDK 3.2 以及(qing)Java SDK 1.4 Q或者更高版本）(j)
2Q?安装Eclipse Web Tools Project QWTPQ?1.5 Q以?qing)它的前|Y件安装包Q?推荐安装 Qwtp-all-in-one-sdk-R-1.5.0-200606281455-win32.zip 软g包，它集成了(jin)上面提到的两工兗?/p>
3Q?安装Tomcat5.0以上版本或者WTP所支持的服务器?/p>
4Q?下蝲q解压羃XULRunner软g包，随后在命令行的方式下加入解压~后的目录，输入xulrunner --register-global 来注册XULRunnerQ以便能够让Eclipse内嵌Mozilla览器?br />
New Remote Site:
name: Mozilla XPCOM for Java
URL: (tng) (tng) http://ftp.mozilla.org/pub/mozilla.org/xulrunner/eclipse/
?br />New Remote Site:
name:Mozilla Javascript for Java
URL: (tng) http://ftp.mozilla.org/pub/mozilla.org/js/eclipse/
安装成功之后Q重启EclipseQ在按照原来办法装ATF没问题?sh)(jin)^_^
5Q?下蝲AJAX Toolkit FrameworkQ这是一?jar文gQ可以通过Eclipse更新选项里面的新的归档站Ҏ(gu)dq个插g到Eclipse中?/p>
6Q?下蝲最新的Dojo 工具包，目前最新的版本?.3.1。解压羃q把其下的所有文件拷贝至Eclipse的plug-in文g夹下的org.dojo.runtime_<version>目录内。ƈ保Dojo解压~包下的src文g夹的所有文仉被拷贝至该目录下?/p>
7Q?Z(jin)让Eclipse能够识别ATF插g的安装，我们需要在启动Eclipse的时候，在其快捷方式上，叛_鼠标Qƈ在出现的H口中的目标一栏中修改相应信息Q比如修Ҏ(gu)Qe:\eclipse\eclispe.exe - clean.
x(chng)Q用ATF开发Dojo应用的开发环境就搭徏好了(jin)Q现在我们看一下用ATF提供的功能：(x)
|
|
1Q打开Eclipse3.2,切换到J2EE视图,新徏一个工E，选择Dojo J2EE Project
2Q填入合适的工程名，如果你没有配|Target RuntimeQ则需要新Z个：(x)
3Q在新徏Server Runtime environment界面中选择一个你已经安装好的应用服务器。这里选择Apache Tomcat v5.0作ؓ(f)CZDojo应用的服务器q行环境Q?/p>
4Q完成服务器q行时环境配|后Q点d成按钮，q样一个开发Dojo应用的框架工E就搭徏好了(jin)Q我们便可以在这个基上开发自己Dojo应用Q?/p>
5Q在新徏好的dojoDemo工程内，右键点击WebContentQ在弹出的菜单中选择新徏Dojo Application v0.2.2Q如果没有该选项Q则可以先选择OtherQ再在出现的菜单中选择?/p>
6Q点击NextQ进入下一个页面，输入合适的工程名称Q比如dojoAppQ其他保留默认|点击完成Q这样一个简单的dojo应用qATF自动生成?jin)?x)
我们看到在WebContent下生成了(jin)一个叫做dojoApp的目录，其下面包含一个叫做dojoApp.html的文Ӟ我们可以直接在q个文g中输入Dojo代码。从而用ATF化了(jin)dojo应用的开发?/p>
7Q我们在开发Dojo应用的时候，先在Eclipse下方选择Snippets ViewQ可以很方便的插入Dojo的代码，同时你会(x)看到ATF对其他流行的Ajax框架提供的支持，包括Zimbra和Rico{?/p>
8Q在完成?jin)相应的Dojo代码~写后，我们在开发好的的dojoApp.html上右击，在弹出的菜单中，选择Run As -> Run in Mozilla, 随后?x)弹Z个信息面板，让你选择需要用的q行时服务器Q我们只要选择刚才配置好的Tomcat服务器，点击完成?/p>
q样我们可以在内嵌的Mozilla览器中发布和查看开发好的dojoE序?jin)，q里使用Dojo提供的Widget中的TreecdQ做的一个小的Dojo应用E序的演C：(x)
q里只是演示?jin)一个很单的开发Dojo应用的例子，主要目的是ؓ(f)?jin)说明，使用ATF对开发Dojoq样的Ajax应用E序的方ѝ其利用?jin)Eclipse提供的强大开发功能ؓ(f)用户在开发Ajax目的时候，不必每次手动拯Dojo资源包，创徏~写J琐的辅助性代码，更加专注于业务逻辑的开发?/p>
|
|
使用ATF的DOM Inspector and JavaScript Console
我们先来看一下ATF的DOM Inspector提供的功能：(x)
1Q当我们在Mozilla中运行我们的dojo应用的时候，我们可以在Eclipse的Workspace右侧看到DOM InspectorQ它可以把整个html面的DOMl构Q清晰完整的在里面显C出来。当你点MQ何一个标{时候，其相应的部分在左侧的页面中以红色边框包_(d)重复闪烁3ơ：(x)
在DOM Inspector中，我们可以很方便的扑捉面的DOM?wi)结构，q可以打开某个节点Q浏览其相应的子节点Q可以方便定位页面元素?/p>
2Q当我们在DOM Inspector中选择一个节点的时候，它所包含的一些属性就在下面的属?值得列表中显C出来：(x)
q些属性分?c：(x)
1Q盒子模型：(x)里面主要是包含一些有关长宽高的属性?/p>
2QDOM属?Q里面包含的属性是可以做修改的Q不同的标签节点Q所对应的属性不一栗?/p>
3Q计的样式 Q主要是一些由CSS定义的|可以在页面用的CSS文g中进行修攏V?/p>
3Q我们也可以在内嵌的Mozilla中访问外部的web面Q这时DOM Inspector也会(x)Ҏ(gu)加蝲的页面，做相应的调整Q从而显C在Mozilla中当前加载的面的DOM信息Q?/p>
在这个页面中Q加载的是IBM的官方站点，q时Q在DOM Inspector中，也自动显CIBM首页面的DOM信息?/p>
4Q我们可以用ATF提供的JavaScript Console来扑捉当前Mozilla加蝲面所包含的错误，以及(qing)q些错误在页面源文g中的行号Q我们可以在JavaScript Console中对所提示的信息，Ҏ(gu)U别Q分别选择AllQErrorsQW(xu)arningsQMessages{，像我们开发普通的JavaE序一P在下面的Console中提C友好的~辑信息Q这样便于我们发现和修改面中的错误?/p>
5Q在XHR Monitor view中我们还可以看到Dojo包加载机制对光面所加蝲的JavaScript文g的加载顺序，其实也就是XmlHttpRequest 的监视控制台Q?/p>
|
|
伴随着Web 2.0 的普?qing)，Ajax应用层出不穷。正所谓工Ʋ善其事Q必先利其器。Dojo Toolkit作ؓ(f)一Ƒּ源工具包Qؓ(f)开发Ajax应用提供?jin)极大的便利。而Ajax Toolkit Framework作ؓ(f)Eclipse的一ƾ插Ӟ也方便了(jin)Dojo Toolkit{当下最行的AJAX 框架的用。希望本文章能够带领读者快速进入Ajax应用开发的世界Q更快更好地开发出优秀的Ajax应用?/p>