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

最新推荐文章于 2019-05-13 17:03:17 发布
最新推荐文章于 2019-05-13 17:03:17 发布
阅读量1k 收藏
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hewusheng10/article/details/8575605
版权

地址：http://www.iteye.com/topic/1120483

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

前言

最近发现Operamasks-ui前端框架还蛮热的，又打算温习一下Struts2和springMVC这两个框架的搭建，所以就使用operamasks-ui做前端框架做两个示例，下面记录了一下开发的过程，从环境基础配置讲起，用到了一些operamasks-ui的组件都有列明，没有详细讲组件如何使用，感兴趣的可以去他们官网看，本文适合对上面两个框架不熟悉的初学者。

上几张图先：






和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"?>

Xml代码 复制代码 收藏代码
  1. <!DOCTYPEstrutsPUBLIC"-//Apache Software Foundation//DTD Struts Configuration 2.1//EN""http://struts.apache.org/dtds/struts-2.1.dtd"> 
  2. <struts> 
  3. </struts>  
      <!DOCTYPEstrutsPUBLIC"-//Apache Software Foundation//DTD Struts Configuration 2.1//EN""http://struts.apache.org/dtds/struts-2.1.dtd">      <struts>      </struts>

        到文件里面。

       再在web.xml文件里面添加

   <filter>

Xml代码 复制代码 收藏代码
  1.     <filter-name>struts2</filter-name> 
  2.     <filter-class> 
  3.         org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter 
  4.     </filter-class> 
  5. </filter> 
  6. <filter-mapping> 
  7.     <filter-name>struts2</filter-name> 
  8.     <url-pattern>*.do</url-pattern> 
  9. </filter-mapping>  
	<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类里面编写的方法。

Xml代码 复制代码 收藏代码
  1. <constantnameconstantname="struts.action.extension"value="do"/> 
  2. <packagenamepackagename="omui-default"extends="struts-default"> 
  3.    <actionnameactionname="user"class="com.operamasksui.UserAction"> 
  4.       <resultnameresultname="list">list.jsp</result> 
  5.    </action> 
  6. </package>  
<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类代码如下：

Java代码 复制代码 收藏代码
  1. publicclassGridDataModel<T> { 
  2.     // 显示的总数 
  3.     privateinttotal; 
  4.     // 行数据 
  5.     private List<T>rows = new ArrayList<T>(); 
  6.     
  7.     public List<T> getRows() { 
  8.        returnrows; 
  9.     } 
  10.   
  11.     publicvoid setRows(List<T> rows) { 
  12.        this.rows = rows; 
  13.     } 
  14.   
  15.     publicint getTotal() { 
  16.        returntotal; 
  17.     } 
  18.   
  19.     publicvoid setTotal(int total) { 
  20.        this.total = total; 
  21.     } 
  22.   
  23. }  
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类需要加入：

Java代码 复制代码 收藏代码
  1. privateUseru; 
  2.     publicUser getU() { 
  3.        returnu; 
  4.     } 
  5.     publicvoid setU(User u) { 
  6.        this.u = u; 
  7.    }  
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代表成功，其它都代表失败。

Java代码 复制代码 收藏代码
  1. publicvoid delete() 
  2.     { 
  3.        HttpServletRequest request = ServletActionContext.getRequest(); 
  4.        String userId = request.getParameter("id"); 
  5.        if(StringUtils.isNotBlank(userId)) 
  6.        userServices.delete(userServices.findUserById(Integer.valueOf(userId))); 
  7.        writerToClient("1"); 
  8. }  
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参数配置的不同，地址到底如何配置上面也由提到过，还是要根据你的项目情况来确定(当然你必须了解你使用框架的基本配置，否则还是先学习学习吧！)。

一些代码：

Js代码 复制代码 收藏代码
  1. $('#grid').omGrid({ 
  2.            dataSource : 'user.htm?method=findAllUser', 
  3.            limit : 10, 
  4.            height : 355, 
  5.            colModel : [ {header : '用户名', name : 'userName', width : 100, align : 'center'}, 
  6.                         {header : '年龄', name : 'age', width : 50, align : 'left'}, 
  7.                         {header : '地址', name : 'address', align : 'left',width:180}, 
  8.                         {header : '电话', name : 'tel', align : 'left',width:120} , 
  9.                         {header : '邮件地址', name : 'email', align : 'left', width : 'autoExpand'}] 
  10.        });  
