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包提供上来。
相关推荐
只是我在网上找的 operamasks-ui api 文档 , 希望对你们有帮助
operamasks-ui-2.0 这个帮助文档很难才找到的,感谢CSDN,其中的说明真的是很详细了,维护旧代码用到的这个框架,相比easyui和bootstrap这个框架简单一些,不过用起来还是不错的,除了文档太少,不过有这个就基本...
"Operamasks UI 2.0 Demo"是一个与JavaScript相关的压缩包,包含了对Opera Masks用户...实际使用时,开发者需要按照readme.txt的指示进行操作,并通过operamasks-ui.war文件了解和体验Opera Masks UI 2.0的全部功能。
operamasks-ui的demo程序,能够直接部署,运行。查看om-ui上优秀的标签。
1、将operamasks-ui.war部署到符合Servlet 2.5/JSP2.1的所有Web容器或J2EE应用服务器(如:Tomcat) 2、war包部署成功后访问:http://127.0.0.1:8080/operamasks-ui/
"Operamasks-UI" 是一个专为Opera浏览器设计的用户界面增强插件的源代码包,其版本为1.2,存储在一个名为"operamasks-ui-1.2.zip"的压缩文件中。这个插件的目标是提供更加个性化、高效且易用的浏览体验。在了解这个...
operamasks-ui 最新.完成的,下载下来直接可以点击查看,跟官网一模一样
关于“operamasks-ui-2.0.zip”这个压缩包,它包含了OperaMasks UI 2.0的所有源码、样式文件、文档以及示例项目。解压后,开发者可以查看源码学习框架的工作原理,也可以直接在自己的项目中引用这些文件。为了更好地...
总之,“operamasks-ui-2.1-demo”提供了一个实践OperaMasks UI框架的平台,对于想要提升浏览器扩展开发技能的开发者和设计师来说,这是一个宝贵的资源。通过阅读readme.txt和运行war文件,我们可以深入学习这个框架...
这个压缩包文件 "operamasks-ui-2.0-demo--.zip" 包含了用于演示和实践如何使用Opera Masks UI 2.0版本的资源和代码示例。 Opera Masks UI 是一个强大的工具,它允许开发者通过自定义界面元素和交互方式来增强...
总结来说,"Operamasks UI 2.1"是一个具有明确许可和详尽文档的前端框架,提供JavaScript和CSS资源,可能还支持Flash,适用于快速构建用户界面。开发者可以通过解压并研究这些文件来学习和应用这个框架。
【标签】"operamasks-ui" 直接关联了这个框架的名字,它是这个压缩包的核心内容,是一个专为Web界面设计的组件库,提供了丰富的UI元素和交互设计,使得开发者能够快速构建出符合现代审美和功能需求的页面。...
OperaMasks-UI-Guide帮助文档
通过深入学习这份"operamasks-ui-2.0-doc",开发者不仅可以掌握Operamasks的集成和自定义方法,还能了解到区块链技术在Web应用中的实际应用,这对于构建基于以太坊或其他区块链平台的DApp至关重要。同时,了解这些...
OM-UI简介 OM-UI是一个基于jQuery的前端组件库。它提供了丰富的组件,包括各种表单组件、布局组件、功能性组件等。它旨在帮助用户快速构建企业应用。它是简单易用的,并配有丰富的文档、示例和详实的开发手册。最...