Nutz+ExtJS示例教程——搭建开发环境

这里介绍下，开发环境的准备与搭建。

 

准备阶段

 

这里的东西大都给出了链接地址，大家按照需求自行下载即可。

 

必备品：

 

JDK（http://www.oracle.com/technetwork/java/javase/downloads/index.html）

 

 

Eclipse（这里选的最新版JEE_3.6.1 http://www.eclipse.org/downloads/）

 

 

 Tomcat6.X（http://tomcat.apache.org/download-60.cgi）

 

 

 MySQL（数据库就选个常用的http://www.mysql.com/downloads/）

 

 

 

Spket（写JS必备佳品http://www.spket.com/download.html）

 

 

ExtJS（男猪脚，这里选用最新的3.3.1，这里刻意忽略license的问题，相信你懂的（http://www.sencha.com/products/js/download.php）

 

 

Nutz（有请华丽丽的女主角登场！直接选择最新版http://code.google.com/p/nutz/downloads/list）

 

 

以上就是全部必备品了，有了这些大家就可以开始搭建环境了。

 

可选品：

 

PowerDesigner（数据库设计工具，很好很强大。http://www.sybase.com/products/modelingdevelopment/powerdesigner）

 

 

Navicat9（MySQL数据库可视化管理软件http://www.navicat.com/en/download/download.html）

 

 

FireFox + FireBug（JS调试必备，啥都不说了，强大的一塌糊涂）

 

 

ExtDesigner（控件拖拖拽拽，页面就出来了，用来画草图不错。http://www.sencha.com/products/designer/download.php）

 

 

 ExtJS中文API（这个英文较好的同志就不需要了，Nutz的话相信大家母语都没问题）

 

 

 

以上可选品在某些方面都有一定的帮助作用，需要的同志就去下吧。

 

 

搭建环境

这里分三个步骤来，属于新三步，切记一步一步走，步子迈大了，容易扯着蛋……

 

第一步，软件安装

 

大部分软件的安装大家都会，这里就强调几个注意点

 

Spket与Eclipse结合，提供对ExtJS的支持。

 

建议大家下载Spket的plugin版，解压后，把对应文件夹直接拷到Eclipse目录下，重启Eclipse即可。

 

在Eclipse中打开Window->Preferences，如果能找到下面图片所示，说明安装成功。

 

 

 

下面开始加入Ext库的支持

 

Spket -> JavaScript Profiles -> new… 名字随便起。

 

 

 

选中刚刚新建的JS库，单击右边的Add Library，弹出的下拉框中选中ExtJS。

 

 

 

 

选中新建出来的ExtJS，单击右边的Add File，在你下载的Ext包中选中ext.jsb2这个文件。

 

 

 

 

默认会选中Ext ALL ,然后把其他的都选中就好了。

 

 

 

 

最后选中我们加入的JS库，单击右边的Default就OK了，结果如下图。

 

 

 

等下，同志们，这还没完，先别急，还需要手动设置下JS文件关联，让JS默认的使用Spket的编辑器，这样提示才会起左右。方法如下图：

 

 

 

 

 

马上来测试下，新建个js文件，敲入Ext. 你就应该看到下图了：

 

 

 

 

第二部，新建工程

 

新建一个web工程

 

 

 

在Java Resources下加入了两个Source Folder ： test 跟 config

 

在WebContent下加入 js 跟 page 两个包，这里没有硬性规定放那里，只与个人习惯有关，有人更喜欢放到WEB-INF下，也是可以的。

 

 

 

 

把必要的js包跟jar包拷入工程，并把jar包加入到classpath中。

 

ExtJS的话，ME是选择了下面这几个拷入到js目录下：

 

 

 

 

Jar包，是选择c3p0作为数据池，log4j，mysql的jdbc，跟Nutz，应该也就这么多了，其他的再根据你的需要加入就好了。

 

最终结果如下：

 

 

 

 

这样工程的大体框架就好了，接下来的就是编码工作。

 

第三部，测试环境

 

这里就请大家参照Nutz的文档中的方式来测试好了，只要能跑通就说明没问题了。

 

Nutz文档地址http://code.google.com/p/nutz/wiki/nutz_preface?tm=6

 

 

 

 

以上，整个工程的环境就搭建成功。

 

下一集，将简单介绍下数据库的设计。

 

 

 PS:附件中为Ext3.3的中文API，需要的下吧。