参考SAP 官网链接Quick Start
-
我的环境:
os:win7 sp1旗舰版 ,Tomcat,open ui5 -
文件结构
-
index.html 文件代码,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> //
<title>Quickstart Tutorial</title>
<script id="sap-ui-bootstrap"
src="./resources/sap-ui-core.js" // 定义open ui5的资源文件夹位置
data-sap-ui-theme="sap_belize" // 定义主题
data-sap-ui-libs="sap.m" // 定义使用的控件库,可以参考api说明
data-sap-ui-resourceroots='{"Quickstart": "./"}' // 为APP定义路径及命名
data-sap-ui-onInit="module:Quickstart/index1" // 定义app初始化时载入的模块文件名,
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true">
</script>
</head>
<body class="sapUiBody" id="content"></body>
</html>
- index1.js 文件代码
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");
});
这段代码的作用是定义一个按钮控件,并在点击时显示一个MessageToast控件,控件文本是"hello world".
MessageToast是一种消息控件,会在显示一段时间后自动消失.
其中sap.ui.define()的作用是定义JavaScript模块，异步加载依赖(dependancies)模块(该解释来源于百度).
官网的说明如下:
- Defines a controller class or creates an instance of an already defined controller class.(
- When a name and a controller implementation object is given, a new controller class of the given name is created. The members of the implementation object will be copied into each new instance of that controller class (shallow copy). Note: as the members are shallow copied, controller instances will share all object values. This might or might not be what applications expect.
`
网友评论