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應用訪問開發出來的模型資源