X5的UI部分和传统Web页面开发的差异
http://doc.wex5.com/different-with-std-web-ui/#1
X5的UI部分和传统Web页面开发的差异
WeX5是跨端移动开发框架,BeX5是基于WeX5的企业快速开发平台,它们都采用前后端分离的开发模式,和Web传统的前端页面开发(例如extjs)比较类似,和jsp存在差异。WeX5、BeX5和Web传统的前端页面开发最大的差异在于,WeX5、BeX5采用了单页模式,实现资源不重复加载:
- 由于采用单页模式,X5引入了RequireJS,实现资源异步按需加载,且只加载一次
- 作为快速开发工具,X5提供了可视化界面设计器
- 作为快速开发工具,对界面常用功能进行封装,实现界面全面组件化
这样的UI开发与传统UI开发有哪些不同呢?下面就从页面部分、页面中的数据、js部分、发布等几个方面具体说明。
1、页面部分
1.1、页面加载事件
- 传统——window.onload事件
- X5——model组件的onload事件
1.2、页面关闭事件
- 传统——window.onunload事件
- X5——model组件的onunload事件
1.3、获取url的参数
- 传统JS——只有一种参数,就是url中?后面的参数,从location.href中截取
- JSP——使用<% String 参数值 = request.getParameter(“参数名”);%>获取
- X5—— 有三种参数,url中可以显示出来的有两种参数,一种是?后面的参数,另一种是#!后面的JSON格式的参数,还有一种是url中不显示的复杂参数。前两种显示在url上,为了实现页面分享,后一种实现传递复杂参数。
?后面的参数——使用 this.getContext().getRequestParameter(“参数名”);方法获取
#!后面的JSON格式的参数——使用this.params.参数名 的方式获取
url中不显示的——使用this.params.data.参数名 的方式获取
1.4、引用js
- 传统——在html中加入<script src=”/system/lib/justep.js”></script>
- X5——使用RequireJS,实现异步按需加载
1
2
3
4
5
6
7
8
|
//按需加载,没有加载过,则加载,否则不加载 var justep = require( "$UI/system/lib/justep" ); //异步加载(加中括号),执行到这句代码时才加载 参考/UI2/portal/sample/appVersionChecker.js require([ './appVersion_in_server' ], function (version_info){ //成功回调 }, function (){ //失败回调 }); |
在w文件中,在<window>标签下加入<script>标签,也可以引用js文件,但是不推荐使用。当多个w文件引用同一个js文件时,和多页模式一样,会导致多次加载,而使用require的方式加载js文件。只会加载一次,因此推荐使用。参考WeX5界面模块化的使用—JS引用
1.5、引用css
- 传统——<link rel=”stylesheet” type=”text/css” href=”/OA/config/pub.css”>
- X5——使用RequireJS,实现按需加载。 require(“css!$UI/OA/config/pub”).load();
引用css和引用js一样,推荐使用require方式,避免多次加载,代码中的load方法,是保证了css文件的加载顺序。参考WeX5界面模块化的使用—引用css和text
1.6、使用xid而非id
- 传统——使用id属性
- X5——采用单页模式,需要进行页面隔离,即为了使得在打开多个页面时,元素的id不重复,X5增加了xid属性,替代id属性,因此要将id属性改成xid属性,通过id属性获得element的方法,改为通过xid属性获得element的方法
例如:
1、在w文件中,元素不定义id属性,而定义xid属性
<div id=”div1″ width=”300″ height=”200″//>
<div xid=”div2″ width=”300″ height=”200″//>
2、在js文件中获取div时,不使用id获取元素,而是使用xid获取元素
var div= document.getElementById(‘div1’);
var div= this.getElementByXid(‘div2’);
1.7、获取到input输入框的输入内容
- 传统——$(“#input1”).val();
- X5——this.comp(“input1”).val();
如果input组件设置了bind-ref属性,建议使用data组件的val方法获取input框中的数据,例如:
input组件的bind-ref属性设置为accountData.ref(‘fType’)
推荐写这样的代码获取input中的值,this.comp(“accountData”).val(“fType”);
1.8、页面跳转
- 传统——服务端重定向、重设location.href
- X5——使用shell提供的showPage方法打开页面,使用closePage方法关闭页面;也可以使用弹出窗口组件提供的open方法打开页面,使用window组件的close操作关闭页面;还可以使用a跳转页面,相当于调用showPage方法
1
2
3
4
5
6
7
8
|
//使用shell提供的showPage方法 //使用绝对路径 justep.Shell.showPage( "$UI/acc/list.w" ); //使用相对路径——推荐 justep.Shell.showPage(require.toUrl( "./list.w" )); //使用弹出窗口组件提供的open方法 this .comp(“windowDialog1”).open(); |
1
2
|
<!--使用shell里面定义的短地址,使用a跳转页面--> < a href = "#!classSetting" >分类设置</ a > |
1.9、图片路径 <img src=?>
- 传统——直接写绝对路径或相对路径
- X5——在w文件中设置img的src属性时写绝对路径或相对路径,在css文件中写相对路径,在js文件中可以写绝对路径或相对路径,写相对路径一定要使用require.toUrl方法,以获得正确的路径
$UI/takeout/img/1.jpg
./img/1.jpg,相对路径是相对w文件而言
1.10、信息提示
- 传统——提供了alert方法和confirm方法
- X5——不仅可以使用alert方法和confirm方法,还提供了justep.Util.hint方法和justep.Util.confirm方法,好用又美观。更提供了MessageDialog组件,自定义信息提示框
1.11、上传文件
- 传统——<input type=”file”>
- X5——提供了附件组件,实现上传、下载、查看文件。在手机上还可以实现拍照上传。
1.12、详细页面的制作
- 传统——table div
- X5——传统的写法都支持,还提供了响应式布局(row组件),表格布局(excellayout、celllayout组件)、绝对布局(absoluteLayout组件)
1.13、界面控制
- 传统——设置html标签disabled属性
- X5——支持传统的方式,还支持使用表达式控制
例如:
1.14、路由
- 传统——多页应用,每页可以单独访问
- X5——X5是单页应用,除了首页以外的其它页面都是首页的一部分,那么页面如何单独访问呢,在url中使用#!
例如
http://192.168.1.20:8080/x5/UI2/acc/index.w#!($UI/acc/list.w)
http://192.168.1.20:8080/x5/UI2/acc/index.w#!($UI/acc/classsetting.w)
支持短地址
http://192.168.1.20:8080/x5/UI2/acc/index.w#!list
http://192.168.1.20:8080/x5/UI2/acc/index.w#!classSetting
1.15、背景图片
- 传统——写在body上
- X5——写在window组件上,切换到源码页,给window组件增加style属性
1
2
3
|
component = "$UI/system/components/justep/window/window" design = "device:m;" style = "background-image:url($UI/abc/p1.png); background-repeat:no-repeat; background-size: 100%;" > |
1.16、事件
- 传统——on开头,例如onclick
- X5——分为on开头的事件和bind开头的事件,on开头的事件是X5组件提供的回调型事件,bind开头的事件是标准dom事件,就是传统的on开头的事件
html文件中的写法
<input type=”text” value=”测试” onclick=”alert(this.value);”>
事件中的this是input
w文件中的写法
<input type=”text” value=”测试” bind-click=”input1Click”>
onclick属性改为bind-click属性,在bind-click属性中不能直接写代码,必须写方法名,在js文件中定义这个方法
1
2
3
4
|
Model.prototype.input1Click = function (event){ alert(event.target.value); //事件中的this是Model,event.target是input }; |
1.17、调用action
- 传统——在js中发送ajax请求,在form提交中调用servlet
<form action=”/SendMessageServlet” method=post >
- WeX5——在js中发送ajax请求和在js中调用Baas动作
1
2
3
4
5
6
7
8
|
justep.Baas.sendRequest({ "url" : "/justep/takeout" , "action" : "actionName" , "async" : false , "params" : {}, "success" : function (data) { } }); |
- BeX5——在js中发送ajax请求和在js中调用业务动作
1
2
3
4
5
6
7
|
biz.Request.sendBizRequest({ "context" : this .getContext(), "action" : "demoActionParams" , "parameters" : params, "callback" : function (data) { } }); |
1.18、在前端获得session的值
- 传统JS——发送请求获取
- JSP——<%String sesStr = (String)session.getAttribute(“aaa”);%>
- WeX5——在Baas中定义action,获取session信息,在js中调用action,获得action返回值
在action中获取session的代码如下
1
2
|
HttpServletRequest request = (HttpServletRequest)context.get(ActionContext.REQUEST); HttpSession session = request.getSession(); |
- BeX5——在Biz中定义action,获取session信息,在js中调用action,获得action返回值
在action中获取session的代码如下
1
2
|
HttpSession session = ContextHelper.getSessionContext().getSession(); String value = (String) session.getAttribute( "aaa" ); |
1.19、在前端访问全局变量
- 传统JS——发送请求获取
- JSP—— <%Integer count=(Integer)application.getAttribute(“count”);%>
- WeX5——发送ajax请求获取
- BeX5——有两种方法
1、在BIZ定义全局静态变量,定义action访问该变量,在js中调用action,获得action返回值
2、在BIZ定义全局静态变量,在获取系统参数动作(getSysParamsAction)中,插入需要在前端获得的全局变量的值
获取系统参数动作的java代码如下
1
2
3
4
5
|
public static Object getSysParams() { Map<String, String> sr = (Map<String, String>)ContextHelper.getSysParams(); sr.put( "aaa" , "bbb" ); return sr; } |
在js中获取系统参数的代码如下
1
|
this .getContext().getSystemParameter( 'aaa' ); |
2、页面中的数据
- 传统——开发中自己设计
- X5——W文件提供数据组件,存储客户端数据,数据感知组件(展现组件)感知这些数据,形成数据感知体系,使得页面更加智能。
数据组件提供的相关能力
- 数据结构——编辑列,设置列名及类型
- 操作数据——查询、新增、修改、删除、保存、分页加载、遍历、设置静态数据
- 数据规则——只读、计算公式、必填、约束
- 数据类型——行列数据、树形数据
- 数据绑定——设置是否显示、是否可用、应用样式等
3、js部分
X5使用了RequireJS,用于客户端的模块管理。它可以让客户端的代码分成一个个模块,实现异步或动态加载,从而提高代码的性能和可维护性。它的模块管理遵守AMD规范(Asynchronous Module Definition)。RequireJS的基本思想是,通过define方法,将代码定义为模块;通过require方法,实现代码的模块加载。
3.1、全局变量
- 传统——定义在所有方法外面
- X5——定义在Model的构造方法中
1
2
3
4
5
6
7
8
9
10
|
var Model = function (){ this .callParent(); this .needLoad = true ; }; Model.prototype.okBtnClick = function (event){ if ( this .needLoad){ this .comp( "accountData" ).refreshData(); } }; |
3.2、自定义js方法
- 传统——定义为全局方法
- X5——定义为Model的实例方法
1
2
3
4
5
6
7
8
9
10
11
12
|
//自定义js方法 Model.prototype.onClassChanged = function (classData){ this .comp( "classData" ).clear(); this .comp( "classData" ).loadData(classData); }; Model.prototype.modelLoad = function (event){ //使用this.自定义的js方法名,使用自定义方法 justep.Shell.on( "onClassChanged" , this .onClassChanged, this ); //使用this.自定义的js方法名(),调用自定义方法 this .onClassChanged(); }; |
3.3、自定义公共js文件
- 传统——
- X5——参考/UI2/system/lib/justep.js
定义——justep.js文件内容节选
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
define( function (require) { var _UUID = require( "$UI/system/lib/base/uuid" ); var _Shell = require( "$UI/system/lib/portal/shell" ); var justep = {}; justep.UUID = _UUID; justep.Shell = _Shell; justep.callModelFn = function (option){ return _Util.callModelFn(option); }; justep.bindModelFn = function (model,func,caller){ return _Util.bindModelFn(model,func,caller); }; window.justep = justep; //js表达式需要使用 return justep; }); |
引用justep.js
1
2
3
4
5
6
7
|
define( function (require){ var $ = require( "jquery" ); var justep = require( "$UI/system/lib/justep" ); var Model = function (){ this .callParent(); }; |
3.4、获取element
- 传统——使用id属性:document.getElementById
- X5——使用xid属性:this.getElementByXid
var div= document.getElementById(‘div1’);
var div= this.getElementByXid(‘div2’);
3.5、获取jQuery对象
- 传统——使用id属性:$(‘#id’)
- X5——使用xid属性:$(this.getElementByXid(‘组件的xid’));
还提供了获取X5组件对象的方法——this.comp(‘组件的xid’);
通过X5组件对象获得jQuery对象——this.comp(‘组件的xid’).$domNode;
3.6、创建节点,删除节点
- 传统——使用jQuery的append方法创建节点,使用remove方法删除节点
- X5——使用justep.Bind.addNode和justep.Bind.addNodes方法创建节点,使用justep.Bind.removeNode方法删除节点,还提供了创建、删除X5组件的方法
创建html节点
1
2
3
4
5
6
7
8
9
|
Model.prototype.addNodeClick = function (event) { var newContent = this .comp( 'contents1' ).add({}); var div = $( "<div xid='divNew' data-bind='click:divClick'>新的页面</div>" ); justep.Bind.addNode(newContent.domNode, div[0]); }; // 这是新建的div的click事件 Model.prototype.divClick = function () { alert( '单击事件' ); }; |
删除html节点
1
2
3
4
|
Model.prototype.removeNodeClick = function () { var node = this .getElementByXid( "divNew" ); justep.Bind.removeNode(node); }; |
创建X5组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
Model.prototype.addCompClick = function () { var parentNode = this .getElementByXid( "bar" ); if (parentNode) { var flag = { 'xid' : "btnNew" , 'label' : "新按钮" , 'parentNode' : parentNode, 'class' : "btn btn-default" }; var button = new Button(flag); button.on( "onClick" , function (event) { alert(event.source.get( 'label' )); }); } }; |
删除X5组件
1
2
3
4
|
Model.prototype.removeCompClick = function () { var node = this .comp( "btnNew" ); justep.Component.removeComponent(node); }; |
3.7、增加事件,删除事件
- 传统——使用jQuery的on方法增加事件,使用off方法删除事件
- X5——使用on方法增加事件,使用off方法删除事件
例如:在w文件中放input
给html标签增加事件
1
2
3
4
|
Model.prototype.addEventClick = function () { //on方法的第一个参数事件名不用写on $( this .getElementByXid( "input2" )).on( "click" , function (){alert( "单击事件" );}); }; |
删除html标签的事件
1
2
3
|
Model.prototype.removeEventClick = function () { $( this .getElementByXid( "input2" )).off( "click" ); }; |
例如:在w文件中放X5的input组件
给X5组件增加事件,X5组件的事件包括两种,一种是on开头的事件,一种是bind开头的事件,它们的增加、删除方法不同。其中bind开头的事件是html标签原生事件,只要浏览器支持,即使组件的事件页里面没有列出,也是可以增加的,例如input组件的oninput事件。
1
2
3
4
5
6
|
Model.prototype.addEventClick = function () { //增加bind开头事件,on方法的第一个参数事件名不用写bind- this .comp( "input1" ).$domNode.on( "click" , function (){alert( "单击事件" );}); //增加on开头事件,on方法的第一个参数和组件的事件页里面的事件名称一致 this .comp( "input1" ).on( "onChange" , function (){alert( "改变事件" );}); }; |
删除X5组件的事件
1
2
3
4
|
Model.prototype.removeCompClick = function () { this .comp( "input1" ).$domNode.off( "click" ); this .comp( "input1" ).off( "onChange" ); }; |
4、发布
4.1、设置首页标题
- 传统——在首页的html文件中<head>中增加<title>
- X5——打开/UI2/system/components/justep/window/main.html文件,在<head>中增加<title>
1
2
3
4
5
6
7
8
9
|
< head > < meta charset = "utf-8" /> < meta http-equiv = "X-UA-Compatible" content = "IE=edge, chrome=1" /> < meta name = "apple-mobile-web-app-capable" content = "yes" /> < meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> < meta name = "format-detection" content = "telephone=no" /> < meta name = "viewport" content = "width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> < title >网站标题</ title > </ head > |
4.2、更换图标
- 传统——在网站根目录下放favicon.ico文件
- X5——和传统做法一样,X5已经在版本的apache-tomcat\webapps\ROOT目录下放了一个图标,替换这个文件即可
4.3、部署到Web应用服务器
- 传统——开发出来的就是Web应用,可以直接部署到Web应用服务器上
- WeX5——开发出来的是模型资源,通过编译生成Web应用,将Web应用部署到Web应用服务器上
- BeX5——开发出来的是模型资源,不是Web应用。在Web应用服务器上需要部署版本中runtime目录下的几个Web应用,通过这几个Web应用访问开发出来的模型资源
X5的UI部分和传统Web页面开发的差异的更多相关文章
- 移动端web页面开发常用的头部标签设置
在移动端web页面开发中,我们常需要设置各种头部标签以帮助浏览器更好的解析页面,将页面完美呈现,这里列出了工作中常用的各种头部标签,以备查询. viewport <meta name=" ...
- 手机web页面开发-第一弹
毕业设计题目<基于three.js的太阳系全景漫游>,项目开发运行在手机端,开始学习手机端页面开发. 新建index.html,写meta标签.meta标签分为两大部分:http标题信息( ...
- 响应式WEB页面开发实践
转自:https://github.com/markyun/My-blog/issues/27 最近得到一个新任务单,让我用一套页面适应所有主流终端(Android.iPhone.iPad.PC),而 ...
- web页面开发相关基础
CSS是一种用于web的标准布局语言,可以控制版面.颜色以及元素和图像的大小和位置.HTML文档应该利用外部样式表来定义文档中使用的样式.JavaScript也应该放在外部文档中,这个文档应该只包含J ...
- web页面开发笔记(不断更新)
布局: 1.左右分列2端:使用float:left+float:right,如果一边有多列的话,另一列会对齐最下面那列.所以一般把左右各设一列,一列中再细分多行. 2.div不跟随:使用clear:b ...
- 【Ajax 1】Ajax与传统Web开发的区别
导读:从用户体验度的角度来说,利用Ajax进行开发的网站,其体验度高于利用传统Web开发技术,那么,是什么因素导致了这一现象呢?难道说Ajax开发,就一定优于传统Web技术吗?本篇文章,将主要介绍Aj ...
- Web前端开发中的MCRV模式(转)
作者: izujian 来源: baiduux 摘要:针对前端开发中基于ajax的复杂页面开发所面临的代码规模大,难以组织和维护,代码复用性.扩展性和适应性差等问题,本文尝试以MVC思想为 基础,结 ...
- 渐进式web应用开发---service worker 原理及介绍(一)
渐进式web应用(progressive Web app) 是现代web应用的一种新形式.它利用了最新的web功能,结合了原生移动应用的独特特性与web的优点,为用户带来了新的体验. 一:传统web端 ...
- web前端开发中常用的尺寸和位置
我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...
随机推荐
- 读<jquery 权威指南>[3]-动画
一. 显示与隐藏——hide(),show() 1. 方法: hide(speed,[callback]); show(speed,[callback]); 说明:这两个方法还可以实现带动画效果的显示 ...
- css —— 图片环绕+首行缩进
1.利用css实现图片环绕文字的效果: 只需要给img标签设置float:left/right即可: 2.实现上段文字首行缩进两个字的效果: 使用 text-indent: 2em;即可(em为相对单 ...
- react native ScrollView
ScrollView是一个通用的可滚动的容器,你可以在其中放入多个组件和视图,而且这些组件并不需要是同类型的.ScrollView不仅可以垂直滚动,还能水平滚动(通过horizontal属性来设置). ...
- Windows Store App 主题动画
Windows 8系统的动画库中包含了丰富的主题动画,在开发Windows应用商店应用时,使用主题动画编写较少的代码即可实现所期望的动画效果.下面介绍一些常用的主题动画,读者可以根据每种主题动画提供的 ...
- 如何使用 Quagga BGP(边界网关协议)路由器来过滤 BGP 路由
在之前的文章中,我们介绍了如何使用 Quagga 将 CentOS 服务器变成一个 BGP 路由器,也介绍了 BGP 对等体和前缀交换设置.在本教程中,我们将重点放在如何使用前缀列表prefix-li ...
- 设计模式六大原则(5)—迪米特法则
定义: 一个对象应该对其它的对象保持最少的了解.迪米特法则又称为最少知识法则,英文全称为Least Knowledge Principle ,简称为LKP. 个人理解: 迪米特法则主要目的是类间解耦, ...
- MATLAB 物体识别算法说明:vision.ForegroundDetector, vision.BlobAnalysis
在官方示例中,Motion-Based Multiple Object Tracking和Using Kalman Filter for Object Tracking都使用了下面两个算法进行物体的识 ...
- (转)iOS图片拉伸技巧
( 原文博客地址: http://blog.csdn.net/q199109106q/article/details/8615661) 纵观移动市场,一款移动app,要想长期在移动市场立足,最起码要 ...
- hive的Query和Insert,Group by,Aggregations(聚合)操作
1.Query (1)分区查询 在查询的过程中,采用那个分区来查询是通过系统自动的决定,但是必须是在分区列上基于where子查询. SELECT page_views.* FROM page_view ...
- Objective-C学习笔记-第二天(1)
Objective-C中,调用方法采用的是一种消息传递机制. 参考文章:http://blog.csdn.net/xingyevc/article/details/39397873 如果向某个对象传递 ...