论坛首页 Web前端技术论坛

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

浏览 4764 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2012-02-13  


前言

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

 

struts2整合

一、资源准备

 

1operamasks-ui开发包

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

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


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

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

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

 

2struts2资源下载

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


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

 

 

二、工程搭建

我使用的IDEmyeclipse9.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-uiweb工程。

 

三、功能开发

功能说明,我们要开发一个简单的人员管理模块,使用到operamasks-uiomGridomDialogomButtonomMessageTipomAjaxSubmitvalidate等组件。

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

 

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

注意:

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

2)action配置方式也比较多,由于我们需要在一个action里面放置多个方法,我们采用最简单的方式只指定nameclass,然后采用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格式,然后结合startlimit参数返回当前页的数据,其中的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包提供上来。

 

 

 

  • 大小: 18.5 KB
  • 大小: 21.2 KB
  • 大小: 31.4 KB
  • 大小: 37.9 KB
  • 大小: 6.6 KB
  • 大小: 12.3 KB
  • 大小: 12.5 KB
  • 大小: 69.6 KB
  • 大小: 16.5 KB
  • 大小: 60.5 KB
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics