OPEN(SAP) UI5 學習入門系列之二：最佳實踐練習（上）

這篇博文難產了好久，原來是打算一週更新一篇的，上週原計劃寫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頁面之間的導航功能

OPEN(SAP) UI5 學習入門系列之二： 最佳實踐練習（上）

1 首頁

2 MVC框架

3 總結

OPEN(SAP) UI5 學習入門系列之二：最佳實踐練習（上）