sap UI5开始教程——环境配置和helloworld

沁熙儿

已于 2023-10-19 09:55:12 修改

阅读量391

点赞数

分类专栏： sap fiori 文章标签： visual studio code css3

于 2023-10-19 09:51:29 首次发布

本文链接：https://blog.csdn.net/qq_54432686/article/details/133918702

版权

sap fiori 专栏收录该内容

26 篇文章 10 订阅

订阅专栏

先要安装nodejs，然后我使用的是vscode。具体可以参照这位博主的文章：
https://www.cnblogs.com/xiaoshiwang/p/14909074.html。
首先创建一个app空文件夹，用编译器打开，我们从一个简单的“Hello World”示例开始，以下是三个步骤：
Step1：
创建webapp/manifest.json文件，粘贴以下代码

{
    "sap.app": {
        "id": "sap.ui.demo.walkthrough"
    }
}

在开发环境中，创建文件夹 webapp。在此文件夹中，创建一个 index.html 文件，并将下面代码粘贴到此文件中。**

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

使用script标签，我们使用典型的引导参数加载和初始化 SAPUI5。例如，我们定义主题、控件库以及性能和兼容性标志。
首先，我们需要一个源来加载 SAPUI5。为了方便起见，我们使用 OpenUI5 的内容交付网络(CND)路径。
引导属性 resourceroots：定义应用的所有资源的命名空间。这样，我们可以轻松地引用将在此步骤中创建的其他文件。
onInit 参数：加载的索引模块将保存应用程序逻辑。
body 标记：是使用 sapUiBody 类和内容 ID 定义的。我们将在此处添加后续步骤中的应用程序内容。

创建webapp/index.js，加载并初始化 SAPUI5 后将立即调用该索引。

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

	new Button({
		text: "Ready...",
		press: function () {
			MessageToast.show("Hello World!");
		}
	}).placeAt("content");

});

我们加载来两个 UI 控件 —— 一个按钮和一个消息 toast ——并将按钮放在具有内容 ID 的元素中。该按钮使用附加到其 press 事件的文本属性和回调进行定义。
现在，启动网络服务器，提供“webapp”文件夹的源代码，然后在浏览器中打开 index.html 文件，或者直接进入网址：http://localhost:8080/index.html。按下按钮时，屏幕底部将显示一条带有“Hello World”的消息弹框（toast)。
服务器已启动
【我主要看官网和小石王博主文章学习，如有侵权请联系我删除】

沁熙儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
sap UI5开始教程——环境配置和helloworld

现在，启动网络服务器，提供“webapp”文件夹的源代码，然后在浏览器中打开 index.html 文件，或者直接进入网址：http://localhost:8080/index.html。我们加载来两个 UI 控件 —— 一个按钮和一个消息 toast ——并将按钮放在具有内容 ID 的元素中。这样，我们可以轻松地引用将在此步骤中创建的其他文件。为了方便起见，我们使用 OpenUI5 的内容交付网络(CND)路径。标签，我们使用典型的引导参数加载和初始化 SAPUI5。
复制链接

扫一扫