operamasks-ui和struts2、springMVC框架整合实践

前言

Operamasks-ui做为一款web前端框架，和任何mvc框架都是能整合的，无论你使用struts2还是springMVC，Operamasks-ui都能胜任，由于我们的网站示例全部是基于servlet开发的，所以下面我将使用struts2和springMVC这两个最流行的MVC框架给大家做一个简单的人员管理模块，示例会从环境基础配置讲起，所以此文章比较适合初学者。

 上几张图先：

 

 

和struts2整合

一、资源准备

 

1、operamasks-ui开发包

Operamasks-ui开发包下载：http://ui.operamasks.org/website/download.html

点击红色链接，下载压缩包并解压

这里有两种选择使用min版和开发版

1)、Min版需要在工程里面导入css、js、swf三个文件夹，此方法导入资源方式简单，适合初学者，但是调试js不方便。

2)、开发版本(development-bundle)，需要在工程里面导入ui、themes、jquery.js，此版本为开发版，组件都以单个js文件存在，需要了解组件之间的依赖关系才能导入正确的js资源，此版本适合项目初期的调试开发，也适合想深入学习operamasks-ui组件的开发者。

 

2、struts2资源下载

下载struts2必须的jar包http://struts.apache.org/download.cgi#struts232-SNAPSHOT

包括了示例、文档、源代码，版本为2.3.1.2

 

 

二、工程搭建

我使用的IDE为myeclipse9.1，所以很多加包的步骤可以省略，IDE会自动添加。

1、 创建web工程

2、 将operamasks-ui资源拷贝到WebRoot文件夹下面(eclipse工具对应的是WebContent文件夹)

3、  如果使用的是myeclipse9.1的同学，直接在工程上面点击右键，选择MyEclipse，再选择Add Struts Capabilities，在弹出窗口选择2.1版本

 

如果是使用eclipse的同学，或者是想手动添加jar包的，请将上面下载的sturts资源包解压，拷贝相关jar包到工程的lib目录(最好是参考Example Application)，然后在在src目录下面新增struts.xml文件，拷贝

      <?xmlversion="1.0"encoding="UTF-8"?>

      <!DOCTYPEstrutsPUBLIC"-//Apache Software Foundation//DTD Struts Configuration 2.1//EN""http://struts.apache.org/dtds/struts-2.1.dtd">
      <struts>
      </struts>

 

        到文件里面。

 

       再在web.xml文件里面添加

   <filter>

	<filter-name>struts2</filter-name>
	<filter-class>
		org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter
	</filter-class>
</filter>
<filter-mapping>
	<filter-name>struts2</filter-name>
	<url-pattern>*.do</url-pattern>
</filter-mapping>

   

 

      经过上面步骤，你已经搭建好了一个MVC框架为struts2，前端UI框架为operamasks-ui的web工程。

 

三、功能开发

功能说明，我们要开发一个简单的人员管理模块，使用到operamasks-ui的omGrid、omDialog、omButton、omMessageTip、omAjaxSubmit、validate等组件。

示例主要关注operamasks-ui前端控件和mvc框架的交互，后端会采用模拟数据。

 

1、在struts.xml配置文件里面添加如下代码

注意：