$('#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 文件里面加入

Xml代码 复制代码 收藏代码
  1. <servlet> 
  2.        <servlet-name>springapp</servlet-name> 
  3.        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> 
  4.        <load-on-startup>1</load-on-startup> 
  5.     </servlet> 
  6.   
  7.     <servlet-mapping> 
  8.        <servlet-name>springapp</servlet-name> 
  9.         <url-pattern>*.htm</url-pattern> 
  10.     </servlet-mapping> 
  11. <!—解决乱码问题à 
  12.     <filter> 
  13.        <filter-name>Set Character Encoding</filter-name> 
  14.        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> 
  15.        <init-param> 
  16.            <param-name>encoding</param-name> 
  17.            <param-value>UTF-8</param-value> 
  18.        </init-param> 
  19.     </filter> 
  20.     <filter-mapping> 
  21.        <filter-name>Set Character Encoding</filter-name> 
  22.        <url-pattern>/*</url-pattern> 
  23.     </filter-mapping>  
<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

Xml代码 复制代码 收藏代码
  1. <?xmlversionxmlversion="1.0"encoding="UTF-8"?> 
  2. <beansxmlnsbeansxmlns="http://www.springframework.org/schema/beans" 
  3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  4.     xsi:schemaLocation="http://www.springframework.org/schema/beans 
  5. http://www.springframework.org/schema/beans/spring-beans-2.5.xsd"> 
  6. </beans>  
<?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/beanshttp://www.springframework.org/schema/beans/spring-beans-2.5.xsd"></beans>

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

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

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

Xml代码 复制代码 收藏代码
  1. <beans xmlns="http://www.springframework.org/schema/beans" 
  2.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  3.     xsi:schemaLocation="http://www.springframework.org/schema/beans 
  4.        http://www.springframework.org/schema/beans/spring-beans-2.5.xsd"> 
  5.  
  6.     <!-- 通过url中的method参数指定要执行的controller方法 --> 
  7.     <bean id="methodNameResolver" 
  8.         class="org.springframework.web.servlet.mvc.multiaction.ParameterMethodNameResolver"> 
  9.         <property name="paramName"> 
  10.             <value>method</value> 
  11.         </property> 
  12.         <property name="defaultMethodName"> 
  13.             <value>view</value> 
  14.         </property> 
  15.     </bean> 
  16.  
  17.     <bean name="/user.htm" class="com.operamasksui.UserController"> 
  18.         <property name="methodNameResolver" ref="methodNameResolver" /> 
  19.     </bean> 
  20.  
  21. </beans>  
<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组件：

Java代码 复制代码 收藏代码
  1. publicclass GridDataModel<T> { 
  2.     // 显示的总数 
  3.     privateinttotal; 
  4.     // 行数据 
  5.     private List<T>rows = new ArrayList<T>(); 
  6.     
  7.     public List<T> getRows() { 
  8.        returnrows; 
  9.     } 
  10.   
  11.     publicvoid setRows(List<T> rows) { 
  12.        this.rows = rows; 
  13.     } 
  14.   
  15.     publicint getTotal() { 
  16.        returntotal; 
  17.     } 
  18.   
  19.     publicvoid setTotal(int total) { 
  20.        this.total = total; 
  21.     } 
  22.   
  23. }  
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组件

Java代码 复制代码 收藏代码
  1. publicclass TreeDataModel<T> { 
  2.     //树节点id，可选属性 
  3.     private String id; 
  4.     //节点名称 
  5.     private String text; 
  6.     //是否展开 
  7.     privatebooleanexpanded; 
  8.     //树节点样式，非必需 
  9.     private String classes; 
  10.     //孩子节点 
  11.     private List<TreeDataModel>chidren; 
  12.     //是否有孩子节点 
  13.     privatebooleanhasChildren; 
  14.   
  15.     publicString getId() { 
  16.        returnid; 
  17.     } 
  18.     publicvoid setId(String id) { 
  19.        this.id = id; 
  20.     } 
  21.     public String getText() { 
  22.        returntext; 
  23.     } 
  24.     publicvoid setText(String text) { 
  25.        this.text = text; 
  26.     } 
  27.     publicboolean isExpanded() { 
  28.        returnexpanded; 
  29.     } 
  30.     publicvoid setExpanded(boolean expanded) { 
  31.        this.expanded = expanded; 
  32.     } 
  33.     public String getClasses() { 
  34.        returnclasses; 
  35.     } 
  36.     publicvoid setClasses(String classes) { 
  37.        this.classes = classes; 
  38.     } 
  39.     publicboolean isHasChildren() { 
  40.        returnhasChildren; 
  41.     } 
  42.     publicvoid setHasChildren(boolean hasChildren) { 
  43.        this.hasChildren = hasChildren; 
  44.     } 
  45.     public List<TreeDataModel> getChidren() { 
  46.        returnchidren; 
  47.     } 
  48.     publicvoid setChidren(List<TreeDataModel> chidren) { 
  49.        this.chidren = chidren; 
  50.     } 
  51. }  
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;    }}


 

 

南华
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
operamasks-ui 帮助文档
10-27
只是我在网上找的 operamasks-ui api 文档 , 希望对你们有帮助
前端 UI 库 OperaMasks–UI 开发团队专访
轻轻草原
11-26 223
OperaMasks-UI是一款基于jQuery并提供丰富组件的前端UI库，拥有丰富的业务组件、强大的扩展能力、高度的可靠性，满足大部分业务场景需求，带给你便捷的前端开发新体验。 官网地址：http://ui.operamasks.org/ 在线演示：http://ui.operamasks.org/website/demos.html 本期我们采访了OperaMasks-UI的开发团队，请...
operamasks-ui
08-24
operamasks-ui-1.2.zip
OperaMasks-UI
weixin_34163553的博客
11-05 79
2019独角兽企业重金招聘Python工程师标准>>> ...
operamasks_ui
10-19
operamasks-ui提供了丰富的标签，可以解决大部分网页标签问题。
金蝶UI operamasks-UI 下拉列表 omCombo 获取选中列表项的文本 text 方法
无知人生，记录点滴
05-13 1515
金蝶UI operamasks-UI 下拉列表 获取选中列表项的文本 text方法 它的实现方式其实是在你定义的存储值的 input 后面紧跟着一个 input 用于显示 选项 option 的 text 值，所以通过以下方法就可以获取到： $("#buildingId").next().val() 文章标签：金蝶UI,operamasks-UI,下拉列表,omCombo ...
OperaMasks UI
Maze -- life is amazing
05-07 493
下载地址：http://ui.operamasks.org/website/download.html 示例地址：http://ui.operamasks.org/website/demos.html
operamasks-ui 最新.
11-04
operamasks-ui 最新.完成的，下载下来直接可以点击查看，跟官网一模一样
金蝶operamasks-ui（API）
12-02
1、将operamasks-ui.war部署到符合Servlet 2.5/JSP2.1的所有Web容器或J2EE应用服务器（如：Tomcat） 2、war包部署成功后访问：http://127.0.0.1:8080/operamasks-ui/
operamasks-ui_demo
10-19
operamasks-ui的demo程序，能够直接部署，运行。查看om-ui上优秀的标签。
operamasks-ui-2.0-doc
11-03
operamasks-ui-2.0的开发文档离线版。网上很难找的资源。
operamasks-ui-2.0.zip
09-05
operamasks-ui-2.0.zip
operamasks-ui-2.0-demo.zip
09-05
operamasks-ui-2.0-demo.zip
前端JS组件库 OperaMasks-UI
ddxkjddx的专栏
12-15 771
OperaMasks-UI是OperaMasks团队 2011下半年打造的一款轻量级前端JS组件库，旨在提供一款学习曲线低、定制性灵活、样式统一，且多浏览器支持、覆盖企业业务场景的前端JavaScript UI组件库。目前，该团队已将这一产品以LGPL 开源协议开放给社区。  OperaMasks-UI的产品特性：  基于jQuery体系的前端组件库，提供给用户最熟悉的使用方式。满
OperaMasks-UI-Guide帮助文档
11-19
OperaMasks-UI-Guide帮助文档
前端Js组件库OperaMasks-UI使用经验介绍
yan_dk的专栏
08-09 2831
OperaMasks-UI是OperaMasks团队在2011下半年打造的一款轻量级前端JS组件库，旨在提供一款学习曲线低、定制性灵活、样式统一，且多浏览器支持、覆盖企业业务场景的前端JavaScript UI组件库。http://ui.operamasks.org/website/homepage.html中有许多文档和示例，可以参考学习。下面谈谈我的使用经验。          首先，ecl
operamasks-ui使用笔记
kinglimy的专栏
06-05 7575
operamasks-ui简介        最近在项目中用到operamasks-ui实现页面多标签的功能。OperaMasks-UI遵循 LGPL 协议，开源免费。基于JQuery提供丰富的前端UI库。用户可以到该网站：http://ui.operamasks.org/website/download.html上下载。 使用示例        该用例主要实现的是在一个页面上添加多个标签，
OperaMasks快速进阶
09-09
本文档将逐步的讲解OperaMasks的方方面面，从此您将踏上OperaMasks的深入探索之旅。包括：基本框架介绍、IoVC、LiteBean、Rich Component、页面导航、数据校验、国际化、 消息总线 、与Sping的集成九个方面的内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值