SAPUI5 初学者教程
杰西卡布莱克
⚡ 智能摘要
SAPUI5 是 SAP这是一个响应式 HTML5 框架，为跨桌面、移动设备和平板电脑的企业级 Web 应用程序提供支持。本教程将解释 MVC 架构、组件模型、库，以及如何在框架内构建父组件和子组件。 Eclipse.
什么是 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 组件
组件是一段可重用的代码。系统提供了两种类型的组件。 SAP用户界面5：
- UI组件——这些组件代表包含UI元素的用户界面。它们基于…… SAPUI5 类名为 sap.ui.core.UIComponent
- 无界面组件——这些组件没有用户界面。它们基于…… SAPUI5 类名为 sap.ui.core.Component
本质上，组件是一个文件夹。当您创建新的 SAPUI5 应用程序，您将能够看到在项目资源管理器中创建的文件夹结构，如下所示。
在这个 UI5 应用中，PassNum 是一个组件。要使 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 系统来部署和测试我们将在本博客中构建的应用程序。
应用程序完全构建后，它应该如下所示：
在本 SAP在本 UI5 教程指南中，我们将创建两个组件，分别名为父组件和子组件。首先，我们将创建子组件，然后在父组件中使用它。
让我们开始行动起来吧。
第 1 部分）创建子应用程序
我们的目标是创建一个子组件，该组件接受 1 到 12 之间的数字，并显示月份名称。例如，当接收到 3 时，应显示“三月”。
步骤 1）创建 UI 项目
转到文件->新建->其他->SAPUI5 应用开发->应用项目。
创建一个应用程序项目 SAP按照向导步骤操作，即可在 UI5 中完成安装。请参见下方屏幕截图。
输入项目名称，其他选项保持向导建议的设置不变。
在上面的截图中，显示了两种类型的库，它们以单选按钮的形式呈现：
- sap.m
- sap.ui.commons
选择 sap.m 时，您是在告诉向导创建一个 UI5 应用程序项目，该项目的引导部分将自动包含 sap.m 库，该库用于创建响应式 Web 应用程序。
接下来在这个 SAP 在 FIORI 教程中，您将看到向导的以下部分，其中需要创建初始视图。初始视图是指在访问应用程序时首先呈现的视图。
在这里，您需要输入视图名称并选择视图类型。 SAPUI5 支持 4 种视图类型，如上图所示。因此 SAPUI5 应用程序可以使用 Java脚本或 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代码
接下来，我们需要让 index.html 文件在应用程序被访问时加载 Component.js。请在 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 的 Controller 文件的代码。
代码仅编写在 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 Gateway 服务器
部署项目，并为在 ABAP 前端服务器上生成的 BSP 应用程序指定一个技术名称。名称设为 zdisplaymonth您的项目应该如下所示。
第 2 部分：创建父组件
现在是时候创建一个新组件（父组件）了，它将使用我们在本教程中到目前为止创建的组件。
步骤 1）创建一个新的 SAPUI5应用程序
转到文件->新建->其他->SAPUI5 应用程序开发->应用程序项目。然后按照向导说明创建一个新的应用程序项目。 SAPUI5应用程序项目。这在上面本教程第1部分第1步中已经详细描述过了。
父组件项目的名称是 密码部署后生成的 BSP 应用程序的技术名称是 zpassnum项目结构如下所示。
现在让我们在 index.html、Component.js、PassNum.view.xml 和 PassNum.controller.js 文件中编写代码。
步骤 2）来源 Code 父组件的 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 Gateway 服务器
将应用程序部署到 ABAP 前端服务器并运行。您应该可以通过右键单击项目并选择“在 ABAP 服务器上运行”选项来运行它。
下面 URL 将在…… Eclipse 浏览器。
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html
复制 URL 并在实际浏览器中运行它。上面的主机名（黄色标记部分）是您的 ABAP 前端服务器的主机名。
输出
点击“第一”按钮，一月份应该会显示在子组件中。
享受使用以下方式创建美观、响应迅速的 Web 应用程序 SAP用户界面5。
