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

http://doc.wex5.com/different-with-std-web-ui/#1

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

WeX5是跨端移动开发框架，BeX5是基于WeX5的企业快速开发平台，它们都采用先后端分离的开发模式，和Web传统的前端页面开发（例如extjs）比较相似，和jsp存在差别。WeX五、BeX5和Web传统的前端页面开发最大的差别在于，WeX五、BeX5采用了单页模式，实现资源不重复加载：

• 因为采用单页模式，X5引入了RequireJS，实现资源异步按需加载，且只加载一次
• 做为快速开发工具，X5提供了可视化界面设计器
• 做为快速开发工具，对界面经常使用功能进行封装，实现界面全面组件化

这样的UI开发与传统UI开发有哪些不一样呢？下面就从页面部分、页面中的数据、js部分、发布等几个方面具体说明。

• 一、页面部分
  • 1.一、页面加载事件
  • 1.二、页面关闭事件
  • 1.三、获取url的参数
  • 1.四、引用js
  • 1.五、引用css
  • 1.六、使用xid而非id
  • 1.七、获取到input输入框的输入内容
  • 1.八、页面跳转
  • 1.九、图片路径 <img src=？>
  • 1.十、信息提示
  • 1.十一、上传文件
  • 1.十二、详细页面的制做
  • 1.1三、界面控制
  • 1.1四、路由
  • 1.1五、背景图片
  • 1.1六、事件
  • 1.1七、调用action
  • 1.1八、在前端得到session的值
  • 1.1九、在前端访问全局变量
• 二、页面中的数据
• 三、js部分
  • 3.一、全局变量
  • 3.二、自定义js方法
  • 3.三、自定义公共js文件
  • 3.四、获取element
  • 3.五、获取jQuery对象
  • 3.六、建立节点，删除节点
  • 3.七、增长事件，删除事件
• 四、发布
  • 4.一、设置首页标题
  • 4.二、更换图标
  • 4.三、部署到Web应用服务器

一、页面部分

1.一、页面加载事件

• 传统——window.onload事件
• X5——model组件的onload事件

1.二、页面关闭事件

• 传统——window.onunload事件
• X5——model组件的onunload事件

1.三、获取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.四、引用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.五、引用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.六、使用xid而非id

• 传统——使用id属性

• X5——采用单页模式，须要进行页面隔离，即为了使得在打开多个页面时，元素的id不重复，X5增长了xid属性，替代id属性，所以要将id属性改为xid属性，经过id属性得到element的方法，改成经过xid属性得到element的方法

例如：

一、在w文件中，元素不定义id属性，而定义xid属性

<div id=”div1″ width=”300″ height=”200″//>

<div xid=”div2″ width=”300″ height=”200″//>

二、在js文件中获取div时，不使用id获取元素，而是使用xid获取元素

var div= document.getElementById(‘div1’);

var div= this.getElementByXid(‘div2’);

1.七、获取到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.八、页面跳转

• 传统——服务端重定向、重设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.九、图片路径 <img src=？> 

• 传统——直接写绝对路径或相对路径
• X5——在w文件中设置img的src属性时写绝对路径或相对路径，在css文件中写相对路径，在js文件中能够写绝对路径或相对路径，写相对路径必定要使用require.toUrl方法，以得到正确的路径

$UI/takeout/img/1.jpg

./img/1.jpg，相对路径是相对w文件而言

1.十、信息提示 

• 传统——提供了alert方法和confirm方法
• X5——不只可使用alert方法和confirm方法，还提供了justep.Util.hint方法和justep.Util.confirm方法，好用又美观。更提供了MessageDialog组件，自定义信息提示框

1.十一、上传文件

• 传统——<input type=”file”>
• X5——提供了附件组件，实现上传、下载、查看文件。在手机上还能够实现拍照上传。

1.十二、详细页面的制做

• 传统——table div
• X5——传统的写法都支持，还提供了响应式布局（row组件），表格布局（excellayout、celllayout组件）、绝对布局（absoluteLayout组件）

1.1三、界面控制

• 传统——设置html标签disabled属性
• X5——支持传统的方式，还支持使用表达式控制

例如：

WeX5数据绑定02：visible绑定

WeX5数据绑定05：css绑定

1.1四、路由

• 传统——多页应用，每页能够单独访问
• 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.1五、背景图片

• 传统——写在body上
• X5——写在window组件上，切换到源码页，给window组件增长style属性

1 2 3

< 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.1六、事件

• 传统——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.1七、调用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.1八、在前端得到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.1九、在前端访问全局变量

• 传统JS——发送请求获取
• JSP—— <%Integer count=(Integer)application.getAttribute(“count”);%>
• WeX5——发送ajax请求获取
• BeX5——有两种方法

一、在BIZ定义全局静态变量，定义action访问该变量，在js中调用action，得到action返回值

二、在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' );

 

二、页面中的数据

 

• 传统——开发中本身设计
• X5——W文件提供数据组件，存储客户端数据，数据感知组件（展示组件）感知这些数据，造成数据感知体系，使得页面更加智能。

数据组件提供的相关能力

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

三、js部分

X5使用了RequireJS，用于客户端的模块管理。它可让客户端的代码分红一个个模块，实现异步或动态加载，从而提升代码的性能和可维护性。它的模块管理遵照AMD规范（Asynchronous Module Definition）。RequireJS的基本思想是，经过define方法，将代码定义为模块；经过require方法，实现代码的模块加载。

3.一、全局变量

• 传统——定义在全部方法外面
• 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.二、自定义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.三、自定义公共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.四、获取element

• 传统——使用id属性：document.getElementById
• X5——使用xid属性：this.getElementByXid

var div= document.getElementById(‘div1’);

var div= this.getElementByXid(‘div2’);

3.五、获取jQuery对象

• 传统——使用id属性：$(‘#id’)
• X5——使用xid属性：$(this.getElementByXid(‘组件的xid’))；

还提供了获取X5组件对象的方法——this.comp(‘组件的xid’);

经过X5组件对象得到jQuery对象——this.comp(‘组件的xid’).$domNode;

3.六、建立节点，删除节点

• 传统——使用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.七、增长事件，删除事件

• 传统——使用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.一、设置首页标题

• 传统——在首页的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.二、更换图标

• 传统——在网站根目录下放favicon.ico文件
• X5——和传统作法同样，X5已经在版本的apache-tomcat\webapps\ROOT目录下放了一个图标，替换这个文件便可

4.三、部署到Web应用服务器

• 传统——开发出来的就是Web应用，能够直接部署到Web应用服务器上
• WeX5——开发出来的是模型资源，经过编译生成Web应用，将Web应用部署到Web应用服务器上
• BeX5——开发出来的是模型资源，不是Web应用。在Web应用服务器上须要部署版本中runtime目录下的几个Web应用，经过这几个Web应用访问开发出来的模型资源