ExtJS5 整合Spring4之一

Raindan 2016-01-03

原型组成及环境搭建

ExtJS是优秀的前端RIA组件,ExtJS5采用了MVVM模型,它在MVC的基础上引入ViewModel抽象, 实现了在View和Data之间的双向Bind,程序员不需要再关注界面field与数据的双向更新。 在MVVM模型之下,可以轻松实现对数据的CRUD,前端界面通过OOP机制实现最大程度的组件派生和复用。 对于一致性的操作方式,甚至可以对Controller逻辑大量复用,程序员只需要将关注点放在特殊界面逻辑。

 美中不足的是:Sencha官方并没有提供一个可供java使用者快速搭建应用的服务端原型。 本例是从一个实际项目抽取的快速搭建ExtJS+Spring的原型。

本原型包括为前端应用和后端应用,

前端项目:

http://git.oschina.net/chen4w/es

后端项目:

http://git.oschina.net/chen4w/se

功能说明

-----------------------------------

本App是使用Sencha Cmd v5.1.2.52,按照sencha官方教程建立,

  参考文档:https://docs.sencha.com/extjs/5.1/getting_started/getting_started.html

  为了接近实际项目需求,主要引入了以下功能:

  1. 主界面布局及调度模仿了:kitchensink <http://dev.sencha.com/ext/5.1.0/examples/kitchensink/

  2. MVVM的文件目录组织及Simdata前端仿真模仿了:ticket-app <http://dev.sencha.com/ext/5.1.0/examples/ticket-app/index.html>

 

快速开始

-----------------------------------

本例支持SimData方式的前端Restful仿真,在此种方式下,Restful交互被前端的代理层接管,不需要后台服务提供Restful实现。

SimData可仿真CRUD界面交互,在后台Restful未实现时,就可以让用户看到最终界面的操作细节。

在沟通的过程中不断改进界面,而后台的Restful实现则可独立开发,不需要参与用户讨论。

将本例代码的master分支下载到本地的http server的主目录下,

打开浏览器并访问:<http://localhost/es/web/>  即可。

预备开始

-----------------------------------

如果需要修改前端代码,某些改动是需要借助Sencha Cmd来build的。

关于如何安装Sencha Cmd,请参阅:<http://www.sencha.com/products/sencha-cmd/download/

我的调代码的习惯是:

  •   在终端方式下,进入:  ../es/web 目录下,键入 sencha app watch 命令,让sencha cmd监视代码修改,自动build
  •    默认设置下,extjs会在每个请求的文件加动态时间戳以避免缓存,但这种机制会导致你设置的断点失效,在url中加入参数 cache=true,可避免此问题, 即: <http://localhost/es/web/?cache=true>

正式开始

-----------------------------------

本小节的目标是在本地建立ExtJS整合Spring的开发环境。由于服务端是以SpringSide4的QuickStart为蓝本的。

因此预备环境要求同SpringSide4,我采用的环境是:Mac Capitan下:JDK8 + eclipse Luna + Jetty8.1。

另外别忘了jetty for eclipse插件:<https://wiki.eclipse.org/Jetty_WTP_Plugin/Jetty_WTP_Install>

准备好开发环境之后,下载:<http://git.oschina.net/chen4w/se>,通过maven project或existing project方式引入均可。

需要特别说明的是:

  •   es项目的代码请切换到springside分支(其实只有3行代码差异)
  •   Jetty8 Server需要定义如下截图的web上下文(不要采用默认上下文)。

  其中 /Users/chen4w/Sites/es 即你的之前放在httpserver主目录下前端代码所在目录,<br>

  这个上下文定义要求jetty在它的上下文中引用该目录,从而使得es可在jetty下被访问,避免了跨域问题。


ExtJS5 整合Spring4之一
 

  •   保存上下文设置,右键*se->Run As->Run on Server*, 当Spring引导启动完成之后,<br> 
  •   浏览器访问:<http://localhost:8080/es/web/>, 会出现登录界面,初始用户名/密码: admin/admin

界面截图

-----------------------------------

用户登录:


ExtJS5 整合Spring4之一

分页grid:


ExtJS5 整合Spring4之一
 

文本检索:


ExtJS5 整合Spring4之一
 

日期检索:


ExtJS5 整合Spring4之一
 

支持导航滚动的详细页:


ExtJS5 整合Spring4之一
 

重复性验证:


ExtJS5 整合Spring4之一
 

License

-----------------------------------

本项目包含了Sencha ExtJS GPLv3代码:

<https://www.sencha.com/legal/gpl/>