這篇博文難產了好久,原來是打算一週更新一篇的,上週原計劃寫MVC,可是寫了一半,發現帶入了太多的細節,不太符合這個入門系列的主題。 當咱們學習一個新的技能的時候,若是一開始就面對大量的細節,很容易陷入其中而只見樹木不見森林,因此最後我想咱們仍是先按照開發文檔的節奏,一塊兒來作UI5的最佳實踐練習。在練習中對經常使用的一些控件以及API有一個直觀的感覺,若是須要細節的信息再去查文檔。html
這個最佳實踐練習的子系列又會分爲若干篇,可是不會徹底按照Tutorial裏面的章節來分,由於我但願每一篇都是都是一個完整的練習,都能跑出來,而不單單是一個片斷。
最後作出來的App是這樣的。 前端
Figure 1: SAP UI5最佳實踐練習的最終界面java
開工吧! git
1 首頁
咱們先把首頁作出來,仍是以以前Hello World的代碼框架開始吧。 首先在 <tomcat>/webapps/
下新建一個目錄就叫 ui5bp
吧,建立 index.html
,代碼以下: github
index.html
web
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> --> <meta charset="UTF-8"> <title>SAPUI5 Best Practice</title> <script id="sap-ui-bootstrap" src="http://localhost:8080/openui5/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-xx-bindingSyntax="complex" data-sap-ui-resourceroots='{ "ui5.tutorial.bp": "./" }' > </script> <script> </script> </head> <body class="sapUiBody"> <!-- This is where you place the UI5 button --> <div id="content"></div> </body>
打開瀏覽器,輸入 http://localhost:8080/ui5bp/
你應該能夠看到淡藍色的背景,除此之外,啥都沒有。
這裏要提一下,咱們定義了一個命名空間 ui5.tutorial.bp
把這個命名空間註冊到根目錄。後續咱們定義或者引用資源都須要加上這個命名空間前綴。
打開開發者選項,也沒有任何錯誤,那就成功了,繼續下一步。 sql
2 MVC框架
咱們暫時不用Component來作模塊化,咱們先用最快最簡單的方法讓程序能夠跑出個樣子來,而後再慢慢的添加功能。
因此,咱們先直接加入MVC。
簡單介紹下,MVC就是模型、視圖和控制器的簡稱,通常的Web開發都會用到這種架構用來把前端的UI和業務邏輯分離。具體先很少介紹,直接作吧。 json
咱們先大體規劃一下,咱們的應用是一個主從頁面結構,會有一個Master的頁面和Detail的頁面,咱們今天先建立一個Empty頁面來替代Detail。 咱們會建立以下文件以及對應的目錄: bootstrap
ui5bp/ +-- view/ | | | +-- App.view.js | +-- App.controller.js | +-- Empty.view.xml | +-- Master.controller.js | +-- Master.view.xml | +-- model/ | | | +-- mock.json +-- index.html
咱們最後把App放入到index的content中,把Master和Detail放到App中去,其中包含 .view.
的文件是視圖,用來定義UI,包含 .controller.
的文件是控制器,用來處理邏輯。 爲了簡化應用,咱們暫時不使用在線的數據而是用一個json格式的文件數據做爲咱們的數據模型。這個文件你能夠從這裏下載。
簡單提一下,視圖能夠用html、xml、js、json這四種文件形式來定義,控制器通常則只能用js。 瀏覽器
好了,那咱們來看每個文件的代碼。
view/App.view.js
sap.ui.jsview("ui5.tutorial.bp.view.App", { getControllerName: function () { return "ui5.tutorial.bp.view.App"; }, createContent: function (oController) { // to avoid scroll bars on desktop the root view must be set to block display this.setDisplayBlock(true); // create app this.app = new sap.m.SplitApp(); // load the master page var master = sap.ui.xmlview("Master", "ui5.tutorial.bp.view.Master"); master.getController().nav = this.getController(); this.app.addPage(master, true); // load the empty page var empty = sap.ui.xmlview("Empty", "ui5.tutorial.bp.view.Empty"); this.app.addPage(empty, false); return this.app; } });
view/App.controller.js
sap.ui.controller("ui5.tutorial.bp.view.App", { /** * Navigates to another page * @param {string} pageId The id of the next page * @param {sap.ui.model.Context} context The data context to be applied to the next page (optional) */ });
view/Master.view.xml
<core:View controllerName="ui5.tutorial.bp.view.Master" xmlns="sap.m" xmlns:core="sap.ui.core" > <Page title="Product List" > <subHeader> <Bar> <contentLeft> <SearchField search="handleSearch" width="100%" > </SearchField> </contentLeft> </Bar> </subHeader> <List id="list" items="{/SalesOrderCollection}" > <ObjectListItem type="Active" press="handleListItemPress" title="{SoId}" number="{GrossAmount}" numberUnit="{CurrencyCode}" > <attributes> <ObjectAttribute text="{BuyerName}" /> </attributes> </ObjectListItem> </List> </Page> </core:View>
view/Master.controller.js
sap.ui.controller("ui5.tutorial.bp.view.Master", { handleSearch : function (evt) { // create model filter var filters = []; var query = evt.getParameter("query"); if (query && query.length > 0) { var filter = new sap.ui.model.Filter("SoId", sap.ui.model.FilterOperator.Contains, query); filters.push(filter); } // update list binding var list = this.getView().byId("list"); var binding = list.getBinding("items"); binding.filter(filters); } });
view/Empty.view.xml
<core:View xmlns="sap.m" xmlns:core="sap.ui.core" > <Page> </Page> </core:View>
最後咱們須要把這些文件和首頁關聯起來。 index.html
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> --> <meta charset="UTF-8"> <title>SAPUI5 Best Practice</title> <script id="sap-ui-bootstrap" src="http://localhost:8080/openui5/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-xx-bindingSyntax="complex" data-sap-ui-resourceroots='{ "ui5.tutorial.bp": "./" }' > </script> <script> var oView = sap.ui.view({ id : "app", viewName : "ui5.tutorial.bp.view.App", type : "JS", }); // Using a local model for offline development var oModel = new sap.ui.model.json.JSONModel("model/mock.json"); oView.setModel(oModel); oView.placeAt('content'); </script> </head> <body class="sapUiBody"> <!-- This is where you place the UI5 button --> <div id="content"></div> </body>
完工,打開 http://localhost:8080/ui5bp/
,能夠看到下圖:
Figure 2: UI5最佳實踐(一)
3 總結
- Master.view.xml:
這個頁面大概是咱們此次教程中最複雜的一個了,其中用到了這些控件:- Page
- Bar
- List
- ObjectListItem
- Master.controler.js:
目前咱們只定義了一個方法 - 搜索。 - Empty.view.xml:
只是一個placeholder,由於Detail頁面咱們尚未建立,因此是一個空頁面。 - App.view.js:
容納Master和Detail頁面的容器。 - App.controller.js 以後會在這裏定義Master和Detail頁面之間的導航功能