精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2012-02-13
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 编程相关的包 这些包和 包导入到工程里面。
二、工程搭建新建一个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包提供上来。
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
浏览 4763 次