`
lyg8266
  • 浏览: 11399 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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

阅读更多

前言

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
分享到:
评论
4 楼 Mr.TianShu 2012-12-12  
struts2 例子源码有错误。

     
            /** 
              * @param object 
              *             任意对象 
              * @return java.lang.String 
              */    
            public static String objectToJson(Object object) {     
                 StringBuilder json = new StringBuilder();     
                if (object == null) {     
                     json.append("\"\"");     
                 } else if (object instanceof String || object instanceof Integer) {   
                     json.append("\"").append(object.toString()).append("\"");    
                 }else if(object instanceof List){
                	 json.append(listToJson((List)object));
                 }else {     
                     json.append(beanToJson(object));     
                 }     
                return json.toString();     
             }     
 
3 楼 Mr.TianShu 2012-12-12  
struts2 例子源码有错误。
             /** 
              * @param object 
              *             任意对象 
              * @return java.lang.String 
              */    
            public static String objectToJson(Object object) {     
                 StringBuilder json = new StringBuilder();     
                if (object == null) {     
                     json.append("\"\"");     
                 } else if (object instanceof String || object instanceof Integer) {   
                     json.append("\"").append(object.toString()).append("\"");    
                 }[b] else if(object instanceof List){
                	 json.append(listToJson((List)object));[/b]
                 }else {     
                     json.append(beanToJson(object));     
                 }     
                return json.toString();     
             }     
            
2 楼 Mr.TianShu 2012-12-12  
struts2 例子源码有错误。

  /**
              * @param object
              *             任意对象
              * @return java.lang.String
              */   
            public static String objectToJson(Object object) {    
                 StringBuilder json = new StringBuilder();    
                if (object == null) {    
                     json.append("\"\"");    
                 } else if (object instanceof String || object instanceof Integer) {  
                     json.append("\"").append(object.toString()).append("\"");   
                 } else if(object instanceof List){
                json.append(listToJson((List)object));

                 }else {    
                     json.append(beanToJson(object));    
                 }    
                return json.toString();    
             }    
           
1 楼 天空不空 2012-07-06  
很不错,学习

相关推荐

    operamasks-ui 帮助文档

    只是我在网上找的 operamasks-ui api 文档 , 希望对你们有帮助

    operamasks-ui-2.0

    operamasks-ui-2.0 这个帮助文档很难才找到的,感谢CSDN,其中的说明真的是很详细了,维护旧代码用到的这个框架,相比easyui和bootstrap这个框架简单一些,不过用起来还是不错的,除了文档太少,不过有这个就基本...

    operamasks-ui-2.0-demo.zip

    "Operamasks UI 2.0 Demo"是一个与JavaScript相关的压缩包,包含了对Opera Masks用户...实际使用时,开发者需要按照readme.txt的指示进行操作,并通过operamasks-ui.war文件了解和体验Opera Masks UI 2.0的全部功能。

    operamasks-ui_demo

    operamasks-ui的demo程序,能够直接部署,运行。查看om-ui上优秀的标签。

    金蝶operamasks-ui(API)

    1、将operamasks-ui.war部署到符合Servlet 2.5/JSP2.1的所有Web容器或J2EE应用服务器(如:Tomcat) 2、war包部署成功后访问:http://127.0.0.1:8080/operamasks-ui/

    operamasks-ui

    "Operamasks-UI" 是一个专为Opera浏览器设计的用户界面增强插件的源代码包,其版本为1.2,存储在一个名为"operamasks-ui-1.2.zip"的压缩文件中。这个插件的目标是提供更加个性化、高效且易用的浏览体验。在了解这个...

    operamasks-ui 最新.

    operamasks-ui 最新.完成的,下载下来直接可以点击查看,跟官网一模一样

    operamasks-ui-2.0.zip

    关于“operamasks-ui-2.0.zip”这个压缩包,它包含了OperaMasks UI 2.0的所有源码、样式文件、文档以及示例项目。解压后,开发者可以查看源码学习框架的工作原理,也可以直接在自己的项目中引用这些文件。为了更好地...

    operamasks-ui-2.1-demo

    总之,“operamasks-ui-2.1-demo”提供了一个实践OperaMasks UI框架的平台,对于想要提升浏览器扩展开发技能的开发者和设计师来说,这是一个宝贵的资源。通过阅读readme.txt和运行war文件,我们可以深入学习这个框架...

    operamasks-ui-2.0-demo--.zip

    这个压缩包文件 "operamasks-ui-2.0-demo--.zip" 包含了用于演示和实践如何使用Opera Masks UI 2.0版本的资源和代码示例。 Opera Masks UI 是一个强大的工具,它允许开发者通过自定义界面元素和交互方式来增强...

    operamasks-ui-2.1.zip

    总结来说,"Operamasks UI 2.1"是一个具有明确许可和详尽文档的前端框架,提供JavaScript和CSS资源,可能还支持Flash,适用于快速构建用户界面。开发者可以通过解压并研究这些文件来学习和应用这个框架。

    operamasks-ui-master.zip

    【标签】"operamasks-ui" 直接关联了这个框架的名字,它是这个压缩包的核心内容,是一个专为Web界面设计的组件库,提供了丰富的UI元素和交互设计,使得开发者能够快速构建出符合现代审美和功能需求的页面。...

    OperaMasks-UI-Guide帮助文档

    OperaMasks-UI-Guide帮助文档

    operamasks-ui-2.0-doc

    通过深入学习这份"operamasks-ui-2.0-doc",开发者不仅可以掌握Operamasks的集成和自定义方法,还能了解到区块链技术在Web应用中的实际应用,这对于构建基于以太坊或其他区块链平台的DApp至关重要。同时,了解这些...

    Operamasks-UI

    OM-UI简介 OM-UI是一个基于jQuery的前端组件库。它提供了丰富的组件,包括各种表单组件、布局组件、功能性组件等。它旨在帮助用户快速构建企业应用。它是简单易用的,并配有丰富的文档、示例和详实的开发手册。最...

Global site tag (gtag.js) - Google Analytics