SAPUI5 初学者教程 - 权威教程

什么是 SAPUI5？

SAPUI5 是一套用于构建响应式 Web 应用程序的库，这些应用程序可以在桌面、手机和平板电脑等多种设备上运行。SAPUI5 基于 MVC 概念工作，通过将数据、业务逻辑和数据表示分别在视图中创建，从而加速开发周期。因此，视图和控制器的开发可以独立进行，以创建模型（数据容器）。

SAPUI5 是 SAP UI 开发技术系列中的最新成员。为了为底层的 SAP ERP 系统提供 Web 集成，SAP 推出了多种 UI 开发技术，如 BSP（业务服务器页面）、PDK（门户开发工具包）、Web Dynpro Java、Web Dynpro ABAP。而 SAPUI5 是 Web Dynpro ABAP 的继任者。

SAPUI5 架构

SAPUI 架构图

在上述架构中，第一个框，即“设备”，表示运行 UI5 应用程序的设备。UI5 应用程序可以通过这些设备上的移动应用或任何浏览器访问。架构的这一层称为“表示层”。

SAPUI5 应用程序和 oData 服务位于 SAP NetWeaver Gateway 服务器上。架构的这一层称为“应用层”。

实际的业务逻辑在 SAP 核心系统（如 ECC、CRM 和 BW 等）中实现。业务逻辑可以使用 SAP 程序和函数模块来实现。SAP 事务数据和主数据驻留在 SAP 系统中。架构的这一层称为“数据库层”或“持久层”。

SAPUI5 组件

组件是一段可工作的代码，可以在需要时重复使用。SAPUI5 提供了两种类型的组件：

UI 组件 – 这些组件代表一个包含 UI 元素的用户界面。它们基于 SAPUI5 类 sap.ui.core.UIComponent。
无界面组件 – 这些组件没有用户界面。它们基于 SAPUI5 类 sap.ui.core.Component。

本质上，一个组件就是一个文件夹。当您创建一个新的 SAPUI5 应用程序时，您会在项目浏览器中看到如下创建的文件夹结构。

在这个 UI5 应用程序中，PassNum 是一个组件。Component.js 文件对于使 UI5 应用程序像一个组件一样运行是必需的。Component.js 文件是组件控制器。

接下来，在这个 SAPUI5 Eclipse 教程中，我们将学习如何设置 SAPUI5。

SAPUI5 设置

在开始之前，您需要确保：

您的笔记本电脑上已安装 Eclipse（Luna 版本）
您的 Eclipse 上已安装 SAP Development Tools for Eclipse Luna（SAP Development Tools for Eclipse Luna – https://tools.hana.ondemand.com/luna/）
已安装 SAP Logon pad，并且您有权访问 SAP NetWeaver Gateway 系统，以便部署和测试我们将在本博客中构建的应用程序。

应用程序完全构建完成后，它应该看起来像下面这样

在这个 SAPUI5 教程指南中，我们将创建两个组件，即父组件和子组件。首先，我们将创建子组件，然后在父组件中使用它。

让我们开始动手吧。

第 1 部分）创建子应用程序

我们的目标是创建一个子组件，它将接受一个从 1 到 12 的数字并显示月份的名称。例如，如果它收到 3，它应该显示“三月”。

步骤 1）创建 UI 项目

转到文件->新建->其他->SAPUI5 应用程序开发->应用程序项目。

按照打开的向导创建一个 SAPUI5 的应用程序项目。请看下面的截图。

输入项目名称，让其他选项保持向导建议的默认值。

在上面的截图中，有两种类型的库以单选按钮的形式显示

sap.m
sap.ui.commons

当您选择 sap.m 时，您是在告诉向导创建一个 UI5 应用程序项目，其引导部分将自动包含 sap.m 库，该库用于创建响应式 Web 应用程序。

接下来，在这个 SAP FIORI 教程中，您将看到向导的下面部分，您需要在其中创建初始视图。初始视图是在访问应用程序时首先渲染的视图。

在这里，您需要给出视图的名称并选择视图的类型。如上图所示，SAPUI5 支持 4 种视图类型。因此，SAPUI5 应用程序的 UI 可以使用 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 代码

接下来，让我们告诉 index.html 文件在从浏览器访问应用程序时加载 SAPUI5 中的 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 控制器文件的代码。

代码仅写在该控制器的 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 Gateway 服务器上部署应用程序

部署项目并给出将在 ABAP 前端服务器上生成的 BSP 应用程序的技术名称。假设名称为 zdisplaymonth。此时，您的应用程序项目应如下所示。

第 2 部分）创建父组件

现在是时候创建一个新的组件（父组件），它将使用我们到目前为止在本教程中创建的组件。

步骤 1）创建一个新的 SAPUI5 应用程序

转到文件->新建->其他->SAPUI5 应用程序开发->应用程序项目。然后按照向导说明创建新的 SAPUI5 应用程序项目。这已在本教程第一部分的步骤 1 中详细描述过。

父组件项目的名称是 PassNum。将 SAPUI5 组件部署到 ABAP 前端服务器后生成的 BSP 应用程序的技术名称是 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 Gateway 服务器

在 ABAP 前端服务器上部署应用程序并运行它。您应该能够通过右键单击项目并单击“在 ABAP 服务器上运行”选项来运行它。

以下 URL 将在 Eclipse 浏览器中打开。
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

复制该 URL 并在实际的浏览器中运行它。在上述 URL 中，黄色标记的主机名是您的 ABAP 前端服务器的主机名。

输出

点击“第一个”按钮，子组件中应显示一月。

享受使用 SAPUI5 创建美观、响应迅速的 Web 应用程序吧。

摘要

在这个 SAPUI5 教程中，我们学到了：

SAPUI5 探索：SAPUI5 是 SAP UI 开发技术系列中的最新成员。
什么是 SAP UI5：SAPUI5 是一套用于构建响应式 Web 应用程序的库。
SAPUI5 架构的组成部分是设备、客户端、NetWeaver Gateway、持久层。
SAPUI5 组件是一段可工作的代码，可以在需要时重复使用。
SAPUI5 组件的类型有 1) UI 组件，2) 无界面组件。
我们学习了如何将一个 sapui5 组件消费到另一个 sapui5 组件中，以及如何在这两个组件之间传递数据。