1)、拦截指定后缀名称的请求，此处配置的后缀名称必须是web.xml里面配置的struts拦截器拦截后缀名的子集，比如web.xml配置的是/* 则这里可以配置do或者action都可以，如果web.xml配置的是*.action而这里配置的是*.do则无法拦截请求。

2)、action配置方式也比较多，由于我们需要在一个action里面放置多个方法，我们采用最简单的方式只指定name和class，然后采用user!method.do访问后台方法，其中的method为你在Action类里面编写的方法。

 

<constantname="struts.action.extension"value="do"/>
<packagename="omui-default"extends="struts-default">
   <actionname="user"class="com.operamasksui.UserAction">
      <resultname="list">list.jsp</result>
   </action>
</package>

 

 

 

2、  实现UserAction类

类代码包括了查询(findAllUser)、保存(save)、删除(delete)三个方法。

1)、findAllUser方法会查询出所有User数据，再将List<User>包装成GridDataModel格式，然后结合start、limit参数返回当前页的数据，其中的GridDataModel类代码如下：

 

publicclassGridDataModel<T> {
    // 显示的总数
    privateinttotal;
    // 行数据
    private List<T>rows = new ArrayList<T>();
   
    public List<T> getRows() {
       returnrows;
    }
 
    publicvoid setRows(List<T> rows) {
       this.rows = rows;
    }
 
    publicint getTotal() {
       returntotal;
    }
 
    publicvoid setTotal(int total) {
       this.total = total;
    }
 
}

   很简单，只包装了数据的总条数 total和所有数据集合 rows，这样包装是为了前台 omGrid组件能够识别返回的 JSON个数数据。它需要的格式是：

     {"total":15,"rows":[{childJSON}]}

     将数据包装成 GridDataModel 格式之后再使用 JSON-lib 包的工具类 JSONObject.fromObject(model) 生成 json 数据，最好返写回前台，完成 omGrid 数据的展示。

 

2)、save方法

   根据表单传递过来的ID是否为null确认是新增还是修改，此处没有什么特别的地方，就是获取表单数据最好使用struts2自带的封装表单功能，

  Action类需要加入：

 

privateUseru;
    publicUser getU() {
       returnu;
    }
    publicvoid setU(User u) {
       this.u = u;
   }

 

 

前台页面输入框这样定义<input type=”text” name=”u.userName” id=”userName” />

只需要将name定义成u.userName就可以了。

然后在save方法里面就可以通过u.get***()方法获User类所有参数。

 

3)、delete方法也就是先获取删除记录的ID，然后调用services方法的delete方法完成，注意的是我在所有方法里面调用了一个回写函数writerToClient("1");这里主要是用来对前台做一个反馈，是否成功，必须要有回写，否则前台无法提示。这里就简单的以1代表成功，其它都代表失败。

 

publicvoid delete()
    {
       HttpServletRequest request = ServletActionContext.getRequest();
       String userId = request.getParameter("id");
       if(StringUtils.isNotBlank(userId))
       userServices.delete(userServices.findUserById(Integer.valueOf(userId)));
       writerToClient("1");
}

 

 

 

3、 实现list.jsp页面

列表页面用到了omGrid组件显示数据，使用struts2和使用其它框架的唯一区别就是dataSource参数配置的不同，地址到底如何配置上面也由提到过，还是要根据你的项目情况来确定(当然你必须了解你使用框架的基本配置，否则还是先学习学习吧！)。

一些代码：

 

$('#grid').omGrid({
           dataSource : 'user.htm?method=findAllUser',
           limit : 10,
           height : 355,
           colModel : [ {header : '用户名', name : 'userName', width : 100, align : 'center'},
                        {header : '年龄', name : 'age', width : 50, align : 'left'},
                        {header : '地址', name : 'address', align : 'left',width:180},
                        {header : '电话', name : 'tel', align : 'left',width:120} ,
                        {header : '邮件地址', name : 'email', align : 'left', width : 'autoExpand'}]
       });

 

 

 

有增、删、改功能，修改的时候需要弹出修改界面，就用到了omDialog组件做为容器来生成修改界面，有按钮，用到了omButton组件生成按钮，还有校验功能，使用到了validate工具类对age做校验，还使用了omAjaxSubmit做异步提交form表单，

最后提交表单之后需要有提示是否保存成功，使用了omMessageTip作提示，还有点击删除的时候也需要确认删除，使用omMessageBox.confirm功能。想详细了解如何使用还是看具体代码和operamasks-ui的官网示例吧。

 

当然想完成操作还少不了后台服务层的功能，我这里只是模拟了一个后台的增删改查，你重新启动一下应用服务器之后对数据做的改变就会消失。

 

 

 

和springMVC的整合

一、资源准备

Operamasks­-ui的资源和struts的获取方式相同。

获取springMVC的开发环境：

1、 如果你是使用的myEclipse9.1开发环境，请右键工程—>myEclipse—>add Spring capabilities，选择

 这两个包集合。同时还需要导入

 这几个包才能运行正常。

   2、如果你没有工具辅助，那就直接把

org.springframework.aop-3.0.5.RELEASE.jar ：与Aop 编程相关的包
org.springframework.beans-3.0.5.RELEASE.jar ：提供了简捷操作bean 的接口
org.springframework.context-3.0.5.RELEASE.jar ：构建在beans 包基础上，用来处理资源文件及国际化。
org.springframework.core-3.0.5.RELEASE.jar ：spring 核心包
org.springframework.web-3.0.5.RELEASE.jar ：web 核心包，提供了web 层接口
org.springframework.web.servlet-3.0.5.RELEASE.jar ：web 层的一个具体实现包，DispatcherServlet也位于此包中。

这些包和

 包导入到工程里面。

 

二、工程搭建

新建一个web工程

导入operamasks-ui的相关文件（与struts2配置相同）

在web.xml 文件里面加入

 

<servlet>
       <servlet-name>springapp</servlet-name>
       <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
       <load-on-startup>1</load-on-startup>
    </servlet>
 
    <servlet-mapping>
       <servlet-name>springapp</servlet-name>
        <url-pattern>*.htm</url-pattern>
    </servlet-mapping>
<!—解决乱码问题à
    <filter>
       <filter-name>Set Character Encoding</filter-name>
       <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
       <init-param>
           <param-name>encoding</param-name>
           <param-value>UTF-8</param-value>
       </init-param>
    </filter>
    <filter-mapping>
       <filter-name>Set Character Encoding</filter-name>
       <url-pattern>/*</url-pattern>
    </filter-mapping>

 

 

 

在WEB-INF目录下面新建springapp-servlet.xml，这个名字是根据在web.xml里面配置的servlet-name标签名字来的，规则是servlet-name-servlet.xml，必须这样命名，否则找不到资源。

再拷贝如下内容到springapp-servlet.xml

 

<?xmlversion="1.0"encoding="UTF-8"?>
<beansxmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-2.5.xsd">
</beans>

 

 

 

沿用上例struts2请求地址的编写习惯，（在请求地址当中使用参数的形式指定方法）我们将在spring里面这样配置：

<!-- 通过url中的method参数指定要执行的controller方法 -->

    <?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans-2.5.xsd">

	<!-- 通过url中的method参数指定要执行的controller方法 -->
	<bean id="methodNameResolver"
		class="org.springframework.web.servlet.mvc.multiaction.ParameterMethodNameResolver">
		<property name="paramName">
			<value>method</value>
		</property>
		<property name="defaultMethodName">
			<value>view</value>
		</property>
	</bean>

	<bean name="/user.htm" class="com.operamasksui.UserController">
		<property name="methodNameResolver" ref="methodNameResolver" />
	</bean>

</beans>

  

你就可以使用类似user.htm?method=findAllUser这种url请求指定调用findAllUser方法。

上面注意的是你配置的后缀名.htm，他的配置原则和struts2的相同，这里配置的后缀必须是web.xml里面配置的子集(A也可以是A的子集)。

 

三、功能开发

1）、UserController类开发

此处就省略了，可以将上面Action类的代码直接copy过来用。只是基本结构不同而已，具体代码还是看源码包吧。

2）、list.jsp页面开发

代码也和struts2例子相同，唯一不同的就是请求地址，struts2的请求格式为user!findAllUser.do  而这里为user.htm?method=findAllUser，请看源码。

 

 

 

operamasks-ui组件后台模型类

omGrid组件：

 

publicclass GridDataModel<T> {
    // 显示的总数
    privateinttotal;
    // 行数据
    private List<T>rows = new ArrayList<T>();
   
    public List<T> getRows() {
       returnrows;
    }
 
    publicvoid setRows(List<T> rows) {
       this.rows = rows;
    }
 
    publicint getTotal() {
       returntotal;
    }
 
    publicvoid setTotal(int total) {
       this.total = total;
    }
 
}

 

 

当然如果你扩展了组件，或者封装了更多功能，你可以任意修改和包装，这里提供的是基本的模型类。

 

omTree组件

 

publicclass TreeDataModel<T> {
    //树节点id，可选属性
    private String id;
    //节点名称
    private String text;
    //是否展开
    privatebooleanexpanded;
    //树节点样式，非必需
    private String classes;
    //孩子节点
    private List<TreeDataModel>chidren;
    //是否有孩子节点
    privatebooleanhasChildren;
 
    publicString getId() {
       returnid;
    }
    publicvoid setId(String id) {
       this.id = id;
    }
    public String getText() {
       returntext;
    }
    publicvoid setText(String text) {
       this.text = text;
    }
    publicboolean isExpanded() {
       returnexpanded;
    }
    publicvoid setExpanded(boolean expanded) {
       this.expanded = expanded;
    }
    public String getClasses() {
       returnclasses;
    }
    publicvoid setClasses(String classes) {
       this.classes = classes;
    }
    publicboolean isHasChildren() {
       returnhasChildren;
    }
    publicvoid setHasChildren(boolean hasChildren) {
       this.hasChildren = hasChildren;
    }
    public List<TreeDataModel> getChidren() {
       returnchidren;
    }
    publicvoid setChidren(List<TreeDataModel> chidren) {
       this.chidren = chidren;
    }
}

 

   两个工程的war包先提供，稍后会把有源码的war包提供上来。