sapui5 walkthrough 1-5

学习SAPUI5的话,walkthrough是一个绕不开的例子，这个例子从零开始，一步一步讲解了sapui5使用的功能，这里做一个整理以及回顾。

官网：https://sapui5.hana.ondemand.com/#/topic/3da5f4be63264db99f2e5b04c5e853db

0. Step0 Preparation

下载Eclipse，导入SAPUI5插件，建立sapui5工程。

1. Step1 Hello World!

修改index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SAPUI5 Walkthrough</title>
</head>
<body>
    <div>Hello World</div>
</body>
</html>

2. Step 2: Bootstrap

在我们使用sapui5之前，需要载入以及初始化的操作，这个操作的过程就叫做bootstrapping。与通常所说的Bootstrap并不一样。

修改index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SAPUI5 Walkthrough</title>
    <script
        id="sap-ui-bootstrap"
        src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-theme="sap_belize"
        data-sap-ui-libs="sap.m"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-async="true"
        data-sap-ui-onInit="module:sap/ui/demo/walkthrough/index"
        data-sap-ui-resourceroots='{
            "sap.ui.demo.walkthrough": "./"
        }'>

    </script>
</head>
<body>
<div>Hello World</div>

</body>
</html>

項目	指定するもの
id	固定値 "sap-ui-bootstrap"
src	SAPUI5 coreライブラリが格納されている場所，在生产环境中，要正确指定sapui5的版本，否则会出现不兼容的情况。
data-sap-ui-theme	UIのテーマ
data-sap-ui-libs	ページで使用するUIのライブラリ
data-sap-ui-compatVersion	"edge"を指定すると、SAPUI5の最新機能が使える（任意指定）
data-sap-ui-preload	ライブラリを同期で読み込むか(sync)、非同期で読み込むか(async)を指定する。パフォーマンス向上のためasyncを指定することが推奨されている
data-sap-ui-onInit	定义一个"model"避免在html中直接执行js代码，sap/ui/demo/walkthrough/是在data-sap-ui-resourceroots中定义的资源路径
data-sap-ui-resourceroots	通知SAPUI5, sap.ui.demo.walkthrough命名空间中的资源与index.html位于同一个文件夹。对于在FLD(Fiori launchpad)中运行的程序是必须的。

创建index.js

sap.ui.define([

], function () {
    "use strict";


    alert("UI5 is ready");
});

3. Step 3: Controls

修改index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SAPUI5 Walkthrough</title>
    <script
        id="sap-ui-bootstrap"
        src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-theme="sap_belize"
        data-sap-ui-libs="sap.m"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-async="true"
        data-sap-ui-onInit="module:sap/ui/demo/walkthrough/index"
        data-sap-ui-resourceroots='{
            "sap.ui.demo.walkthrough": "./"
        }'>
    </script>
</head>
<body class="sapUiBody" id="content">
</body>

</html>

修改index.js

sap.ui.define([
    "sap/m/Text"

], function (Text) {
    "use strict";

    new Text({
        text: "Hello World"
    }).placeAt("content");

});

使用控件Text，控件的名称以其控件库的命名空间作为前缀，并将其作为js对象对象传递给构造方法。

使用控件Text的placeAt方法，该方法用于将SAPUI5控件放在文档对象模型(DOM)或任何其他SAPUI5控件的节点中。

4. Step 4: XML Views

SAPUI5支持多种视图类型(XML、HTML、JavaScript)。

新建App.view.xml文件

<mvc:View
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Text text="Hello World"/>
</mvc:View>

引用sap.m，这里包含大部分的UI控件，比如这里使用的Text控件。

引用sap.ui.core.mvc，并起别名mvc，这里包含了Views以及其他的MVC资产。

修改index.js

sap.ui.define([
    "sap/ui/core/mvc/XMLView"
], function (XMLView) {
    "use strict";

    XMLView.create({
        viewName: "sap.ui.demo.walkthrough.view.App"
    }).then(function (oView) {
        oView.placeAt("content");
    });

});

视图是由SAPUI5的工厂函数创建的，该函数确保视图被正确配置，并且可以被客户扩展。视图的名称前加上对应的命名空间以便唯一的标示该资源。

5. Step 5: Controllers

修改App.view.xml

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Button
      text="Say Hello"
      press=".onShowHello"/>
</mvc:View>

cotrollerName属性，可以指定连接到view的controller。如果view只显示信息，那么我们可以不用为它指定controller，如果指定了controller，则在加载view之后实例化controller。

新建App.controller.js

sap.ui.define([
   "sap/ui/core/mvc/Controller"
], function (Controller) {
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
      onShowHello : function () {
         // show a native JavaScript alert
         alert("Hello World");
      }
   });
});

通过扩展Controller，我们定义了一个App.controller，在这里实现了alert方法。

controller与对应的view应该是一个名字，如果存在controller的话，它们应该是1:1的关系。