sapui5 walkthrough

Posted 2022-10-05 suoluo119

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了sapui5 walkthrough相关的知识，希望对你有一定的参考价值。

学习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控件的节点中。

技术图片

以上是关于sapui5 walkthrough的主要内容，如果未能解决你的问题，请参考以下文章

Sapui5：如果有oData参数，如何将oData服务绑定到SAPUI5表