1、SAP UI5 之 Step1-Step4 JS引入及View层

阅读原文时间：2021年04月20日阅读：2

碎碎念：本来计划这个月把SSM实战做完，但一直在公司实习太忙了没有太多时间练习SSM。现在mentor要求学习SAP UI5,正好自己对前端也不是很熟悉，所以开一个分类专门记录学习历程，有SAP相关学习经历的小伙伴可以一起交流。

1、编写Hello world

<!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"//UI库
        data-sap-ui-compatVersion="edge"//兼容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>

2、引入JS

在index.html的body标签中去掉了hello world语句，添加id="content"

新建index.js， .placeAt("content") 对html中的id进行引用

（1）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"//UI库
        data-sap-ui-compatVersion="edge"//兼容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>

（2）index.js

sap.ui.define([
    "sap/m/Text"
],function(Text){
    "use strict";

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

3、XML Views

使设置模块化

（1）webapp/view/App.view.xml (New)

View层，配置UI，定义sap.ui.core.mvcnamespace

<mvc:View
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
</mvc:View>

（2）webapp/view/App.view.xml

添加hello world的标签

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

（3）webapp/index.js

将原来的 sap.m.Text实例替换掉

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");
    });

});

总结：

View 名字是大写
所有View都存在 view folder
XML views 的名字以 *.view.xml结尾
默认XML namespace 是 sap.m
其他XML namespaces use the last part of the SAP namespace as alias (for example, mvc for sap.ui.core.mvc)

手机扫一扫

移动阅读更方便

你可能感兴趣的文章