X5的UI部分和传统Web页面开发的差异

优质
小牛编辑
130浏览
2023-12-01

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,实现异步按需加载
//按需加载,没有加载过,则加载,否则不加载
	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方法
//使用shell提供的showPage方法
//使用绝对路径
justep.Shell.showPage("$UI/acc/list.w");
//使用相对路径——推荐
justep.Shell.showPage(require.toUrl("./list.w"));

//使用弹出窗口组件提供的open方法
this.comp(“windowDialog1”).open();
<!--使用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——支持传统的方式,还支持使用表达式控制

例如:

WeX5数据绑定02:visible绑定

WeX5数据绑定05:css绑定

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属性
<div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window"
  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文件中定义这个方法

	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动作
	justep.Baas.sendRequest({
		"url" : "/justep/takeout",
		"action" : "actionName",
		"async" : false,
		"params" : {},
		"success" : function(data) {
	}
});
  •  BeX5——在js中发送ajax请求和在js中调用业务动作
	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的代码如下

HttpServletRequest request = (HttpServletRequest)context.get(ActionContext.REQUEST);
HttpSession session = request.getSession();
  • BeX5——在Biz中定义action,获取session信息,在js中调用action,获得action返回值

在action中获取session的代码如下

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代码如下

	public static Object getSysParams() {
		Map<String, String> sr = (Map<String, String>)ContextHelper.getSysParams();
		sr.put("aaa", "bbb");
		return sr;
	}

在js中获取系统参数的代码如下

this.getContext().getSystemParameter('aaa');

 


2、页面中的数据

  • 传统——开发中自己设计
  • X5——W文件提供数据组件,存储客户端数据,数据感知组件(展现组件)感知这些数据,形成数据感知体系,使得页面更加智能。

数据组件提供的相关能力

  • 数据结构——编辑列,设置列名及类型
  • 操作数据——查询、新增、修改、删除、保存、分页加载、遍历、设置静态数据
  • 数据规则——只读、计算公式、必填、约束
  • 数据类型——行列数据、树形数据
  • 数据绑定——设置是否显示、是否可用、应用样式等


3、js部分

X5使用了RequireJS,用于客户端的模块管理。它可以让客户端的代码分成一个个模块,实现异步或动态加载,从而提高代码的性能和可维护性。它的模块管理遵守AMD规范(Asynchronous Module Definition)。RequireJS的基本思想是,通过define方法,将代码定义为模块;通过require方法,实现代码的模块加载。

3.1、全局变量

  • 传统——定义在所有方法外面
  • X5——定义在Model的构造方法中
	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的实例方法
	//自定义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文件内容节选

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

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节点

	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节点

	Model.prototype.removeNodeClick = function() {
		var node = this.getElementByXid("divNew");
		justep.Bind.removeNode(node);
	};

创建X5组件

	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组件

	Model.prototype.removeCompClick = function() {
		var node = this.comp("btnNew");
		justep.Component.removeComponent(node);
	};


3.7、增加事件,删除事件

  • 传统——使用jQuery的on方法增加事件,使用off方法删除事件
  • X5——使用on方法增加事件,使用off方法删除事件

例如:在w文件中放input

给html标签增加事件

	Model.prototype.addEventClick = function() {
		//on方法的第一个参数事件名不用写on
		$(this.getElementByXid("input2")).on("click", function(){alert("单击事件");});
	};

删除html标签的事件

	Model.prototype.removeEventClick = function() {
		$(this.getElementByXid("input2")).off("click");
	};

例如:在w文件中放X5的input组件
给X5组件增加事件,X5组件的事件包括两种,一种是on开头的事件,一种是bind开头的事件,它们的增加、删除方法不同。其中bind开头的事件是html标签原生事件,只要浏览器支持,即使组件的事件页里面没有列出,也是可以增加的,例如input组件的oninput事件。

	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组件的事件

	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>
   <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应用访问开发出来的模型资源