SAPUI5应用之组件复用

1. 前提

1.1 需要具备在SAP Web IDE中开发SAPUI5应用的基本知识；

1.2 需要知道如何通过SAP Web IDE部署SAPUI5应用到前端ABAP服务器；

2. 步骤

2.1 创建被调用(Z_CALLED)项目,不选择任何UI5模板.

displayBlock="true" xmlns="sap.m">

2.3 将Z_CALLED项目部署到ABAP服务器端.

2.4 与Z_CALLED类似，创建调用应用(Z_CALLER)

2.5 在Z_CALLER的Component.js文件中，编写加载Z_CALLED 组件的代码

init: function() {

var sUrl = "http://:

/sap/bc/ui5_ui5/sap/z_called";

name: "called.viewZ_CALLED",

id: "myCalledComponent",

url: sUrl

});

// call the base component's init function

UIComponent.prototype.init.apply(this, arguments);

// set the device model

this.setModel(models.createDeviceModel(), "device");

}

displayBlock="true" xmlns="sap.m">

2.7 部署Z_CALLER项目到ABAP服务器

2.8 如果在服务器端单独运行Z_CALLED和Z_CALLED，修改对Z_CALLED和Z_CALLER下index.html做一下小更改，如下修改src的值，即去掉"/../..",只保留"resources/sap-ui-core.js";如果将应用部署到Fiori Launchpad下，则不许修改src的值。

3.结果【ABAP服务器端执行】

3.1 运行Z_CALLED

3.2 运行Z_CALLER

由上图可见，Z_CALLED下的CalledView已经成功的被复用在Z_CALLER应用下；实现SAPUI5组件或视图复用的方法可能不止这一种，我也会继续更新相关技术。备注：视图文件在其他SAPUI5应用的复用，不会影响其对应controller的功能。

从代码中可以看到，其实我们是复用的整个Z_CALLED组件(Component)。 如果有ABAP Web Dynpro的开发经验，会对组件复用理解的更深入。例如ABAP FPM技术其实就是基于ABAP Web Dynpro组件复用和ABAP动态编程而封装出的一种达到框架高度的UI语言。