SAPUI5 初学者教程：Fiori 是什么（附示例）
杰西卡布莱克
什么是 SAPUI5？
SAPUI5 是一组用于构建在桌面、移动设备和平板电脑等多种设备上运行的响应式 Web 应用程序的库。 SAPUI5适用于 MVC 概念 通过在视图上分别创建数据、业务逻辑和数据表示来加速开发周期。因此，视图和控制器的开发可以独立进行，以创建模型（数据容器）。
SAPUI5 是 SAP UI 开发技术。为了提供底层的 Web 集成 SAP ERP 系统， SAP 提出了多种UI开发技术，如BSP（业务服务器页面）、PDK（门户开发工具包）、Web Dynpro Java，Web Dynpro ABAP。Web Dynpro ABAP 的后继者是 SAP用户界面5。
SAPUI5 Archi质地
SAPUI Archi结构图
在上面 Archi结构中，第一个框，即“设备”表示运行 UI5 应用程序的设备。可以通过这些设备上的移动应用程序或任何浏览器访问 UI5 应用程序。架构的这一层称为“表示层”。
SAPUI5 应用程序和 oData 服务驻留在 SAP NetWeaver 网关服务器。该架构的这一层称为“应用层”。
实际业务逻辑实现于 SAP 核心系统，如ECC、CRM和BW等。业务逻辑可以使用 SAP 程序和功能模块。 SAP 交易数据和主数据驻留在 SAP 系统。该架构的这一层称为“数据库层”或“持久层”。
SAPUI5 组件
组件是一段可以在需要时重复使用的工作代码。 SAPUI5
- UI 组件 – 这些组件表示包含 UI 元素的用户界面。它们基于名为 sap.ui.core.UIComponent 的 SPAUI5 类
- 无界面组件 – 这些组件没有用户界面。这些组件基于 SAPUI5 类名为 sap.ui.core.Component
本质上，组件是一个文件夹。当您创建新的 SAPUI5 应用程序，您将能够看到在项目资源管理器中创建的文件夹结构，如下所示。
在这个 UI5 应用程序中，PassNum 是一个组件。Component.js 文件是 UI5 应用程序像组件一样运行所必需的。Component.js 文件是组件控制器。
接下来在这个 SAPUI5 Eclipse 教程中，我们将学习如何设置 SAP用户界面5。
SAPUI5 设置
在开始之前，你需要确保 –
- Eclipse （Luna 版本）已安装在您的笔记本电脑上
- SAP 开发工具 Eclipse Luna 并安装在你的 eclipse 上（SAP 开发工具 Eclipse 露娜—— https://tools.hana.ondemand.com/luna/)
- SAP 登录板已安装，并且您可以访问 SAP NetWeaver Gateway 系统用于部署和测试我们将在此博客中构建的应用程序。
应用程序完全构建后，它应该如下所示：
该 SAPUI5 教程指南，我们将创建 2 个组件，即父组件和子组件。首先，我们将创建子组件，然后在父组件中使用它。
让我们开始行动起来吧。
第 1 部分）创建子应用程序
我们的目标是创建一个子组件，它将接受 1 到 12 之间的数字并显示月份名称。例如，它接收 3；它应该显示“三月”。
步骤 1）创建 UI 项目
转到文件->新建->其他->SAPUI5应用程序开发->应用程序项目。
创建一个应用程序项目 SAP按照打开的向导操作 UI5。见下面的屏幕截图。
输入项目名称，其他选择与向导建议的保持相同。
在上面的截图中，有两种类型的库显示为单选按钮
- sap.m
- sap.ui.commons
当您选择 sap.m 时，您是在告诉向导创建一个 UI5 应用程序项目，其引导部分将自动包含用于创建响应式 Web 应用程序的 sap.m 库。
接下来在这个 SAP FIORI 教程，您将看到向导的以下部分，您需要在其中创建初始视图。初始视图是访问应用程序时将首先呈现的视图。
这里您需要给出视图的名称并选择视图的类型。 SAPUI5 支持 4 种视图类型，如上图所示。因此 SAPUI5 应用程序可以使用 Javascript 或 XML 或 JSON 或 HTML 任何您熟悉的语言。
在向导结束时，将创建一个新项目，并显示在“项目资源管理器”窗口中 Eclipse 像下面
步骤2）Component.js代码
接下来，让我们创建一个 Component.js 文件并在其中写入下面的代码。
sap.ui.core.UIComponent.extend("DisplayMonth.Component", {
metadata: {
"name": "DisplayMonth",
"dependencies": {
"components": []}
},
createContent: function() {
var oViewData = {
component: this
};
var oView = sap.ui.view({
viewName: "DisplayMonth.displaymonth.DisplayMonthView",
type: sap.ui.core.mvc.ViewType.XML,
viewData: oViewData
});
return(oView);
},
init: function() {
// call super init (will call function "create content")
sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
// always use absolute paths relative to our own component
// (relative paths will fail if running in the Fiori Launchpad)
var sRootPath = jQuery.sap.getModulePath("DisplayMonth");
},
});
步骤3）Index.html代码
接下来，让我们找出要加载 Component.js 的 index.html 文件 SAP当从浏览器访问应用程序时，UI5。因此，在 index.html 文件中写入以下代码。
<!DOCTYPE HTML>
<html>
<head>
// adding meta tags to tell IE browser to render the page in IE-edge mode.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
// adding meta tag to tell eclipse to use UTF 8 as character encoding
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
// Bootstrap script to tell ui5 designtime and runtime to use sap.m library, use //blue-crystal these and use complex binding syntax
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{"DisplayMonth": "./"}'>
</script>
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "DisplayMonth"
})
}).placeAt("content");
});
</script>
</head>
// start of body of SAPUI5 application. It contains a div element.
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
步骤4）DisplayMonthView.view.xml代码
接下来，让我们在 displaymonth 视图中编写代码，该代码将显示从父组件接收的月份编号的月份。
<html:style>
#__xmlview1--id{
margin-left: 30rem;
margin-top: 9rem;
font-size: 6rem;
font-style: italic;
background-color: burlywood;
}
</html:style>
<App id="fioricontent">
<Page title="Child Component">
<content>
<Text id="id" xmlns="sap.m" text="{myModel>/monthname}"></Text>
</content>
</Page>
</App>
粘贴上述代码后，您的视图应如下所示-
步骤5）DisplayMonthView.controller.js代码
最后，让我们编写DisplayMonthView的控制器文件的代码。
代码只写在这个控制器的 onInit() 钩子方法中，因此这里只粘贴 onInit() 代码。文件的其余部分由框架生成。
onInit : function() {
sap.ui.getCore().getEventBus().subscribe("exchange", "data",
function(channel, event, oEventData) {
jsonModel = new sap.ui.model.json.JSONModel({
monthumber : oEventData,
monthname : ''
});
// derive month name from month number
switch (jsonModel.oData.monthumber) {
case "1":
jsonModel.oData.monthname = 'January';
break;
case "2":
jsonModel.oData.monthname = 'February';
break;
case "3":
jsonModel.oData.monthname = 'March';
break;
case "4":
jsonModel.oData.monthname = 'April';
break;
case "5":
jsonModel.oData.monthname = 'May';
break;
case "6":
jsonModel.oData.monthname = 'June';
break;
case "7":
jsonModel.oData.monthname = 'July';
break;
case "8":
jsonModel.oData.monthname = 'August';
break;
case "9":
jsonModel.oData.monthname = 'September';
break;
case "10":
jsonModel.oData.monthname = 'October';
break;
case "11":
jsonModel.oData.monthname = 'November';
break;
case "12":
jsonModel.oData.monthname = 'December';
break;
}
this.getView().setModel(jsonModel, "myModel");
}, this);
},
步骤 6）部署应用程序 SAP Netweaver 网关服务器
部署项目并给出将在 ABAP 前端服务器上生成的 BSP 应用程序的技术名称。名称为 zdisplaymonth。此时，你的应用程序项目应该如下所示。
第 2 部分：创建父组件
现在是时候创建一个新的组件（父组件）了，它将使用我们在本教程中迄今为止创建的组件。
步骤 1）创建一个新的 SAPUI5应用程序
转到文件->新建->其他->SAPUI5 应用程序开发->应用程序项目。然后按照向导说明创建新的 SAPUI5应用程序项目。这在上面本教程第1部分第1步中已经详细描述过了。
父组件项目的名称是 通行证号码。 以及部署后生成的BSP应用程序的技术名称 SAPUI5 组件到 ABAP 前端服务器是 zpassnum。 项目结构如下所示
现在让我们在 index.html、Component.js 和 PassNum.view.xml 和 PassNum.controller.js 文件中编写代码
步骤2）父组件Index.html源代码
<!DOCTYPE HTML>
<html>
<head>
// adding meta tags to tell IE browser to render the page in IE-edge mode.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
// adding meta tag to tell eclipse to use UTF 8 as character encoding
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
// Bootstrap script to tell ui5 designtime and runtime to use sap.m library, use //blue-crystal these and use complex binding syntax
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-resourceroots='{"PassNum": "./"}'>
</script>
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "PassNum"
})
}).placeAt("content");
});
</script>
</head>
// start of Body of SAPUI5 application, Contains a div tag,
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
步骤3）父组件的Component.js文件源代码
sap.ui.core.UIComponent.extend("PassNum.Component", {
metadata: {
"name": "PassNum",
"dependencies": {
"components": []}
},
createContent: function() {
var oViewData = {
component: this
};
// Creating Reference of a PassNum XML view
var myView = sap.ui.view({
viewName: "PassNum.passnum.PassNum",
type: sap.ui.core.mvc.ViewType.XML,
viewData: oViewData
});
return(myView);
},
init: function() {
// call super init (this will call function "create content")
sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
// ensure to use absolute paths relative to own component
// (running in the Fiori Launchpad, relative paths will fail)
var sRootPath = jQuery.sap.getModulePath("PassNum");
},
});
步骤4）PassNum.view.xml文件源代码
<Page title="Parent Component"> <content> <VBox xmlns="sap.m" id="vboxid"> <items> <Button xmlns="sap.m" id="1" text="First" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <Button xmlns="sap.m" id="2" text="Second" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <Button xmlns="sap.m" id="3" text="Third" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <Button xmlns="sap.m" id="4" text="Fourth" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <Button xmlns="sap.m" id="5" text="Fifth" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <core:ComponentContainer id="conpcontid" name="DisplayMonth" manifestFirst="true" component="zdisplaymonth"></core:ComponentContainer> </items> </VBox> </content> </Page>
在视图中使用上述代码后，您的视图应如下所示
步骤5）PassNum.controller.js源代码
仅 onInit() 方法已更改。此文件中的其余内容保持不变
onInit: function() {
jQuery.sap.registerModulePath("DisplayMonth", "../zdisplaymonth");
},
clickbutton:function(oEvent)
{
sap.ui.getCore().getEventBus().publish("exchange",
"data", oEvent.oSource.sId.split("--")[1]);
}
步骤 6）将父组件部署到 SAP Netweaver 网关服务器
在 ABAP 前端服务器上部署应用程序并运行它。您应该能够通过右键单击项目并单击“在 ABAP 服务器上运行”选项来运行它。
以下 URL 将在 eclipse 浏览器中打开。
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html
复制 URL 并在实际浏览器中运行它。上面黄色标记的主机名是您的 ABAP 前端服务器的主机名。
输出
单击“第一”按钮，一月应显示在子组件中。
享受使用以下方式创建美观、响应迅速的 Web 应用程序 SAP用户界面5。
总结
该 SAPUI5教程中我们学习了：
- SAPUI5探索： SAPUI5 是 SAP UI 开发技术。
- 什么是 SAP 用户界面5： SAPUI5 是一组用于构建响应式 Web 应用程序的库
- 组件 SAPUI5 架构包括设备、客户端、NetWeaver 网关、持久层
- A SAPUI5 组件是一段可以在需要时重复使用的工作代码
- 有哪些 SAPUI5 组件包括 1）UI 组件，2）无界面组件
- 我们学习了如何将一个 sapui5 组件用于另一个 sapui5 组件，以及如何在两个组件之间传递数据